wip: programme
This commit is contained in:
mco-system
parent
b27a73e95c
commit
75e44fa9fd
7
Makefile
7
Makefile
@ -17,6 +17,13 @@ run:
|
||||
. thsf_venv/bin/activate; \
|
||||
thsf_venv/bin/gunicorn -D -p thsf.pid -w 4 -b 127.0.0.1:8042 'thsf:app'
|
||||
|
||||
debug:
|
||||
set -e ;\
|
||||
THSF_DIR=$$(pwd); \
|
||||
echo [+] Démarrage dans $$THSF_DIR; \
|
||||
. thsf_venv/bin/activate; \
|
||||
thsf_venv/bin/gunicorn -p thsf.pid -w 4 -b 127.0.0.1:8042 'thsf:app'
|
||||
|
||||
stop:
|
||||
-set -e;\
|
||||
THSF_DIR=$$(pwd); \
|
||||
|
||||
@ -52,6 +52,10 @@ except Exception as err:
|
||||
def page_not_found(err):
|
||||
return redirect(url_for('index'))
|
||||
|
||||
def get_days():
|
||||
days = ["26/05", "27/05", "28/05"]
|
||||
return [{"title": f"Jour #{index+1}", "date": day} for index, day in enumerate(days)]
|
||||
|
||||
# ------------------------------------------------------------------------------
|
||||
# -- Custom filters
|
||||
# ------------------------------------------------------------------------------
|
||||
@ -95,7 +99,8 @@ def index():
|
||||
def planning():
|
||||
slots = backend.get(endpoint=f"events/{app.local_config['pretalx']['event']}/schedules/{app.local_config['pretalx']['schedule']}").json()
|
||||
return render_template("planning.html",
|
||||
slots=slots["slots"],
|
||||
slots=sorted(slots["slots"],
|
||||
key=lambda slot: slot["slot"]["start"]),
|
||||
navbar=navbar.get_from_page(page="/planning"))
|
||||
|
||||
@app.route('/place', methods=['GET'])
|
||||
|
||||
@ -9,23 +9,28 @@
|
||||
|
||||
.slot {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
margin: 1em;
|
||||
margin: 0.3em;
|
||||
font-size: 2em;
|
||||
width: 22em;
|
||||
}
|
||||
|
||||
.slot_info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.metadata, .data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
padding: 0.5em;
|
||||
border-style: solid;
|
||||
height: 8em;
|
||||
}
|
||||
|
||||
.metadata {
|
||||
@ -33,9 +38,10 @@
|
||||
border-radius: 10px 0 0 10px;
|
||||
background-color: var(--alt-bg-color);
|
||||
color: var(--main-color);
|
||||
border-color: var(--main-color);
|
||||
border-color: var(--alt-bg-color);
|
||||
font-family: pfdintextcompprothin;
|
||||
border-width: 1px 0 0px 1px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.data {
|
||||
@ -45,18 +51,18 @@
|
||||
border-color: var(--main-color);
|
||||
border-width: 1px 1px 1px 0;
|
||||
font-family: pfdintextcompprothin;
|
||||
overflow-y: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.metadata > .button {
|
||||
.metadata > .slot_info > .button {
|
||||
font-size: 1em;
|
||||
margin-bottom: 1em;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: pfdintextcompprothin;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.2em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.speakers {
|
||||
@ -82,7 +88,7 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transform: translateY(120%);
|
||||
transform: translateX(-50%) translateY(102%);
|
||||
transition: opacity 1s;
|
||||
}
|
||||
|
||||
@ -100,7 +106,8 @@
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.speaker_details > .details > img, .data > .abstract > img {
|
||||
.speaker_details > .details > img,
|
||||
.abstract > img {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
float: left;
|
||||
@ -112,15 +119,16 @@
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
.data > .abstract > p {
|
||||
.abstract > p {
|
||||
text-align: justify;
|
||||
font-size: 0.8em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.data > .details {
|
||||
font-family: pfdintextcompprothin;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.2em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.data > .resources > .resource > a {
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
.tooltip, .planning_tooltip {
|
||||
.tooltip,
|
||||
.planning_tooltip,
|
||||
.slot_tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: var(--main-color);
|
||||
@ -13,29 +14,13 @@
|
||||
padding: 5px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(-25%) translateY(-2em);
|
||||
transition: opacity 1s;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext::after, .planning_tooltip .planning_tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext, .planning_tooltip:hover .planning_tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
font-size: 0.7em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.planning_tooltip .planning_tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: var(--main-color);
|
||||
@ -48,6 +33,53 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(2em) translateY(-3em);
|
||||
transform: translateX(2em);
|
||||
transition: opacity 1s;
|
||||
}
|
||||
|
||||
.slot_tooltip .slot_tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: var(--main-color);
|
||||
color: var(--alt-main-color);
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(2em) translateY(50%);
|
||||
transition: opacity 1s;
|
||||
}
|
||||
|
||||
.slot_tooltip .slot_tooltiptext {
|
||||
font-size: 1em;
|
||||
width: 26em;
|
||||
padding: 1em;
|
||||
border-style: solid;
|
||||
border-color: var(--alt-main-color);
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext::after,
|
||||
.planning_tooltip .planning_tooltiptext::after,
|
||||
.slot_tooltip .slot_tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext,
|
||||
.planning_tooltip:hover .planning_tooltiptext,
|
||||
.slot_tooltip:hover .slot_tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
font-size: 0.7em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -8,6 +8,8 @@
|
||||
href="{{ url_for('static', filename='css/style.css') }}">
|
||||
<link rel="stylesheet"
|
||||
href="{{ url_for('static', filename='css/tooltip.css') }}">
|
||||
<link rel="stylesheet"
|
||||
href="{{ url_for('static', filename='css/planning.css') }}">
|
||||
<link rel="icon"
|
||||
type="image/png"
|
||||
href="{{ url_for('static', filename='images/favicon.png') }}" />
|
||||
@ -18,8 +20,25 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
<div id="main_wrapper">
|
||||
<div id="center_wrapper">
|
||||
<div id="header_wrapper">
|
||||
<div id="header">
|
||||
<span class="black bold">THSF</span>
|
||||
<span class="white thin">2023</span>
|
||||
</div>
|
||||
<div id="subheader">
|
||||
<span class="white thin">Toulouse Hacker Space Factory</span>
|
||||
</div>
|
||||
<div id="place">
|
||||
<span class="black thin">26 28 mai 2023 - </span>
|
||||
<span class="white bold">CINÉMA UTOPIA BORDEROUGE</span>
|
||||
</div>
|
||||
</div>
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{% block navbar %}
|
||||
{% include "navbar.html" %}
|
||||
{% endblock %}
|
||||
|
||||
@ -1,20 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div id="main_wrapper">
|
||||
<div id="center_wrapper">
|
||||
<div id="header_wrapper">
|
||||
<div id="header">
|
||||
<span class="black bold">THSF</span>
|
||||
<span class="white thin">2023</span>
|
||||
</div>
|
||||
<div id="subheader">
|
||||
<span class="white thin">Toulouse Hacker Space Factory</span>
|
||||
</div>
|
||||
<div id="place">
|
||||
<span class="black thin">26 28 mai 2023 - </span>
|
||||
<span class="white bold">CINÉMA UTOPIA BORDEROUGE</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="logo_wrapper">
|
||||
<img class="logo"
|
||||
src="{{ url_for('static', filename='images/logo.svg') }}"
|
||||
@ -31,6 +16,4 @@
|
||||
|
||||
<p>Comme toujours, notre objectif est de créer un festival qui poétise les bifurcations de nos idées communes et qui réinvente le sens de certains schémas imposés par notre époque. Rejoignez-nous pour une expérience enrichissante et pleine de surprises !</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
<div id="navbar_wrapper">
|
||||
{% for item in navbar %}
|
||||
<i class="button tooltip black {{ item['classes'] }}"
|
||||
title="{{item['name']}}"
|
||||
alt="{{item['name']}}"
|
||||
onclick="document.location='{{item['url']}}'">
|
||||
<span class="tooltiptext thin">{{item['name']}}</span>
|
||||
<i class="button tooltip black {{ item.classes }}"
|
||||
onclick="document.location='{{item.url}}'">
|
||||
<span class="tooltiptext thin">{{item.name}}</span>
|
||||
</i>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@ -1,108 +1,8 @@
|
||||
{% extends "base.html" %}
|
||||
{% block headers %}
|
||||
<link rel="stylesheet"
|
||||
href="{{ url_for('static', filename='css/planning.css') }}">
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div id="main_wrapper">
|
||||
<div id="#schedule">
|
||||
<div id="schedule">
|
||||
{% for slot in slots %}
|
||||
<div class="slot">
|
||||
<div class="metadata">
|
||||
<div class="speakers">
|
||||
{% for speaker in slot["speakers"] %}
|
||||
{{speaker["name"] | title}}
|
||||
<i class="speaker_details fa-solid fa-user">
|
||||
{% if speaker['avatar'] or speaker["biography"] %}
|
||||
<div class="details">
|
||||
{% if speaker['avatar'] %}
|
||||
<img src="{{speaker['avatar']}}" />
|
||||
{% endif %}
|
||||
{% if speaker['biography'] %}
|
||||
<p class="thin">{{speaker["biography"]}}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</i><br/>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<i class="button planning_tooltip black {{slot['submission_type']['fr'] | toicon }}"
|
||||
title="{{slot['submission_type']['fr']}}"
|
||||
alt="{{slot['submission_type']['fr']}}">
|
||||
<span class="planning_tooltiptext thin">{{slot['submission_type']['fr']}}</span>
|
||||
</i>
|
||||
</div>
|
||||
<div class="data">
|
||||
<div class="details">
|
||||
<div class="title black">{{slot["title"]}}</div>
|
||||
<div class="room">{{slot["slot"]["room"]["fr"]}}</div>
|
||||
<div class="start">{{slot["slot"]["start"] | date2dmyhm}} - {{slot["duration"]}} minutes ({{slot["content_locale"] | capitalize}})</div>
|
||||
</div>
|
||||
<div class="abstract">
|
||||
{% if slot['image'] %}
|
||||
<img class="data_img" src="{{slot['image']}}"/>
|
||||
{% endif %}
|
||||
<p>{{slot["abstract"]}}</p>
|
||||
</div>
|
||||
<!-- <div class="description">{{slot["description"]}}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
{% include "slot.html" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block navbar %}
|
||||
<div id="navbar_wrapper">
|
||||
<i class="button tooltip black fa-solid fa-house"
|
||||
title="Accueil"
|
||||
alt="Accueil"
|
||||
onclick="document.location='/'">
|
||||
<span class="tooltiptext thin">Accueil</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-map-location-dot"
|
||||
title="Le Lieu"
|
||||
alt="Le Lieu">
|
||||
<span class="tooltiptext thin">Le lieu</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-burger"
|
||||
title="Restauration"
|
||||
alt="Restauration">
|
||||
<span class="tooltiptext thin">Restauration</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-shirt"
|
||||
title="T-shirt et goodies"
|
||||
alt="T-shirt et goodies">
|
||||
<span class="tooltiptext thin">Goodies</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-guitar"
|
||||
title="Concerts et DJ sets"
|
||||
alt="Concerts et DJ sets">
|
||||
<span class="tooltiptext thin">Concerts et DJ sets</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-screwdriver-wrench"
|
||||
title="Ateliers"
|
||||
alt="Ateliers">
|
||||
<span class="tooltiptext thin">Ateliers</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-film"
|
||||
title="Projections"
|
||||
alt="Projections">
|
||||
<span class="tooltiptext thin">Projections</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-users-line"
|
||||
title="Tables rondes"
|
||||
alt="Tables rondes">
|
||||
<span class="tooltiptext thin">Tables rondes</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-palette"
|
||||
title="Expositions"
|
||||
alt="Expositions">
|
||||
<span class="tooltiptext thin">Expositions</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-person-chalkboard"
|
||||
title="Présentation"
|
||||
alt="Présentation">
|
||||
<span class="tooltiptext thin">Présentation</span>
|
||||
</i>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
46
build/lib/thsf/templates/slot.html
Normal file
46
build/lib/thsf/templates/slot.html
Normal file
@ -0,0 +1,46 @@
|
||||
<div class="slot">
|
||||
<div class="metadata">
|
||||
<div class="speakers">
|
||||
{% for speaker in slot.speakers %}
|
||||
{{speaker.name | title}}
|
||||
<i class="speaker_details fa-solid fa-user">
|
||||
{% if speaker.avatar or speaker.biography %}
|
||||
<div class="details">
|
||||
{% if speaker.avatar %}
|
||||
<img src="{{speaker.avatar}}" />
|
||||
{% endif %}
|
||||
{% if speaker['biography'] %}
|
||||
<p class="thin">{{speaker.biography}}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</i><br/>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="slot_info">
|
||||
<i class="button planning_tooltip black {{slot.submission_type.fr | toicon }}">
|
||||
<span class="planning_tooltiptext thin">
|
||||
{{slot.submission_type.fr}}
|
||||
</span>
|
||||
</i>
|
||||
<i class="button slot_tooltip black fa-solid fa-circle-info">
|
||||
<div class="slot_tooltiptext thin">
|
||||
<div class="abstract">
|
||||
{% if slot['image'] %}
|
||||
<img class="data_img" src="{{slot.image}}"/>
|
||||
{% endif %}
|
||||
<p>{{slot.abstract}}</p>
|
||||
</div>
|
||||
<div class="description">{{slot.description}}</div>
|
||||
</div>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data">
|
||||
<div class="details">
|
||||
<div class="title black">{{slot.title}}</div>
|
||||
<div class="room"><i class="fa-solid fa-caret-right"></i> {{slot.slot.room.fr}}</div>
|
||||
<div class="start"><i class="fa-solid fa-caret-right"></i> {{slot.slot.start | date2dmyhm}} - {{slot.duration}} minutes ({{slot.content_locale | capitalize}})</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -27,4 +27,5 @@ src/thsf/static/images/pretalx-header.png
|
||||
src/thsf/templates/base.html
|
||||
src/thsf/templates/index.html
|
||||
src/thsf/templates/navbar.html
|
||||
src/thsf/templates/planning.html
|
||||
src/thsf/templates/planning.html
|
||||
src/thsf/templates/slot.html
|
||||
@ -52,6 +52,10 @@ except Exception as err:
|
||||
def page_not_found(err):
|
||||
return redirect(url_for('index'))
|
||||
|
||||
def get_days():
|
||||
days = ["26/05", "27/05", "28/05"]
|
||||
return [{"title": f"Jour #{index+1}", "date": day} for index, day in enumerate(days)]
|
||||
|
||||
# ------------------------------------------------------------------------------
|
||||
# -- Custom filters
|
||||
# ------------------------------------------------------------------------------
|
||||
@ -95,7 +99,8 @@ def index():
|
||||
def planning():
|
||||
slots = backend.get(endpoint=f"events/{app.local_config['pretalx']['event']}/schedules/{app.local_config['pretalx']['schedule']}").json()
|
||||
return render_template("planning.html",
|
||||
slots=slots["slots"],
|
||||
slots=sorted(slots["slots"],
|
||||
key=lambda slot: slot["slot"]["start"]),
|
||||
navbar=navbar.get_from_page(page="/planning"))
|
||||
|
||||
@app.route('/place', methods=['GET'])
|
||||
|
||||
@ -9,23 +9,28 @@
|
||||
|
||||
.slot {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
margin: 1em;
|
||||
margin: 0.3em;
|
||||
font-size: 2em;
|
||||
width: 22em;
|
||||
}
|
||||
|
||||
.slot_info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.metadata, .data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
padding: 0.5em;
|
||||
border-style: solid;
|
||||
height: 8em;
|
||||
}
|
||||
|
||||
.metadata {
|
||||
@ -33,9 +38,10 @@
|
||||
border-radius: 10px 0 0 10px;
|
||||
background-color: var(--alt-bg-color);
|
||||
color: var(--main-color);
|
||||
border-color: var(--main-color);
|
||||
border-color: var(--alt-bg-color);
|
||||
font-family: pfdintextcompprothin;
|
||||
border-width: 1px 0 0px 1px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.data {
|
||||
@ -45,18 +51,18 @@
|
||||
border-color: var(--main-color);
|
||||
border-width: 1px 1px 1px 0;
|
||||
font-family: pfdintextcompprothin;
|
||||
overflow-y: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.metadata > .button {
|
||||
.metadata > .slot_info > .button {
|
||||
font-size: 1em;
|
||||
margin-bottom: 1em;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: pfdintextcompprothin;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.2em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.speakers {
|
||||
@ -100,7 +106,8 @@
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.speaker_details > .details > img, .data > .abstract > img {
|
||||
.speaker_details > .details > img,
|
||||
.abstract > img {
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
float: left;
|
||||
@ -112,15 +119,16 @@
|
||||
font-size: 0.5em;
|
||||
}
|
||||
|
||||
.data > .abstract > p {
|
||||
.abstract > p {
|
||||
text-align: justify;
|
||||
font-size: 0.8em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.data > .details {
|
||||
font-family: pfdintextcompprothin;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.2em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.data > .resources > .resource > a {
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
.tooltip, .planning_tooltip {
|
||||
.tooltip,
|
||||
.planning_tooltip,
|
||||
.slot_tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: var(--main-color);
|
||||
@ -13,29 +14,13 @@
|
||||
padding: 5px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(-25%) translateY(-2em);
|
||||
transition: opacity 1s;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext::after, .planning_tooltip .planning_tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext, .planning_tooltip:hover .planning_tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
font-size: 0.7em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
.planning_tooltip .planning_tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: var(--main-color);
|
||||
@ -48,6 +33,53 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(2em) translateY(-3em);
|
||||
transform: translateX(2em);
|
||||
transition: opacity 1s;
|
||||
}
|
||||
|
||||
.slot_tooltip .slot_tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: var(--main-color);
|
||||
color: var(--alt-main-color);
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(2em) translateY(50%);
|
||||
transition: opacity 1s;
|
||||
}
|
||||
|
||||
.slot_tooltip .slot_tooltiptext {
|
||||
font-size: 1em;
|
||||
width: 26em;
|
||||
padding: 1em;
|
||||
border-style: solid;
|
||||
border-color: var(--alt-main-color);
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext::after,
|
||||
.planning_tooltip .planning_tooltiptext::after,
|
||||
.slot_tooltip .slot_tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext,
|
||||
.planning_tooltip:hover .planning_tooltiptext,
|
||||
.slot_tooltip:hover .slot_tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
font-size: 0.7em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -8,6 +8,8 @@
|
||||
href="{{ url_for('static', filename='css/style.css') }}">
|
||||
<link rel="stylesheet"
|
||||
href="{{ url_for('static', filename='css/tooltip.css') }}">
|
||||
<link rel="stylesheet"
|
||||
href="{{ url_for('static', filename='css/planning.css') }}">
|
||||
<link rel="icon"
|
||||
type="image/png"
|
||||
href="{{ url_for('static', filename='images/favicon.png') }}" />
|
||||
@ -18,8 +20,25 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
<div id="main_wrapper">
|
||||
<div id="center_wrapper">
|
||||
<div id="header_wrapper">
|
||||
<div id="header">
|
||||
<span class="black bold">THSF</span>
|
||||
<span class="white thin">2023</span>
|
||||
</div>
|
||||
<div id="subheader">
|
||||
<span class="white thin">Toulouse Hacker Space Factory</span>
|
||||
</div>
|
||||
<div id="place">
|
||||
<span class="black thin">26 28 mai 2023 - </span>
|
||||
<span class="white bold">CINÉMA UTOPIA BORDEROUGE</span>
|
||||
</div>
|
||||
</div>
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{% block navbar %}
|
||||
{% include "navbar.html" %}
|
||||
{% endblock %}
|
||||
|
||||
@ -1,20 +1,5 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div id="main_wrapper">
|
||||
<div id="center_wrapper">
|
||||
<div id="header_wrapper">
|
||||
<div id="header">
|
||||
<span class="black bold">THSF</span>
|
||||
<span class="white thin">2023</span>
|
||||
</div>
|
||||
<div id="subheader">
|
||||
<span class="white thin">Toulouse Hacker Space Factory</span>
|
||||
</div>
|
||||
<div id="place">
|
||||
<span class="black thin">26 28 mai 2023 - </span>
|
||||
<span class="white bold">CINÉMA UTOPIA BORDEROUGE</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="logo_wrapper">
|
||||
<img class="logo"
|
||||
src="{{ url_for('static', filename='images/logo.svg') }}"
|
||||
@ -31,6 +16,4 @@
|
||||
|
||||
<p>Comme toujours, notre objectif est de créer un festival qui poétise les bifurcations de nos idées communes et qui réinvente le sens de certains schémas imposés par notre époque. Rejoignez-nous pour une expérience enrichissante et pleine de surprises !</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
<div id="navbar_wrapper">
|
||||
{% for item in navbar %}
|
||||
<i class="button tooltip black {{ item['classes'] }}"
|
||||
title="{{item['name']}}"
|
||||
alt="{{item['name']}}"
|
||||
onclick="document.location='{{item['url']}}'">
|
||||
<span class="tooltiptext thin">{{item['name']}}</span>
|
||||
<i class="button tooltip black {{ item.classes }}"
|
||||
onclick="document.location='{{item.url}}'">
|
||||
<span class="tooltiptext thin">{{item.name}}</span>
|
||||
</i>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@ -1,108 +1,8 @@
|
||||
{% extends "base.html" %}
|
||||
{% block headers %}
|
||||
<link rel="stylesheet"
|
||||
href="{{ url_for('static', filename='css/planning.css') }}">
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div id="main_wrapper">
|
||||
<div id="#schedule">
|
||||
<div id="schedule">
|
||||
{% for slot in slots %}
|
||||
<div class="slot">
|
||||
<div class="metadata">
|
||||
<div class="speakers">
|
||||
{% for speaker in slot["speakers"] %}
|
||||
{{speaker["name"] | title}}
|
||||
<i class="speaker_details fa-solid fa-user">
|
||||
{% if speaker['avatar'] or speaker["biography"] %}
|
||||
<div class="details">
|
||||
{% if speaker['avatar'] %}
|
||||
<img src="{{speaker['avatar']}}" />
|
||||
{% endif %}
|
||||
{% if speaker['biography'] %}
|
||||
<p class="thin">{{speaker["biography"]}}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</i><br/>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<i class="button planning_tooltip black {{slot['submission_type']['fr'] | toicon }}"
|
||||
title="{{slot['submission_type']['fr']}}"
|
||||
alt="{{slot['submission_type']['fr']}}">
|
||||
<span class="planning_tooltiptext thin">{{slot['submission_type']['fr']}}</span>
|
||||
</i>
|
||||
</div>
|
||||
<div class="data">
|
||||
<div class="details">
|
||||
<div class="title black">{{slot["title"]}}</div>
|
||||
<div class="room">{{slot["slot"]["room"]["fr"]}}</div>
|
||||
<div class="start">{{slot["slot"]["start"] | date2dmyhm}} - {{slot["duration"]}} minutes ({{slot["content_locale"] | capitalize}})</div>
|
||||
</div>
|
||||
<div class="abstract">
|
||||
{% if slot['image'] %}
|
||||
<img class="data_img" src="{{slot['image']}}"/>
|
||||
{% endif %}
|
||||
<p>{{slot["abstract"]}}</p>
|
||||
</div>
|
||||
<!-- <div class="description">{{slot["description"]}}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
{% include "slot.html" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block navbar %}
|
||||
<div id="navbar_wrapper">
|
||||
<i class="button tooltip black fa-solid fa-house"
|
||||
title="Accueil"
|
||||
alt="Accueil"
|
||||
onclick="document.location='/'">
|
||||
<span class="tooltiptext thin">Accueil</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-map-location-dot"
|
||||
title="Le Lieu"
|
||||
alt="Le Lieu">
|
||||
<span class="tooltiptext thin">Le lieu</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-burger"
|
||||
title="Restauration"
|
||||
alt="Restauration">
|
||||
<span class="tooltiptext thin">Restauration</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-shirt"
|
||||
title="T-shirt et goodies"
|
||||
alt="T-shirt et goodies">
|
||||
<span class="tooltiptext thin">Goodies</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-guitar"
|
||||
title="Concerts et DJ sets"
|
||||
alt="Concerts et DJ sets">
|
||||
<span class="tooltiptext thin">Concerts et DJ sets</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-screwdriver-wrench"
|
||||
title="Ateliers"
|
||||
alt="Ateliers">
|
||||
<span class="tooltiptext thin">Ateliers</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-film"
|
||||
title="Projections"
|
||||
alt="Projections">
|
||||
<span class="tooltiptext thin">Projections</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-users-line"
|
||||
title="Tables rondes"
|
||||
alt="Tables rondes">
|
||||
<span class="tooltiptext thin">Tables rondes</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-palette"
|
||||
title="Expositions"
|
||||
alt="Expositions">
|
||||
<span class="tooltiptext thin">Expositions</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-person-chalkboard"
|
||||
title="Présentation"
|
||||
alt="Présentation">
|
||||
<span class="tooltiptext thin">Présentation</span>
|
||||
</i>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
46
src/thsf/templates/slot.html
Normal file
46
src/thsf/templates/slot.html
Normal file
@ -0,0 +1,46 @@
|
||||
<div class="slot">
|
||||
<div class="metadata">
|
||||
<div class="speakers">
|
||||
{% for speaker in slot.speakers %}
|
||||
{{speaker.name | title}}
|
||||
<i class="speaker_details fa-solid fa-user">
|
||||
{% if speaker.avatar or speaker.biography %}
|
||||
<div class="details">
|
||||
{% if speaker.avatar %}
|
||||
<img src="{{speaker.avatar}}" />
|
||||
{% endif %}
|
||||
{% if speaker['biography'] %}
|
||||
<p class="thin">{{speaker.biography}}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</i><br/>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="slot_info">
|
||||
<i class="button planning_tooltip black {{slot.submission_type.fr | toicon }}">
|
||||
<span class="planning_tooltiptext thin">
|
||||
{{slot.submission_type.fr}}
|
||||
</span>
|
||||
</i>
|
||||
<i class="button slot_tooltip black fa-solid fa-circle-info">
|
||||
<div class="slot_tooltiptext thin">
|
||||
<div class="abstract">
|
||||
{% if slot['image'] %}
|
||||
<img class="data_img" src="{{slot.image}}"/>
|
||||
{% endif %}
|
||||
<p>{{slot.abstract}}</p>
|
||||
</div>
|
||||
<div class="description">{{slot.description}}</div>
|
||||
</div>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data">
|
||||
<div class="details">
|
||||
<div class="title black">{{slot.title}}</div>
|
||||
<div class="room"><i class="fa-solid fa-caret-right"></i> {{slot.slot.room.fr}}</div>
|
||||
<div class="start"><i class="fa-solid fa-caret-right"></i> {{slot.slot.start | date2dmyhm}} - {{slot.duration}} minutes ({{slot.content_locale | capitalize}})</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user