Balotta/gancio-flyers
12
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

minor style

Browse source
This commit is contained in:
romo 2023-10-17 07:56:06 +02:00
parent f46e456b8f
commit 30f9112422
3 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/flyers/asymmetric/style.css
View file

@ -1,6 +1,6 @@
.eventcol { .eventcol {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 3mm; gap: 3mm;
height: fit-content; height: fit-content;
/*! max-height: 350mm; */ /*! max-height: 350mm; */
@ -11,7 +11,7 @@
max-height: fit-content; max-height: fit-content;
min-content: 40mm; min-content: 40mm;
max-content: 50mm; max-content: 50mm;
border: 1px solid rgb(253, 140, 140); /* border: 1px solid rgb(253, 140, 140); */
overflow: auto; overflow: auto;
} }
.flyer { .flyer {

1
static/flyers/simple/style.css
View file

@ -43,6 +43,7 @@ h3 {
#events { #events {
display: grid; display: grid;
/* grid-template-columns: 33% 33% 33%; */
grid-template-columns: auto auto auto; grid-template-columns: auto auto auto;
grid-gap: 1.5em; grid-gap: 1.5em;
border: 1px dotted black; border: 1px dotted black;

13
templates/flyers/asymmetric.html
View file

@ -2,11 +2,10 @@
<html lang="it"> <html lang="it">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Balotta - sito in manutenzione</title> <title>Balotta cartacea</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ url_for('static', filename='flyers/asymmetric/style.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='flyers/asymmetric/style.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='flyers/asymmetric/paper.css') }} "> <link rel="stylesheet" href="{{ url_for('static', filename='flyers/asymmetric/paper.css') }} ">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head> </head>
<body class="A3 center"> <body class="A3 center">
@ -16,7 +15,7 @@
</div> </div>
<div class="titolo center"> <div class="titolo center">
<h1>Balotta</h1> <h1>Balotta</h1>
<div class="subtitle">Agenda condivisa per Bolognano</div> <div class="subtitle">Agenda condivisa per Bologna</div>
</div> </div>
<div class="qrcode"> <div class="qrcode">
<img src="{{ url_for('static', filename='qr-code.png') }}" alt=""> <img src="{{ url_for('static', filename='qr-code.png') }}" alt="">
@ -28,7 +27,7 @@
<div class="eventcol"> <div class="eventcol">
{% for row in (0, 1, 2, 3) %} {% for row in (0, 1, 2, 3) %}
{% set event = events[column+(3*row)] %} {% set event = events[column+(3*row)] %}
<div class="event"> <div class="event">
<div class="center flyer-container"> <div class="center flyer-container">
<img class="flyer" src="https://balotta.org/media/thumb/{{event.media[0].url}}" style="object-position: {{ event.media[0].thumbnailPosition }}"></img> <img class="flyer" src="https://balotta.org/media/thumb/{{event.media[0].url}}" style="object-position: {{ event.media[0].thumbnailPosition }}"></img>
@ -64,10 +63,10 @@
const container = document.querySelector('#events'); const container = document.querySelector('#events');
const content = container.querySelectorAll('.eventcol'); const content = container.querySelectorAll('.eventcol');
const containerHeight = parseInt(window.getComputedStyle(container).height); const containerHeight = parseInt(window.getComputedStyle(container).height);
const resizeObserver = new ResizeObserver(event => { const resizeObserver = new ResizeObserver(event => {
resizeObserver.disconnect(); resizeObserver.disconnect();
event.forEach((el) => { event.forEach((el) => {
if(el.contentRect.height < containerHeight) { if(el.contentRect.height < containerHeight) {
el.target.querySelectorAll(".event > .flyer-container > .flyer").forEach((e) => { el.target.querySelectorAll(".event > .flyer-container > .flyer").forEach((e) => {
@ -76,7 +75,7 @@
} }
}) })
} }
}) })
content.forEach(el => { requestAnimationFrame(() => resizeObserver.observe(el)) }); content.forEach(el => { requestAnimationFrame(() => resizeObserver.observe(el)) });
}); });