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,5 +1,4 @@
$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

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
<article class="item"> <div 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 .pagination> <div .item .subheader .pagin>
<p> <p>
<a href=@{PageR 1}> <a href=@{PageR 1}>
older older

View file

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

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,7 +19,7 @@
$nothing $nothing
No description given No description given
<div class="tags"> <div .tags>
<p> <p>
Tags: Tags:
<ul> <ul>
@ -37,7 +37,7 @@
<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,8 +57,7 @@
<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}

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,11 +1,10 @@
$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
@ -13,7 +12,7 @@ $newline always
<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
<article class="item"> <div class="item">
<a href=@{AlbumR albumId}> <a href=@{AlbumR albumId}>
<figure> <figure>
$if (albumSamplePic album) == Nothing $if (albumSamplePic album) == Nothing
@ -23,11 +22,11 @@ $newline always
<figcaption>#{albumTitle album} <figcaption>#{albumTitle album}
$if not (null sharedAlbs) $if not (null sharedAlbs)
<article .subheader .item> <div .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
<article .item> <div .item>
<a href=@{AlbumR albumId}> <a href=@{AlbumR albumId}>
<figure> <figure>
$if (albumSamplePic album) == Nothing $if (albumSamplePic album) == Nothing
@ -37,11 +36,11 @@ $newline always
<figcaption>#{albumTitle album} <figcaption>#{albumTitle album}
$if not (null recentMedia) $if not (null recentMedia)
<article .subheader .item> <div .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
<article .item> <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}>