display course type on top left of slots

Author: imperosol

com/static/com/css/news-list.scss

@@ -83,7 +83,8 @@
     #links_content {
       overflow: auto;
       box-shadow: $shadow-color 1px 1px 1px;
-      height: 20em;
+      min-height: 20em;
+      padding-bottom: 1em;
 
       h4 {
         margin-left: 5px;

timetable/static/bundled/timetable/generator-index.ts

@@ -37,7 +37,7 @@ const WEEKDAYS = [
 ] as const;
 
 const SLOT_HEIGHT = 20 as const; // Each 15min has a height of 20px in the timetable
-const SLOT_WIDTH = 400 as const; // Each weekday ha a width of 400px in the timetable
+const SLOT_WIDTH = 250 as const; // Each weekday ha a width of 400px in the timetable
 const MINUTES_PER_SLOT = 15 as const;
 
 interface TimetableSlot {

timetable/static/timetable/css/generator.scss

@@ -23,6 +23,13 @@
       display: flex;
       flex-direction: column;
       justify-content: center;
+
+      .course-type {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 10px;
+      }
     }
   }
 }

timetable/templates/timetable/generator.jinja

@@ -9,15 +9,15 @@
 {%- endblock -%}
 
 {% block title %}
-  {% trans %}Timeplan generator{% endtrans %}
+  {% trans %}Timetable generator{% endtrans %}
 {% endblock %}
 
 {% block content %}
   <div x-data="timetableGenerator">
     <form @submit.prevent="generate()">
       <h1>Générateur d'emploi du temps</h1>
       <div class="alert alert-red" x-show="!!error" x-cloak>
-        <p class="alert-main" x-text="error"></p>
+        <span class="alert-main" x-text="error"></span>
       </div>
       <div class="form-group">
         <label for="timetable-input">Colle ton emploi du temps (sans l'entête)</label>
@@ -38,7 +38,8 @@
       <div class="content">
         <template x-for="course in courses">
           <div class="slot" :style="getStyle(course)">
-            <span x-text="`${course.ueCode} (${course.courseType})`"></span>
+            <span class="course-type" x-text="course.courseType"></span>
+            <span x-text="course.ueCode"></span>
             <span x-text="`${course.startHour} - ${course.endHour}`"></span>
             <span x-text="(course.weekGroup ? `\nGroupe ${course.weekGroup}` : '')"></span>
             <span x-text="course.room"></span>