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;
background: rgba(255,255,255,0.8) url('../img/overlay.png');
border: 10px solid white;
padding-top: 0;
padding-left: 0;
vertical-align: middle;
}
.item {
@ -91,6 +94,34 @@ a:hover, .item a:hover, .medium a:hover, a:hover figcaption {
.subheader {
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 {
@ -117,6 +148,10 @@ a:hover, .item a:hover, .medium a:hover, a:hover figcaption {
transition: color 0.25s ease-in-out;
}
.item img {
height: 230px;
}
figure img {
display: block;
margin: 0 auto;

View file

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

View file

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

View file

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

View file

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