more new ui
This commit is contained in:
parent
7ec8c0c855
commit
2c0253b1d0
5 changed files with 64 additions and 31 deletions
|
@ -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;
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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}>
|
||||||
|
|
Loading…
Reference in a new issue