kamo
/
postit
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

bleeding the images

Browse Source
master
km0 2 years ago
parent 81008acfb9
commit 50cebc445c
4 changed files with 80 additions and 76 deletions
Show Stats Download Patch File Download Diff File

2
postit/static/contents

@ -1 +1 @@
Subproject commit 10ecbff65c004a9593ec92ba5e66cd0a870dfdcd
Subproject commit 562939fbe79e6b3a2200d127add45a40b03a1e87

4
postit/static/css/postit.css
Unescape Escape View File

@ -20,10 +20,6 @@ body {
box-sizing: border-box;
}
.container {
font-size: 0;
}
.post-it {
position: relative;
vertical-align: middle;

12
postit/static/js/bleed.js
Unescape Escape View File

@ -0,0 +1,12 @@
// Wait for Flask, Jinja2, and Paged.js to do their things
setTimeout(getImages, 2500);
function getImages() {
const images = document.querySelectorAll("[data-image]");
Array.from(images).forEach((img) => moveImage(img));
}
function moveImage(img) {
let parent = img.closest(".pagedjs_sheet");
parent.prepend(img);
}

138
postit/templates/postit-single.html
Unescape Escape View File

@ -8,92 +8,88 @@
<link rel="stylesheet" href="{{url_for('static', filename='css/postit.css')}}" />
<link rel="stylesheet" href="{{url_for('static', filename='css/contents.css')}}" />
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<script src="{{url_for('static', filename='js/bleed.js')}}" defer></script>
</head>
<body>
<div class="container">
{% for content in contents %}
{% for content in contents %}
<div class="post-it {{content['slug']}} {% if content['card'] %} leader-card {%endif%}">
{%if content['img'] %}
<img
src="{{url_for('static', filename='contents/' + content['slug'] + '/' + content['img'] )}}"
alt="{{content['description']}}"
/>
<figcaption>{{content['description']}}</figcaption>
{%elif content['card']%}
<div class="post-it {{content['slug']}} {% if content['card'] %} leader-card {%endif%}">
{%if content['img'] %}
<img
src="{{url_for('static', filename='contents/' + content['slug'] + '/' + content['img'] )}}"
alt="{{content['description']}}"
data-image="{{url_for('static', filename='contents/' + content['slug'] + '/' + content['img'] )}}"
/>
<figcaption>{{content['description']}}</figcaption>
{%elif content['card']%}
<div class="card">{{content['card']}}</div>
<div class="quote">{{content['quote']}}</div>
<dl>
<dt>Motivation</dt>
<dd>{{content['motivation']}}</dd>
<div class="card">{{content['card']}}</div>
<div class="quote">{{content['quote']}}</div>
<dl>
<dt>Motivation</dt>
<dd>{{content['motivation']}}</dd>
<dt>Empathy</dt>
<dd>{{content['empathy']}}</dd>
<dt>Empathy</dt>
<dd>{{content['empathy']}}</dd>
<dt>Vision</dt>
<dd>{{content['vision']}}</dd>
<dt>Vision</dt>
<dd>{{content['vision']}}</dd>
<dt>Positivity</dt>
<dd>{{content['positivity']}}</dd>
</dl>
<dt>Positivity</dt>
<dd>{{content['positivity']}}</dd>
</dl>
{%elif content['definition']%}
{%elif content['definition']%}
<div class="category">{{content['start']}} {{content['category']}}</div>
<div class="category">{{content['start']}} {{content['category']}}</div>
<p
class="description {% if content['definition']|length > 200 %} long-text {%endif%}"
>
{{content['definition']}}
</p>
<p class="description {% if content['definition']|length > 200 %} long-text {%endif%}">
{{content['definition']}}
</p>
<footer>
<h2 class="title">{{content['title']}}</h2>
<span
class="progress-bar"
style="width: {{ 100 / contents|length * loop.index}}%"
></span>
</footer>
<footer>
<h2 class="title">{{content['title']}}</h2>
<span
class="progress-bar"
style="width: {{ 100 / contents|length * loop.index}}%"
></span>
</footer>
{%elif content['type'] == 'mimic-colophon'%}
{%elif content['type'] == 'mimic-colophon'%}
<div class="description">
<div class="colophon">{{content['original']}}</div>
<div>{{content['original-credits']}}</div>
<div class="action">{{content['original-action']}}</div>
<div>{{content['original-date']}}</div>
<br />
<div class="colophon">{{content['current']}}</div>
<div>{{content['current-credits']}}</div>
<code>{{content['current-action']}}</code>
<div>{{content['current-date']}}</div>
</div>
<footer>
<h2 class="title">{{content['title']}}</h2>
<span
class="progress-bar"
style="width: {{ 100 / contents|length * loop.index}}%"
></span>
</footer>
{%else%}
<div class="description">
<div class="colophon">{{content['original']}}</div>
<div>{{content['original-credits']}}</div>
<div class="action">{{content['original-action']}}</div>
<div>{{content['original-date']}}</div>
<br />
<div class="colophon">{{content['current']}}</div>
<div>{{content['current-credits']}}</div>
<code>{{content['current-action']}}</code>
<div>{{content['current-date']}}</div>
</div>
<footer>
<h2 class="title">{{content['title']}}</h2>
<span
class="progress-bar"
style="width: {{ 100 / contents|length * loop.index}}%"
></span>
</footer>
{%else%}
<p
class="description {% if content['description']|length > 200 %} long-text {%endif%}"
>
{{content['description']}}
</p>
<p class="description {% if content['description']|length > 200 %} long-text {%endif%}">
{{content['description']}}
</p>
<footer>
<h2 class="title">{{content['title']}}</h2>
<span
class="progress-bar"
style="width: {{ 100 / contents|length * loop.index}}%"
></span>
</footer>
{%endif%}
</div>
{% endfor %}
<footer>
<h2 class="title">{{content['title']}}</h2>
<span
class="progress-bar"
style="width: {{ 100 / contents|length * loop.index}}%"
></span>
</footer>
{%endif%}
</div>
{% endfor %}
</body>
</html>

Write Preview
Loading…
Cancel
Save