building new ui without html5up

Foundation.hs

@@ -29,7 +29,7 @@ import Text.Jasmine (minifym)
 import Text.Hamlet (hamletFile)
 import Yesod.Core.Types
 -- costom imports
-import Data.Text as T
+import qualified Data.Text as T
 import Data.Text.Encoding
 import Network.Wai
 import Helper
@@ -116,18 +116,19 @@ renderLayout widget = do
 
     pc <- widgetToPageContent $ do
         -- add parallelism js files
-        $(combineScripts 'StaticR
+        -- mapM_ addScript $ map StaticR
-            [ js_jquery_1_11_3_js
+        --     -- [ js_jquery_1_11_3_js
-            , js_jquery_poptrox_js
+        --     -- , js_jquery_poptrox_js
-            , js_skel_min_js
+        --     -- , js_skel_min_js
-            , js_init_js
+        --     -- , js_init_js
-            , js_picturefill_js
+        --     [ js_picturefill_js
-            ])
+        --     ]
-        $(combineStylesheets 'StaticR
+        mapM_ addStylesheet $ map StaticR
-            [ css_dropdown_css
+            [ css_bootstrap_min_css
-            , css_bootstrap_min_css
+            , css_dropdown_css
-            , css_style_global_css
+            , css_main_css
-            ])
+            -- , css_style_global_css
+            ]
         $(widgetFile "default-layout")
 
     withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")
@@ -144,7 +145,7 @@ approotRequest master req =
     where
       prefix =
         if 
-          "https://" `isPrefixOf` appRoot (appSettings master)
+          "https://" `T.isPrefixOf` appRoot (appSettings master)
           then
             "https://"
           else
@@ -165,8 +166,9 @@ instance Yesod App where
         120    -- timeout in minutes
         "config/client_session_key.aes"
 
-    defaultLayout widget =
+    -- defaultLayout widget =
-      renderLayout $(widgetFile "default-widget")
+    --   renderLayout $(widgetFile "default-widget")
+    defaultLayout = renderLayout
 
     -- This is done to provide an optimization for serving static files from
     -- a separate domain. Please see the staticRoot setting in Settings.hs

Handler/Login.hs

@@ -34,7 +34,7 @@ data Credentials = Credentials
 
 getLoginR :: Handler Html
 getLoginR =
-  formLayout $ do
+  defaultLayout $ do
     setTitle "Eidolon :: Login"
     $(widgetFile "login")
 

Handler/Medium.hs

@@ -65,7 +65,7 @@ getMediumR mediumId = do
       let tr = StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ mediumThumb medium) []
       let pr = StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ mediumPreview medium) []
       let ir = StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ mediumPath medium) []
-      formLayout $ do
+      defaultLayout $ do
         setTitle $ toHtml ("Eidolon :: Medium " `T.append` (mediumTitle medium))
         rssLink (CommentFeedRssR mediumId) $ "Comment feed of medium " `T.append` mediumTitle medium
         atomLink (CommentFeedAtomR mediumId) $ "Comment feed of medium " `T.append` mediumTitle medium

Handler/Search.hs

@@ -26,16 +26,20 @@ import Database.Bloodhound
 import Network.HTTP.Client (responseBody)
 import System.FilePath.Posix
 
+import Debug.Trace
+
 getSearchR :: Handler Html
 getSearchR = do
   ((res, widget), _) <- runFormGet searchForm
   case res of
     FormSuccess query -> do
       (ru, ra, rm, rc) <- getResults query
+      liftIO $ traceIO $ show (ru, ra, rm, rc)
       let a = decode (responseBody ru) :: Maybe (SearchResult SearchUser)
       let b = decode (responseBody ra) :: Maybe (SearchResult SearchAlbum)
       let c = decode (responseBody rm) :: Maybe (SearchResult SearchMedium)
       let d = decode (responseBody rc) :: Maybe (SearchResult SearchComment)
+      liftIO $ traceIO $ show (a,b,c,d)
       let hitListA = case a of {
           Just as -> hits $ searchHits as;
           Nothing -> []}
@@ -84,6 +88,7 @@ getSearchR = do
           else
             Nothing
         ) hitListD
