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);
}

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

@ -8,9 +8,9 @@
<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 %}
<div class="post-it {{content['slug']}} {% if content['card'] %} leader-card {%endif%}">
@ -18,6 +18,7 @@
<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']%}
@ -42,9 +43,7 @@
<div class="category">{{content['start']}} {{content['category']}}</div>
<p
class="description {% if content['definition']|length > 200 %} long-text {%endif%}"
>
<p class="description {% if content['definition']|length > 200 %} long-text {%endif%}">
{{content['definition']}}
</p>
@ -78,9 +77,7 @@
</footer>
{%else%}
<p
class="description {% if content['description']|length > 200 %} long-text {%endif%}"
>
<p class="description {% if content['description']|length > 200 %} long-text {%endif%}">
{{content['description']}}
</p>
@ -94,6 +91,5 @@
{%endif%}
</div>
{% endfor %}
</div>
</body>
</html>

Write Preview
Loading…
Cancel
Save