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>
-  <form class="inner" method=post enctype=#{enctype}>
+  <div .medium>
-    Upload multiple images
+    <form class="inner" method=post enctype=#{enctype}>
-    ^{uploadWidget}
+      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
-                  $if admin
+                  <li>
-                    <li>
+                    <a href=@{AdminR} .red>
-                      <a href=@{AdminR} .red>
+                      Administration
-                        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
-    <h1>Eidolon
+  <p>
-    <p>
+    A simple gallery System in Haskell and Yesod
-      A simple gallery System in Haskell and Yesod
+<div #reel>
-$forall (Entity mediumId medium) <- recentMedia
+  $forall (Entity mediumId medium) <- recentMedia
-  <article class="item" data-width=#{mediumThumbWidth medium}>
+    <article class="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}
 $if nextMedia
-  <div id="header" class="item" data-width="400">
+  <div class="pagination">
-    <div class="inner">
+    <p>
-      <p>
+      <a href=@{PageR 1}>
-        <a href=@{PageR 1}>
+        older
-         older

templates/login.hamlet

@@ -1,21 +1,22 @@
 $newline always
 
-<div id="header" class="item" data-width="300">
+<div #reel .middle>
-  <noscript>Please enable Javascript
+  <div .medium>
-  <h3>Login
+    <noscript>Please enable Javascript
-  <form class="inner r">
+    <h3>Login
-    <div .form-group .required>
+    <form>
-      <label for="username">User:
+      <div .form-group .required>
-      <input .form-control #username type="text" required>
+        <label for="username">User:
-    <div .form-group .required>
+        <input .form-control #username type="text" required>
-      <label for="password">Password:
+      <div .form-group .required>
-      <input .form-control #password type="password" required>
+        <label for="password">Password:
-    <div .form-group .optional>
+        <input .form-control #password type="password" required>
-      <button .btn .btn-default #login type="submit">Login
+      <div .form-group .optional>
-    <div #progress>
+        <button .btn .btn-default #login type="submit">Login
+      <div #progress>
   
-  <a href=@{ReactivateR}>Forgot your Password?
+    <a href=@{ReactivateR}>Forgot your Password?
   
-  <script src="/static/js/jquery.min.js" type="text/javascript">
+    <script src="/static/js/jquery.min.js" type="text/javascript">
-  <script src="/static/js/jsSHA.js" type="text/javascript">
+    <script src="/static/js/jsSHA.js" type="text/javascript">
-  <script src="/static/js/login.js" type="text/javascript">
+    <script src="/static/js/login.js" type="text/javascript">

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,70 +1,66 @@
-<div data-width="1000">
+<div .column>
-  <div id="header" class="item" data-width="1000">
+  <div class="medium">
-    <div class="inner">
+    <h1>#{mediumTitle 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">
+    <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">
+      Uploaded on: #{formatTime defaultTimeLocale "%A %F %H:%M" (mediumTime medium)}<br>
+      $maybe d <- mediumDescription medium
+        Description:<br>
+        #{d}
+      $nothing
+        No description given
+  
+    <div class="tags">
       <p>
-        by <a href=@{UserR ownerName}>#{ownerName}</a> from album <a href=@{AlbumR albumId}>#{albumTitle album}</a>
+        Tags:
-  <div id="header" class="item image" data-width=#{dataWidth}>
+        <ul>
-    <div class="inner">
+          $if null (mediumTags medium)
-      <a href=@{ir}>
+            none
-        <picture>
+          $else
-          <source srcset="@{pr}, @{ir} 2x" media="(min-width: 600px)">
+            $forall tag <- mediumTags medium
-          <source srcset="@{tr}, @{pr} 2x">
+              <li>
-          <img src=@{pr} title=#{mediumTitle medium}>
+                <a href=@{TagR tag}>#{tag}
-
+    $if presence == True
-  <div id="header" class="item" data-width="400">
+      <a href=@{MediumSettingsR mediumId}>Change medium settings
-    <div class="inner">
-      <p class="desc">
-        Uploaded on: #{formatTime defaultTimeLocale "%A %F %H:%M" (mediumTime medium)}<br>
-        $maybe d <- mediumDescription medium
-          Description:<br>
-          #{d}
-        $nothing
-          No description given
-
-      <div class="tags">
-        <p>
-          Tags:
-          <ul>
-            $if null (mediumTags medium)
-              none
-            $else
-              $forall tag <- mediumTags medium
-                <li>
-                  <a href=@{TagR tag}>#{tag}
-      $if presence == True
-        <a href=@{MediumSettingsR mediumId}>Change medium settings
   
   $if null comments
