prenex/magcms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #85 from Psycojoker/0.8.1

Browse Source 
0.8.1
This commit is contained in:
abeudin 2018-03-29 11:24:14 +02:00 committed by GitHub
commit 51ec2fa47e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 326 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/changelog.rst
View File

@ -1,6 +1,11 @@
Changelog
=========
0.8.1 (2018-03-28)
* Fix some css error
* Update Material theme
* Add fadeInUp effect in exposure theme
0.8 (2018-02-28)
* Add night mode https://prosopopee.readthedocs.io/en/latest/configuration.html#night_mode

2
docs/configuration.rst
View File

@ -142,7 +142,7 @@ If you want only light theme you can see below.
Night Mode
~~~~~~~~~~
For enabled the night mode::
For enabled the night mode only available for exposure theme (default theme)::
title: Gallery
settings:

2
prosopopee/prosopopee.py
View File

@ -559,7 +559,7 @@ def build_index(settings, galleries_cover, templates, gallery_path='', sub_index
def main():
arguments = docopt(__doc__, version='0.6')
arguments = docopt(__doc__, version='0.8.1')
settings = get_settings()
front_page_galleries_cover = []

52
prosopopee/themes/exposure/static/css/style-page.css
View File

@ -614,3 +614,55 @@ input:checked + .slider:before {
.slider.round:before {
border-radius: 50%;
}
@keyframes fadeInUp {
from {
transform: translate3d(0,80px,0)
}
to {
transform: translate3d(0,0,0);
opacity: 1
}
}
@-webkit-keyframes fadeInUp {
from {
transform: translate3d(0,80px,0)
}
to {
transform: translate3d(0,0,0);
opacity: 1
}
}
.animated {
animation-delay: 0.5s;
animation-duration: 1s;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: both
}
.animatedFadeInUp {
opacity: 0
}
.fadeInUp {
opacity: 0;
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
}
@media only screen and (max-device-width: 700px) {
.paragraph {
font-size: 3.7vmin !important;
margin-left: 10% !important;
margin-right: 10% !important;
}
.full-picture h2 {
font-size: 3.2vw !important;
}
}

19
prosopopee/themes/exposure/static/css/style.css
View File

@ -183,6 +183,10 @@ nav {
line-height: 56px;
}
body.night nav {
background-color: #061F2F;;
}
nav .nav-wrapper {
position: relative;
height: 100%;
@ -231,7 +235,7 @@ nav ul li > a.item-menu::before {
margin-right: 22px;
font-size: 18px;
line-height: 1;
color: #ebebeb;
color: #cfcfcf;
}
.gallery-tag {
@ -414,3 +418,16 @@ input:checked + .slider:before {
.slider.round:before {
border-radius: 50%;
}
@media only screen and (max-device-width: 700px) {
.gallery-square {
width: 100% !important;
margin-bottom: -7px !important;
padding-bottom: 70% !important;
}
.gallery-title > h2 {
font-size: 3.7vw;
}
}

8
prosopopee/themes/exposure/templates/menu.html
View File

@ -2,18 +2,20 @@
<div class="nav-wrapper">
<ul>
{% for line in settings.menu %}
{% set file_name, menu_name = line.items()[0] %}
{% set rowloop = loop %}
{% for file_name, menu_name in line.items() %}
{% if file_name.startswith('http') %}
{% set file_name = file_name %}
{% elif gallery %}
{% else %}
{% set file_name = "../"+file_name %}
{% endif %}
{% if loop.first %}
{% if rowloop.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 %}
{% endfor %}
</ul>
</div>
</nav>

18
prosopopee/themes/exposure/templates/page.html
View File

@ -22,5 +22,23 @@
</div>
</a>
</div>
{% 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 %}

4
prosopopee/themes/exposure/templates/sections/full-picture.html
View File

@ -6,7 +6,7 @@
<div class="video-container">
{% if section.text %}
<div class="title-container">
<div class="headline">
<div class="headline animated animatedFadeInUp fadeInUp">
<h1>{{ section.text.title }}</h1>
<h2>{{ section.text.sub_title }}</h2>
{% if section.text.date_end %}
@ -30,7 +30,7 @@
<section class="full-picture" style="background: url('{{ image.generate_thumbnail("x2000") }}') no-repeat {% if section.fixed %} fixed {% else %} scroll {% endif %} center top / cover, url('{{ image.generate_thumbnail("x450") }}') no-repeat {% if section.fixed %} fixed {% else %} scroll {% endif %} center top / cover transparent;">
{% if section.text %}
<div class="picture-text">
<div class="picture-text-column">
<div class="picture-text-column animated animatedFadeInUp fadeInUp">
<h1>{{ section.text.title }}</h1>
<h2>{{ section.text.sub_title }}</h2>
{% if section.text.date_end %}

7
prosopopee/themes/light/templates/sections/author.html
View File

@ -1,7 +1,12 @@
{% if settings.settings.light_mode %}
{% set pathstatic = ".." %}
{% else %}
{% set pathstatic = "." %}
{% endif %}
{% set image = Image(section.image) %}
{{ image.copy() }}
<div class="author-meta">
<img src=../{{ image.generate_thumbnail("200x200") }} alt="" class="circle">
<img src="{{ pathstatic }}/{{ image.generate_thumbnail("200x200") }}" alt="" class="circle">
<div>
<span class=author-info>Story by
<h4>{{ section.name }}</h4>

19
prosopopee/themes/material/static/css/style-page.css
View File

@ -312,3 +312,22 @@ input:checked + .slider-btn:before {
.slider-btn.round:before {
border-radius: 50%;
}
@media only screen and (max-device-width: 700px) {
h2 {
font-size: 2.56rem !important;
}
.parallax img {
min-width: 200% !important;
}
.gallery-title > h2 {
font-size: 3.7vw !important;
}
.parallax-container h2 {
font-size: 4.2vw !important;
}
.audio-player h2 {
font-size: 14px !important;
}
}

103
prosopopee/themes/material/static/css/style.css
View File

@ -376,7 +376,6 @@ html,body {
height:100%
}
body {
background-color:#37474f;
font-family:"Lato", sans-serif
}
ul {
@ -440,21 +439,22 @@ nav .nav-background .ea {
bottom:0;
-webkit-transform:none;
transform:none;
background-repeat:repeat
background-repeat:repeat;
}
nav .nav-header {
clear:both;
padding:40px 0
padding:40px 0;
}
nav .nav-header h1 {
font-size:56px;
font-weight:300
font-weight:300;
text-transform: uppercase;
}
.b {
position:relative
}
.b .d {
padding:0;
margin-top: 20px;
}
.b .gallery-expand .gallery-curve-wrapper {
cursor:pointer;
@ -532,3 +532,96 @@ nav .nav-header {
.brand-logo p {
margin-top: 7px;
}
.img {
position: relative;
float: left;
width: 100px;
height: 100px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.galleries-line {
width: 100%;
height: 100%;
margin-bottom: -7px; /* YOLO */
}
.covers-1 .gallery-square {
width: 100%;
height: 100%;
margin: auto;
padding-bottom: 47%;
position: relative;
}
.covers-2 .gallery-square {
width: 50%;
height: 100%;
margin: 0 0 0;
padding-bottom: 47%;
position: relative;
display: inline-block;
}
.covers-3 .gallery-square {
width: 33.333333333%;
height: 100%;
margin: 0;
padding-bottom: 30%;
position: relative;
display: inline-block;
}
.gallery-square > a {
position: absolute;
top: 0px;
left: 0px;
z-index: 555;
width: 100%;
height: 100%;
}
.gallery-cover {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
overflow: hidden;
}
.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;
}
@media only screen and (max-device-width: 700px) {
.gallery-square {
width: 100% !important;
margin-bottom: -7px !important;
padding-bottom: 70% !important;
}
h2 {
font-size: 2.56rem !important;
}
.gallery-title > h2 {
font-size: 3.7vw !important;
}
.parallax-container h2 {
font-size: 4.2vw !important;
}
}

11
prosopopee/themes/material/templates/base.html
View File

@ -17,18 +17,12 @@
<!-- 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() }}
<div class="ea k" style="background-image: url('{{ image.generate_thumbnail("x1080") }}');"></div>
{% else %}
<div class="ea k"></div>
{% endif %}
</div>
<div class="nav-wrapper db">
<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>
{% include 'menu.html' %}
{% endif -%}
</div>
@ -39,9 +33,6 @@
</div>
</nav>
{% if settings.menu -%}
{% include 'menu.html' %}
{% endif -%}
{% block content %}
{% endblock %}

29
prosopopee/themes/material/templates/gallery-index.html
View File

@ -29,23 +29,13 @@
<title>{{ gallery.title }} · {{ settings.title }}</title>
</head>
<body>
<body class="night">
<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 %}
{% if settings.share %}
{% include 'share.html' -%}
{% endif %}
@ -66,23 +56,6 @@
<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();
});

64
prosopopee/themes/material/templates/index.html
View File

@ -5,54 +5,50 @@
<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">
{% if settings.custom_css %}
<link type="text/css" rel="stylesheet" href="static/css/custom.css" media="screen,projection"/>
{% endif %}
{% endblock %}
{% block content %}
<!-- Gallery -->
<div id="portfolio" class="cx gray">
<div class="b e">
{% for galleries_line in galleries|reverse|batch(1)|reverse %}
{% for gallery in galleries_line|reverse %}
<div class="d hx hf gu gallery-item gallery-expand ce polygon">
<div class="gallery-curve-wrapper">
<a href="{{ gallery.link }}" class="gallery-cover gray">
{% if gallery.cover_type == "video" %}
{% set video = Video(gallery.cover) %}
{{ video.copy() }}
{% else %}
{% set cover = Image(gallery.cover) %}
{{ cover.copy() }}
{% 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") }}">
<div class="galleries-grid">
{% for galleries_line in galleries|reverse|batch(3)|reverse %}
<div class="galleries-line covers-{{ galleries_line|length }}">
{% for gallery in galleries_line|reverse %}<!-- comment tricks against space between inline-block
--><div class="gallery-square">
<a href="{{ gallery.link }}">
<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>
</a>
{% if gallery.cover_type == "video" %}
{% set video = Video(gallery.cover) %}
{{ video.copy() }}
<div class="gallery-cover">
<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>
<img class="fillWidth" alt="" src="{{ video.generate_thumbnail("900") }}">
</div>
</div>
{% endfor %}
{% endfor %}
{% else %}
{% set cover = Image(gallery.cover) %}
{{ cover.copy() }}
<div class="gallery-cover" style="background-image: url('{{ cover.generate_thumbnail("x900") }}'), url('{{ cover.generate_thumbnail("x150") }}');"></div>
{% endif %}
</div><!-- comment tricks against space between inline-block
-->{% endfor %}
</div>
{% endfor %}
</div>
<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>
<script type="text/javascript" charset="utf-8">
$('.button-collapse').sideNav();
$(document).ready(function(){
$('.scrollspy').scrollSpy();
$(".dropdown-trigger").dropdown();
});
</script>
{% endblock %}

37
prosopopee/themes/material/templates/menu.html
View File

@ -1,15 +1,30 @@
<ul class="side-nav" id="nav-mobile">
{%- for line in settings.menu -%}
{% set file_name, menu_name = line.items()[0] %}
<ul id="dropdown1" class="dropdown-content">
{% for line in settings.menu %}
{% set rowloop = loop %}
{% for file_name, menu_name in line.items() %}
{% 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 -%}
{% set file_name = "../"+file_name %}
{% endif %}
<li><a href={{ file_name }}>{{ menu_name }}</a></li>
{% endfor %}
{% endfor %}
</ul>
<ul class="bt hide-on-med-and-down" style="float: right !important;">
{% for line in settings.menu %}
{% set rowloop = loop %}
{% for file_name, menu_name in line.items() %}
{% if file_name.startswith('http') %}
{% set file_name = file_name %}
{% else %}
{% set file_name = "../"+file_name %}
{% endif %}
<li><a href={{ file_name }}>{{ menu_name }}</a></li>
{% endfor %}
{% endfor %}
</ul>
<ul class="bt show-on-med-and-down" style="float: right !important;">
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1"><i class="material-icons right">arrow_drop_down</i></a></li>
</ul>

70
prosopopee/themes/material/templates/page.html
View File

@ -1,33 +1,47 @@
{% extends "base.html" %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../static/css/materialize.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">
{% if settings.custom_css %}
<link type="text/css" rel="stylesheet" href="static/css/custom.css" media="screen,projection"/>
{% endif %}
{% 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 }} · {{ gallery.title }}</title>
</head>
{% block css %}
<link rel="stylesheet" href="../static/css/materialize.css">
<link rel="stylesheet" href="../static/css/styles.css">
{% endblock %}
<body class="night">
{% block content %}
<div class="container">
<h2>{{ gallery.title }}</h2>
</div>
<!-- Navbar and Header -->
<nav class="nav-extended nav-full-header z-depth-0 blue-grey darken-3">
<div class="nav-background">
<div class="ea k"></div>
</div>
<div class="nav-wrapper db">
<a href="../" class="brand-logo"><i class="fa fa-camera" aria-hidden="true"></i><p>{{ settings.title }}</p></a>
{% if settings.menu -%}
{% include 'menu.html' %}
{% endif -%}
</div>
{% for section in gallery.sections %}
{% include "sections/" + section.type + ".html" %}
{% endfor %}
<div class="nav-header valign-wrapper">
<div class="de">
<h1>{{ gallery.title }}</h1>
</div>
</div>
</nav>
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a href="../" class="btn-floating btn-large red">
<i class="mdi-action-home"></i>
</a>
</div>
{% for section in gallery.sections %}
{% include "sections/" + section.type + ".html" %}
{% endfor %}
<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>
<script type="text/javascript" charset="utf-8">
$('.button-collapse').sideNav();
$(document).ready(function(){
$('.scrollspy').scrollSpy();
});
</script>
{% endblock %}
{% include 'footer.html' %}
</body>
</html>

2
setup.py
View File

@ -12,7 +12,7 @@ except ImportError:
setup(name='prosopopee',
version='0.8',
version='0.8.1',
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(),