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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1 +1 @@
89798 91925