+      liftIO $ traceIO $ show (userIdList, albumIdList, mediumIdList, commentIdList)
       userList <- return . catMaybes =<< mapM (\i -> runDB $ selectFirst [UserId ==. i] []) userIdList
       albumList <- return . catMaybes =<< mapM (\i -> runDB $ selectFirst [AlbumId ==. i] []) albumIdList
       mediumList <- return . catMaybes =<< mapM (\i -> runDB $ selectFirst [MediumId ==. i] []) mediumIdList
@@ -129,7 +134,7 @@ getResults query = do
 data SearchUser = SearchUser
   { suName :: T.Text
   , suSlug :: T.Text
-  }
+  } deriving Show
 
 instance FromJSON SearchUser where
   parseJSON (Object o) = SearchUser
@@ -138,7 +143,7 @@ instance FromJSON SearchUser where
   parseJSON _ = mempty
 
 data SearchAlbum = SearchAlbum
-  { saName :: T.Text }
+  { saName :: T.Text } deriving Show
 
 instance FromJSON SearchAlbum where
   parseJSON (Object o) = SearchAlbum <$> o .: "name"
@@ -149,7 +154,7 @@ data SearchMedium = SearchMedium
   , smTime :: UTCTime
   , smDescription :: Textarea
   , smTags :: [T.Text]
-  }
+  } deriving Show
 
 instance FromJSON SearchMedium where
   parseJSON (Object o) = SearchMedium
@@ -163,7 +168,7 @@ data SearchComment = SearchComment
   { scAuthor :: Text
   , scTime :: UTCTime
   , scContent :: Text
-  }
+  } deriving Show
 
 instance FromJSON SearchComment where
   parseJSON (Object o) = SearchComment

Handler/Upload.hs

@@ -45,7 +45,7 @@ getDirectUploadR albumId = do
             -- is the owner present or a user with whom the album is shared
             then do
               (dUploadWidget, enctype) <- generateFormPost $ renderBootstrap3 BootstrapBasicForm $ dUploadForm userId albumId
-              formLayout $ do
+              defaultLayout $ do
                 setTitle $ toHtml ("Eidolon :: Upload medium to " `T.append` albumTitle album)
                 $(widgetFile "dUpload")
             else do
@@ -239,7 +239,7 @@ getUploadR = do
           redirect NewAlbumR
         else do
           (uploadWidget, enctype) <- generateFormPost $ renderBootstrap3 BootstrapBasicForm $ bulkUploadForm userId
-          formLayout $ do
+          defaultLayout $ do
             setTitle "Eidolon :: Upload Medium"
             $(widgetFile "bulkUpload")
     Nothing -> do

config/routes

@@ -24,9 +24,9 @@
 /signup				SignupR			GET POST
 /login				LoginR			GET POST
 /logout				LogoutR			GET
-/activate/#Text			ActivateR		GET POST
+/activate/#T.Text		ActivateR		GET POST
 /profile/#UserId		ProfileR		GET
-/user/#Text			UserR			GET
+/user/#T.Text			UserR			GET
 /upload				UploadR			GET POST
 /newalbum			NewAlbumR		GET POST
 /album/#AlbumId			AlbumR			GET
@@ -59,7 +59,7 @@
 /admin/comment/#CommentId	AdminCommentDeleteR	GET
 /admin/repop-search             AdminSearchReloadR      GET
 
-/tag/#Text			TagR			GET
+/tag/#T.Text			TagR			GET
 
 /feed/root/atom.xml		RootFeedAtomR		GET
 /feed/root/rss.xml		RootFeedRssR		GET
@@ -69,7 +69,7 @@
 /feed/medium/#MediumId/rss.xml	CommentFeedRssR		GET
 /feed/user/#UserId/atom.xml	UserFeedAtomR		GET
 /feed/user/#UserId/rss.xml	UserFeedRssR		GET
-!/feed/user/#Text/atom.xml	NameFeedAtomR		GET
+!/feed/user/#T.Text/atom.xml	NameFeedAtomR		GET
-!/feed/user/#Text/rss.xml	NameFeedRssR		GET
+!/feed/user/#T.Text/rss.xml	NameFeedRssR		GET
 
 /search				SearchR			GET

