From 2c0253b1d08b51342c841fe70b21915024d134b3 Mon Sep 17 00:00:00 2001
From: nek0 <nek0@chelnok.de>
Date: Wed, 31 Aug 2016 16:34:50 +0200
Subject: [PATCH] more new ui

---
 static/css/main.css      | 35 +++++++++++++++++++++++++++++++++++
 templates/album.hamlet   | 35 ++++++++++++++++-------------------
 templates/dUpload.hamlet |  9 +++++----
 templates/home.hamlet    | 10 +++++-----
 templates/profile.hamlet |  6 +++---
 5 files changed, 64 insertions(+), 31 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 8b2f8ec..1582679 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -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;
diff --git a/templates/album.hamlet b/templates/album.hamlet
index f884fe4..b841ac8 100755
--- a/templates/album.hamlet
+++ b/templates/album.hamlet
@@ -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}
diff --git a/templates/dUpload.hamlet b/templates/dUpload.hamlet
index 4c9ee94..901b189 100755
--- a/templates/dUpload.hamlet
+++ b/templates/dUpload.hamlet
@@ -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}
diff --git a/templates/home.hamlet b/templates/home.hamlet
index ea965e6..ea4b9c3 100755
--- a/templates/home.hamlet
+++ b/templates/home.hamlet
@@ -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
diff --git a/templates/profile.hamlet b/templates/profile.hamlet
index f02af54..0a14fd7 100755
--- a/templates/profile.hamlet
+++ b/templates/profile.hamlet
@@ -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}>