Merge branch 'frontend' of https://scodoc.org/git/iziram/ScoDoc into revamp

2024-08-22 20:10:05 +02:00 · 2024-08-22 20:10:05 +02:00 · b448e32f8a
commit b448e32f8a
parent 814d458beb 4ab7142488
17 changed files with 221 additions and 50 deletions
--- a/app/scodoc/sco_edit_ue.py
+++ b/app/scodoc/sco_edit_ue.py
@ -25,9 +25,7 @@
 #
 ##############################################################################

-"""Ajout/Modification/Suppression UE
-
-"""
+"""Ajout/Modification/Suppression UE"""

 import re

--- a/app/static/css/scodoc97.css
+++ b/app/static/css/scodoc97.css
@ -243,9 +243,10 @@ print {
 /*Mobile Navbar*/

 #logo-scodoc {
-    --size: 48px;
+    /* base image : logo_rectangle.png 527x192 */
+    --size: 64px;
+    height: calc(var(--size) / 2.744);
    width: var(--size);
-    height: var(--size);
    margin: 4px;
    cursor: pointer;
 }
@ -260,7 +261,7 @@ print {

    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.2);
-    border-radius: 16px;
+    border-radius: 0 0 16px 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
@ -269,4 +270,10 @@ print {

 body {
    position: relative;
+}
+
+.no-scroll {
+    overflow: hidden !important;
+    margin: 0 !important;
+    height: 100vh !important;
 }
--- a/app/static/css/scodoc9_mobile.css
+++ b/app/static/css/scodoc9_mobile.css
@ -0,0 +1,98 @@
+/* ==  Gestion des styles pour les mobiles == */
+
+@media screen and (max-width: 768px) {
+
+    /*  <== Module Assiduité ==> */
+    #ajout-assiduite-etud .description>textarea,
+    #ajout-justificatif-etud .raison>textarea {
+        width: 90%;
+    }
+
+    #modimpl,
+    #moduleimpl_select {
+        max-width: 200px;
+    }
+
+    #timeline {
+        flex-wrap: wrap-reverse;
+    }
+
+    .time-buttons {
+        display: flex;
+        justify-content: space-evenly;
+    }
+
+    #timeline .inputs {
+        flex-direction: row;
+        justify-content: space-evenly;
+        width: 100%;
+        padding: 8px;
+    }
+
+    #timeline .inputs>input {
+        width: 100%;
+        text-align: center;
+    }
+
+    .timeline-container .period-handle::before {
+        width: 40px !important;
+        height: 100% !important;
+        content: "";
+        display: block;
+        background-color: red;
+        border-radius: 12px;
+        opacity: 0.5;
+        position: absolute;
+        top: 0;
+
+        mix-blend-mode: color-dodge;
+
+    }
+
+    .timeline-container .period-handle.left::before {
+        transform: translateX(-50%);
+        left: 0;
+    }
+
+    .timeline-container .period-handle.right::before {
+        transform: translateX(50%);
+        right: 0;
+    }
+
+    .selectors .infos {
+        flex-direction: column;
+    }
+
+    .selectors .infos .date-input {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+    }
+
+    .mass-selection {
+        flex-wrap: wrap;
+    }
+
+    .etud_row {
+        grid-template-columns: 2% 20% auto 25% !important;
+        max-width: 350px;
+        gap: 8px;
+    }
+
+    .etud_row .assiduites_bar {
+        grid-column: 4 !important;
+        grid-row: 1;
+    }
+
+    .etud_row .btns_field.single {
+        grid-column: 3 !important;
+        grid-row: 1;
+    }
+
+    .rbtn::before {
+        --size: 35px;
+        width: var(--size) !important;
+        height: var(--size) !important;
+    }
+
+}
--- a/app/static/icons/logo_rectangle.png
+++ b/app/static/icons/logo_rectangle.png
--- a/app/templates/assiduites/pages/ajout_assiduite_etud.j2
+++ b/app/templates/assiduites/pages/ajout_assiduite_etud.j2
@ -95,8 +95,8 @@ div.submit > input {
            {{ render_field_errors(form, 'est_just') }}
        </div>
        {# Description #}
-        <div>
-            <div>{{ form.description.label }}</div>
+        <div class="description">
+            {{ form.description.label }}
            {{ form.description() }}
            {{ render_field_errors(form, 'description') }}
        </div>
--- a/app/templates/assiduites/pages/ajout_justificatif_etud.j2
+++ b/app/templates/assiduites/pages/ajout_justificatif_etud.j2
@ -106,7 +106,7 @@ div.submit > input {
            {{ render_field_errors(form, 'etat') }}
        </div>
        {# Raison #}
-        <div>
+        <div class="raison">
            {% if (not justif) or can_view_justif_detail %}
                <div>{{ form.raison.label }}</div>
                {{ form.raison() }}
--- a/app/templates/assiduites/pages/bilan_etud.j2
+++ b/app/templates/assiduites/pages/bilan_etud.j2
@ -76,6 +76,7 @@ Bilan assiduité de {{sco.etud.nomprenom}}
                    id="stats_date_debut" value="{{date_debut}}"></label>
            <label class="stats-label"> Date de fin <input type="text" class="datepicker" name="stats_date_fin"
                    id="stats_date_fin" value="{{date_fin}}"></label>
+            <br mobile="true">
            <button onclick="stats()">Actualiser</button>
        </div>

--- a/app/templates/assiduites/pages/calendrier_assi_etud.j2
+++ b/app/templates/assiduites/pages/calendrier_assi_etud.j2
@ -15,12 +15,15 @@ Calendrier de l'assiduité
    <h2>Assiduité de {{sco.etud.html_link_fiche()|safe}}</h2>

    <div class="options">
-        <input type="checkbox" id="show_pres" name="show_pres" class="memo" {{'checked' if show_pres else '' }}><label
-            for="show_pres">afficher les présences</label>
-        <input type="checkbox" name="show_reta" id="show_reta" class="memo" {{'checked' if show_reta else '' }}><label
-            for="show_reta">afficher les retards</label>
-        <input type="checkbox" name="mode_demi" id="mode_demi" class="memo" {{'checked' if mode_demi else '' }}><label
-            for="mode_demi">mode demi journée</label>
+        <label for="show_pres">afficher les présences
+            <input type="checkbox" id="show_pres" name="show_pres" class="memo" {{'checked' if show_pres else '' }}>
+        </label>
+        <label for="show_reta">afficher les retards
+            <input type="checkbox" name="show_reta" id="show_reta" class="memo" {{'checked' if show_reta else '' }}>
+        </label>
+        <label for="mode_demi">mode demi journée
+            <input type="checkbox" name="mode_demi" id="mode_demi" class="memo"{{'checked' if mode_demi else '' }}>
+        </label>
    </div>

    <div class="cal">
@ -86,15 +89,6 @@ Calendrier de l'assiduité
            max-width: var(--sco-content-max-width);
        }

-        .calendrier {
-            display: flex;
-            justify-content: center;
-            overflow-x: scroll;
-            border: 1px solid #444;
-            border-radius: 12px;
-            margin-bottom: 12px;
-        }
-
        .assi_case {
            display: flex;
            width: 100%;
--- a/app/templates/assiduites/pages/signal_assiduites_group.j2
+++ b/app/templates/assiduites/pages/signal_assiduites_group.j2
@ -115,12 +115,18 @@
        padding: 5px;
        border-radius: 5px;
        text-decoration: none;
+        z-index: 100;
    }

    html{
        scroll-behavior: smooth !important;
    }

+    .date-input{
+        display: flex;
+        gap: 4px;
+    }
+
 </style>

 {% endblock styles %}
@ -152,20 +158,22 @@
    <fieldset class="selectors">
        <div class="infos">
            <div class="infos-button">Groupes&nbsp;: {{grp|safe}}</div>
-            <div>
-            <button class="btn_date btn btn-secondary" onclick="jourSuivant(true)">
-            &LeftArrowBar;
-            </button>
-            <input type="text" name="date" id="date" class="datepicker" value="{{date}}">
+            <div class="date-input">
+                <button class="btn_date btn btn-secondary" onclick="jourSuivant(true)">
+                &LeftArrowBar;
+                </button>
+                <div>
+                    <input type="text" name="date" id="date" class="datepicker" value="{{date}}">
+                </div>
+                <button class="btn_date btn btn-secondary" onclick="jourSuivant(false)">
+                &RightArrowBar;
+                </button>
            </div>
-            <button class="btn_date btn btn-secondary" onclick="jourSuivant(false)">
-            &RightArrowBar;
-            </button>
        </div>
    </fieldset>
    <div style="display: {{'none' if readonly == 'true' else 'block'}};">
    {{timeline|safe}}
-        <div>
+        <div class="time-buttons">
            <button class=" btn btn-secondary" onclick="setPeriodValues(t_start, t_mid)">Matin</button>
            <button class=" btn btn-secondary" onclick="setPeriodValues(t_mid, t_end)">Après-Midi</button>
        </div>
--- a/app/templates/assiduites/widgets/tableau.j2
+++ b/app/templates/assiduites/widgets/tableau.j2
@ -58,7 +58,7 @@
        <!-- Mettre les flèches -->
        {% if total_pages > 1 %}
            <ul class="pagination">
-                <li class="">
+                <li class="{{'disabled' if options.page == 1 else ''}}">
                    <a onclick="navigateToPage({{options.page - 1}})">&lt;</a>
                </li>
                <!-- Toujours afficher la première page -->
@ -91,7 +91,7 @@
                <li class="{% if options.page == total_pages %}active{% endif %}">
                    <a onclick="navigateToPage({{total_pages}})">{{ total_pages }}</a>
                </li>
-                <li class="">
+                <li class="{{'disabled' if options.page == total_pages else ''}}">
                    <a onclick="navigateToPage({{options.page + 1}})">&gt;</a>
                </li>
            </ul>
@ -235,7 +235,30 @@
        max-width: fit-content;
    }

-    .pagination li{
+    .pagination li>*{
        cursor: pointer;
+
+        /*Style pour les boutons de pagination*/
+        border: 1px solid #ccc;
+        background-color: #f1f1f1;
+        padding: 8px 16px;
+        font-size: 16px;
+        border-radius: 4px;        
+        margin: 8px 1px;
+
+    }
+    .pagination li:hover >a, .pagination li.active>*{
+        /*Style pour les boutons actifs*/
+        background-color: var(--sco-color-ues);
+        color: white !important;
+
+    }
+
+    .pagination li.disabled>*{
+        /*Style pour les boutons désactivés*/
+        opacity: 0.5;
+        cursor: default;
+        pointer-events: none;
+        user-select: none;
    }
 </style>
--- a/app/templates/assiduites/widgets/timeline.j2
+++ b/app/templates/assiduites/widgets/timeline.j2
@ -3,7 +3,7 @@
        <input type="text" name="deb" id="deb" class="timepicker">
        <input type="text" name="fin" id="fin" class="timepicker">
    </div>
-    <div class="timeline-container">
+    <div class="timeline-container" desktop="true">
        <div class="period" style="left: 0%; width: 20%">
            <div class="period-handle left"></div>
            <div class="period-handle right"></div>
@ -12,8 +12,6 @@
    </div>
 </div>
 <script>
-
-
    const timelineContainer = document.querySelector(".timeline-container");
    const periodTimeLine = document.querySelector(".period");
    const t_start = {{ t_start }};
@ -27,6 +25,8 @@

    let handleMoving = false;

+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+
    // Création des graduations de la timeline
    // On créé des grandes graduations pour les heures
    // On créé des petites graduations pour les "tick"
@ -44,6 +44,11 @@
            tickLabel.classList.add("tick-label");
            tickLabel.style.left = `${((i - t_start) / (t_end - t_start)) * 100}%`;
            tickLabel.textContent = numberToTime(i);
+            // on retire ce qu'il y a après les : sur mobile
+            if (isMobile) {
+                tickLabel.textContent = tickLabel.textContent.split(":")[0];
+            }
+
            timelineContainer.appendChild(tickLabel);
            // Si on est pas à la fin, on ajoute les graduations intermédiaires
            if (i < t_end) {
--- a/app/templates/calendrier.j2
+++ b/app/templates/calendrier.j2
@ -21,11 +21,12 @@
 <style>
    .calendrier {
        display: flex;
-        justify-content: center;
+        justify-content: flex-start;
        overflow-x: scroll;
        border: 1px solid #444;
        border-radius: 12px;
        margin-bottom: 12px;
+        padding: 4px;
    }

    .mois {
--- a/app/templates/choix_date.j2
+++ b/app/templates/choix_date.j2
@ -15,8 +15,8 @@
            margin-top: 10px;
        }
        .content{
-            width: 90%;
            max-width: 1600px;
+            padding: 12px;
        }
    </style>
 {% endblock %}
--- a/app/templates/formsemestre/menu.j2
+++ b/app/templates/formsemestre/menu.j2
@ -20,12 +20,6 @@
        box-sizing: border-box;
    }

-    .no-scroll {
-        overflow: hidden !important;
-        margin: 0 !important;
-        height: 100vh !important;
-    }
-
    /* CSS menu */
    .sco-formsemestre-menu {
        background-color: var(--sco-formsemestre-color-primary);
@ -372,8 +366,6 @@
        // Affichage du menu mobile au clic
        navbarToggle.addEventListener("click", () => {

-            document.body.classList.toggle("no-scroll");
-
            navbarMenu.classList.toggle("active");
            navbarToggle.classList.toggle("active");

@ -385,6 +377,10 @@

            // Fermeture des dropdowns
            dropdownItems.forEach((item) => item.removeAttribute("open"));
+
+            // Blockage du scroll
+            toggleScroll();
+
        });

        // Fermeture du menu mobile au clic en dehors du menu
@ -393,6 +389,7 @@
                navbarMenu.classList.remove("active");
                navbarToggle.classList.remove("active");
                navbarToggle.setAttribute("aria-expanded", "false");
+                toggleScroll();
            }
        });

--- a/app/templates/sco_page.j2
+++ b/app/templates/sco_page.j2
@ -5,6 +5,7 @@
 {{super()}}
 <link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/scodoc.css">
 <link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/scodoc97.css">
+<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/scodoc9_mobile.css">
 <link href="{{scu.STATIC_DIR}}/css/menu.css" rel="stylesheet" type="text/css" />
 <link href="{{scu.STATIC_DIR}}/css/gt_table.css" rel="stylesheet" type="text/css" />
 <link type="text/css" rel="stylesheet" href="{{scu.STATIC_DIR}}/libjs/qtip/jquery.qtip-3.0.3.min.css" />
@ -21,7 +22,7 @@
 <!-- sco_page revamp -->
    <div id="mobileNav" mobile="true">
        <!-- Logo ScoDoc -->
-        <img src="{{url_for('static', filename='icons/logo.png')}}" alt="Logo ScoDoc" id="logo-scodoc">
+        <img src="{{url_for('static', filename='icons/logo_rectangle.png')}}" alt="Logo ScoDoc" id="logo-scodoc">
        {% block mobileSemestre %}
        <!--  Titre Semestre -->
        <!-- Icone Menu Semestre -->
@ -76,6 +77,8 @@
 <script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script>
 <script src="{{scu.STATIC_DIR}}/DataTables/datatables.min.js"></script>
 <script>
+    let no_sidebar = {{ 'true' if no_sidebar else 'false' }};
+
    window.onload = function () {
        if (document.getElementById('gtrcontent')) {
            enableTooltips("gtrcontent");
@ -87,6 +90,10 @@
        document.getElementById("logo-scodoc").addEventListener("click", function () {
            toggleSidebarOffCanvas();
        });
+
+        if (no_sidebar) {
+            toggleSidebar();
+        }
    };
    const SCO_URL = "{{ url_for('scolar.index_html', scodoc_dept=g.scodoc_dept) }}";
    function toggleSidebar() {
--- a/app/templates/scolar/index.j2
+++ b/app/templates/scolar/index.j2
@ -98,6 +98,14 @@ div.effectif {
    max-width: 1024px;   /* Maximum width */
    margin: 0 auto 0 0;        /* Centers divs if they are narrower than 1024px */
 }
+
+@media screen and (max-width: 768px) {
+    /*Fix for mobile*/
+    .cur-formsemestres {
+        width: auto;
+    }
+}
+
 .cur-formsemestre {
    display: flex;
    align-items: center;
@ -143,6 +151,7 @@ div.effectif {
    display: flex;
    flex-direction: column;
    font-size: 14px;
+    white-space: nowrap;
 }
 .responsable {
    font-weight: bold;
--- a/app/templates/sidebar.j2
+++ b/app/templates/sidebar.j2
@ -124,6 +124,29 @@
        const sidebar = document.querySelector('#sidebar');
        const expanded = sidebar.getAttribute('aria-expanded') === 'true';
        sidebar.setAttribute('aria-expanded', !expanded);
+        toggleScroll();
+    }
+
+    function toggleScroll(){
+
+        const changeScroll = (b) => {
+            document.querySelectorAll("body, html").forEach(el => el.classList.toggle("no-scroll", b));
+        }
+
+        const sidebar = document.querySelector('#sidebar');
+        const formSemestreMenu = document.querySelector('.sco-formsemestre-menu-menu');
+
+        const sidebarExpanded = sidebar ? sidebar.getAttribute('aria-expanded') === 'true' : false;
+        const formSemestreMenuExpanded = formSemestreMenu ? formSemestreMenu.classList.contains("active") : false;
+        
+        let isScrollToggled = document.body.classList.contains("no-scroll");
+
+        if (isScrollToggled && !sidebarExpanded && !formSemestreMenuExpanded) {
+            changeScroll(false);
+        }
+        else if (!isScrollToggled && (sidebarExpanded || formSemestreMenuExpanded)) {
+            changeScroll(true);
+        }
    }

 </script>