static/css/dropdown.css

@@ -2,6 +2,7 @@
 	list-style: none;
 	font-weight: bold;
 	position: relative;
+	padding: 0;
 }
 
 #user-nav ul {
@@ -20,7 +21,15 @@
 #user-nav li a {
 	padding: 10px 20px 10px;
 	border-radius: 5px;
-	background-color: white;
+	background: white url('../img/overlay.png');
+}
+
+#user-nav li ul {
+	padding: 0;
+}
+
+#user-nav li ul li {
+	display: inline;
 }
 
 #user-nav input[type="checkbox"]:checked + ul {
@@ -51,3 +60,7 @@
 	left: -9999px;*/
 	display: none;
 }
+
+.red {
+	background: rgba(255,0,0,0.2) url('../img/overlay.png') !important;
+}

static/css/main.css

@@ -0,0 +1,176 @@
+body {
+	display: flex;
+	min-height: 100vh;
+	flex-direction: column;
+	background-image: url('../img/overlay.png'), linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('../img/bg.jpg');
+	background-image: url('../img/overlay.png'), -moz-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('../img/bg.jpg');
+	background-image: url('../img/overlay.png'), -ms-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('../img/bg.jpg');
+	background-image: url('../img/overlay.png'), -webkit-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('../img/bg.jpg');
+	background-image: url('../img/overlay.png'), -o-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('../img/bg.jpg');
+	background-size: cover;
+	background-attachment: fixed;
+	color: rgba(255,255,255,0.7);
+}
+
+#main {
+	margin-top: 80px;
+	width: 100%;
+}
+
+a {
+	color: white;
+	text-decoration: none;
+	font-weight: 600;
+	transition: color 0.25s ease-in-out;
+}
+
+a figcaption {
+	font-size: 14pt;
+	text-decoration: none;
+	transition: color 0.25s ease-in-out;
+}
+
+a:hover, .item a:hover, .medium a:hover, a:hover figcaption {
+	color: #d64760;
+	text-decoration: underline;
+	transition: color 0.25s ease-in-out;
+}
+
+#wrapper {
+	flex: 1;
+}
+
+#message {
+	padding: 1em 2em;
+	background: lightyellow url('../img/overlay.png');
+	color: #d64760;
+	font-size: 1.5em;
+	position:relative;
+	top: 80px;
+	z-index: 5;
+}
+
+#header {
+	margin: 40px 80px 40px;
+}
+
+#reel {
+	list-style: none;
+	display: block;
+	margin: 0 80px;
+	padding: 0;
+	text-align: center;
+}
+
+.middle {
+	position: relative;
+	top: 50px;
+}
+
+.item, .medium {
+	color: rgba(0,0,0,0.7);
+	display: inline-block;
+	position: relative;
+	background: rgba(255,255,255,0.8) url('../img/overlay.png');
+	border: 10px solid white;
+}
+
+.item {
+	height: 300px;
+	width: 400px;
+	margin-right: -14px;
+	margin-bottom: -10px;
+}
+
+.item a {
+	padding: 20px;
+	display: inline-block;
+	width: 100%;
+	height: 100%;
+}
+
+.subheader {
+	background: rgba(214, 71, 96, 0.7) url('../img/overlay.png');
+}
+
+.column {
+	margin: 0 40px 0;
+}
+
+.column > div {
+	width: 100%
+}
+
+.medium {
+	margin: 0px auto -10px;
+	padding: 20px;
+}
+
+.image {
+	text-align: center;
+}
+
+.item a, .medium a {
+	/*color: rgba(0,0,0,0.7);*/
+	color: black;
+	transition: color 0.25s ease-in-out;
+}
+
+figure img {
+	display: block;
+	margin: 0 auto;
+}
+
+figcaption {
+	text-align: center;
+	font-weight: bold;
+}
+
+img {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+nav {
+	width: 100%;
+	padding: 1em 2em;
+	background: #d64760 url('../img/overlay.png');
+	position: fixed;
+	z-index: 6;
+}
+
+nav li {
+	display: inline-block;
+}
+
+footer {
+	padding: 1em 2em;
+}
+
+#search {
+	padding-top: 5px;
+}
+
+.left {
+	float: left;
+}
+
+.right {
+	float: right;
+}
+
+@media (max-width: 755px) {
+	#main {
+		margin-top: 120px;
+	}
+	#message {
+		top: 120px;
+	}
+}
+
+@media (max-width: 480px) {
+	#main, #reel {
+		margin-left: 0;
+		margin-right: 0;
+	}
+}

