wip: programme

build/lib/thsf/__init__.py

@@ -49,7 +49,30 @@ except Exception as err:
 def page_not_found(err):
   return redirect(url_for('index'))
 
+# ------------------------------------------------------------------------------
+# -- Custom filters
+# ------------------------------------------------------------------------------
+@app.template_filter('date2dmyhm')
+def date2dmyhm(date):
+  splitted_date = date.split("-")
+  splitted_time = splitted_date[2].split("T")[1].split(":")
+  year, month, day = (splitted_date[0],
+                      splitted_date[1],
+                      splitted_date[2].split("T")[0])
+  hour, minutes = (splitted_time[0], splitted_time[1].split("+")[0])
+  return f"{day}/{month} {hour}:{minutes}"
 
+@app.template_filter('toicon')
+def date2dmyhm(slot_type):
+  slot_types = {"Projection": "fa-solid fa-film",
+                "Presentation Courte": "fa-solid fa-person-chalkboard",
+                "DJ Set": "fa-solid fa-guitar",
+                "Concert": "fa-solid fa-guitar",
+                "Présentation": "fa-solid fa-person-chalkboard",
+                "Table Ronde": "fa-solid fa-users-line",
+                "Atelier": "fa-solid fa-screwdriver-wrench",
+                "Exposition": "fa-solid fa-palette"}
+  return slot_types[slot_type]
 # ------------------------------------------------------------------------------
 # -- Routes
 # ------------------------------------------------------------------------------

build/lib/thsf/static/css/planning.css

@@ -13,38 +13,116 @@
   align-items: flex-start;
   align-content: flex-start;
   margin: 1em;
-  border-radius: 5px;
-  border-color: var(--alt-color);
-  background-color: var(--main-color);
-  border-style: solid;
-  border-width: 1px;
   font-size: 2em;
-  width: 25em;
+  width: 22em;
+}
+
+.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: 13em;
 }
 
 .metadata {
-  display: flex;
+  width: 7.333em;
-  flex-direction: column;
+  border-radius: 10px 0 0 10px;
-  justify-content: start;
+  background-color: var(--alt-bg-color);
-  align-items: flex-start;
+  color: var(--main-color);
-  align-content: flex-start;
+  border-color: var(--main-color);
+  font-family: pfdintextcompprothin;
+  border-width: 1px 0 0px 1px;
 }
 
 .data {
-  display: flex;
+  width: 14.666em;
-  flex-direction: column;
+  background-color: var(--main-color);
-  justify-content: start;
+  color: var(--alt-main-color);
-  align-items: flex-start;
+  border-color: var(--main-color);
-  align-content: flex-start;
+  border-width: 1px 1px 1px 0;
-  margin-left: 2em;
+  font-family: pfdintextcompprothin;
+  overflow-y: auto;
 }
 
