wip: programme

This commit is contained in:
mco-system 2023-04-09 18:40:48 +11:00
parent 75e44fa9fd
commit 25234e9c08
15 changed files with 221 additions and 145 deletions

View File

@ -18,7 +18,8 @@
width: 22em;
}
.slot_info {
.slot_info,
.slot_info_buttons {
display: flex;
flex-direction: row;
align-content: flex-start;
@ -54,7 +55,8 @@
text-align: left;
}
.metadata > .slot_info > .button {
.metadata > .slot_info_buttons > .button,
.metadata > .slot_info_buttons > .slot_info > .button {
font-size: 1em;
margin-right: 0.3em;
}
@ -71,42 +73,47 @@
margin-bottom: 0.2em;
}
.speaker_details {
.speaker {
position: relative;
display: inline-block;
}
.speaker_details .details {
.speaker .details {
visibility: hidden;
background-color: var(--main-color);
color: var(--alt-main-color);
text-align: center;
text-align: left;
padding: 1em;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
opacity: 0;
transform: translateX(-50%) translateY(102%);
transition: opacity 1s;
transform: translateX(-2em) translateY(102%);
max-width: 30em;
overflow-y: auto;
border-style: solid;
border-color: var(--alt-main-color);
border-width: 1px;
}
.speaker_details .details::after {
.speaker .details::after {
content: "";
position: relative;
margin-left: -5px;
border-width: 5px;
}
.speaker_details:hover .details {
.speaker:hover .details {
visibility: visible;
opacity: 1;
font-size: 0.7em;
padding: 0.2em;
}
.speaker_details > .details > img,
.speaker > .details > img,
.abstract > img {
max-width: 200px;
max-height: 200px;
@ -114,7 +121,64 @@
margin: 0 0.5em 0.5em 0;
}
.speaker_details > .details > p {
.speaker > .details > p {
text-align: justify;
font-size: 0.5em;
}
.slot_info {
position: relative;
display: inline-block;
}
.slot_info .details {
visibility: hidden;
background-color: var(--main-color);
color: var(--alt-main-color);
text-align: left;
padding: 1em;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
opacity: 0;
transition: opacity 1s;
transform: translateX(-2em) translateY(102%);
max-width: 30em;
overflow-y: auto;
border-style: solid;
border-color: var(--alt-main-color);
border-width: 1px;
}
.slot_info .details > .description {
margin-top: 1em;
}
.slot_info .details::after {
content: "";
position: relative;
margin-left: -5px;
border-width: 5px;
}
.slot_info:hover .details {
visibility: visible;
opacity: 1;
font-size: 0.7em;
padding: 0.2em;
}
.slot_info > .details > img,
.abstract > img {
max-width: 200px;
max-height: 200px;
float: left;
margin: 0 0.5em 0.5em 0;
}
.slot_info > .details > p {
text-align: justify;
font-size: 0.5em;
}

View File

@ -1,5 +1,4 @@
.tooltip,
.planning_tooltip,
.slot_tooltip {
position: relative;
display: inline-block;
@ -21,7 +20,7 @@
transition: opacity 1s;
}
.planning_tooltip .planning_tooltiptext {
.slot_tooltip .slot_tooltiptext {
visibility: hidden;
background-color: var(--main-color);
color: var(--alt-main-color);
@ -37,33 +36,7 @@
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;
@ -74,7 +47,6 @@
}
.tooltip:hover .tooltiptext,
.planning_tooltip:hover .planning_tooltiptext,
.slot_tooltip:hover .slot_tooltiptext {
visibility: visible;
opacity: 1;

View File

@ -2,8 +2,8 @@
<html lang='zxx'>
<head>
<title>THSF 2023: S/Extraire</title>
<meta name="viewport" content="initial-scale=1.0" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet"
href="{{ url_for('static', filename='css/style.css') }}">
<link rel="stylesheet"
@ -12,7 +12,7 @@
href="{{ url_for('static', filename='css/planning.css') }}">
<link rel="icon"
type="image/png"
href="{{ url_for('static', filename='images/favicon.png') }}" />
href="{{ url_for('static', filename='images/favicon.png') }}">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
{% block headers %}

View File

@ -4,7 +4,7 @@
<img class="logo"
src="{{ url_for('static', filename='images/logo.svg') }}"
alt="THSF 2023 - S/Extraire"
title="THSF 2023 - S/Extraire"/>
title="THSF 2023 - S/Extraire">
</div>
<div id="blah">
<h2>Le T.H.S.F est enfin de retour !</h2>

View File

@ -1,8 +1,8 @@
<div id="navbar_wrapper">
{% for item in navbar %}
<i class="button tooltip black {{ item.classes }}"
onclick="document.location='{{item.url}}'">
<span class="tooltiptext thin">{{item.name}}</span>
</i>
<i class="button tooltip black {{ item.classes }}"
onclick="document.location='{{item.url}}'">
<span class="tooltiptext thin">{{item.name}}</span>
</i>
{% endfor %}
</div>

View File

@ -1,8 +1,8 @@
{% extends "base.html" %}
{% block content %}
<div id="schedule">
{% for slot in slots %}
{% include "slot.html" %}
{% endfor %}
</div>
<div id="schedule">
{% for slot in slots %}
{% include "slot.html" %}
{% endfor %}
</div>
{% endblock %}

View File

@ -2,38 +2,40 @@
<div class="metadata">
<div class="speakers">
{% for speaker in slot.speakers %}
{{speaker.name | title}}
<i class="speaker_details fa-solid fa-user">
<div class="speaker">
{{speaker.name | title}}
<i class="speaker_details fa-solid fa-user"></i>
{% if speaker.avatar or speaker.biography %}
<div class="details">
{% if speaker.avatar %}
<img src="{{speaker.avatar}}" />
<img src="{{speaker.avatar}}">
{% endif %}
{% if speaker['biography'] %}
<p class="thin">{{speaker.biography}}</p>
{% endif %}
</div>
{% endif %}
</i><br/>
</div><br>
{% endfor %}
</div>
<div class="slot_info">
<i class="button planning_tooltip black {{slot.submission_type.fr | toicon }}">
<span class="planning_tooltiptext thin">
<div class="slot_info_buttons">
<i class="button slot_tooltip black {{slot.submission_type.fr | toicon }}">
<span class="slot_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>
</i>
<div class="slot_info">
<i class="button slot_info_details black fa-solid fa-circle-info"></i>
<div class="details 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>
</div>
</div>
</div>
<div class="data">

View File

@ -18,7 +18,8 @@
width: 22em;
}
.slot_info {
.slot_info,
.slot_info_buttons {
display: flex;
flex-direction: row;
align-content: flex-start;
@ -54,7 +55,8 @@
text-align: left;
}
.metadata > .slot_info > .button {
.metadata > .slot_info_buttons > .button,
.metadata > .slot_info_buttons > .slot_info > .button {
font-size: 1em;
margin-right: 0.3em;
}
@ -71,42 +73,47 @@
margin-bottom: 0.2em;
}
.speaker_details {
.speaker {
position: relative;
display: inline-block;
}
.speaker_details .details {
.speaker .details {
visibility: hidden;
background-color: var(--main-color);
color: var(--alt-main-color);
text-align: center;
text-align: left;
padding: 1em;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
opacity: 0;
transform: translateX(-50%) translateY(102%);
transition: opacity 1s;
transform: translateX(-2em) translateY(102%);
max-width: 30em;
overflow-y: auto;
border-style: solid;
border-color: var(--alt-main-color);
border-width: 1px;
}
.speaker_details .details::after {
.speaker .details::after {
content: "";
position: relative;
margin-left: -5px;
border-width: 5px;
}
.speaker_details:hover .details {
.speaker:hover .details {
visibility: visible;
opacity: 1;
font-size: 0.7em;
padding: 0.2em;
}
.speaker_details > .details > img,
.speaker > .details > img,
.abstract > img {
max-width: 200px;
max-height: 200px;
@ -114,7 +121,64 @@
margin: 0 0.5em 0.5em 0;
}
.speaker_details > .details > p {
.speaker > .details > p {
text-align: justify;
font-size: 0.5em;
}
.slot_info {
position: relative;
display: inline-block;
}
.slot_info .details {
visibility: hidden;
background-color: var(--main-color);
color: var(--alt-main-color);
text-align: left;
padding: 1em;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
opacity: 0;
transition: opacity 1s;
transform: translateX(-2em) translateY(102%);
max-width: 30em;
overflow-y: auto;
border-style: solid;
border-color: var(--alt-main-color);
border-width: 1px;
}
.slot_info .details > .description {
margin-top: 1em;
}
.slot_info .details::after {
content: "";
position: relative;
margin-left: -5px;
border-width: 5px;
}
.slot_info:hover .details {
visibility: visible;
opacity: 1;
font-size: 0.7em;
padding: 0.2em;
}
.slot_info > .details > img,
.abstract > img {
max-width: 200px;
max-height: 200px;
float: left;
margin: 0 0.5em 0.5em 0;
}
.slot_info > .details > p {
text-align: justify;
font-size: 0.5em;
}

View File

@ -1,5 +1,4 @@
.tooltip,
.planning_tooltip,
.slot_tooltip {
position: relative;
display: inline-block;
@ -21,7 +20,7 @@
transition: opacity 1s;
}
.planning_tooltip .planning_tooltiptext {
.slot_tooltip .slot_tooltiptext {
visibility: hidden;
background-color: var(--main-color);
color: var(--alt-main-color);
@ -37,33 +36,7 @@
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;
@ -74,7 +47,6 @@
}
.tooltip:hover .tooltiptext,
.planning_tooltip:hover .planning_tooltiptext,
.slot_tooltip:hover .slot_tooltiptext {
visibility: visible;
opacity: 1;

View File

@ -2,8 +2,8 @@
<html lang='zxx'>
<head>
<title>THSF 2023: S/Extraire</title>
<meta name="viewport" content="initial-scale=1.0" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet"
href="{{ url_for('static', filename='css/style.css') }}">
<link rel="stylesheet"
@ -12,7 +12,7 @@
href="{{ url_for('static', filename='css/planning.css') }}">
<link rel="icon"
type="image/png"
href="{{ url_for('static', filename='images/favicon.png') }}" />
href="{{ url_for('static', filename='images/favicon.png') }}">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
{% block headers %}

View File

@ -4,7 +4,7 @@
<img class="logo"
src="{{ url_for('static', filename='images/logo.svg') }}"
alt="THSF 2023 - S/Extraire"
title="THSF 2023 - S/Extraire"/>
title="THSF 2023 - S/Extraire">
</div>
<div id="blah">
<h2>Le T.H.S.F est enfin de retour !</h2>

View File

@ -1,8 +1,8 @@
<div id="navbar_wrapper">
{% for item in navbar %}
<i class="button tooltip black {{ item.classes }}"
onclick="document.location='{{item.url}}'">
<span class="tooltiptext thin">{{item.name}}</span>
</i>
<i class="button tooltip black {{ item.classes }}"
onclick="document.location='{{item.url}}'">
<span class="tooltiptext thin">{{item.name}}</span>
</i>
{% endfor %}
</div>

View File

@ -1,8 +1,8 @@
{% extends "base.html" %}
{% block content %}
<div id="schedule">
{% for slot in slots %}
{% include "slot.html" %}
{% endfor %}
</div>
<div id="schedule">
{% for slot in slots %}
{% include "slot.html" %}
{% endfor %}
</div>
{% endblock %}

View File

@ -2,38 +2,40 @@
<div class="metadata">
<div class="speakers">
{% for speaker in slot.speakers %}
{{speaker.name | title}}
<i class="speaker_details fa-solid fa-user">
<div class="speaker">
{{speaker.name | title}}
<i class="speaker_details fa-solid fa-user"></i>
{% if speaker.avatar or speaker.biography %}
<div class="details">
{% if speaker.avatar %}
<img src="{{speaker.avatar}}" />
<img src="{{speaker.avatar}}">
{% endif %}
{% if speaker['biography'] %}
<p class="thin">{{speaker.biography}}</p>
{% endif %}
</div>
{% endif %}
</i><br/>
</div><br>
{% endfor %}
</div>
<div class="slot_info">
<i class="button planning_tooltip black {{slot.submission_type.fr | toicon }}">
<span class="planning_tooltiptext thin">
<div class="slot_info_buttons">
<i class="button slot_tooltip black {{slot.submission_type.fr | toicon }}">
<span class="slot_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>
</i>
<div class="slot_info">
<i class="button slot_info_details black fa-solid fa-circle-info"></i>
<div class="details 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>
</div>
</div>
</div>
<div class="data">

View File

@ -1 +1 @@
89798
91925