Archives/thumbsup
2
0
Fork 0
mirror of https://github.com/thumbsup/thumbsup synced 2024-11-17 15:25:50 +00:00
Code Issues Projects Releases Wiki Activity

Cards theme: single album preview to be more different from "classic"

Browse Source
This commit is contained in:
Romain 2016-11-16 20:31:47 +11:00
parent 7eba1d4695
commit 9fdef73f6e
2 changed files with 125 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
templates/themes/cards/theme.hbs
View File

@ -1,19 +1,13 @@
<div id="wrapper">
<div id="container">
<!--
Gallery title
-->
<header>
<h1>{{gallery.title}}</h1>
<h1><a href="{{gallery.home.filename}}.html">{{gallery.title}}</a></h1>
</header>
<div id="container">
<!--
Main gallery panel
-->
<section id="content">
<!--
Breadcrumbs of parent albums
-->
@ -27,31 +21,24 @@
<!--
Nested albums, if any
-->
<ul id="albums">
<div id="albums">
{{#each album.albums~}}
<li>
<a href="{{filename}}.html">
<ul class="grid clearfix">
{{~#slice previews count=2~}}
<li><img src="{{this.urls.thumb}}" /></li>
{{~/slice}}
</ul>
<a href="{{filename}}.html" style="background-image: url('{{previews.0.urls.large}}')">
<div class="info">
<h3>{{title}}</h3>
<div class="meta">
{{summary}}<br />
{{{date stats.fromDate}}} - {{{date stats.toDate}}}
<div class="summary">{{summary}}</div>
<div class="date">{{{date stats.fromDate}}} - {{{date stats.toDate}}}</div>
</div>
</a>
</li>
{{~/each}}
</ul>
</div>
<!--
All photos and videos
-->
<ul id="media">
{{#each album.files}}
{{#if isVideo}}
<ul id="media" class="clearfix">
{{#each album.files~}}
{{#if isVideo~}}
<li data-html="#media{{id}}"
data-poster="{{urls.poster}}"
data-download-url="{{{download this}}}">
@ -59,27 +46,29 @@
<img src="{{urls.thumb}}"
width="{{@root.gallery.thumbSize}}"
height="{{@root.gallery.thumbSize}}"
alt="{{filename}}" />
alt="{{filename}}"
data-html="#media{{id}}"
data-poster="{{urls.poster}}"
data-download-url="{{{download this}}}"
/>
</a>
<img class="video-overlay" src="public/play.png" />
</li>
{{else}}
{{~else~}}
<li data-src="{{urls.large}}"
data-sub-html="{{caption}}"
data-download-url="{{{download this}}}">
<a href="{{{download this}}}">
<a href="{{urls.large}}"
data-sub-html="{{caption}}"
data-download-url="{{{download this}}}">
<img src="{{urls.thumb}}"
width="{{@root.gallery.thumbSize}}"
height="{{@root.gallery.thumbSize}}"
alt="{{filename}}" />
</a>
</li>
{{/if}}
{{/each}}
{{~/if}}
{{~/each}}
</ul>
</section>
</div>
</div>

115
templates/themes/cards/theme.less
View File

@ -3,16 +3,13 @@
// Variables for user customisation
// -----------------------------------
@body-background: #f6f6f6;
@header-background: #444;
@header-foreground: #fff;
@nav-background: #fafafa;
@nav-highlight: #fff;
@album-background: #fafafa;
@body-background: #fff;
@header-background: #fff;
@header-foreground: #444;
@text-color: #444;
@text-light: #999;
@borders: #ddd;
@mobile-trigger: 900px;
@mobile-trigger: 400px;
// -----------------------------------
// Generic styles
@ -61,6 +58,14 @@ a {
user-select: none;
}
// -----------------------------------
// Structure
// -----------------------------------
#container {
padding: 2em;
}
// -----------------------------------
// Header
// -----------------------------------
@ -69,27 +74,26 @@ header {
background: @header-background;
color: @header-foreground;
font-size: 1.8em;
padding: 1em;
}
header .hamburger-label {
// color: #fff;
margin-right: 0.4em;
margin-bottom: 1.1em;
}
h1 {
// color: #fff;
display: inline-block;
font-weight: bold;
}
h1 a {
color: @header-foreground;
}
// -----------------------------------
// Breadcrumbs navigation
// -----------------------------------
nav.breadcrumbs {
border-bottom: 1px solid @borders;
margin: 2em;
font-size: 1.2em;
margin-bottom: 2em;
padding: 0em 0em 0.8em 0.1em;
}
@ -107,53 +111,37 @@ nav.breadcrumbs a {
// -----------------------------------
#albums, #media {
margin: 2em;
margin: 0em;
}
#albums a {
background-color: @album-background;
display: inline-block;
padding: 0.7em;
}
#albums h3 {
color: @text-color;
margin: 0.7em;
margin-top: 1em;
font-size: 1em;
text-align: center;
}
#albums .meta {
color: @text-light;
font-size: 0.9em;
font-style: italic;
line-height: 1.2em;
margin: 0.5em 0;
text-align: center;
width: 100%;
}
#albums > li {
display: inline-block;
margin-right: 2em;
margin-bottom: 3em;
border: 1px solid @borders;
position: relative;
overflow: hidden;
width: 300px;
height: 220px;
background-size: cover;
border-radius: 8px;
}
#albums .grid {
width: 200px;
}
#albums .grid li {
float: left;
padding: 0 0.2em 0.2em 0;
width: 50%;
}
#albums .grid img {
display: block;
#albums .info {
position: absolute;
padding: 1em;
background: rgba(0,0,0,0.3);
color: #fff;
font-size: 0.9em;
line-height: 1.2em;
margin: 0;
width: 100%;
font-weight: bold;
bottom: 0;
}
#albums h3 {
font-size: 1.3em;
margin-bottom: 0.2em;
}
// -----------------------------------
@ -165,6 +153,16 @@ nav.breadcrumbs a {
margin-right: 0.4em;
margin-bottom: 0.2em;
position: relative;
cursor: zoom-in;
}
#media a {
display: inline-block;
}
#media img {
border-radius: 8px;
display: block;
}
#media li .video-overlay {
@ -176,3 +174,14 @@ nav.breadcrumbs a {
top: 50%;
width: 48px;
}
// -----------------------------------
// Photo and video thumbnails
// -----------------------------------
@media only screen and (max-width: @mobile-trigger) {
#albums a {
width: 250px;
height: 190px;
}
}