-.speaker_avatar {
+.metadata > .button {
-  height: 50px;
+  font-size: 1em;
-  width: 50px;
+  margin-bottom: 1em;
 }
 
-.data_img {
+.title {
-  height: 50px;
+  font-family: pfdintextcomppromedium;
-  width: 50px;
+  font-weight: 250;
+  margin-bottom: 0.5em;
+}
+
+.speakers {
+  font-family: pfdintextcompprothin;
+  font-weight: 250;
+  margin-bottom: 0.5em;
+}
+
+.speaker_details {
+  position: relative;
+  display: inline-block;
+}
+
+.speaker_details .details {
+  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;
+}
+
+.speaker_details .details::after {
+  content: "";
+  position: relative;
+  margin-left: -5px;
+  border-width: 5px;
+}
+
+.speaker_details:hover .details {
+  visibility: visible;
+  opacity: 1;
+  font-size: 0.7em;
+  padding: 0.2em;
+}
+
+.speaker_details > .details > img, .data > .abstract > img {
+  max-width: 200px;
+  max-height: 200px;
+  float: left;
+  margin: 0 0.5em 0.5em 0;
+}
+
+.speaker_details > .details > p {
+  text-align: justify;
+  font-size: 0.5em;
+}
+
+.data > .abstract > p {
+  text-align: justify;
+  font-size: 1em;
+}
+
+.data > .details {
+  font-family: pfdintextcomppromedium;
+  font-weight: 250;
+  margin-bottom: 0.5em;
+}
+
+.data > .resources > .resource > a {
+  color: var(--main-bg-color);
 }

build/lib/thsf/static/css/style.css

@@ -10,8 +10,10 @@
 
 :root {
   --main-bg-color: #e6007e;
+  --alt-bg-color: #E59730;
+  --alt2-bg-color: #9EBF43;
   --main-color: #ffffff;
-  --alt-color: #1A000D;
+  --alt-main-color: #1A000D;
 }
 
 * {
@@ -30,7 +32,7 @@ body {
 }
 
 .black {
-  color: var(--alt-color);
+  color: var(--alt-main-color);
 }
 
 .thin {
@@ -56,18 +58,10 @@ body {
   width: inherit;
 }
 
-.cursor {
-  width: 0;
-  height: 0;
-  border-left: 0.75em solid transparent;
-  border-right: 0.75em solid transparent;
-  border-bottom: 0.75em solid var(--alt-color);
-}
-
 a {
   font-family: pfdintextcomppromedium;
   font-weight: 250;
-  color: var(--alt-color);
+  color: var(--alt-main-color);
   transition-property: color;
   transition-duration: 1s;
   text-decoration: wavy;
@@ -137,10 +131,6 @@ a:hover {
   width: 100vw;
 }
 
-#cursorbar {
-  margin-top: 1em;
-}
-
 #blah {
   margin: 2em 0 2em;
   font-size: 2em;

build/lib/thsf/static/css/tooltip.css

@@ -1,12 +1,13 @@
-.tooltip {
+.tooltip, .planning_tooltip {
   position: relative;
   display: inline-block;
 }
 
+
 .tooltip .tooltiptext {
   visibility: hidden;
   background-color: var(--main-color);
-  color: var(--alt-color);
+  color: var(--alt-main-color);
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
@@ -19,7 +20,7 @@
   transition: opacity 1s;
 }
 
-.tooltip .tooltiptext::after {
+.tooltip .tooltiptext::after, .planning_tooltip .planning_tooltiptext::after {
   content: "";
   position: absolute;
   top: 100%;
@@ -28,9 +29,25 @@
   border-width: 5px;
 }
 
-.tooltip:hover .tooltiptext {
+.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);
+  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(-3em);
+  transition: opacity 1s;
+}

build/lib/thsf/templates/base.html

@@ -68,9 +68,9 @@
       <span class="tooltiptext thin">Expositions</span>
     </i>
     <i class="button tooltip black fa-solid fa-person-chalkboard"
-      title="Conférences"
+      title="Présentation"
-      alt="Conférences">
+      alt="Présentation">
-      <span class="tooltiptext thin">Conférences</span>
+      <span class="tooltiptext thin">Présentation</span>
     </i>
   </div>
 </body>

build/lib/thsf/templates/planning.html

@@ -9,33 +9,51 @@
     {% for slot in slots %}
     <div class="slot">
       <div class="metadata">
-        <div class="title">{{slot["title"]}}</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><span class="title white">{{slot["title"]}}</span>
+        </i>
         <div class="speakers">
           {% for speaker in slot["speakers"] %}
-          <div class="speaker">
+          {{speaker["name"] | title}}
-            <div class="name">{{speaker["name"]}}</div>
+          <i class="speaker_details fa-solid fa-user">
-            <img class="speaker_avatar" src="{{speaker['avatar']}}"/>
+            {% if speaker['avatar'] or speaker["biography"] %}
-            <div class="speaker_biography">{{speaker["biography"]}}</div>
+            <div class="details">
+              {% if speaker['avatar'] %}
+              <img src="{{speaker['avatar']}}" />
+              {% endif %}
+              {% if speaker['biography'] %}
+              <p class="thin">{{speaker["biography"]}}</p>
+              {% endif %}
             </div>
+            {% endif %}
+          </i> {{ ", " if not loop.last else "" }}
           {% endfor %}
         </div>
-        <div class="type">{{slot["submission_type"]["fr"]}}</div>
-        <div class="start">{{slot["slot"]["start"]}}</div>
-        <div class="duration">{{slot["duration"]}}</div>
-        <div class="room">{{slot["slot"]["room"]["fr"]}}</div>
-        <div class="locale">{{slot["content_locale"]}}</div>
       </div>
       <div class="data">
-        <div class="abstract">{{slot["abstract"]}}</div>
+        <div class="details">
-        <div class="description">{{slot["description"]}}</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>
+        {% if slot["resources"] %}
         <div class="resources">
+          <h3>Ressources</h3>
           {% for resource in slot["resources"] %}
-          <div class="resources">
+          <div class="resource">
-            <a href="{{resource['resource']}}">{{resource["description"]}}</a>
+            <a class="thin" href="{{resource['resource']}}">{{resource["description"]}}</a>
           </div>
           {% endfor %}
         </div>
+        {% endif %}
       </div>
     </div>
     {% endfor %}

setup.cfg

@@ -23,7 +23,6 @@ install_requires =
     gunicorn
     pyYAML
     requests
-    pandas
 
 [options.packages.find]
 where = src

src/thsf.egg-info/PKG-INFO

@@ -5,8 +5,6 @@ Summary: "THSF website"
 Home-page: https://git.tetalab.org/tetalab/thsf.net
 Author: Doug Le Tough
 Author-email: doug@redatomik.org
-License: UNKNOWN
-Platform: UNKNOWN
 Classifier: Programming Language :: Python :: 3
 Classifier: License :: OSI Approved :: MIT License
 Classifier: Operating System :: OS Independent
@@ -50,5 +48,3 @@ Le processus de publication est le suivant:
 Aucun contrôle de qualité ou de tests n'est mis en place. Vous êtes seuls sur le coup.
 
 Soyez responsable et **testez vos modifications sur votre machine locale avant de fusionner votre branche** sur la branche `master`.
-
-

src/thsf.egg-info/requires.txt

@@ -2,7 +2,6 @@ flask
 gunicorn
 pyYAML
 requests
-pandas
 
 [dev]
 twine

src/thsf/__init__.py

@@ -49,7 +49,30 @@ except Exception as err:
 def page_not_found(err):
   return redirect(url_for('index'))
 
+# ------------------------------------------------------------------------------
+# -- Custom filters
+# ------------------------------------------------------------------------------
+@app.template_filter('date2dmyhm')
+def date2dmyhm(date):
+  splitted_date = date.split("-")
+  splitted_time = splitted_date[2].split("T")[1].split(":")
+  year, month, day = (splitted_date[0],
+                      splitted_date[1],
+                      splitted_date[2].split("T")[0])
+  hour, minutes = (splitted_time[0], splitted_time[1].split("+")[0])
+  return f"{day}/{month} {hour}:{minutes}"
 
+@app.template_filter('toicon')
+def date2dmyhm(slot_type):
+  slot_types = {"Projection": "fa-solid fa-film",
+                "Presentation Courte": "fa-solid fa-person-chalkboard",
+                "DJ Set": "fa-solid fa-guitar",
+                "Concert": "fa-solid fa-guitar",
+                "Présentation": "fa-solid fa-person-chalkboard",
+                "Table Ronde": "fa-solid fa-users-line",
+                "Atelier": "fa-solid fa-screwdriver-wrench",
+                "Exposition": "fa-solid fa-palette"}
+  return slot_types[slot_type]
 # ------------------------------------------------------------------------------
 # -- Routes
 # ------------------------------------------------------------------------------

src/thsf/static/css/planning.css

@@ -13,38 +13,116 @@
   align-items: flex-start;
   align-content: flex-start;
   margin: 1em;
-  border-radius: 5px;
-  border-color: var(--alt-color);
-  background-color: var(--main-color);
-  border-style: solid;
-  border-width: 1px;
   font-size: 2em;
-  width: 25em;
+  width: 22em;
+}
+
+.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: 13em;
 }
 
 .metadata {
-  display: flex;
+  width: 7.333em;
-  flex-direction: column;
+  border-radius: 10px 0 0 10px;
-  justify-content: start;
+  background-color: var(--alt-bg-color);
-  align-items: flex-start;
+  color: var(--main-color);
-  align-content: flex-start;
+  border-color: var(--main-color);
+  font-family: pfdintextcompprothin;
+  border-width: 1px 0 0px 1px;
 }
 
 .data {
-  display: flex;
+  width: 14.666em;
-  flex-direction: column;
+  background-color: var(--main-color);
-  justify-content: start;
+  color: var(--alt-main-color);
-  align-items: flex-start;
+  border-color: var(--main-color);
-  align-content: flex-start;
+  border-width: 1px 1px 1px 0;
-  margin-left: 2em;
+  font-family: pfdintextcompprothin;
+  overflow-y: auto;
 }
 
-.speaker_avatar {
+.metadata > .button {
-  height: 50px;
+  font-size: 1em;
-  width: 50px;
+  margin-bottom: 1em;
 }
 
-.data_img {
+.title {
-  height: 50px;
+  font-family: pfdintextcomppromedium;
-  width: 50px;
+  font-weight: 250;
+  margin-bottom: 0.5em;
+}
+
+.speakers {
+  font-family: pfdintextcompprothin;
+  font-weight: 250;
+  margin-bottom: 0.5em;
+}
+
+.speaker_details {
+  position: relative;
+  display: inline-block;
+}
+
+.speaker_details .details {
+  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;
+}
+
+.speaker_details .details::after {
+  content: "";
+  position: relative;
+  margin-left: -5px;
+  border-width: 5px;
+}
+
+.speaker_details:hover .details {
+  visibility: visible;
+  opacity: 1;
+  font-size: 0.7em;
+  padding: 0.2em;
+}
+
+.speaker_details > .details > img, .data > .abstract > img {
+  max-width: 200px;
+  max-height: 200px;
+  float: left;
+  margin: 0 0.5em 0.5em 0;
+}
+
+.speaker_details > .details > p {
+  text-align: justify;
+  font-size: 0.5em;
+}
+
+.data > .abstract > p {
+  text-align: justify;
+  font-size: 1em;
+}
+
+.data > .details {
+  font-family: pfdintextcomppromedium;
+  font-weight: 250;
+  margin-bottom: 0.5em;
+}
+
+.data > .resources > .resource > a {
+  color: var(--main-bg-color);
 }

src/thsf/static/css/style.css

@@ -10,8 +10,10 @@
 
 :root {
   --main-bg-color: #e6007e;
+  --alt-bg-color: #E59730;
+  --alt2-bg-color: #9EBF43;
   --main-color: #ffffff;
-  --alt-color: #1A000D;
+  --alt-main-color: #1A000D;
 }
 
 * {
@@ -30,7 +32,7 @@ body {
 }
 
 .black {
-  color: var(--alt-color);
+  color: var(--alt-main-color);
 }
 
 .thin {
@@ -56,18 +58,10 @@ body {
   width: inherit;
 }
 
-.cursor {
-  width: 0;
-  height: 0;
-  border-left: 0.75em solid transparent;
-  border-right: 0.75em solid transparent;
-  border-bottom: 0.75em solid var(--alt-color);
-}
-
 a {
   font-family: pfdintextcomppromedium;
   font-weight: 250;
-  color: var(--alt-color);
+  color: var(--alt-main-color);
   transition-property: color;
   transition-duration: 1s;
   text-decoration: wavy;
@@ -137,10 +131,6 @@ a:hover {
   width: 100vw;
 }
 
-#cursorbar {
-  margin-top: 1em;
-}
-
 #blah {
   margin: 2em 0 2em;
   font-size: 2em;

src/thsf/static/css/tooltip.css

@@ -1,12 +1,13 @@
-.tooltip {
+.tooltip, .planning_tooltip {
   position: relative;
   display: inline-block;
 }
 
+
 .tooltip .tooltiptext {
   visibility: hidden;
   background-color: var(--main-color);
-  color: var(--alt-color);
+  color: var(--alt-main-color);
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
@@ -19,7 +20,7 @@
   transition: opacity 1s;
 }
 
-.tooltip .tooltiptext::after {
+.tooltip .tooltiptext::after, .planning_tooltip .planning_tooltiptext::after {
   content: "";
   position: absolute;
   top: 100%;
@@ -28,9 +29,25 @@
   border-width: 5px;
 }
 
-.tooltip:hover .tooltiptext {
+.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);
+  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(-3em);
+  transition: opacity 1s;
+}

src/thsf/templates/base.html

@@ -68,9 +68,9 @@
       <span class="tooltiptext thin">Expositions</span>
     </i>
     <i class="button tooltip black fa-solid fa-person-chalkboard"
-      title="Conférences"
+      title="Présentation"
-      alt="Conférences">
+      alt="Présentation">
-      <span class="tooltiptext thin">Conférences</span>
+      <span class="tooltiptext thin">Présentation</span>
     </i>
   </div>
 </body>

src/thsf/templates/planning.html

@@ -9,33 +9,51 @@
     {% for slot in slots %}
     <div class="slot">
       <div class="metadata">
-        <div class="title">{{slot["title"]}}</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><span class="title white">{{slot["title"]}}</span>
+        </i>
         <div class="speakers">
           {% for speaker in slot["speakers"] %}
-          <div class="speaker">
+          {{speaker["name"] | title}}
-            <div class="name">{{speaker["name"]}}</div>
+          <i class="speaker_details fa-solid fa-user">
-            <img class="speaker_avatar" src="{{speaker['avatar']}}"/>
+            {% if speaker['avatar'] or speaker["biography"] %}
-            <div class="speaker_biography">{{speaker["biography"]}}</div>
+            <div class="details">
+              {% if speaker['avatar'] %}
+              <img src="{{speaker['avatar']}}" />
+              {% endif %}
+              {% if speaker['biography'] %}
+              <p class="thin">{{speaker["biography"]}}</p>
+              {% endif %}
             </div>
+            {% endif %}
+          </i> {{ ", " if not loop.last else "" }}
           {% endfor %}
         </div>
-        <div class="type">{{slot["submission_type"]["fr"]}}</div>
-        <div class="start">{{slot["slot"]["start"]}}</div>
-        <div class="duration">{{slot["duration"]}}</div>
-        <div class="room">{{slot["slot"]["room"]["fr"]}}</div>
-        <div class="locale">{{slot["content_locale"]}}</div>
       </div>
       <div class="data">
-        <div class="abstract">{{slot["abstract"]}}</div>
+        <div class="details">
-        <div class="description">{{slot["description"]}}</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>
+        {% if slot["resources"] %}
         <div class="resources">
+          <h3>Ressources</h3>
           {% for resource in slot["resources"] %}
-          <div class="resources">
+          <div class="resource">
-            <a href="{{resource['resource']}}">{{resource["description"]}}</a>
+            <a class="thin" href="{{resource['resource']}}">{{resource["description"]}}</a>
           </div>
           {% endfor %}
         </div>
+        {% endif %}
       </div>
     </div>
     {% endfor %}

thsf.pid

@@ -1 +1 @@
-3629
+81518