From c9ca97df6e3d51505ce4bb502aa049c58e3444fe Mon Sep 17 00:00:00 2001 From: Emmanuel Viennet Date: Mon, 22 Jul 2024 16:53:50 +0200 Subject: [PATCH] WIP: revamp html/css: sidebar, hamburger, templates --- app/models/events.py | 2 +- app/scodoc/sco_saisie_excel.py | 2 +- app/scodoc/sco_saisie_notes.py | 2 +- app/static/css/scodoc.css | 6 +- app/static/css/scodoc97.css | 207 ++++++++++++++++++++++++++++++++ app/static/icons/back.svg | 1 + app/templates/hamburger_menu.j2 | 5 + app/templates/sco_page.j2 | 83 ++++++++++--- app/templates/sco_page_dept.j2 | 12 ++ app/templates/scolar/index.j2 | 2 +- app/templates/sidebar.j2 | 58 +++++---- app/views/notes.py | 8 +- app/views/scolar.py | 1 + sco_version.py | 2 +- 14 files changed, 343 insertions(+), 48 deletions(-) create mode 100644 app/static/css/scodoc97.css create mode 100644 app/static/icons/back.svg create mode 100644 app/templates/hamburger_menu.j2 create mode 100644 app/templates/sco_page_dept.j2 diff --git a/app/models/events.py b/app/models/events.py index 3e6c2bf7a..c65ea0ee7 100644 --- a/app/models/events.py +++ b/app/models/events.py @@ -109,7 +109,7 @@ class ScolarNews(db.Model): ) def __str__(self): - "'Chargement notes dans Stage (S3 FI) par Aurélie Dupont'" + "exemple: 'Notes dans Stage (S3 FI) par Aurélie Dupont'" formsemestre = self.get_news_formsemestre() user = User.query.filter_by(user_name=self.authenticated_user).first() diff --git a/app/scodoc/sco_saisie_excel.py b/app/scodoc/sco_saisie_excel.py index 38f65243d..d725dae55 100644 --- a/app/scodoc/sco_saisie_excel.py +++ b/app/scodoc/sco_saisie_excel.py @@ -651,7 +651,7 @@ def do_evaluations_upload_xls( ScolarNews.add( typ=ScolarNews.NEWS_NOTE, obj=obj_id, - text=f"""Chargement notes dans {modules_str}""", + text=f"""Notes dans {modules_str}""", url=status_url, max_frequency=10 * 60, # 10 minutes ) diff --git a/app/scodoc/sco_saisie_notes.py b/app/scodoc/sco_saisie_notes.py index cad79c3fc..86b2cc303 100644 --- a/app/scodoc/sco_saisie_notes.py +++ b/app/scodoc/sco_saisie_notes.py @@ -1047,7 +1047,7 @@ def save_notes( ScolarNews.add( typ=ScolarNews.NEWS_NOTE, obj=evaluation.moduleimpl_id, - text=f"""Chargement notes dans { + text=f"""Notes dans { evaluation.moduleimpl.module.titre or evaluation.moduleimpl.module.code}""", url=status_url, max_frequency=30 * 60, # 30 minutes diff --git a/app/static/css/scodoc.css b/app/static/css/scodoc.css index b844a9d42..171af7e3a 100644 --- a/app/static/css/scodoc.css +++ b/app/static/css/scodoc.css @@ -1,4 +1,4 @@ -/* ScoDoc, (c) Emmanuel Viennet 1998 - 2023 +/* ScoDoc, (c) Emmanuel Viennet 1998 - 2024 */ :root { @@ -40,6 +40,10 @@ h3 { font-weight: bold; } +body a { + color: rgb(4, 16, 159); +} + details>summary:first-of-type { display: list-item !important; } diff --git a/app/static/css/scodoc97.css b/app/static/css/scodoc97.css new file mode 100644 index 000000000..c97b98db4 --- /dev/null +++ b/app/static/css/scodoc97.css @@ -0,0 +1,207 @@ +/* ScoDoc, (c) Emmanuel Viennet 1998 - 2024 + */ +.scodoc-container { + display: grid; + grid-template-columns: 130px 1fr; + grid-template-rows: auto 1fr; +} + +.app-corner { + /* background-color: rgb(235, 235, 228); */ + grid-column-start: 1; + grid-row-start: 1; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.formsemestre-page-header { + grid-column-start: 2; + grid-row-start: 1; + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: left; + white-space: nowrap; + padding: 0 10px; + /* Optional: Padding for some space around the text */ +} + +#sidebar { + border-right: 1px solid rgb(230, 230, 225); + grid-column-start: 1; + grid-row-start: 2; + padding-left: 4px; + /* Sidebar transition */ + transition: transform 400ms ease, opacity 400ms ease; +} + +#app-content { + grid-column-start: 2; + grid-row-start: 2; + background-color: #f0f0f0; + /* Optional: background color for content area */ + /* Sidebar transition */ + transition: margin-left 400ms ease; +} + +.infos { + /* container infos semestre */ + font-size: 12pt; +} + +.sco_menu { + /* container menu bar semestre */ + background-color: lightblue; + flex-grow: 1; + padding: 5px; + margin-top: 5px; +} + +.hamburger { + white-space: nowrap; + display: flex; + align-items: center; +} + +.hamburger>div { + font-size: 12pt; + font-weight: bold; + vertical-align: bottom; + white-space: nowrap; +} + +.hamburger>.hamburger-icon { + font-size: 24pt; + margin-top: -8px; + margin-right: 8px; +} + +.app-corner .scodoc-index, +.app-corner .scodoc-index a { + font-size: 14pt; + display: inline; + color: rgb(4, 16, 159); +} + +.hamburger-menu { + display: none; + flex-direction: column; + background-color: #333; + position: fixed; + top: 50px; + left: 0; + /* width: 100%; */ + max-width: 400px; + z-index: 1001; + /* Ensure it is above the top bar */ +} + +.hamburger-menu div { + padding: 10px; + border-bottom: 1px solid #444; +} + +.hamburger-menu a { + color: white; + text-decoration: none; +} + +#toggle-sidebar-img { + box-sizing: content-box; + padding-left: 4px; + padding-right: 4px; + transition: transform 400ms ease; +} + +#toggle-sidebar-img.collapsed { + transform: scaleX(-1); +} + +.vspace48 { + margin-top: 48px; +} + +.hidden { + display: none; +} + +.overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.05); + z-index: 1000; + /* Below the menu but above the top bar */ +} + +/* Media query for desktop devices */ +@media (min-width: 769px) { + #sidebar.collapsed { + /* Slide the sidebar out to the left */ + transform: translateX(-130px); + opacity: 0; + /* fade out effect */ + } + + #app-content.collapsed { + grid-column-start: 1; + grid-column-end: 3; + } +} + +/* Hide the sidebar for mobile devices and print */ +@media screen and (max-width: 768px), +print { + + #sidebar, + div.toggle-sidebar { + display: none; + } + + #app-content { + grid-column-start: 1; + grid-column-end: 3; + } +} + +/* Sidebar */ +#sidebar sco-title { + color: rgb(102, 102, 102); + font-size: large; + font-weight: bold; + text-decoration: none; +} + +#sidebar h2 { + color: rgb(102, 102, 102); + font-weight: bold; + font-size: large; + margin-bottom: 0; +} + +#sidebar div.sidebar-item { + margin-left: 4px; +} + +#sidebar div.sidebar-item a:link, +#sidebar div.sidebar-item a:link, +#sidebar div.sidebar-item a:visited { + color: rgb(4, 16, 159); + text-decoration: none; +} + +#sidebar div.sidebar-item a:hover { + color: rgb(153, 51, 51); + text-decoration: underline; +} + +/* Content */ +#app-content>.gtrcontent { + height: 100%; + margin-left: 10px; + margin-bottom: 10px; +} \ No newline at end of file diff --git a/app/static/icons/back.svg b/app/static/icons/back.svg new file mode 100644 index 000000000..675973518 --- /dev/null +++ b/app/static/icons/back.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/templates/hamburger_menu.j2 b/app/templates/hamburger_menu.j2 new file mode 100644 index 000000000..654edefbe --- /dev/null +++ b/app/templates/hamburger_menu.j2 @@ -0,0 +1,5 @@ +
+ Accueil général +
+
Item 2
+
Item 3
diff --git a/app/templates/sco_page.j2 b/app/templates/sco_page.j2 index 20229d90c..43bf75fcb 100644 --- a/app/templates/sco_page.j2 +++ b/app/templates/sco_page.j2 @@ -8,6 +8,7 @@ + @@ -21,25 +22,49 @@ {% endblock %} {% block content %} - - {% block scodoc_sidebar %} - {% include "sidebar.j2" %} - {% endblock %} + +
+
+ {% block hamburger_menu %} + {% include "hamburger_menu.j2" %} + {% endblock %} +
+
+
+
+
☰
+
ScoDoc +
+
+
+ toggle sidebar +
+
+
+ {% include "flashed_messages.j2" %} + {% if sco.formsemestre %} + {% block formsemestre_header %} + {% include "formsemestre_header.j2" %} + {% endblock %} + {% endif %} +
+ -
- {% include "flashed_messages.j2" %} - {% if sco.formsemestre %} - {% block formsemestre_header %} - {% include "formsemestre_header.j2" %} - {% endblock %} - {% endif %} - -
- {% block app_content %} - {{ content | safe }} - {% endblock %} +
+
+
+ {% block app_content %} + {{ content | safe }} + {% endblock %} +
+
+ {% endblock %} {% block scripts %} @@ -58,6 +83,32 @@ } }; const SCO_URL = "{{ url_for('scolar.index_html', scodoc_dept=g.scodoc_dept) }}"; + function toggleSidebar() { + document.getElementById('sidebar').classList.toggle('collapsed'); + document.getElementById('app-content').classList.toggle('collapsed'); + document.getElementById('toggle-sidebar-img').classList.toggle('collapsed'); + } + + function toggleMobileMenu() { + const menu = document.getElementById('hamburgerMenu'); + const overlay = document.getElementById('overlay'); + if (menu.style.display === 'none' || menu.style.display === '') { + menu.style.display = 'flex'; + overlay.style.display = 'block'; + } else { + menu.style.display = 'none'; + overlay.style.display = 'none'; + } + } + + function closeMobileMenu() { + document.getElementById('hamburgerMenu').style.display = 'none'; + document.getElementById('overlay').style.display = 'none'; + } + + // Ensure the hamburger menu and overlay are hidden initially + document.getElementById('hamburgerMenu').style.display = 'none'; + document.getElementById('overlay').style.display = 'none'; {% endblock %} diff --git a/app/templates/sco_page_dept.j2 b/app/templates/sco_page_dept.j2 new file mode 100644 index 000000000..84a2293f4 --- /dev/null +++ b/app/templates/sco_page_dept.j2 @@ -0,0 +1,12 @@ +{%- extends 'sco_page.j2' -%} +{# -*- Base des pages dans département mais hors formsemestre -*- #} +{# -*- Comme sco_page mais cache le bandeau formsemestre -*- #} + +{% block styles %} +{{super()}} + +{% endblock %} diff --git a/app/templates/scolar/index.j2 b/app/templates/scolar/index.j2 index 2c3584a5d..f82acbb9b 100644 --- a/app/templates/scolar/index.j2 +++ b/app/templates/scolar/index.j2 @@ -1,6 +1,6 @@ {# page accueil département #} -{% extends "sco_page.j2" %} +{% extends "sco_page_dept.j2" %} {% block app_content %}