-    <div id="header" class="item" data-width="300">
+    <div class="medium">
+      <p>There are no Comments yet
+  $else
+    $forall (Entity commentId comment) <- comments
+      <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}
+        $if userId /= Nothing
+          <hr>
+          <a href=@{CommentReplyR commentId}>Reply to this comment
+          $if userId == (Just $ commentAuthor comment)
+            <a href=@{CommentDeleteR commentId}>Delete this comment
+      $forall (Entity replyId reply) <- replies
+        $if commentParent reply == Just commentId
+          <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}
+            <hr>
+            $if userId == (Just $ commentAuthor comment)
+              <a href=@{CommentDeleteR replyId}>Delete this comment
+    
+  $if userId /= Nothing
+    <div class="medium">
       <div class="inner">
-        <p>There are no Comments yet
+        <form method=post enctype=#{enctype}>
-
+          ^{commentWidget}
-$forall (Entity commentId comment) <- comments
-  <article class="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}
-    $if userId /= Nothing
-      <hr>
-      <a href=@{CommentReplyR commentId}>Reply to this comment
-      $if userId == (Just $ commentAuthor comment)
-        <a href=@{CommentDeleteR commentId}>Delete this comment
-  $forall (Entity replyId reply) <- replies
-    $if commentParent reply == Just commentId
-      <article class="comment reply">
-        <a href=@{ProfileR $ commentAuthor reply}>#{commentAuthorSlug reply}</a> replied on #{formatTime defaultTimeLocale "%A %F %H:%M" $ commentTime reply}:
-        <hr>
-        #{commentContent reply}
-        <hr>
-        $if userId == (Just $ commentAuthor comment)
-          <a href=@{CommentDeleteR replyId}>Delete this comment
-
-$if userId /= Nothing
-  <div id="header" class="item" data-width="1000">
-    <div class="inner">
-      <form method=post enctype=#{enctype}>
-        ^{commentWidget}
 
 <style type="text/css">
   body{background-image: url('/static/css/images/overlay.png'),	-webkit-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65)), url('@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ mediumPath medium) []}');background-attachment:fixed;background-image: url('/static/css/images/overlay.png'), -moz-linear-gradient(center top , transparent 75%, rgba(0, 0, 0, 0.65)), url('@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ mediumPath medium) []}');}

templates/profile.hamlet

@@ -1,53 +1,48 @@
 $newline always
-<div id="header" class="item" data-width="400">
+<div #header>
-  <div class="inner">
+  <h1>Profile of #{ownerSlug}
-    <h1>Profile of #{ownerSlug}
+  $if presence == True
-    $if presence == True
+    <a href=@{ProfileSettingsR ownerId}>Change your profile settings
-      <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
+    $forall (Entity albumId album) <- userAlbs
-  <article class="item" data-width=#{albumSampleWidth album}>
+      <article class="item">
-    <a href=@{AlbumR albumId}>
+        <a href=@{AlbumR albumId}>
-      <figure>
+          <figure>
-        $if (albumSamplePic album) == Nothing
+            $if (albumSamplePic album) == Nothing
-          <img src=@{StaticR img_album_jpg} title=#{albumTitle album}>
+              <img src=@{StaticR img_album_jpg} title=#{albumTitle album}>
-        $else
+            $else
-          <img src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ fromJust $ albumSamplePic album) []} title=#{albumTitle album}>
+              <img src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ fromJust $ albumSamplePic album) []} title=#{albumTitle album}>
-        <figcaption>#{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
+    $forall Just (Entity albumId album) <- sharedAlbs
-    <article class="shared item" data-width=#{albumSampleWidth album}>
+      <article .item>
-      <a href=@{AlbumR albumId}>
+        <a href=@{AlbumR albumId}>
-        <figure>
+          <figure>
-          $if (albumSamplePic album) == Nothing
+            $if (albumSamplePic album) == Nothing
-            <img src=@{StaticR img_album_jpg}>
+              <img src=@{StaticR img_album_jpg}>
-          $else
+            $else
-            <img src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ fromJust $ albumSamplePic album) []} title=#{albumTitle album}>
+              <img src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ fromJust $ albumSamplePic album) []} title=#{albumTitle album}>
-          <figcaption>#{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
+    $forall (Entity mediumId medium) <- take 10 recentMedia
-    <article class="recent item" data-width=#{mediumThumbWidth medium}>
+      <article .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}