more new ui

This commit is contained in:
nek0 2016-08-31 16:34:50 +02:00
parent 7ec8c0c855
commit 2c0253b1d0
5 changed files with 64 additions and 31 deletions

View file

@ -73,6 +73,9 @@ a:hover, .item a:hover, .medium a:hover, a:hover figcaption {
position: relative; position: relative;
background: rgba(255,255,255,0.8) url('../img/overlay.png'); background: rgba(255,255,255,0.8) url('../img/overlay.png');
border: 10px solid white; border: 10px solid white;
padding-top: 0;
padding-left: 0;
vertical-align: middle;
} }
.item { .item {
@ -91,6 +94,34 @@ a:hover, .item a:hover, .medium a:hover, a:hover figcaption {
.subheader { .subheader {
background: rgba(214, 71, 96, 0.7) url('../img/overlay.png'); background: rgba(214, 71, 96, 0.7) url('../img/overlay.png');
/*margin-bottom: -19px;*/
display: inline-flex;
flex-direction: column;
}
.subheader > h1 {
flex: 1;
/*position: absolute;*/
top: 50%;
/*transform: translateY(-50%);*/
margin: 0;
display: block;
width: 100%;
}
.subheader a {
flex: 1;
display: inline;
padding: 0;
line-height: 50px;
}
.subheader a:hover {
color: white;
}
.subheader p {
font-size: 14pt;
} }
.column { .column {
@ -117,6 +148,10 @@ a:hover, .item a:hover, .medium a:hover, a:hover figcaption {
transition: color 0.25s ease-in-out; transition: color 0.25s ease-in-out;
} }
.item img {
height: 230px;
}
figure img { figure img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;

View file

@ -1,22 +1,19 @@
$newline always $newline always
<div id="header" class="item" data-width="400"> <div #reel>
<div class="inner"> <div .subheader .item>
<h1>#{albumTitle album} <h1>#{albumTitle album} <small>by <a href=@{UserR ownerName}>#{ownerSlug}</a></small>
<p>by <a href=@{UserR ownerName}>#{ownerSlug}</a>
$if presence == True $if presence == True
<p> <a href=@{DirectUploadR albumId}>Upload image to this album
<a href=@{DirectUploadR albumId}>Upload image to this album <br>
<p> <a href=@{AlbumSettingsR albumId}>Change settings of this album
<a href=@{AlbumSettingsR albumId}>Change settings of this album
$if null media $if null media
<div id="header" class="item" data-width="400"> <div .item>
<div class="inner">
<p class="center">This album is empty <p class="center">This album is empty
$else $else
$forall (Entity mediumId medium) <- media $forall (Entity mediumId medium) <- media
<article class="item" data-width=#{mediumThumbWidth medium}> <div .item>
<a href=@{MediumR mediumId}> <a href=@{MediumR mediumId}>
<figure> <figure>
<img src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ mediumThumb medium) []} title=#{mediumTitle medium}> <img src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ mediumThumb medium) []} title=#{mediumTitle medium}>
<figcaption>#{mediumTitle medium} <figcaption>#{mediumTitle medium}

View file

@ -1,4 +1,5 @@
<div id="header" class="item" data-width="400"> <div #reel .middle>
<form class="inner" method=post enctype=#{enctype}> <div .medium>
Image upload to album #{albumTitle album} <form method=post enctype=#{enctype}>
^{dUploadWidget} Image upload to album #{albumTitle album}
^{dUploadWidget}

View file

@ -10,8 +10,8 @@ $doctype 5
<figure> <figure>
<img src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ mediumThumb medium) []} title=#{mediumTitle medium}> <img src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ mediumThumb medium) []} title=#{mediumTitle medium}>
<figcaption>#{mediumTitle medium} <figcaption>#{mediumTitle medium}
$if nextMedia $if nextMedia
<div class="pagination"> <div .item .pagination>
<p> <p>
<a href=@{PageR 1}> <a href=@{PageR 1}>
older older

View file

@ -10,7 +10,7 @@ $newline always
<p class="center">This user has no albums yet <p class="center">This user has no albums yet
$else $else
<h1>Albums <h1>Albums
<p>Albums of this user: <p>Albums of this user
$if not (null userAlbs) $if not (null userAlbs)
$forall (Entity albumId album) <- userAlbs $forall (Entity albumId album) <- userAlbs
<article class="item"> <article class="item">
@ -25,7 +25,7 @@ $newline always
$if not (null sharedAlbs) $if not (null sharedAlbs)
<article .subheader .item> <article .subheader .item>
<h1>Shared Albums <h1>Shared Albums
<p>Albums shared with this user: <p>Albums others have shared with this user
$forall Just (Entity albumId album) <- sharedAlbs $forall Just (Entity albumId album) <- sharedAlbs
<article .item> <article .item>
<a href=@{AlbumR albumId}> <a href=@{AlbumR albumId}>
@ -39,7 +39,7 @@ $newline always
$if not (null recentMedia) $if not (null recentMedia)
<article .subheader .item> <article .subheader .item>
<h1>Newest images <h1>Newest images
<p>recent uploads of #{ownerSlug} <p>Recent uploads by #{ownerSlug}
$forall (Entity mediumId medium) <- take 10 recentMedia $forall (Entity mediumId medium) <- take 10 recentMedia
<article .item> <article .item>
<a href=@{MediumR mediumId}> <a href=@{MediumR mediumId}>