Merge pull request #82 from Psycojoker/0.8

Add night mode

README.md

@@ -9,16 +9,17 @@ Prosopopee. Static site generator for your story.
 ## Features
 
  * Thumbnails & multiple resolutions for fast previews (JPEG progressive).
- * Videos support
+ * Videos support.
  * Mobile friendly.
  * Multi level gallery.
  * Support themes.
  * Password access.
- * Image lazy loading
+ * Image lazy loading.
+ * Night Mode.
+ * Hackable.
  
- ## TODO
+## TODO
  
- * Night Mode
  * More sections
  
  

docs/changelog.rst

@@ -1,6 +1,11 @@
 Changelog
 =========
 
+0.8 (unreleased)
+
+ * Add night mode https://prosopopee.readthedocs.io/en/latest/configuration.html#night_mode
+ * fix some bugs
+
 0.7 (2017-10-04)
 
  * Add password access (based on https://robinmoisson.github.io/staticrypt/)

docs/configuration.rst

@@ -139,6 +139,16 @@ For access to this light gallery, add /light in the url of the gallery.
 
 If you want only light theme you can see below.
 
+Night Mode
+~~~~~~~~~~
+
+For enabled the night mode::
+
+  title: Gallery
+  settings:
+    night_mode: true
+
+After that you will can choose dark theme or light theme during visiting the website.
 
 Themes
 ~~~~~~

prosopopee/themes/exposure/static/css/encrypt.css

@@ -90,4 +90,121 @@ footer a {
   font-family: 'montserrat', sans-serif;
   color: #111;
 }
+body.night {
+    background-color: #061F2F;
+    color: #d3d4d4;
+}
 
+body.night footer {
+  background-color: #0f1b29;
+  color: #fff;
+}
+
+body.night footer a {
+  color: #fff;
+}
+
+body.night ul.icon a {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
+body.night .back-to-home #logo {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
+body.night a {
+  color: #9CD7F7;
+}
+
+body.night .audio-player {
+  background: #1f3341
+}
+
+body.night #logo {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
+body.night .gallery-header h4 {
+  color: #c1f1f0;
+}
+
+body.night .staticrypt-form {
+  background-color: #061F2F;
+  box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.2), 0 5px 5px 0 rgba(255, 255, 255, 0.2);
+}
+
+body.night .staticrypt-form input {
+  background: #FFF;
+  color: #9CD7F7;
+}
+
+body.night .staticrypt-decrypt-button {
+  background: #1f3341 !important;
+}
+
+.floating-menu {
+  font-family: sans-serif;
+  padding: 5px;;
+  width: 45px;
+  z-index: 556;
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 22px;
+}
+
+.switch input {display:none;}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 15px;
+  width: 15px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(18px);
+  -ms-transform: translateX(18px);
+  transform: translateX(18px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

prosopopee/themes/exposure/static/css/style-page.css

@@ -325,7 +325,6 @@ a.google {
 */
 
 .author-info {
-    color: #ccc;
     font-style: italic;
     font-size: 19px;
 }
@@ -334,7 +333,6 @@ a.google {
     text-transform: uppercase;
     text-align: center;
     font-family: 'crimson', serif;
-    color: black;
     font-style: normal;
     font-weight: bold;
 }
@@ -520,3 +518,99 @@ span.left img, span.right img {
 .clear {
   clear: both;
 }
+
+body.night {
+  background-color: #061F2F;
+  color: #d3d4d4;
+}
+
+body.night footer {
+  background-color: #0f1b29;
+  color: #fff;
+}
+
+body.night footer a {
+  color: #fff;
+}
+
+body.night ul.icon a {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
+body.night .back-to-home #logo {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
+body.night a {
+  color: #9CD7F7;
+}
+
+body.night .audio-player {
+  background: #1f3341
+}
+
+.floating-menu {
+  font-family: sans-serif;
+  padding: 5px;
+  width: 45px;
+  z-index: 556;
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 22px;
+}
+
+.switch input {display:none;}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 15px;
+  width: 15px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(18px);
+  -ms-transform: translateX(18px);
+  transform: translateX(18px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

prosopopee/themes/exposure/static/css/style.css

@@ -21,7 +21,7 @@ a {
 .galleries-line {
     width: 100%;
     height: 100%;
-    margin-bottom: -4px; /* YOLO */
+    margin-bottom: -5px; /* YOLO */
 }
 
 .covers-1 .gallery-square {
@@ -309,3 +309,108 @@ nav ul li > a.item-menu::before {
     font-family: 'montserrat', sans-serif;
     font-weight: bold;
 }
+
+body.night {
+    background-color: #061F2F;
+    color: #d3d4d4;
+}
+
+body.night footer {
+  background-color: #0f1b29;
+  color: #fff;
+}
+
+body.night footer a {
+  color: #fff;
+}
+
+body.night ul.icon a {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
+body.night .back-to-home #logo {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
+body.night a {
+  color: #9CD7F7;
+}
+
+body.night .audio-player {
+  background: #1f3341
+}
+
+body.night #logo {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
+body.night .gallery-header h4 {
+  color: #c1f1f0;
+}
+
+.floating-menu {
+  font-family: sans-serif;
+  padding: 5px;;
+  width: 45px;
+  z-index: 556;
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 22px;
+}
+
+.switch input {display:none;}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 15px;
+  width: 15px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(18px);
+  -ms-transform: translateX(18px);
+  transform: translateX(18px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

prosopopee/themes/exposure/templates/base.html

@@ -12,6 +12,14 @@
     <title>{{ settings.title }}</title>
   </head>
   <body>
+    {% if settings.settings.night_mode %}
+    <div class="floating-menu">
+      <label class="switch">
+        <input type="checkbox" id="toggle-box-checkbox">
+        <span class="slider round"></span>
+      </label>
+    </div>
+    {% endif %}
     <div class="gallery-header">
       {% block logo %}
       {% endblock %}

prosopopee/themes/exposure/templates/encrypted.html

@@ -20,7 +20,16 @@
 
   </head>
   <body id="encrypt-body" class="staticrypt-body">
-    <script type="text/javascript" src="{{ pathstatic }}/static/js/crypto-js.min.js" charset="utf-8"></script>
+    {% if settings.settings.night_mode %}
+    <div class="floating-menu">
+      <label class="switch">
+        <input type="checkbox" id="toggle-box-checkbox">
+        <span class="slider round"></span>
+      </label>
+    </div>
+    {% endif %}
+    <script type="text/javascript" src="{{ pathstatic }}/static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
+    <script type="text/javascript" src="{{ pathstatic }}/static/js/password.min.js" charset="utf-8"></script>
     <script>
 var form = '{{ form }}';
 var encryptedMsg = '{{ ciphertext }}';
@@ -56,6 +65,24 @@ if (sessionStorage.getItem("password")) {
     document.close();
   });
 }
+
+{% if settings.settings.night_mode %}
+if (localStorage.getItem("mode_night") == "true") {
+  $('body').addClass('night');
+  document.getElementById("toggle-box-checkbox").checked = true;
+}
+
+$('#toggle-box-checkbox').on('change', function(){
+  if(this.checked){
+    $('body').addClass('night');
+    localStorage.setItem("mode_night", true);
+  }else{
+    $('body').removeClass('night');
+    localStorage.setItem("mode_night", false);
+  }
+});
+{% endif %}
+
     </script>
   </body>
 </html>

prosopopee/themes/exposure/templates/gallery-index.html

@@ -29,6 +29,14 @@
     <title>{{ gallery.title }} · {{ settings.title }}</title>
   </head>
   <body>
+    {% if settings.settings.night_mode %}
+    <div class="floating-menu">
+      <label class="switch">
+        <input type="checkbox" id="toggle-box-checkbox">
+        <span class="slider round"></span>
+      </label>
+    </div>
+    {% endif %}
     {% for section in gallery.sections %}
     {% include "sections/" + section.type + ".html" %}
     {% endfor %}
@@ -54,8 +62,23 @@
     <script type="text/javascript" src="../static/js/mediaelement-and-player.min.js" charset="utf-8"></script>
     {% endif %}
     <script type="text/javascript">
-$(function() {
+{% if settings.settings.night_mode %}
+if (localStorage.getItem("mode_night") == "true") {
+  $('body').addClass('night');
+  document.getElementById("toggle-box-checkbox").checked = true;
+}
 
+$('#toggle-box-checkbox').on('change', function(){
+  if(this.checked){
+    $('body').addClass('night');
+    localStorage.setItem("mode_night", true);
+  }else{
+    $('body').removeClass('night');
+    localStorage.setItem("mode_night", false);
+  }
+});
+{% endif %}
+$(function() {
   baguetteBox.run(".baguette", {});
 
   {% if gallery.panorama_enabled %}

prosopopee/themes/exposure/templates/index.html

@@ -57,4 +57,23 @@
   {% endfor %}
 </div>
 <p style="visibility: hidden">.</p>
+{% if settings.settings.night_mode %}
+<script type="text/javascript" src="./static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
+<script type="text/javascript">
+if (localStorage.getItem("mode_night") == "true") {
+  $('body').addClass('night');
+  document.getElementById("toggle-box-checkbox").checked = true;
+}
+
+$('#toggle-box-checkbox').on('change', function(){
+  if(this.checked){
+    $('body').addClass('night');
+    localStorage.setItem("mode_night", true);
+  }else{
+    $('body').removeClass('night');
+    localStorage.setItem("mode_night", false);
+  }
+});
+</script>
+{% endif %}
 {% endblock %}

prosopopee/themes/light/templates/encrypted.html

@@ -19,7 +19,7 @@
     <link type="text/css" rel="stylesheet" href="{{ pathstatic }}/static/css/style-page.css"  media="screen,projection"/>
   </head>
   <body class="staticrypt-body">
-  <script type="text/javascript" src="{{ pathstatic }}/static/js/crypto-js.min.js" charset="utf-8"></script>
+  <script type="text/javascript" src="{{ pathstatic }}/static/js/password.min.js" charset="utf-8"></script>
   <script>
 var form = '{{ form }}';
 var encryptedMsg = '{{ ciphertext }}';

prosopopee/themes/material/static/css/style-page.css

@@ -215,3 +215,100 @@ span.right {
 .clear {
   clear: both;
 }
+
+body.night {
+  background-color: #37474f;
+  color: #d3d4d4;
+}
+
+body.night .audio-player {
+  background: #546e7a;
+}
+
+body.night .author a {
+  color: #039be5 !important;
+}
+
+blockquote {
+  font-size: 22px;
+  font-style: italic;
+  color: #8a8989;
+}
+
+.btn-xlarge {
+  width: 150px;
+  height: 150px;
+}
+
+.btn-xlarge i {
+  font-size: 9.6rem;
+  line-height: 150px;
+}
+
+.home {
+  padding-bottom: 50px;
+}
+
+.floating-menu {
+  font-family: sans-serif;
+  padding: 0px;
+  width: 45px;
+  z-index: 556;
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+}
+
+.switch-btn {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 22px;
+}
+
+.switch-btn input {display:none;}
+
+.slider-btn {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider-btn:before {
+  position: absolute;
+  content: "";
+  height: 15px;
+  width: 15px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+}
+
+input:checked + .slider-btn {
+  background-color: #2196F3;
+}
+
+input:focus + .slider-btn {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider-btn:before {
+  -webkit-transform: translateX(18px);
+  -ms-transform: translateX(18px);
+  transform: translateX(18px);
+}
+
+/* Rounded sliders */
+.slider-btn.round {
+  border-radius: 34px;
+}
+
+.slider-btn.round:before {
+  border-radius: 50%;
+}

prosopopee/themes/material/templates/encrypted.html

@@ -20,7 +20,7 @@
     <link type="text/css" rel="stylesheet" href="{{ pathstatic }}/static/css/materialize.css"  media="screen,projection"/>
   </head>
   <body class="staticrypt-body">
-  <script type="text/javascript" src="{{ pathstatic }}/static/js/crypto-js.min.js" charset="utf-8"></script>
+  <script type="text/javascript" src="{{ pathstatic }}/static/js/password.min.js" charset="utf-8"></script>
   <script>
 var form = '{{ form }}';
 var encryptedMsg = '{{ ciphertext }}';

prosopopee/themes/material/templates/gallery-index.html

@@ -32,6 +32,15 @@
   <body>
     <main>
 
+    {% if settings.settings.night_mode %}
+    <div class="floating-menu">
+      <label class="switch-btn">
+        <input type="checkbox" id="toggle-box-checkbox">
+        <span class="slider-btn round"></span>
+      </label>
+    </div>
+    {% endif %}
+
     {% for section in gallery.sections %}
     {% include "sections/" + section.type + ".html" %}
     {% endfor %}
@@ -39,13 +48,12 @@
 
     {% if settings.share %}
     {% include 'share.html' -%}
-    {% else -%}
+    {% endif %}
-    <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
+    <div class="container home center-align">
-      <a href="../" class="btn-floating btn-large red">
+      <a href="../" class="btn-floating btn-xlarge blue-grey darken-1">
         <i class="fa fa-home"></i>
       </a>
     </div>
-    {% endif %}
 
     <script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
     <script type="text/javascript" src="../static/js/materialize.min.js" charset="utf-8"></script>
@@ -58,6 +66,23 @@
     <script type="text/javascript" src="../static/js/mediaelement-and-player.min.js" charset="utf-8"></script>
     {% endif %}
     <script type="text/javascript" charset="utf-8">
+{% if settings.settings.night_mode %}
+if (localStorage.getItem("mode_night") == "true") {
+  $('body').addClass('night');
+  document.getElementById("toggle-box-checkbox").checked = true;
+}
+
+$('#toggle-box-checkbox').on('change', function(){
+  if(this.checked){
+    $('body').addClass('night');
+    localStorage.setItem("mode_night", true);
+  }else{
+    $('body').removeClass('night');
+    localStorage.setItem("mode_night", false);
+  }
+});
+{% endif %}
+
 $(document).ready(function(){
   $('.parallax').parallax();
 });    

prosopopee/themes/material/templates/share.html

@@ -1,24 +1,9 @@
 {% set absolute_url = settings.url + "/" + link -%}
-<div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px;">
+<div class="container home center-align">
-    <a class="btn-floating btn-large red">
+  <p>Share this story</p>
-        <i class="fa fa-bars"></i>
-    </a>
-    <ul>
-        <li>
-            <a href="../" class="btn-floating btn-large red"><i class="fa fa-home"></i></a>
-        </li>
-        <li>
     <a class="btn-floating grey lighten-3" href="https://twitter.com/share?text={{ gallery.name }}&url={{absolute_url}}{%if gallery.tags %}&hashtags={% for tag in gallery.tags -%}{{ tag }}{% if not loop.lirst and not loop.last %},{% endif %}{% endfor -%}{% endif -%}"  target="_blank"><i class="fa fa-twitter-square grey-text"></i></a>
-        </li>
-        <li>
     <a class="btn-floating grey lighten-3" href="http://www.facebook.com/share.php?u={{absolute_url}}" target="_blank"><i class="fa fa-facebook-official grey-text"></i>
-</a>
+    </a>
-        </li>
-        <li>
     <a class="btn-floating grey lighten-3" href="http://www.pinterest.com/pin/create/button/?url={{absolute_url}}" target="_blank"><i class="fa fa-pinterest-square grey-text"></i></a>
-        </li>
-        <li>
     <a class="btn-floating grey lighten-3" href="https://plus.google.com/share?url={{absolute_url}}" target="_blank"><i class="fa fa-google-plus-square grey-text"></i></a>
-        </li>
-    </ul>
 </div>

setup.py

@@ -12,7 +12,7 @@ except ImportError:
 
 
 setup(name='prosopopee',
-      version='0.7',
+      version='0.8',
       description='A static website generator that allows you to tell a story with your pictures',
       author='Laurent Peuch',
       long_description=read_md('README.md') + "\n\n\n" + open('docs/changelog.rst').read(),