more tinkering with new uiQ

Handler/Home.hs

@@ -27,7 +27,7 @@ import Yesod.AtomFeed
 getHomeR :: Handler Html
 getHomeR = do
   recentMedia <- runDB $ selectList [] [Desc MediumTime, LimitTo 15]
-  nextMediaQuery <- runDB $ selectList [] [Desc MediumTime, LimitTo 1, OffsetBy 30]
+  nextMediaQuery <- runDB $ selectList [] [Desc MediumTime, LimitTo 1, OffsetBy 15]
   let nextMedia = not $ L.null nextMediaQuery
   defaultLayout $ do
     rssLink RootFeedRssR "Root Feed"

Handler/NewAlbum.hs

@@ -31,7 +31,7 @@ getNewAlbumR = do
       (albumWidget, enctype) <- generateFormPost $
         renderBootstrap3 BootstrapBasicForm $
         albumForm userId
-      formLayout $ do
+      defaultLayout $ do
         setTitle "Eidolon :: Create new Album"
         $(widgetFile "newAlbum")
     Nothing -> do

static/css/main.css

@@ -12,11 +12,6 @@ body {
 	color: rgba(255,255,255,0.7);
 }
 
-#main {
-	margin-top: 80px;
-	width: 100%;
-}
-
 a {
 	color: white;
 	text-decoration: none;
@@ -54,19 +49,14 @@ a:hover, .item a:hover, .medium a:hover, a:hover figcaption {
 	margin: 40px 80px 40px;
 }
 
-#reel {
+.reel {
 	list-style: none;
 	display: block;
-	margin: 0 80px;
+	margin: 80px 80px 0;
 	padding: 0;
 	text-align: center;
 }
 
-.middle {
-	position: relative;
-	top: 50px;
-}
-
 .item, .medium {
 	color: rgba(0,0,0,0.7);
 	display: inline-block;
@@ -109,6 +99,10 @@ a:hover, .item a:hover, .medium a:hover, a:hover figcaption {
 	width: 100%;
 }
 
+.subheader > * {
+	padding: 20px;
+}
+
 .subheader a {
 	flex: 1;
 	display: inline;
@@ -122,6 +116,8 @@ a:hover, .item a:hover, .medium a:hover, a:hover figcaption {
 
 .subheader p {
 	font-size: 14pt;
+	display: block;
+	height: 150px;
 }
 
 .column {
@@ -195,6 +191,10 @@ footer {
 	float: right;
 }
 
+.middle {
+	margin-top: 50px;
+}
+
 @media (max-width: 755px) {
 	#main {
 		margin-top: 120px;

templates/adminBase.hamlet

@@ -1,32 +1,26 @@
 $newline always
-<div id="header" class="item" data-width="400">
-  <div class="inner">
+<div .subheader .item>
   <h1>Admin interface
   <p>
     Be careful with your actions here, every click will perform directly the advertised action.
 
 
-<div id="header" class="item" data-width="400">
-  <div class="inner">
+<div .item>
   <p>
     <a href=@{AdminProfilesR}>User profiles
 
-<div id="header" class="item" data-width="400">
-  <div class="inner">
+<div .item>
   <p>
     <a href=@{AdminAlbumsR}>Albums
 
-<div id="header" class="item" data-width="400">
-  <div class="inner">
+<div .item>
   <p>
     <a href=@{AdminMediaR}>Media
 
-<div id="header" class="item" data-width="400">
-  <div class="inner">
+<div .item>
   <p>
     <a href=@{AdminCommentR}>Comments
 
-<div id="header" class="item" data-width="400">
-  <div class="inner">
+<div .item>
   <p>
     <a href=@{AdminSearchReloadR}>Repopulate search index

templates/album.hamlet

@@ -1,16 +1,15 @@
 $newline always
-<div #reel>
-  <div .subheader .item>
+<div .subheader .item>
   <h1>#{albumTitle album} <small>by <a href=@{UserR ownerName}>#{ownerSlug}</a></small>
   $if presence == True
     <a href=@{DirectUploadR albumId}>Upload image to this album
     <br>
     <a href=@{AlbumSettingsR albumId}>Change settings of this album
 
-  $if null media
+$if null media
   <div .item>
     <p class="center">This album is empty
-  $else
+$else
   $forall (Entity mediumId medium) <- media
     <div .item>
       <a href=@{MediumR mediumId}>

templates/bulkUpload.hamlet

@@ -1,5 +1,4 @@
-<div #reel .middle>
-  <div .medium>
+<div .medium .middle>
   <form class="inner" method=post enctype=#{enctype}>
     Upload multiple images
     ^{uploadWidget}

templates/dUpload.hamlet

@@ -1,5 +1,4 @@
-<div #reel .middle>
-  <div .medium>
+<div .medium .middle>
   <form method=post enctype=#{enctype}>
     Image upload to album #{albumTitle album}
     ^{dUploadWidget}

templates/default-layout-wrapper.hamlet

@@ -9,11 +9,6 @@ $doctype 5
         <meta name="author" content="">
 
         <meta name="viewport" content="width=device-width,initial-scale=1">
-        <noscript>
-          <link rel="stylesheet" href=@{StaticR css_style_css} />
-          <link rel="stylesheet" href=@{StaticR css_style_global_css} />
-          <link rel="stylesheet" href=@{StaticR css_style_desktop_css} />
-          <link rel="stylesheet" href=@{StaticR css_style_noscript_css} />
 
         ^{pageHead pc}
         ^{pageHead wc}

templates/default-layout.hamlet

@@ -43,5 +43,5 @@
 $maybe msg <- mmsg
   <div #message>#{msg}
 
-<div id="main" role="main">
+<div .reel role="main">
   ^{pageBody wc}

templates/home.hamlet

@@ -1,17 +1,16 @@
 $doctype 5
-<div id="header">
+<div .subheader .item>
   <h1>Eidolon
   <p>
     A simple gallery System in Haskell and Yesod
-<div #reel>
-  $forall (Entity mediumId medium) <- recentMedia
-    <article class="item">
+$forall (Entity mediumId medium) <- recentMedia
+  <div class="item">
     <a href=@{MediumR mediumId}>
       <figure>
         <img src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ mediumThumb medium) []} title=#{mediumTitle medium}>
         <figcaption>#{mediumTitle medium}
-  $if nextMedia
-    <div .item .pagination>
+$if nextMedia
+  <div .item .subheader .pagin>
     <p>
       <a href=@{PageR 1}>
         older

templates/login.hamlet

@@ -1,7 +1,5 @@
 $newline always
-
-<div #reel .middle>
-  <div .medium>
+<div .medium .middle>
   <noscript>Please enable Javascript
   <h3>Login
   <form>

templates/medium.hamlet

@@ -1,17 +1,17 @@
 <div .column>
-  <div class="medium">
+  <div .medium>
     <h1>#{mediumTitle medium}
     <p>
       by <a href=@{UserR ownerName}>#{ownerName}</a> from album <a href=@{AlbumR albumId}>#{albumTitle album}</a>
-  <div class="medium image">
+  <div .medium .image>
     <a href=@{ir}>
       <picture>
         <source srcset="@{pr}, @{ir} 2x" media="(min-width: 600px)">
         <source srcset="@{tr}, @{pr} 2x">
         <img src=@{pr} title=#{mediumTitle medium}>
   
-  <div class="medium">
-    <p class="desc">
+  <div .medium>
+    <p>
       Uploaded on: #{formatTime defaultTimeLocale "%A %F %H:%M" (mediumTime medium)}<br>
       $maybe d <- mediumDescription medium
         Description:<br>
@@ -19,7 +19,7 @@
       $nothing
         No description given
   
-    <div class="tags">
+    <div .tags>
         <p>
           Tags:
           <ul>
@@ -37,7 +37,7 @@
       <p>There are no Comments yet
   $else
     $forall (Entity commentId comment) <- comments
-      <div .medium .comment data-width="300">
+      <div .medium .comment>
         <a href=@{ProfileR $ commentAuthor comment}>#{commentAuthorSlug comment}</a> wrote on #{formatTime defaultTimeLocale "%A %F %H:%M" $ commentTime comment}:
         <hr>
         #{commentContent comment}
@@ -48,7 +48,7 @@
             <a href=@{CommentDeleteR commentId}>Delete this comment
       $forall (Entity replyId reply) <- replies
         $if commentParent reply == Just commentId
-          <article .comment .reply .medium>
+          <div .comment .reply .medium>
             <a href=@{ProfileR $ commentAuthor reply}>#{commentAuthorSlug reply}</a> replied on #{formatTime defaultTimeLocale "%A %F %H:%M" $ commentTime reply}:
             <hr>
             #{commentContent reply}
@@ -57,8 +57,7 @@
               <a href=@{CommentDeleteR replyId}>Delete this comment
     
   $if userId /= Nothing
-    <div class="medium">
-      <div class="inner">
+    <div .medium>
       <form method=post enctype=#{enctype}>
         ^{commentWidget}
 

templates/newAlbum.hamlet

@@ -1,5 +1,4 @@
-<div id="header" class="item" data-width="300">
-
+<div .medium .middle>
   <h3>Create new Album
   <form class="inner r" method=post enctype=#{enctype}>
     ^{albumWidget}

templates/page.hamlet

@@ -1,24 +1,24 @@
 $doctype 5
 $if page == 1
-  <div id="header" class="item" data-width="400">
+  <div .item .subheader>
     <div class="inner">
       <p>
         <a href=@{HomeR}>
           newer
 $else
-  <div id="header" class="item" data-width="400">
+  <div .item .subheader>
     <div class="inner">
       <p>
         <a href=@{PageR (page - 1)}>
           newer
 $forall (Entity mediumId medium) <- pageMedia
-  <article class="item" data-width=#{mediumThumbWidth medium}>
+  <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}
 $if nextMedia
-  <div id="header" class="item" data-width="400">
+  <div .item .subheader>
     <div class="inner">
       <p>
         <a href=@{PageR (page + 1)}>

templates/profile.hamlet

@@ -1,19 +1,18 @@
 $newline always
-<div #header>
+<div .subheader .item>
   <h1>Profile of #{ownerSlug}
   $if presence == True
     <a href=@{ProfileSettingsR ownerId}>Change your profile settings
 
-<div #reel>
-  <article .subheader .item>
+<div .subheader .item>
   $if null userAlbs
     <p class="center">This user has no albums yet
   $else
     <h1>Albums
     <p>Albums of this user
-  $if not (null userAlbs)
+$if not (null userAlbs)
   $forall (Entity albumId album) <- userAlbs
-      <article class="item">
+    <div class="item">
       <a href=@{AlbumR albumId}>
         <figure>
           $if (albumSamplePic album) == Nothing
@@ -22,12 +21,12 @@ $newline always
             <img src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ fromJust $ albumSamplePic album) []} title=#{albumTitle album}>
           <figcaption>#{albumTitle album}
 
-  $if not (null sharedAlbs)
-    <article .subheader .item>
+$if not (null sharedAlbs)
+  <div .subheader .item>
     <h1>Shared Albums
     <p>Albums others have shared with this user
   $forall Just (Entity albumId album) <- sharedAlbs
-      <article .item>
+    <div .item>
       <a href=@{AlbumR albumId}>
         <figure>
           $if (albumSamplePic album) == Nothing
@@ -36,12 +35,12 @@ $newline always
             <img src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ fromJust $ albumSamplePic album) []} title=#{albumTitle album}>
           <figcaption>#{albumTitle album}
 
-  $if not (null recentMedia)
-    <article .subheader .item>
+$if not (null recentMedia)
+  <div .subheader .item>
     <h1>Newest images
     <p>Recent uploads by #{ownerSlug}
   $forall (Entity mediumId medium) <- take 10 recentMedia
-      <article .item>
+    <div .item>
       <a href=@{MediumR mediumId}>
         <figure>
           <img src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ mediumThumb medium) []} title=#{mediumTitle medium}>