more tinkering with new uiQ

This commit is contained in:
nek0 2016-08-31 21:37:20 +02:00
parent 2c0253b1d0
commit 6b62e83099
15 changed files with 156 additions and 176 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -1,19 +1,18 @@
$newline always $newline always
<div #reel> <div .subheader .item>
<div .subheader .item> <h1>#{albumTitle album} <small>by <a href=@{UserR ownerName}>#{ownerSlug}</a></small>
<h1>#{albumTitle album} <small>by <a href=@{UserR ownerName}>#{ownerSlug}</a></small> $if presence == True
$if presence == True <a href=@{DirectUploadR albumId}>Upload image to this album
<a href=@{DirectUploadR albumId}>Upload image to this album <br>
<br> <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 .item>
<p class="center">This album is empty
$else
$forall (Entity mediumId medium) <- media
<div .item> <div .item>
<p class="center">This album is empty <a href=@{MediumR mediumId}>
$else <figure>
$forall (Entity mediumId medium) <- media <img src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ mediumThumb medium) []} title=#{mediumTitle medium}>
<div .item> <figcaption>#{mediumTitle medium}
<a href=@{MediumR mediumId}>
<figure>
<img src=@{StaticR $ StaticRoute (drop 2 $ map T.pack $ splitDirectories $ mediumThumb medium) []} title=#{mediumTitle medium}>
<figcaption>#{mediumTitle medium}

View file

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

View file

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

View file

@ -9,11 +9,6 @@ $doctype 5
<meta name="author" content=""> <meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1"> <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 pc}
^{pageHead wc} ^{pageHead wc}

View file

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

View file

@ -1,17 +1,16 @@
$doctype 5 $doctype 5
<div id="header"> <div .subheader .item>
<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 <div class="item">
<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
$if nextMedia <div .item .subheader .pagin>
<div .item .pagination> <p>
<p> <a href=@{PageR 1}>
<a href=@{PageR 1}> older
older

View file

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

View file

@ -1,17 +1,17 @@
<div .column> <div .column>
<div class="medium"> <div .medium>
<h1>#{mediumTitle medium} <h1>#{mediumTitle medium}
<p> <p>
by <a href=@{UserR ownerName}>#{ownerName}</a> from album <a href=@{AlbumR albumId}>#{albumTitle album}</a> 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}> <a href=@{ir}>
<picture> <picture>
<source srcset="@{pr}, @{ir} 2x" media="(min-width: 600px)"> <source srcset="@{pr}, @{ir} 2x" media="(min-width: 600px)">
<source srcset="@{tr}, @{pr} 2x"> <source srcset="@{tr}, @{pr} 2x">
<img src=@{pr} title=#{mediumTitle medium}> <img src=@{pr} title=#{mediumTitle medium}>
<div class="medium"> <div .medium>
<p class="desc"> <p>
Uploaded on: #{formatTime defaultTimeLocale "%A %F %H:%M" (mediumTime medium)}<br> Uploaded on: #{formatTime defaultTimeLocale "%A %F %H:%M" (mediumTime medium)}<br>
$maybe d <- mediumDescription medium $maybe d <- mediumDescription medium
Description:<br> Description:<br>
@ -19,25 +19,25 @@
$nothing $nothing
No description given No description given
<div class="tags"> <div .tags>
<p> <p>
Tags: Tags:
<ul> <ul>
$if null (mediumTags medium) $if null (mediumTags medium)
none none
$else $else
$forall tag <- mediumTags medium $forall tag <- mediumTags medium
<li> <li>
<a href=@{TagR tag}>#{tag} <a href=@{TagR tag}>#{tag}
$if presence == True $if presence == True
<a href=@{MediumSettingsR mediumId}>Change medium settings <a href=@{MediumSettingsR mediumId}>Change medium settings
$if null comments $if null comments
<div class="medium"> <div class="medium">
<p>There are no Comments yet <p>There are no Comments yet
$else $else
$forall (Entity commentId comment) <- comments $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}: <a href=@{ProfileR $ commentAuthor comment}>#{commentAuthorSlug comment}</a> wrote on #{formatTime defaultTimeLocale "%A %F %H:%M" $ commentTime comment}:
<hr> <hr>
#{commentContent comment} #{commentContent comment}
@ -48,7 +48,7 @@
<a href=@{CommentDeleteR commentId}>Delete this comment <a href=@{CommentDeleteR commentId}>Delete this comment
$forall (Entity replyId reply) <- replies $forall (Entity replyId reply) <- replies
$if commentParent reply == Just commentId $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}: <a href=@{ProfileR $ commentAuthor reply}>#{commentAuthorSlug reply}</a> replied on #{formatTime defaultTimeLocale "%A %F %H:%M" $ commentTime reply}:
<hr> <hr>
#{commentContent reply} #{commentContent reply}
@ -57,10 +57,9 @@
<a href=@{CommentDeleteR replyId}>Delete this comment <a href=@{CommentDeleteR replyId}>Delete this comment
$if userId /= Nothing $if userId /= Nothing
<div class="medium"> <div .medium>
<div class="inner"> <form method=post enctype=#{enctype}>
<form method=post enctype=#{enctype}> ^{commentWidget}
^{commentWidget}
<style type="text/css"> <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) []}');} 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) []}');}

View file

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

View file

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

View file

@ -1,48 +1,47 @@
$newline always $newline always
<div #header> <div .subheader .item>
<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 #reel> <div .subheader .item>
<article .subheader .item> $if null userAlbs
$if null userAlbs <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 <div class="item">
<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 not (null sharedAlbs)
$if not (null sharedAlbs) <div .subheader .item>
<article .subheader .item> <h1>Shared Albums
<h1>Shared Albums <p>Albums others have shared with this user
<p>Albums others have shared with this user $forall Just (Entity albumId album) <- sharedAlbs
$forall Just (Entity albumId album) <- sharedAlbs <div .item>
<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 not (null recentMedia)
$if not (null recentMedia) <div .subheader .item>
<article .subheader .item> <h1>Newest images
<h1>Newest images <p>Recent uploads by #{ownerSlug}
<p>Recent uploads by #{ownerSlug} $forall (Entity mediumId medium) <- take 10 recentMedia
$forall (Entity mediumId medium) <- take 10 recentMedia <div .item>
<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}