templates/bulkUpload.hamlet

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

templates/default-layout-wrapper.hamlet

@@ -21,3 +21,39 @@ $doctype 5
     <body>
       <div id="wrapper">
         ^{pageBody pc}
+      <footer>
+        <div class="left">
+          ^{pageBody copyrightWidget}
+        <div class="right">
+          $case route
+            $of Just HomeR
+              get a Feed from This:
+              <a href="@{RootFeedAtomR}">Atom
+              |
+              <a href="@{RootFeedRssR}">RSS
+            $of Just (PageR _)
+              get a Feed from This:
+              <a href="@{RootFeedAtomR}">Atom
+              |
+              <a href="@{RootFeedRssR}">RSS
+            $of Just (ProfileR uId)
+              get a Feed from This:
+              <a href="@{UserFeedAtomR uId}">Atom
+              |
+              <a href="@{UserFeedRssR uId}">RSS
+            $of Just (UserR name)
+              get a Feed from This:
+              <a href="@{NameFeedAtomR name}">Atom
+              |
+              <a href="@{NameFeedRssR name}">RSS
+            $of Just (AlbumR aId)
+              get a Feed from This:
+              <a href="@{AlbumFeedAtomR aId}">Atom
+              |
+              <a href="@{AlbumFeedRssR aId}">RSS
+            $of Just (MediumR mId)
+              get a Feed from This:
+              <a href="@{CommentFeedAtomR mId}">Atom
+              |
+              <a href="@{CommentFeedRssR mId}">RSS
+            $of _

templates/default-layout.hamlet

@@ -1,6 +1,6 @@
 <nav>
   <div .row>
-    <div .col-md-9>
+    <div .col-md-9 .col-sm-6>
       <ul #user-nav>
         <li>
           <a href=@{HomeR}>
@@ -24,13 +24,11 @@
               <li>
                 <a href=@{LogoutR}>
                   Logout
-              $case madmin
+              $maybe admin <- madmin
-                $of Just admin
                 $if admin
                   <li>
                     <a href=@{AdminR} .red>
                       Administration
-                $of Nothing
         $nothing
           <li>
             <a href=@{LoginR}>
@@ -39,7 +37,7 @@
             <li>
               <a href=@{SignupR}>
                 Signup
-    <div .col-md-3 #search>
+    <div .col-md-3 .col-sm-6 #search>
       ^{pageBody searchWidget}
 
 $maybe msg <- mmsg
@@ -47,39 +45,3 @@ $maybe msg <- mmsg
 
 <div id="main" role="main">
   ^{pageBody wc}
-<div id="footer">
-  <div class="left">
-    ^{pageBody copyrightWidget}
-  <div class="right">
-    $case route
-      $of Just HomeR
-        get a Feed from This:
-        <a href="@{RootFeedAtomR}">Atom
-        |
-        <a href="@{RootFeedRssR}">RSS
-      $of Just (PageR _)
-        get a Feed from This:
-        <a href="@{RootFeedAtomR}">Atom
-        |
-        <a href="@{RootFeedRssR}">RSS
-      $of Just (ProfileR uId)
-        get a Feed from This:
-        <a href="@{UserFeedAtomR uId}">Atom
-        |
-        <a href="@{UserFeedRssR uId}">RSS
-      $of Just (UserR name)
-        get a Feed from This:
-        <a href="@{NameFeedAtomR name}">Atom
-        |
-        <a href="@{NameFeedRssR name}">RSS
-      $of Just (AlbumR aId)
-        get a Feed from This:
-        <a href="@{AlbumFeedAtomR aId}">Atom
-        |
-        <a href="@{AlbumFeedRssR aId}">RSS
-      $of Just (MediumR mId)
-        get a Feed from This:
-        <a href="@{CommentFeedAtomR mId}">Atom
-        |
-        <a href="@{CommentFeedRssR mId}">RSS
-      $of _

