enable light mode

This commit is contained in:
Adrien Beudin 2016-05-27 11:57:03 +02:00
parent b5085247df
commit b7edcfcb08
11 changed files with 183 additions and 14 deletions

View File

@ -15,6 +15,7 @@ DEFAULTS = {
"share": False,
"settings": {},
"show_date": True,
"light_mode": False,
}
SETTINGS = {
@ -256,6 +257,7 @@ def main():
if theme != "exposure":
templates_dir.append(os.path.join(os.path.split(os.path.realpath(__file__))[0], "themes", "exposure", "templates"))
templates = Environment(loader=FileSystemLoader(templates_dir))
index_template = templates.get_template("index.html")
@ -326,6 +328,35 @@ def main():
link=gallery
).encode("Utf-8"))
if settings["settings"].get("light_mode", True):
print "light mode enable"
if not os.path.exists(os.path.join("build", gallery, "light")):
os.makedirs(os.path.join("build", gallery, "light"))
if os.path.exists(os.path.join(os.getcwd(), "build", gallery, "light", "static")):
shutil.rmtree(os.path.join(os.getcwd(), "build", gallery, "light", "static"))
shutil.copytree(os.path.join(os.path.split(os.path.realpath(__file__))[0], "themes", "light", "static"),
os.path.join(os.getcwd(), "build", gallery, "light","static"))
light_templates_dir = os.path.join(os.path.split(os.path.realpath(__file__))[0], "themes", "light", "templates")
light_templates = Environment(loader=FileSystemLoader(light_templates_dir))
light_gallery_index_template = light_templates.get_template("gallery-index.html")
light_template_to_render = light_gallery_index_template
index_html = open(os.path.join("build", gallery, "light", "index.html"), "w")
index_html.write(light_template_to_render.render(
settings=settings,
gallery=gallery_settings,
Image=Image,
Video=Video,
link=gallery
).encode("Utf-8"))
if settings["rss"]:
feed_xml = open(os.path.join("build", "feed.xml"), "w")

View File

@ -415,3 +415,30 @@ a.google {
}
#slow-notice {
width:300px;
position: absolute;
top:0;
left:50%;
margin-left: -160px;
background-color: #F0DE7D;
text-align: center;
z-index: 999;
padding: 10px;
font-family: sans-serif;
font-size: 12px;
}
#slow-notice a,
#slow-notice .dismiss {
color: #000;
text-decoration: underline;
cursor:pointer;
}
#slow-notice .dismiss-container {
text-align:right;
padding-top:10px;
font-size: 10px;
}

View File

@ -71,6 +71,48 @@ $(function() {
effect : "fadeIn"
});
});
var slowLoad = window.setTimeout( function() {
var html_node = document.getElementsByTagName('html')[0];
var div = document.createElement('div');
div.setAttribute('id', 'slow-notice');
var t1 = document.createTextNode("The website is taking a long time to load.");
var br = document.createElement('br');
var t2 = document.createTextNode("You can switch to the ");
var a = document.createElement('a');
a.setAttribute('href', './light');
a.innerHTML = 'Light Weight Site';
var dismiss = document.createElement('span');
dismiss.innerHTML = '[x] dismiss';
dismiss.setAttribute('class', 'dismiss');
dismiss.onclick = function() {
html_node.removeChild(div);
}
var dismiss_container = document.createElement('div');
dismiss_container.appendChild(dismiss);
dismiss_container.setAttribute('class', 'dismiss-container');
div.appendChild(t1);
div.appendChild(br);
div.appendChild(t2);
div.appendChild(a);
div.appendChild(dismiss_container);
html_node.appendChild(div);
}, 10 );
window.addEventListener( 'load', function() {
try {
window.clearTimeout( slowLoad );
html_node.removeChild(div);
} catch (e){
// that's okay.
}
});
</script>
{% include "footer.html" %}

View File

@ -3,8 +3,8 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="../static/css/fonts.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="../static/css/style-page.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="./static/css/fonts.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="./static/css/style-page.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@ -23,8 +23,8 @@
<div class="back-to-home">
<hr>
<a href="../">
<div id="logo" src="./../static/img/logo.svg">
<a href="../../">
<div id="logo" src="./static/img/logo.svg">
HOME
</div>
</a>

