mirror of
https://github.com/thumbsup/thumbsup
synced 2024-11-17 15:25:50 +00:00
Cards theme: single album preview to be more different from "classic"
This commit is contained in:
Romain
parent
7eba1d4695
commit
9fdef73f6e
@ -1,85 +1,74 @@
|
||||
<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
|
||||
-->
|
||||
<nav class="breadcrumbs">
|
||||
{{#each breadcrumbs~}}
|
||||
<a class="breadcrumb-item" href="{{filename}}.html">{{title}}</a> /
|
||||
{{~/each~}}
|
||||
<a class="breadcrumb-item" href="{{album.filename}}.html">{{album.title}}</a>
|
||||
</nav>
|
||||
|
||||
<!--
|
||||
Nested albums, if any
|
||||
-->
|
||||
<ul 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>
|
||||
<h3>{{title}}</h3>
|
||||
<div class="meta">
|
||||
{{summary}}<br />
|
||||
{{{date stats.fromDate}}} - {{{date stats.toDate}}}
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
{{~/each}}
|
||||
</ul>
|
||||
|
||||
<!--
|
||||
All photos and videos
|
||||
-->
|
||||
<ul id="media">
|
||||
{{#each album.files}}
|
||||
{{#if isVideo}}
|
||||
<li data-html="#media{{id}}"
|
||||
data-poster="{{urls.poster}}"
|
||||
data-download-url="{{{download this}}}">
|
||||
<a href="{{{download this}}}">
|
||||
<img src="{{urls.thumb}}"
|
||||
width="{{@root.gallery.thumbSize}}"
|
||||
height="{{@root.gallery.thumbSize}}"
|
||||
alt="{{filename}}" />
|
||||
</a>
|
||||
<img class="video-overlay" src="public/play.png" />
|
||||
</li>
|
||||
{{else}}
|
||||
<li data-src="{{urls.large}}"
|
||||
data-sub-html="{{caption}}"
|
||||
data-download-url="{{{download this}}}">
|
||||
<a href="{{{download this}}}">
|
||||
<img src="{{urls.thumb}}"
|
||||
width="{{@root.gallery.thumbSize}}"
|
||||
height="{{@root.gallery.thumbSize}}"
|
||||
alt="{{filename}}" />
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
<!--
|
||||
Breadcrumbs of parent albums
|
||||
-->
|
||||
<nav class="breadcrumbs">
|
||||
{{#each breadcrumbs~}}
|
||||
<a class="breadcrumb-item" href="{{filename}}.html">{{title}}</a> /
|
||||
{{~/each~}}
|
||||
<a class="breadcrumb-item" href="{{album.filename}}.html">{{album.title}}</a>
|
||||
</nav>
|
||||
|
||||
<!--
|
||||
Nested albums, if any
|
||||
-->
|
||||
<div id="albums">
|
||||
{{#each album.albums~}}
|
||||
<a href="{{filename}}.html" style="background-image: url('{{previews.0.urls.large}}')">
|
||||
<div class="info">
|
||||
<h3>{{title}}</h3>
|
||||
<div class="summary">{{summary}}</div>
|
||||
<div class="date">{{{date stats.fromDate}}} - {{{date stats.toDate}}}</div>
|
||||
</div>
|
||||
</a>
|
||||
{{~/each}}
|
||||
</div>
|
||||
|
||||
<!--
|
||||
All photos and videos
|
||||
-->
|
||||
<ul id="media" class="clearfix">
|
||||
{{#each album.files~}}
|
||||
{{#if isVideo~}}
|
||||
<li data-html="#media{{id}}"
|
||||
data-poster="{{urls.poster}}"
|
||||
data-download-url="{{{download this}}}">
|
||||
<a href="{{{download this}}}">
|
||||
<img src="{{urls.thumb}}"
|
||||
width="{{@root.gallery.thumbSize}}"
|
||||
height="{{@root.gallery.thumbSize}}"
|
||||
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~}}
|
||||
<li data-src="{{urls.large}}"
|
||||
data-sub-html="{{caption}}"
|
||||
data-download-url="{{{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}}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user