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

update material phase 2

Browse Source
This commit is contained in:
Adrien Beudin 2017-04-28 16:46:31 +02:00
parent 7d06ed2792
commit 7f8942f638
11 changed files with 106 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -472,3 +472,8 @@ blockquote:after {
blockquote p { blockquote p {
display: inline; display: inline;
} }
video.responsive-video {
max-width: 100%;
height: auto;
}

2
prosopopee/themes/exposure/templates/sections/bordered-picture.html
View File

@ -9,7 +9,7 @@
<section class="bordered-picture baguette" style="position: relative;"> <section class="bordered-picture baguette" style="position: relative;">
<div class="caption"> <div class="caption">
<img class="lazy" data-original="{{ video.generate_thumbnail("2000") }}" src="" alt=""> <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 }}"> <source src="{{ video }}.{{ format }}" type="video/{{ format }}">
</video> </video>
{% if caption %} {% if caption %}

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

@ -21,7 +21,7 @@
<video autoplay loop muted class="fillWidth"> <video autoplay loop muted class="fillWidth">
<source src="{{ video }}.{{ format }}" type="video/{{ format }}"> <source src="{{ video }}.{{ format }}" type="video/{{ format }}">
</video> </video>
<img class="lazy full-picture" src="{{ video.generate_thumbnail("2000") }}"> <img class="lazy full-picture responsive-video" src="{{ video.generate_thumbnail("2000") }}">
</div> </div>
</section> </section>
{% else %} {% else %}

2
prosopopee/themes/exposure/templates/sections/pictures-group.html
View File

@ -12,7 +12,7 @@
{% set format = settings.ffmpeg.extension %} {% set format = settings.ffmpeg.extension %}
{{ video.copy() }} {{ video.copy() }}
<img class="lazy" data-original="{{ video.generate_thumbnail("600") }}" src="" alt=""> <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 }}"> <source src="{{ video }}.{{ format }}" type="video/{{ format }}">
</video> </video>
{% if caption %} {% if caption %}

16
prosopopee/themes/material/static/css/materialize.css vendored
View File