View File

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

View File

@ -8,13 +8,13 @@
{% endif %}
{% if video %}
<section class="bordered-picture">
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("800") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
<video class="lazy" id="video" poster="../{{ video.generate_thumbnail("800") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<source src="../{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
</video>
</section>
{% else %}
<section class="bordered-picture">
<img src="{{ image.generate_thumbnail("x800") }}" alt="{% if caption %}{{ caption }}{% endif %}">
<img src="../{{ image.generate_thumbnail("x800") }}" alt="{% if caption %}{{ caption }}{% endif %}">
</section>
{% endif %}

View File

@ -9,10 +9,10 @@
<div class="image">
{% if video %}
<video autoplay loop muted class="fillWidth">
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
<source src="../{{ video }}" type="video/webm" data-source="../{{ video }}" data-format="vp8" data-extension="webm">
</video>
{% else %}
<img src="{{ image.generate_thumbnail("x800") }}">
<img src="../{{ image.generate_thumbnail("x800") }}">
{% endif %}
</div>
{% if section.text %}

View File

@ -1,5 +1,5 @@
{% set image = Image(section.image) %}
{{ image.copy() }}
<section class="panorama">
<img src="{{ image.generate_thumbnail("x800") }}">
<img src="../{{ image.generate_thumbnail("x800") }}">
</section>

View File

@ -12,12 +12,12 @@
{% endif %}
<div class="image">
{% if video %}
<video id="video" poster="{{ video.generate_thumbnail("800") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
<video id="video" poster="../{{ video.generate_thumbnail("800") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
<source src="../{{ video }}" type="video/webm" data-source="../{{ video }}" data-format="vp8" data-extension="webm">
</video>
{% set video = "" %}
{% else %}
<img src="{{ image.generate_thumbnail("x800") }}" alt="{% if caption %}{{ caption }}{% endif %}">
<img src="../{{ image.generate_thumbnail("x800") }}" alt="{% if caption %}{{ caption }}{% endif %}">
{% endif %}
</div>
{% endfor %}

View File

@ -158,3 +158,29 @@ video.fillWidth {
width: 100%;
}
#slow-notice {
width:300px;
position: absolute;
top:0;
left:50%;
margin-left: -160px;
background-color: #F0DE7D;
text-align: center;
z-index: 999;
padding: 10px;
font-family: sans-serif;
font-size: 12px;
}
#slow-notice a,
#slow-notice .dismiss {
color: #000;
text-decoration: underline;
cursor:pointer;
}
#slow-notice .dismiss-container {
text-align:right;
padding-top:10px;
font-size: 10px;
}

View File

@ -77,6 +77,49 @@ $(function() {
});
});
var slowLoad = window.setTimeout( function() {
var html_node = document.getElementsByTagName('html')[0];
var div = document.createElement('div');
div.setAttribute('id', 'slow-notice');
var t1 = document.createTextNode("The website is taking a long time to load.");
var br = document.createElement('br');
var t2 = document.createTextNode("You can switch to the ");
var a = document.createElement('a');
a.setAttribute('href', './light');
a.innerHTML = 'Light Weight Site';
var dismiss = document.createElement('span');
dismiss.innerHTML = '[x] dismiss';
dismiss.setAttribute('class', 'dismiss');
dismiss.onclick = function() {
html_node.removeChild(div);
}
var dismiss_container = document.createElement('div');
dismiss_container.appendChild(dismiss);
dismiss_container.setAttribute('class', 'dismiss-container');
div.appendChild(t1);
div.appendChild(br);
div.appendChild(t2);
div.appendChild(a);
div.appendChild(dismiss_container);
html_node.appendChild(div);
}, 10 );
window.addEventListener( 'load', function() {
try {
window.clearTimeout( slowLoad );
html_node.removeChild(div);
} catch (e){
// that's okay.
}
});
$(".button-collapse").sideNav();
</script>
</main>