From 7f8942f638fd657cdfd51f2e3f19d857cbbed4a0 Mon Sep 17 00:00:00 2001
From: Adrien Beudin <beudbeud@beudibox.fr>
Date: Fri, 28 Apr 2017 16:46:31 +0200
Subject: [PATCH] update material phase 2

---
 .../themes/exposure/static/css/style-page.css |  5 ++
 .../templates/sections/bordered-picture.html  |  2 +-
 .../templates/sections/full-picture.html      |  2 +-
 .../templates/sections/pictures-group.html    |  2 +-
 .../material/static/css/materialize.css       | 16 ++----
 .../static/css/{styles.css => style-page.css} |  3 ++
 ...ery-dark-materialize.min.css => style.css} | 52 +++++++++++++-----
 .../themes/material/templates/base.html       | 54 +++++++------------
 .../material/templates/gallery-index.html     |  2 +-
 .../themes/material/templates/index.html      | 27 ++++++----
 .../themes/material/templates/menu.html       | 44 +++++----------
 11 files changed, 106 insertions(+), 103 deletions(-)
 rename prosopopee/themes/material/static/css/{styles.css => style-page.css} (98%)
 rename prosopopee/themes/material/static/css/{gallery-dark-materialize.min.css => style.css} (92%)

diff --git a/prosopopee/themes/exposure/static/css/style-page.css b/prosopopee/themes/exposure/static/css/style-page.css
index 6567993..bda2447 100644
--- a/prosopopee/themes/exposure/static/css/style-page.css
+++ b/prosopopee/themes/exposure/static/css/style-page.css
@@ -472,3 +472,8 @@ blockquote:after {
 blockquote p {
   display: inline;
 }
+
+video.responsive-video {
+  max-width: 100%;
+  height: auto;
+}
diff --git a/prosopopee/themes/exposure/templates/sections/bordered-picture.html b/prosopopee/themes/exposure/templates/sections/bordered-picture.html
index 7f7e446..c88f415 100644
--- a/prosopopee/themes/exposure/templates/sections/bordered-picture.html
+++ b/prosopopee/themes/exposure/templates/sections/bordered-picture.html
@@ -9,7 +9,7 @@
   <section class="bordered-picture baguette" style="position: relative;">
     <div class="caption">
       <img class="lazy" data-original="{{ video.generate_thumbnail("2000") }}" src="" alt="">
-      <video class="lazy" id="video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="none" muted>
+      <video class="lazy responsive-video" id="video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="none" muted>
         <source src="{{ video }}.{{ format }}" type="video/{{ format }}">
       </video>
       {% if caption %}
diff --git a/prosopopee/themes/exposure/templates/sections/full-picture.html b/prosopopee/themes/exposure/templates/sections/full-picture.html
index d0a96c9..0e3b8ef 100644
--- a/prosopopee/themes/exposure/templates/sections/full-picture.html
+++ b/prosopopee/themes/exposure/templates/sections/full-picture.html
@@ -21,7 +21,7 @@
     <video autoplay loop muted class="fillWidth">
       <source src="{{ video }}.{{ format }}" type="video/{{ format }}">
     </video>
-    <img class="lazy full-picture" src="{{ video.generate_thumbnail("2000") }}">
+    <img class="lazy full-picture responsive-video" src="{{ video.generate_thumbnail("2000") }}">
   </div>
 </section>
 {% else %}
diff --git a/prosopopee/themes/exposure/templates/sections/pictures-group.html b/prosopopee/themes/exposure/templates/sections/pictures-group.html
index 1a0fa42..8f2ebe9 100644
--- a/prosopopee/themes/exposure/templates/sections/pictures-group.html
+++ b/prosopopee/themes/exposure/templates/sections/pictures-group.html
@@ -12,7 +12,7 @@
         {% set format = settings.ffmpeg.extension %}
         {{ video.copy() }}
         <img class="lazy" data-original="{{ video.generate_thumbnail("600") }}" src="" alt="">
-        <video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
+        <video class="lazy responsive-video" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
           <source src="{{ video }}.{{ format }}" type="video/{{ format }}">
         </video>
         {% if caption %}
diff --git a/prosopopee/themes/material/static/css/materialize.css b/prosopopee/themes/material/static/css/materialize.css
index fd6c4a7..1d6974d 100644
--- a/prosopopee/themes/material/static/css/materialize.css
+++ b/prosopopee/themes/material/static/css/materialize.css
@@ -4311,20 +4311,10 @@ nav .input-field label.active i {
 .navbar-fixed nav {
   position: fixed;
 }
-
-@media only screen and (min-width: 601px) {
-  nav.nav-extended .nav-wrapper {
-    min-height: 64px;
+  nav,nav .nav-wrapper i,nav a.button-collapse,nav a.button-collapse i {
+    height:64px;
+    line-height:64px
   }
-  nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
-    height: 64px;
-    line-height: 64px;
-  }
-  .navbar-fixed {
-    height: 64px;
-  }
-}
-
 @font-face {
   font-family: "Roboto";
   src: local(Roboto Thin), url("../fonts/Roboto-Thin.eot");
diff --git a/prosopopee/themes/material/static/css/styles.css b/prosopopee/themes/material/static/css/style-page.css
similarity index 98%
rename from prosopopee/themes/material/static/css/styles.css
rename to prosopopee/themes/material/static/css/style-page.css
index 62a86c6..1176b1d 100644
--- a/prosopopee/themes/material/static/css/styles.css
+++ b/prosopopee/themes/material/static/css/style-page.css
@@ -61,6 +61,9 @@ main {
     transform: translateY(0);
 }
 
+.caption__overlay h5 {
+  padding-left: 10px;
+}
 
 .caption .card-panel {
     margin: 0;
diff --git a/prosopopee/themes/material/static/css/gallery-dark-materialize.min.css b/prosopopee/themes/material/static/css/style.css
similarity index 92%
rename from prosopopee/themes/material/static/css/gallery-dark-materialize.min.css
rename to prosopopee/themes/material/static/css/style.css
index be5bb02..a4bdaf3 100644
--- a/prosopopee/themes/material/static/css/gallery-dark-materialize.min.css
+++ b/prosopopee/themes/material/static/css/style.css
@@ -116,9 +116,10 @@ nav .nav-wrapper {
 	height:100%
 }
 @media only screen and (min-width: 993px) {
-	nav a.button-collapse {
-		display:none
-	}
+  nav a.button-collapse {
+    display: unset !important;
+    margin-left: 0px;
+  }
 }
 nav .button-collapse {
 	float:left;
@@ -150,15 +151,6 @@ nav .brand-logo i,nav .brand-logo i.material-icons {
 	float:left;
 	margin-right:15px
 }
-@media only screen and (min-width: 601px) {
-	nav.nav-extended .nav-wrapper {
-		min-height:64px
-	}
-	nav,nav .nav-wrapper i,nav a.button-collapse,nav a.button-collapse i {
-		height:64px;
-		line-height:64px
-	}
-}
 @font-face {
 	font-family:"Roboto";
 	src:local(Roboto Thin),url("../fonts/Roboto-Thin.eot");
@@ -504,3 +496,39 @@ nav .nav-header {
 	}
 }
 
+.gallery-title {
+  color: white;
+  width: 100%;
+  position: absolute;
+  top: initial;
+  bottom: 0px;
+  text-align: center;
+  z-index: 3;
+  background: transparent linear-gradient(rgba(255, 255, 255, 0) 0%, transparent 1%, rgba(0, 0, 0, 0.07) 26%, rgba(0, 0, 0, 0.5) 71%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0% 0%;
+  padding: 20% 0 10px 0;
+}
+
+.gallery-title > h2 {
+  text-transform: uppercase;
+  margin-bottom: .2em;
+  letter-spacing: 2px;
+  font-size: 1.7vw;
+}
+
+.gallery-title > h3 {
+  font-style: italic;
+  margin-top: 0;
+  margin-bottom: .7em;
+  font-weight: normal;
+  font-size: 17px;
+}
+
+.gallery-datetime {
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  font-size: 11px;
+}
+
+.brand-logo p {
+  margin-top: 7px;
+}
diff --git a/prosopopee/themes/material/templates/base.html b/prosopopee/themes/material/templates/base.html
index d51eb67..a86f2ea 100644
--- a/prosopopee/themes/material/templates/base.html
+++ b/prosopopee/themes/material/templates/base.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="UTF-8">
-		{% block css %}
-		{% endblock %}
-		{% if settings.rss -%}
-		<link rel="alternate" type="application/rss+xml" title="{{ settings.title }}" href="{{ settings.url }}/feed.xml" />
-		{% endif -%}
-		<!--Let browser know website is optimized for mobile-->
-		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-		<title>{{ settings.title }}</title>
-	</head>
+  <head>
+    <meta charset="UTF-8">
+    {% block css %}
+    {% endblock %}
+    {% if settings.rss -%}
+    <link rel="alternate" type="application/rss+xml" title="{{ settings.title }}" href="{{ settings.url }}/feed.xml" />
+    {% endif -%}
+    <!--Let browser know website is optimized for mobile-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>{{ settings.title }}</title>
+  </head>
 
-	<body>
+  <body>
 
-		<!-- Navbar and Header -->
-		<nav class="nav-extended nav-full-header z-depth-0 blue-grey darken-3">
-			<div class="nav-background">
+    <!-- Navbar and Header -->
+    <nav class="nav-extended nav-full-header z-depth-0 blue-grey darken-3">
+      <div class="nav-background">
         {% if settings.cover %}
         {% set image = Image(settings.cover) %}
         {{ image.copy() }}
@@ -24,19 +24,11 @@
         {% else %}
         <div class="ea k"></div>
         {% endif %}
-			</div>
+      </div>
       <div class="nav-wrapper db">
-        <a href="/pages/demo" class="brand-logo"><i class="material-icons">camera</i>{{ settings.title }}</a>
-        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
+        <a href="#" class="brand-logo"><i class="fa fa-camera" aria-hidden="true"></i><p>{{ settings.title }}</p></a>
         {% if settings.menu -%}
         <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
-        <ul class="bt hide-on-med-and-down">
-          <li><a href="/pages/demo">Gallery</a></li>
-          <li class="k"><a href="/pages/dark-theme">Dark Theme</a></li>
-          <li><a href="/pages/blog">Blog</a></li>
-          <li><a href="/pages/docs">Docs</a></li>
-          <li><a class='dropdown-button' href='#' data-activates='feature-dropdown' data-belowOrigin="true" data-constrainWidth="false">Features<i class="material-icons bt">arrow_drop_down</i></a></li>
-        </ul>
         {% endif -%}
       </div>
 
@@ -46,16 +38,10 @@
         </div>
       </div>
     </nav>
-    <ul class="side-nav" id="nav-mobile">
-      <li><a href="/pages/demo"><i class="material-icons">camera</i>Gallery</a></li>
-      <li class="k"><a href="/pages/dark-theme"><i class="material-icons">brightness_3</i>Dark Theme</a></li>
-      <li><a href="/pages/blog"><i class="material-icons">edit</i>Blog</a></li>
-      <li><a href="/pages/docs"><i class="material-icons">school</i>Docs</a></li>
-      <li><a href="/pages/full-header"><i class="material-icons">fullscreen</i>Fullscreen Header</a></li>
-      <li><a href="/pages/horizontal"><i class="material-icons">swap_horiz</i>Horizontal Style</a></li>
-      <li><a href="/pages/no-image"><i class="material-icons">texture</i>No Image Expand</a></li>
-    </ul>
 
+    {% if settings.menu -%}
+    {% include 'menu.html' %}
+    {% endif -%}
     {% block content %}
     {% endblock %}
 
diff --git a/prosopopee/themes/material/templates/gallery-index.html b/prosopopee/themes/material/templates/gallery-index.html
index aaa16f3..407980e 100644
--- a/prosopopee/themes/material/templates/gallery-index.html
+++ b/prosopopee/themes/material/templates/gallery-index.html
@@ -4,7 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="UTF-8">
     <link rel="stylesheet" href="../static/css/materialize.css"/>
-    <link rel="stylesheet" href="../static/css/styles.css">
+    <link rel="stylesheet" href="../static/css/style-page.css">
     <link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css"  media="screen,projection"/>
     <link type="text/css" rel="stylesheet" href="../static/css/panorama_viewer.css"  media="screen,projection"/>
     <link type="text/css" rel="stylesheet" href="../static/css/mediaelementplayer.css"  media="screen,projection"/>
diff --git a/prosopopee/themes/material/templates/index.html b/prosopopee/themes/material/templates/index.html
index e77e8fc..8abed90 100644
--- a/prosopopee/themes/material/templates/index.html
+++ b/prosopopee/themes/material/templates/index.html
@@ -2,8 +2,9 @@
 
 {% block css %}
 <link rel="stylesheet" href="static/css/materialize.css">
-<link rel="stylesheet" href="static/css/gallery-dark-materialize.min.css">
+<link rel="stylesheet" href="static/css/style.css">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link rel="stylesheet" href="static/css/font-awesome.css">
 {% endblock %}
 
 {% block content %}
@@ -22,15 +23,21 @@
           {% set cover = Image(gallery.cover) %}
           {{ cover.copy() }}
           {% endif %}
-          {% if video %}
-          <img class="responsive-img" src="{{ video.generate_thumbnail("400") }}">
-          <video autoplay loop muted class="fillWidth">
-            <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
-          </video>
-          {% set video = "" %}
-          {% else %}
-          <img class="responsive-img" src="{{ cover.generate_thumbnail("x400") }}" alt="placeholder" crossOrigin="anonymous">
-          {% endif %}
+          <div class="gallery-title">
+            <h2>{{ gallery.title }}</h2>
+            {% if gallery.sub_title %}<h3>{{ gallery.sub_title }}</h3>{% endif %}
+            {% if settings.show_date and gallery.date %}<div class="gallery-datetime">{{ gallery.date.strftime("%d %B %Y") }}</div>{% endif %}
+            {% if gallery.tags %}<div class="gallery-tag">IN {% for tag in gallery.tags -%} <span> {{ tag }}</span> {% endfor -%}</div>{% endif %}
+          </div>
+        {% if video %}
+        <img class="responsive-img" src="{{ video.generate_thumbnail("400") }}">
+        <video autoplay loop muted class="fillWidth">
+          <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
+        </video>
+        {% set video = "" %}
+        {% else %}
+        <img class="responsive-img" src="{{ cover.generate_thumbnail("x400") }}" alt="placeholder" crossOrigin="anonymous">
+        {% endif %}
         </a>
       </div>
     </div>
diff --git a/prosopopee/themes/material/templates/menu.html b/prosopopee/themes/material/templates/menu.html
index 2a31a95..cbbf154 100644
--- a/prosopopee/themes/material/templates/menu.html
+++ b/prosopopee/themes/material/templates/menu.html
@@ -1,31 +1,15 @@
-<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-action-view-headline"></i></a>
-<ul class="left hide-on-med-and-down">
-    {%- for line in settings.menu -%}
-    {% set file_name, menu_name = line.items()[0] %}
-    {% if file_name.startswith('http') %}
-    {% set file_name = file_name %}
-    {% elif gallery %}
-    {% set file_name = "../"+file_name %}
-    {%- endif -%}
-    {%- if loop.first -%}
-    <li><a href={{ file_name }} class=first-item-menu>{{ menu_name  }}</a></li>
-    {% else %}
-    <li><a href={{ file_name }} class=item-menu>{{ menu_name }}</a></li>
-    {%- endif -%}
-    {%- endfor -%}
-</ul>
-<ul class="side-nav" id="mobile-demo">
-    {%- for line in settings.menu -%}
-    {% set file_name, menu_name = line.items()[0] %}
-    {% if file_name.startswith('http') %}
-    {% set file_name = file_name %}
-    {% elif gallery %}
-    {% set file_name = "../"+file_name %}
-    {%- endif -%}
-    {%- if loop.first -%}
-    <li><a href={{ file_name }} class=first-item-menu>{{ menu_name  }}</a></li>
-    {% else %}
-    <li><a href={{ file_name }} class=item-menu>{{ menu_name }}</a></li>
-    {%- endif -%}
-    {%- endfor -%}
+<ul class="side-nav" id="nav-mobile">   
+  {%- for line in settings.menu -%}
+  {% set file_name, menu_name = line.items()[0] %}
+  {% if file_name.startswith('http') %}
+  {% set file_name = file_name %}
+  {% elif gallery %}
+  {% set file_name = "../"+file_name %}
+  {%- endif -%}
+  {%- if loop.first -%}
+  <li><a href={{ file_name }} class=first-item-menu>{{ menu_name  }}</a></li>
+  {% else %}
+  <li><a href={{ file_name }} class=item-menu>{{ menu_name }}</a></li>
+  {%- endif -%}
+  {%- endfor -%}
 </ul>