templates/home.hamlet

@@ -1,18 +1,17 @@
 $doctype 5
-<div id="header" class="item" data-width="400">
+<div id="header">
-  <div class="inner">
   <h1>Eidolon
   <p>
     A simple gallery System in Haskell and Yesod
+<div #reel>
   $forall (Entity mediumId medium) <- recentMedia
-  <article class="item" data-width=#{mediumThumbWidth medium}>
+    <article 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 id="header" class="item" data-width="400">
+  <div class="pagination">
-    <div class="inner">
     <p>
       <a href=@{PageR 1}>
         older

templates/login.hamlet

@@ -1,9 +1,10 @@
 $newline always
 
-<div id="header" class="item" data-width="300">
+<div #reel .middle>
+  <div .medium>
     <noscript>Please enable Javascript
     <h3>Login
-  <form class="inner r">
+    <form>
       <div .form-group .required>
         <label for="username">User:
         <input .form-control #username type="text" required>

templates/medium.cassius

@@ -1,24 +0,0 @@
-/*templates/medium.cassius*/
-
-#wrapper
-  overflow: auto !important
-
-#reel
-  width: 90% !important
-  max-height: auto !important
-
-#reel .item
-  float: none !important
-  display: inline-block !important
-  width: 100% !important
-
-div #main
-  margin-top: 60px !important
-  position: static !important
-
-#footer
-  position: static !important
-
-@media screen and (max-width: 650px)
-  #reel
-    width: 100% !important

templates/medium.hamlet

@@ -1,19 +1,16 @@
-<div data-width="1000">
+<div .column>
-  <div id="header" class="item" data-width="1000">
+  <div class="medium">
-    <div class="inner">
     <h1>#{mediumTitle medium}
     <p>
       by <a href=@{UserR ownerName}>#{ownerName}</a> from album <a href=@{AlbumR albumId}>#{albumTitle album}</a>
-  <div id="header" class="item image" data-width=#{dataWidth}>
+  <div class="medium image">
-    <div class="inner">
     <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 id="header" class="item" data-width="400">
+  <div class="medium">
-    <div class="inner">
     <p class="desc">
       Uploaded on: #{formatTime defaultTimeLocale "%A %F %H:%M" (mediumTime medium)}<br>
       $maybe d <- mediumDescription medium
@@ -36,12 +33,11 @@
       <a href=@{MediumSettingsR mediumId}>Change medium settings
   
   $if null comments
-    <div id="header" class="item" data-width="300">
+    <div class="medium">
-      <div class="inner">
       <p>There are no Comments yet
-
+  $else
     $forall (Entity commentId comment) <- comments
-  <article class="comment" data-width="300">
+      <div .medium .comment data-width="300">
         <a href=@{ProfileR $ commentAuthor comment}>#{commentAuthorSlug comment}</a> wrote on #{formatTime defaultTimeLocale "%A %F %H:%M" $ commentTime comment}:
         <hr>
         #{commentContent comment}
@@ -52,7 +48,7 @@ $forall (Entity commentId comment) <- comments
             <a href=@{CommentDeleteR commentId}>Delete this comment
       $forall (Entity replyId reply) <- replies
         $if commentParent reply == Just commentId
-      <article class="comment reply">
+          <article .comment .reply .medium>
             <a href=@{ProfileR $ commentAuthor reply}>#{commentAuthorSlug reply}</a> replied on #{formatTime defaultTimeLocale "%A %F %H:%M" $ commentTime reply}:
             <hr>
             #{commentContent reply}
@@ -61,7 +57,7 @@ $forall (Entity commentId comment) <- comments
               <a href=@{CommentDeleteR replyId}>Delete this comment
     
   $if userId /= Nothing
-  <div id="header" class="item" data-width="1000">
+    <div class="medium">
       <div class="inner">
         <form method=post enctype=#{enctype}>
           ^{commentWidget}

templates/profile.hamlet

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