mirror of
https://github.com/thumbsup/thumbsup
synced 2024-11-05 12:01:04 +00:00
Remove sidebar until we have a good design
Current sidebar doesn't handle nested albums very well, and navigation is still awkward. For example should it save its open/closed state when browsing?
This commit is contained in:
Romain
parent
bd7119c25b
commit
ff7b720f49
@ -1,17 +0,0 @@
|
||||
<li>
|
||||
<!-- This album -->
|
||||
<a href="{{filename}}.html">
|
||||
{{#if albums.length}}
|
||||
<i class="fa fa-folder-o"></i>
|
||||
{{else}}
|
||||
<i class="fa fa-photo"></i>
|
||||
{{/if}}
|
||||
{{title}}<span class="count">{{stats.total}}</span>
|
||||
</a>
|
||||
<!-- And nested album -->
|
||||
<ul>
|
||||
{{#each albums}}
|
||||
{{> sidebar-album}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
</li>
|
||||
@ -14,16 +14,6 @@
|
||||
|
||||
<div id="container">
|
||||
|
||||
<!--
|
||||
Sidebar with album hierarchy
|
||||
-->
|
||||
<!-- <input id="hamburger" class="hamburger-checkbox" type="checkbox" />
|
||||
<nav id="sidebar">
|
||||
<ul>
|
||||
{{> sidebar-album gallery.home }}
|
||||
</ul>
|
||||
</nav> -->
|
||||
|
||||
<!--
|
||||
Main gallery panel
|
||||
-->
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
@mobile-trigger: 900px;
|
||||
|
||||
// -----------------------------------
|
||||
// Page structure
|
||||
// Generic styles
|
||||
// -----------------------------------
|
||||
|
||||
* {
|
||||
@ -32,78 +32,6 @@ html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
overflow: hidden;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
#content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// -----------------------------------
|
||||
// Slide-out navigation
|
||||
// -----------------------------------
|
||||
|
||||
.hamburger-checkbox {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hamburger-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
flex: 0 0 15em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @mobile-trigger) {
|
||||
|
||||
.hamburger-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
flex: 0 0 0;
|
||||
transition: all .2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#sidebar .count {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hamburger-checkbox:checked ~ #sidebar {
|
||||
flex: 0 0 100%;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.hamburger-checkbox:checked ~ #content {
|
||||
flex: 0 0 0;
|
||||
}
|
||||
|
||||
.hamburger-checkbox:checked ~ #sidebar .count {
|
||||
opacity: 100;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// -----------------------------------
|
||||
// Generic styles
|
||||
// -----------------------------------
|
||||
|
||||
body {
|
||||
background: @body-background;
|
||||
color: @text-color;
|
||||
@ -155,43 +83,6 @@ h1 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// -----------------------------------
|
||||
// Sidebar navigation
|
||||
// -----------------------------------
|
||||
|
||||
#sidebar {
|
||||
background: @nav-background;
|
||||
border-right: 1px solid @borders;
|
||||
}
|
||||
|
||||
#sidebar ul:not(:first-child) {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
#sidebar i.fa {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
#sidebar a {
|
||||
border-bottom: 1px solid @borders;
|
||||
color: @text-color;
|
||||
display: block;
|
||||
padding: 0.8em 1em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#sidebar .count {
|
||||
background-color: #fcfcfc;
|
||||
border: 1px solid @borders;
|
||||
border-radius: 0.4em;
|
||||
color: @text-light;
|
||||
font-size: 0.7em;
|
||||
padding: 0.4em 0.6em 0.3em 0.5em;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
// -----------------------------------
|
||||
// Breadcrumbs navigation
|
||||
// -----------------------------------
|
||||
@ -265,14 +156,6 @@ nav.breadcrumbs a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// -----------------------------------
|
||||
// Navigation hovers
|
||||
// -----------------------------------
|
||||
|
||||
#sidebar a:hover {
|
||||
background-color: @nav-highlight;
|
||||
}
|
||||
|
||||
// -----------------------------------
|
||||
// Photo and video thumbnails
|
||||
// -----------------------------------
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
<li>
|
||||
<!-- This album -->
|
||||
<a href="{{filename}}.html">
|
||||
{{#if albums.length}}
|
||||
<i class="fa fa-folder-o"></i>
|
||||
{{else}}
|
||||
<i class="fa fa-photo"></i>
|
||||
{{/if}}
|
||||
{{title}}<span class="count">{{stats.total}}</span>
|
||||
</a>
|
||||
<!-- And nested album -->
|
||||
<ul>
|
||||
{{#each albums}}
|
||||
{{> sidebar-album}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
</li>
|
||||
@ -1,106 +1,84 @@
|
||||
<div id="wrapper">
|
||||
<div id="content">
|
||||
|
||||
<!--
|
||||
Sidebar with album hierarchy
|
||||
Gallery title
|
||||
-->
|
||||
<!-- <input id="hamburger" class="hamburger-checkbox" type="checkbox" />
|
||||
<nav id="sidebar">
|
||||
<ul>
|
||||
{{> sidebar-album gallery.home }}
|
||||
<header style="color: #17baef;">
|
||||
<h1>{{gallery.title}}</h1>
|
||||
</header>
|
||||
|
||||
<!--
|
||||
Breadcrumbs of parent albums
|
||||
-->
|
||||
|
||||
<nav class="breadcrumbs">
|
||||
<div class="mask"></div>
|
||||
{{#each breadcrumbs~}}
|
||||
<a class="breadcrumb-item" href="{{filename}}.html">{{title}}</a>
|
||||
<span class="separator">></span>
|
||||
{{~/each~}}
|
||||
<a class="breadcrumb-item" href="{{album.filename}}.html">{{album.title}}</a>
|
||||
</nav>
|
||||
|
||||
<!--
|
||||
Main gallery panel
|
||||
-->
|
||||
<section id="content">
|
||||
|
||||
<!--
|
||||
Nested albums, if any
|
||||
-->
|
||||
<ul id="albums">
|
||||
{{#each album.albums~}}
|
||||
<li>
|
||||
<a href="{{filename}}.html">
|
||||
<h3>{{title}}</h3>
|
||||
<div class="meta">
|
||||
<time>{{{date stats.fromDate}}} - {{{date stats.toDate}}}</time><span class="separator">,</span>
|
||||
<span class="summary">{{summary}}</span>
|
||||
</div>
|
||||
<ul class="grid clearfix">
|
||||
{{~#slice previews count=8~}}
|
||||
<li><img src="{{this.urls.thumb}}" /></li>
|
||||
{{~/slice}}
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
{{~/each}}
|
||||
</ul>
|
||||
</nav> -->
|
||||
|
||||
<div id="container">
|
||||
|
||||
<!--
|
||||
Gallery title
|
||||
All photos and videos
|
||||
-->
|
||||
<header style="color: #17baef;">
|
||||
<h1>
|
||||
<label for="hamburger" class="hamburger-label noselect" role="button">
|
||||
<i class="fa fa-navicon"></i>
|
||||
</label>
|
||||
{{gallery.title}}
|
||||
</h1>
|
||||
</header>
|
||||
<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="{{../gallery.thumbsSize}}"
|
||||
height="{{../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="{{../gallery.thumbSize}}"
|
||||
height="{{../gallery.thumbSize}}"
|
||||
alt="{{filename}}" />
|
||||
</a>
|
||||
</li>
|
||||
{{~/if}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
<!--
|
||||
Breadcrumbs of parent albums
|
||||
-->
|
||||
|
||||
<nav class="breadcrumbs">
|
||||
<div class="mask"></div>
|
||||
{{#each breadcrumbs~}}
|
||||
<a class="breadcrumb-item" href="{{filename}}.html">{{title}}</a>
|
||||
<span class="separator">></span>
|
||||
{{~/each~}}
|
||||
<a class="breadcrumb-item" href="{{album.filename}}.html">{{album.title}}</a>
|
||||
</nav>
|
||||
|
||||
<!--
|
||||
Main gallery panel
|
||||
-->
|
||||
<section id="content">
|
||||
|
||||
<!--
|
||||
Nested albums, if any
|
||||
-->
|
||||
<ul id="albums">
|
||||
{{#each album.albums~}}
|
||||
<li>
|
||||
<a href="{{filename}}.html">
|
||||
<h3>{{title}}</h3>
|
||||
<div class="meta">
|
||||
<time>{{{date stats.fromDate}}} - {{{date stats.toDate}}}</time><span class="separator">,</span>
|
||||
<span class="summary">{{summary}}</span>
|
||||
</div>
|
||||
<!-- <div class="mosaic" style="opacity: 0.8">
|
||||
<img src="{{filename}}.png" />
|
||||
</div> -->
|
||||
<ul class="grid clearfix">
|
||||
{{~#slice previews count=8~}}
|
||||
<li><img src="{{this.urls.thumb}}" /></li>
|
||||
{{~/slice}}
|
||||
</ul>
|
||||
</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="{{../gallery.thumbsSize}}"
|
||||
height="{{../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="{{../gallery.thumbSize}}"
|
||||
height="{{../gallery.thumbSize}}"
|
||||
alt="{{filename}}" />
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
// Variables for user customisation
|
||||
// -----------------------------------
|
||||
|
||||
@body-background: #f6f6f6;
|
||||
@header-background: #444;
|
||||
@header-foreground: #fff;
|
||||
@body-background: #fff;
|
||||
@header-background: #fff;
|
||||
@header-foreground: #17baef;
|
||||
@nav-background: #fafafa;
|
||||
@nav-highlight: #fff;
|
||||
@album-background: #fafafa;
|
||||
@ -15,7 +15,7 @@
|
||||
@mobile-trigger: 450px;
|
||||
|
||||
// -----------------------------------
|
||||
// Page structure
|
||||
// Generic styles
|
||||
// -----------------------------------
|
||||
|
||||
* {
|
||||
@ -32,80 +32,8 @@ html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#container {
|
||||
// display: flex;
|
||||
// flex: 1;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
overflow: hidden;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
#content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// -----------------------------------
|
||||
// Slide-out navigation
|
||||
// -----------------------------------
|
||||
|
||||
.hamburger-checkbox {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hamburger-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
flex: 0 0 15em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @mobile-trigger) {
|
||||
|
||||
.hamburger-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
flex: 0 0 0;
|
||||
transition: all .2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#sidebar .count {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hamburger-checkbox:checked ~ #sidebar {
|
||||
flex: 0 0 100%;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.hamburger-checkbox:checked ~ #content {
|
||||
flex: 0 0 0;
|
||||
}
|
||||
|
||||
.hamburger-checkbox:checked ~ #sidebar .count {
|
||||
opacity: 100;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// -----------------------------------
|
||||
// Generic styles
|
||||
// -----------------------------------
|
||||
|
||||
body {
|
||||
background: #fff;
|
||||
background: @body-background;
|
||||
color: #444;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 16px;
|
||||
@ -138,61 +66,18 @@ a {
|
||||
// -----------------------------------
|
||||
|
||||
header {
|
||||
background: #fff;
|
||||
background: @header-background;
|
||||
font-size: 1.4em;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
padding: 0;
|
||||
color: #17baef;
|
||||
}
|
||||
|
||||
header .hamburger-label {
|
||||
// color: #fff;
|
||||
margin-right: 0.4em;
|
||||
color: @header-foreground;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 1em;
|
||||
color: #17baef;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// -----------------------------------
|
||||
// Sidebar navigation
|
||||
// -----------------------------------
|
||||
|
||||
#sidebar {
|
||||
background: @nav-background;
|
||||
border-right: 1px solid @borders;
|
||||
}
|
||||
|
||||
#sidebar ul:not(:first-child) {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
#sidebar i.fa {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
#sidebar a {
|
||||
border-bottom: 1px solid @borders;
|
||||
color: @text-color;
|
||||
display: block;
|
||||
padding: 0.8em 1em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#sidebar .count {
|
||||
background-color: #fcfcfc;
|
||||
border: 1px solid @borders;
|
||||
border-radius: 0.4em;
|
||||
color: @text-light;
|
||||
font-size: 0.7em;
|
||||
padding: 0.4em 0.6em 0.3em 0.5em;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
// -----------------------------------
|
||||
// Breadcrumbs navigation
|
||||
// -----------------------------------
|
||||
@ -272,12 +157,18 @@ nav.breadcrumbs .separator {
|
||||
}
|
||||
|
||||
#albums .grid {
|
||||
opacity: 0.8;
|
||||
opacity: 0.9;
|
||||
width: 400px;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#albums .mosaic {
|
||||
width: 400px;
|
||||
opacity: 0.9;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#albums .grid li {
|
||||
float: left;
|
||||
padding: 0;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user