@ -4311,20 +4311,10 @@ nav .input-field label.active i {
.navbar-fixed nav { .navbar-fixed nav {
position: fixed; position: fixed;
} }
nav,nav .nav-wrapper i,nav a.button-collapse,nav a.button-collapse i {
@media only screen and (min-width: 601px) { height:64px;
nav.nav-extended .nav-wrapper { line-height:64px
min-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-face {
font-family: "Roboto"; font-family: "Roboto";
src: local(Roboto Thin), url("../fonts/Roboto-Thin.eot"); src: local(Roboto Thin), url("../fonts/Roboto-Thin.eot");

3
prosopopee/themes/material/static/css/styles.css → prosopopee/themes/material/static/css/style-page.css
View File

@ -61,6 +61,9 @@ main {
transform: translateY(0); transform: translateY(0);
} }
.caption__overlay h5 {
padding-left: 10px;
}
.caption .card-panel { .caption .card-panel {
margin: 0; margin: 0;

52
prosopopee/themes/material/static/css/gallery-dark-materialize.min.css → prosopopee/themes/material/static/css/style.css
View File

@ -116,9 +116,10 @@ nav .nav-wrapper {
height:100% height:100%
} }
@media only screen and (min-width: 993px) { @media only screen and (min-width: 993px) {
nav a.button-collapse { nav a.button-collapse {
display:none display: unset !important;
} margin-left: 0px;
}
} }
nav .button-collapse { nav .button-collapse {
float:left; float:left;
@ -150,15 +151,6 @@ nav .brand-logo i,nav .brand-logo i.material-icons {
float:left; float:left;
margin-right:15px 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-face {
font-family:"Roboto"; font-family:"Roboto";
src:local(Roboto Thin),url("../fonts/Roboto-Thin.eot"); 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;
}

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

@ -1,22 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
{% block css %} {% block css %}
{% endblock %} {% endblock %}
{% if settings.rss -%} {% if settings.rss -%}
<link rel="alternate" type="application/rss+xml" title="{{ settings.title }}" href="{{ settings.url }}/feed.xml" /> <link rel="alternate" type="application/rss+xml" title="{{ settings.title }}" href="{{ settings.url }}/feed.xml" />
{% endif -%} {% endif -%}
<!--Let browser know website is optimized for mobile--> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{{ settings.title }}</title> <title>{{ settings.title }}</title>
</head> </head>
<body> <body>
<!-- Navbar and Header --> <!-- Navbar and Header -->
<nav class="nav-extended nav-full-header z-depth-0 blue-grey darken-3"> <nav class="nav-extended nav-full-header z-depth-0 blue-grey darken-3">
<div class="nav-background"> <div class="nav-background">
{% if settings.cover %} {% if settings.cover %}
{% set image = Image(settings.cover) %} {% set image = Image(settings.cover) %}
{{ image.copy() }} {{ image.copy() }}
@ -24,19 +24,11 @@
{% else %} {% else %}
<div class="ea k"></div> <div class="ea k"></div>
{% endif %} {% endif %}
</div> </div>
<div class="nav-wrapper db"> <div class="nav-wrapper db">
<a href="/pages/demo" class="brand-logo"><i class="material-icons">camera</i>{{ settings.title }}</a> <a href="#" class="brand-logo"><i class="fa fa-camera" aria-hidden="true"></i><p>{{ settings.title }}</p></a>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
{% if settings.menu -%} {% if settings.menu -%}
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a> <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 -%} {% endif -%}
</div> </div>
@ -46,16 +38,10 @@
</div> </div>
</div> </div>
</nav> </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 %} {% block content %}
{% endblock %} {% endblock %}

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

@ -4,7 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="../static/css/materialize.css"/> <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/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/panorama_viewer.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="../static/css/mediaelementplayer.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="../static/css/mediaelementplayer.css" media="screen,projection"/>

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

@ -2,8 +2,9 @@
{% block css %} {% block css %}
<link rel="stylesheet" href="static/css/materialize.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 href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="static/css/font-awesome.css">
{% endblock %} {% endblock %}
{% block content %} {% block content %}
@ -22,15 +23,21 @@
{% set cover = Image(gallery.cover) %} {% set cover = Image(gallery.cover) %}
{{ cover.copy() }} {{ cover.copy() }}
{% endif %} {% endif %}
{% if video %} <div class="gallery-title">
<img class="responsive-img" src="{{ video.generate_thumbnail("400") }}"> <h2>{{ gallery.title }}</h2>
<video autoplay loop muted class="fillWidth"> {% if gallery.sub_title %}<h3>{{ gallery.sub_title }}</h3>{% endif %}
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm"> {% if settings.show_date and gallery.date %}<div class="gallery-datetime">{{ gallery.date.strftime("%d %B %Y") }}</div>{% endif %}
</video> {% if gallery.tags %}<div class="gallery-tag">IN {% for tag in gallery.tags -%} <span> {{ tag }}</span> {% endfor -%}</div>{% endif %}
{% set video = "" %} </div>
{% else %} {% if video %}
<img class="responsive-img" src="{{ cover.generate_thumbnail("x400") }}" alt="placeholder" crossOrigin="anonymous"> <img class="responsive-img" src="{{ video.generate_thumbnail("400") }}">
{% endif %} <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> </a>
</div> </div>
</div> </div>

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

@ -1,31 +1,15 @@
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-action-view-headline"></i></a> <ul class="side-nav" id="nav-mobile">
<ul class="left hide-on-med-and-down"> {%- for line in settings.menu -%}
{%- for line in settings.menu -%} {% set file_name, menu_name = line.items()[0] %}
{% set file_name, menu_name = line.items()[0] %} {% if file_name.startswith('http') %}
{% if file_name.startswith('http') %} {% set file_name = file_name %}
{% set file_name = file_name %} {% elif gallery %}
{% elif gallery %} {% set file_name = "../"+file_name %}
{% set file_name = "../"+file_name %} {%- endif -%}
{%- endif -%} {%- if loop.first -%}
{%- if loop.first -%} <li><a href={{ file_name }} class=first-item-menu>{{ menu_name }}</a></li>
<li><a href={{ file_name }} class=first-item-menu>{{ menu_name }}</a></li> {% else %}
{% else %} <li><a href={{ file_name }} class=item-menu>{{ menu_name }}</a></li>
<li><a href={{ file_name }} class=item-menu>{{ menu_name }}</a></li> {%- endif -%}
{%- endif -%} {%- endfor -%}
{%- 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> </ul>