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 {
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;">
<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 %}

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

@ -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 %}

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

@ -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 %}

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

@ -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");

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);
}
.caption__overlay h5 {
padding-left: 10px;
}
.caption .card-panel {
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%
}
@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;
}

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

@ -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 %}

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 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"/>

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

@ -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>

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="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>