Maquette: introduit scobox, reprend certaines pages. WIP

This commit is contained in:
Emmanuel Viennet 2024-03-20 18:13:19 +01:00
parent 2e5d94f048
commit 2f2d98954c
14 changed files with 190 additions and 126 deletions

View File

@ -250,10 +250,10 @@ class ScolarNews(db.Model):
if not news_list: if not news_list:
return "" return ""
H = [ H = [
f"""<div class="news"><span class="newstitle"><a href="{ f"""<div class="scobox news"><div class="scobox-title"><a href="{
url_for("scolar.dept_news", scodoc_dept=g.scodoc_dept) url_for("scolar.dept_news", scodoc_dept=g.scodoc_dept)
}">Dernières opérations</a> }">Dernières opérations</a>
</span><ul class="newslist">""" </div><ul class="newslist">"""
] ]
for news in news_list: for news in news_list:
@ -266,8 +266,9 @@ class ScolarNews(db.Model):
# Informations générales # Informations générales
H.append( H.append(
f"""<div><a class="discretelink" href="{scu.SCO_ANNONCES_WEBSITE}"> f"""<div>
Pour en savoir plus sur ScoDoc voir le site scodoc.org</a>. Pour en savoir plus sur ScoDoc voir le site
<a class="stdlink" href="{scu.SCO_ANNONCES_WEBSITE}">scodoc.org</a>.
</div> </div>
""" """
) )

View File

@ -303,13 +303,16 @@ def sco_header(
# div pour affichage messages temporaires # div pour affichage messages temporaires
H.append('<div id="sco_msg" class="head_message"></div>') H.append('<div id="sco_msg" class="head_message"></div>')
# #
H.append('<div class="sco-app-content">')
return "".join(H) return "".join(H)
def sco_footer(): def sco_footer():
"""Main HTMl pages footer""" """Main HTMl pages footer"""
return ( return (
"""</div><!-- /gtrcontent -->""" + scu.CUSTOM_HTML_FOOTER + """</body></html>""" """</div></div><!-- /gtrcontent -->"""
+ scu.CUSTOM_HTML_FOOTER
+ """</body></html>"""
) )

View File

@ -57,7 +57,7 @@ def index_html(showcodes=0, showsemtable=0):
H.append(ScolarNews.scolar_news_summary_html()) H.append(ScolarNews.scolar_news_summary_html())
# Avertissement de mise à jour: # Avertissement de mise à jour:
H.append("""<div id="update_warning"></div>""") H.append("""<div id="update_warning" class="scobox update_warning"></div>""")
# Liste de toutes les sessions: # Liste de toutes les sessions:
sems = sco_formsemestre.do_formsemestre_list() sems = sco_formsemestre.do_formsemestre_list()
@ -106,33 +106,39 @@ def index_html(showcodes=0, showsemtable=0):
""" """
) )
H.append("""<div class="scobox">""")
# Liste des formsemestres "courants" # Liste des formsemestres "courants"
if cursems: if cursems:
H.append('<h2 class="listesems">Sessions en cours</h2>') H.append(
H.append(_sem_table(cursems)) f"""
<div class="scobox-title">Sessions en cours</div>
{ _sem_table(cursems) }
"""
)
else: else:
# aucun semestre courant: affiche aide # aucun semestre courant: affiche aide
H.append( H.append(
"""<h2 class="listesems">Aucune session en cours !</h2> """
<div class="scobox-title">Aucune session en cours !</div>
<p>Pour ajouter une session, aller dans <a href="Notes" id="link-programmes">Formations</a>, <p>Pour ajouter une session, aller dans <a href="Notes" id="link-programmes">Formations</a>,
choisissez une formation, puis suivez le lien "<em>UE, modules, semestres</em>". choisissez une formation, puis suivez le lien "<em>UE, modules, semestres</em>".
</p><p> </p>
, en bas de page, suivez le lien <p>, en bas de page, suivez le lien
"<em>Mettre en place un nouveau semestre de formation...</em>" "<em>Mettre en place un nouveau semestre de formation...</em>"
</p>""" </p>"""
) )
if showsemtable: if showsemtable:
H.append( H.append(
f"""<hr> f"""
<h2>Semestres de {sco_preferences.get_preference("DeptName")}</h2> <div class="scobox-title">Semestres de {sco_preferences.get_preference("DeptName")}</div>
""" """
) )
H.append(_sem_table_gt(sems, showcodes=showcodes).html()) H.append(_sem_table_gt(sems, showcodes=showcodes).html())
H.append("</table>") H.append("</table>")
if not showsemtable: else:
H.append( H.append(
f"""<hr> f"""
<p><a class="stdlink" href="{url_for('scolar.index_html', <p><a class="stdlink" href="{url_for('scolar.index_html',
scodoc_dept=g.scodoc_dept, showsemtable=1) scodoc_dept=g.scodoc_dept, showsemtable=1)
}">Voir table des semestres (dont {len(othersems)} }">Voir table des semestres (dont {len(othersems)}
@ -141,17 +147,19 @@ def index_html(showcodes=0, showsemtable=0):
) )
H.append( H.append(
f"""<p> f"""
<form action="{url_for('notes.view_formsemestre_by_etape', scodoc_dept=g.scodoc_dept)}"> <form action="{url_for('notes.view_formsemestre_by_etape', scodoc_dept=g.scodoc_dept)}">
Chercher étape courante: Chercher étape courante:
<input name="etape_apo" type="text" size="8" spellcheck="false"></input> <input name="etape_apo" type="text" size="8" spellcheck="false"></input>
</form> </form>
</p>""" </div>
"""
) )
# #
H.append( H.append(
"""<hr> """
<h3>Gestion des étudiants</h3> <div class="scobox">
<div class="scobox-title">Gestion des étudiants</div>
<ul> <ul>
""" """
) )
@ -191,27 +199,35 @@ def index_html(showcodes=0, showsemtable=0):
</li> </li>
""" """
) )
H.append("</ul>") H.append("</ul></div>")
# #
if current_user.has_permission(Permission.EditApogee): if current_user.has_permission(Permission.EditApogee):
H.append( H.append(
f"""<hr> f"""
<h3>Exports Apogée</h3> <div class="scobox">
<div class="scobox-title">Exports Apogée</div>
<ul> <ul>
<li><a class="stdlink" href="{url_for('notes.semset_page', scodoc_dept=g.scodoc_dept) <li><a class="stdlink" href="{
}">Années scolaires / exports Apogée</a></li> url_for('notes.semset_page', scodoc_dept=g.scodoc_dept)
}">Années scolaires / exports Apogée</a>
</li>
</ul> </ul>
</div>
""" """
) )
# #
H.append( H.append(
"""<hr> """
<h3>Assistance</h3> <div class="scobox">
<div class="scobox-title">Assistance</div>
<ul> <ul>
<li><a class="stdlink" href="https://scodoc.org/Contact" target="_blank" <li><a class="stdlink" href="https://scodoc.org/Contact" target="_blank"
rel="noopener noreferrer">Contact (Discord)</a></li> rel="noopener noreferrer">Contact (Discord)</a>
<li><a class="stdlink" href="sco_dump_and_send_db">Envoyer données</a></li> </li>
<li><a class="stdlink" href="sco_dump_and_send_db">Envoyer données</a>
</li>
</ul> </ul>
</div>
""" """
) )
# #

View File

@ -798,7 +798,7 @@ def _make_listes_sem(formsemestre: FormSemestre) -> str:
'Tous les étudiants'} 'Tous les étudiants'}
</div> </div>
<div class="sem-groups-partition-titre">{ <div class="sem-groups-partition-titre">{
"Gestion de l'assiduité" if not partition_is_empty else "" "Assiduité" if not partition_is_empty else ""
}</div> }</div>
""" """
) )
@ -824,14 +824,14 @@ def _make_listes_sem(formsemestre: FormSemestre) -> str:
</div> </div>
<div class="sem-groups-assi"> <div class="sem-groups-assi">
<div> <div>
<a class="btn" href="{ <a class="stdlink" href="{
url_for("assiduites.visu_assi_group", url_for("assiduites.visu_assi_group",
scodoc_dept=g.scodoc_dept, scodoc_dept=g.scodoc_dept,
date_debut=formsemestre.date_debut.isoformat(), date_debut=formsemestre.date_debut.isoformat(),
date_fin=formsemestre.date_fin.isoformat(), date_fin=formsemestre.date_fin.isoformat(),
group_ids=group.id, group_ids=group.id,
)}"> )}">
<button>Bilan assiduité</button></a> Bilan</a>
</div> </div>
""" """
) )
@ -839,42 +839,42 @@ def _make_listes_sem(formsemestre: FormSemestre) -> str:
H.append( H.append(
f""" f"""
<div> <div>
<a class="btn" href="{ <a class="stdlink" href="{
url_for("assiduites.visu_assiduites_group", url_for("assiduites.visu_assiduites_group",
scodoc_dept=g.scodoc_dept, scodoc_dept=g.scodoc_dept,
formsemestre_id=formsemestre.id, formsemestre_id=formsemestre.id,
jour = datetime.date.today().isoformat(), jour = datetime.date.today().isoformat(),
group_ids=group.id, group_ids=group.id,
)}"> )}">
<button>Visualiser</button></a> Visualiser</a>
</div> </div>
<div> <div>
<a class="btn" href="{ <a class="stdlink" href="{
url_for("assiduites.signal_assiduites_group", url_for("assiduites.signal_assiduites_group",
scodoc_dept=g.scodoc_dept, scodoc_dept=g.scodoc_dept,
jour=datetime.date.today().isoformat(), jour=datetime.date.today().isoformat(),
formsemestre_id=formsemestre.id, formsemestre_id=formsemestre.id,
group_ids=group.id, group_ids=group.id,
)}"> )}">
<button>Saisie journalière</button></a> Saisie journalière</a>
</div> </div>
<div> <div>
<a class="btn" href="{ <a class="stdlink" href="{
url_for("assiduites.signal_assiduites_diff", url_for("assiduites.signal_assiduites_diff",
scodoc_dept=g.scodoc_dept, scodoc_dept=g.scodoc_dept,
formsemestre_id=formsemestre.id, formsemestre_id=formsemestre.id,
group_ids=group.id, group_ids=group.id,
)}"> )}">
<button>Saisie différée</button></a> Saisie différée</a>
</div> </div>
<div> <div>
<a class="btn" href="{ <a class="stdlink" href="{
url_for("assiduites.bilan_dept", url_for("assiduites.bilan_dept",
scodoc_dept=g.scodoc_dept, scodoc_dept=g.scodoc_dept,
formsemestre_id=formsemestre.id, formsemestre_id=formsemestre.id,
group_ids=group.id, group_ids=group.id,
)}"> )}">
<button>Justificatifs en attente</button></a> Justificatifs en attente</a>
</div> </div>
""" """
) )

View File

@ -1210,7 +1210,9 @@ def formsemestre_validate_previous_ue(formsemestre: FormSemestre, etud: Identite
<p class="help">Utiliser cette page pour enregistrer des UEs validées antérieurement, <p class="help">Utiliser cette page pour enregistrer des UEs validées antérieurement,
<em>dans un semestre hors ScoDoc</em>.</p> <em>dans un semestre hors ScoDoc</em>.</p>
<p class="expl"><b>Les UE validées dans ScoDoc sont
<div class="scobox explanation">
<p><b>Les UE validées dans ScoDoc sont
automatiquement prises en compte</b>. automatiquement prises en compte</b>.
</p> </p>
<p>Cette page est surtout utile pour les étudiants ayant <p>Cette page est surtout utile pour les étudiants ayant
@ -1227,11 +1229,12 @@ def formsemestre_validate_previous_ue(formsemestre: FormSemestre, etud: Identite
l'attribution des ECTS si le code jury est validant (ADM). l'attribution des ECTS si le code jury est validant (ADM).
</p> </p>
<p>On ne peut valider ici que les UEs du cursus <b>{formation.titre}</b></p> <p>On ne peut valider ici que les UEs du cursus <b>{formation.titre}</b></p>
</div>
{_get_etud_ue_cap_html(etud, formsemestre)} {_get_etud_ue_cap_html(etud, formsemestre)}
<div class="sco_box"> <div class="scobox">
<div class="sco_box_title"> <div class="scobox-title">
Enregistrer une UE antérieure Enregistrer une UE antérieure
</div> </div>
{tf[1]} {tf[1]}

View File

@ -1442,7 +1442,7 @@ def icontag(name, file_format="png", no_size=False, **attrs):
ICON_PDF = icontag("pdficon16x20_img", title="Version PDF") ICON_PDF = icontag("pdficon16x20_img", title="Version PDF")
ICON_XLS = icontag("xlsicon_img", title="Version tableur") ICON_XLS = icontag("xlsicon_img", title="Export tableur (xlsx)")
# HTML emojis # HTML emojis
EMO_WARNING = "&#9888;&#65039;" # warning /!\ EMO_WARNING = "&#9888;&#65039;" # warning /!\

View File

@ -577,13 +577,6 @@
border: solid 1px #333; border: solid 1px #333;
} }
.assi-liste {
border: 1px solid gray;
border-radius: 12px;
margin-right: 24px;
padding: 12px;
}
#options-tableau label { #options-tableau label {
font-weight: normal; font-weight: normal;
margin-right: 12px; margin-right: 12px;

View File

@ -6,6 +6,7 @@
--sco-content-max-width: 1024px; --sco-content-max-width: 1024px;
--sco-color-explication: rgb(10, 58, 140); --sco-color-explication: rgb(10, 58, 140);
--sco-color-background: rgb(242, 242, 238); --sco-color-background: rgb(242, 242, 238);
--sco-color-box-bg: rgb(243, 240, 228);
--sco-color-mod-std: #afafc2; --sco-color-mod-std: #afafc2;
--sco-color-ressources: #f8c844; --sco-color-ressources: #f8c844;
--sco-color-saes: #c6ffab; --sco-color-saes: #c6ffab;
@ -28,10 +29,6 @@ body {
} }
} }
div.container {
margin-bottom: 24px;
}
h1, h1,
h2, h2,
h3 { h3 {
@ -43,6 +40,47 @@ h3 {
font-weight: bold; font-weight: bold;
} }
div.container {
margin-bottom: 24px;
}
div.sco-app-content {
display: flex;
flex-direction: column;
}
div.scobox {
flex: 1 0 0; /* Equal width for all boxes */
max-width: var(--sco-content-max-width);
/* margin: 5px; Optional: Add margin between boxes */
background-color: var(--sco-color-box-bg);
margin-top: 12px;
margin-bottom: 12px;
margin-right: 12px;
padding: 8px;
border: 1px solid #c5b4b2;
border-radius: 8px;
}
div.scobox.explanation {
background-color: var(--sco-color-background);
}
div.scobox div.scobox-title {
font-size: 120%;
font-weight: bold;
margin-bottom: 8px;
}
div.scobox-buttons {
margin-top: 16px;
margin-bottom: 4px;
}
div.scobox-buttons input {
font-size: 110%;
}
div.scobox-etud {
background-color: var(--sco-color-background);
}
/* customization of multiselect style */ /* customization of multiselect style */
.multiselect-container.dropdown-menu { .multiselect-container.dropdown-menu {
background-color: #e9e9e9; background-color: #e9e9e9;
@ -670,35 +708,20 @@ div#gtrcontent table.semlist tbody tr.css_MEXT td {
/* ----- Liste des news ----- */ /* ----- Liste des news ----- */
div.news { div.scobox.news {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10pt; font-size: 10pt;
margin-top: 1em;
margin-bottom: 0px;
margin-right: 16px;
margin-left: 16px;
padding: 0.5em;
background-color: rgb(255, 235, 170); background-color: rgb(255, 235, 170);
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
} }
div.news a, div.news a,
div.news a.stdlink { div.news a.stdlink {
color: black; color: black;
text-decoration: none; text-decoration: none;
} }
div.news a:hover { div.news a:hover {
color: rgb(153, 51, 51); color: rgb(153, 51, 51);
text-decoration: underline; text-decoration: underline;
} }
span.newstitle {
font-weight: bold;
}
ul.newslist { ul.newslist {
padding-left: 1em; padding-left: 1em;
padding-bottom: 0em; padding-bottom: 0em;
@ -713,6 +736,21 @@ span.newsdate {
span.newstext { span.newstext {
font-style: normal; font-style: normal;
} }
/* div.news {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10pt;
margin-top: 1em;
margin-bottom: 0px;
margin-right: 16px;
margin-left: 16px;
padding: 0.5em;
background-color: rgb(255, 235, 170);
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
} */
span.gt_export_icons { span.gt_export_icons {
margin-left: 1.5em; margin-left: 1.5em;
@ -1184,7 +1222,6 @@ a.discretelink:hover {
text-align: center; text-align: center;
} }
.expl,
.help { .help {
max-width: var(--sco-content-max-width); max-width: var(--sco-content-max-width);
} }
@ -1980,9 +2017,17 @@ ul.ue_inscr_list li.etud {
grid-template-columns: 240px auto; grid-template-columns: 240px auto;
} }
.sem-groups-partition .stdlink, .sem-groups-partition .stdlink:visited {
color: black;
text-decoration-style: dashed;
}
.sem-groups-list .stdlink, .sem-groups-list .stdlink:visited {
color:rgb(0, 0, 192);
}
.sem-groups-list, .sem-groups-list,
.sem-groups-assi { .sem-groups-assi {
background-color: white; background-color: #ebebeb;
border-radius: 6px; border-radius: 6px;
margin: 4px; margin: 4px;
} }
@ -4102,22 +4147,18 @@ div.othersemlist input {
margin-left: 20px; margin-left: 20px;
} }
div#update_warning { div.scobox.update_warning {
display: none; display: none;
border: 1px solid red; border: 1px solid red;
background-color: rgb(250, 220, 220); background-color: rgb(250, 220, 220);
margin: 3ex;
padding-left: 1ex;
padding-right: 1ex;
padding-bottom: 1ex;
} }
div#update_warning > div:first-child:before { div.scobox.update_warning > div:first-child:before {
content: url(/ScoDoc/static/icons/warning_img.png); content: url(/ScoDoc/static/icons/warning_img.png);
vertical-align: -80%; vertical-align: -80%;
} }
div#update_warning > div:nth-child(2) { div.scobox.update_warning > div:nth-child(2) {
font-size: 80%; font-size: 80%;
padding-left: 8ex; padding-left: 8ex;
} }

View File

@ -110,9 +110,9 @@ div.submit > input {
</div> </div>
</form> </form>
<section class="assi-liste"> <div class="scobox assi-liste">
{{tableau | safe }} {{tableau | safe }}
</section> </div>
</div> </div>

View File

@ -137,9 +137,9 @@ div.submit > input {
</form> </form>
</section> </section>
{% if tableau %} {% if tableau %}
<section class="assi-liste"> <div class="scobox assi-liste">
{{tableau | safe }} {{tableau | safe }}
</section> </div>
{% endif %} {% endif %}
</div> </div>

View File

@ -7,23 +7,28 @@
{{ super() }} {{ super() }}
<script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script> <script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script>
{% endblock scripts %} {% endblock scripts %}
{% block app_content %} {% block app_content %}
<h2>Traitement de l'assiduité</h2>
<h1>Traitement de l'assiduité</h1>
<p class="help"> <p class="help">
Pour saisir l'assiduité ou consulter les états, il est recommandé de passer par Pour saisir l'assiduité ou consulter les états, il est recommandé de passer par
le semestre concerné (saisie par jour ou saisie différée). le semestre concerné (saisie par jour ou saisie différée).
</p> </p>
<div class="scobox scobox-etud">
<p class="help">Pour signaler, annuler ou justifier l'assiduité d'un seul étudiant, <p class="help">Pour signaler, annuler ou justifier l'assiduité d'un seul étudiant,
choisissez d'abord la personne concernée&nbsp;:</p> choisissez d'abord la personne concernée&nbsp;:</p>
<br>
{{search_etud | safe}} {{search_etud | safe}}
<br> </div>
{{billets | safe}}
<br>
<div> <div>
<h3>Télécharger l'assiduité</h3> {{billets | safe}}
<div>
<div class="scobox">
<div class="scobox-title">Télécharger tous les enregistrements d'assiduité</div>
<form action="{{url_for('assiduites.recup_assiduites_plage', scodoc_dept=g.scodoc_dept)}}" method="post"> <form action="{{url_for('assiduites.recup_assiduites_plage', scodoc_dept=g.scodoc_dept)}}" method="post">
<label for="datedeb"> <label for="datedeb">
@ -36,7 +41,7 @@ le semestre concerné (saisie par jour ou saisie différée).
<input type="text" class="datepicker" id="datefin" name="datefin"> <input type="text" class="datepicker" id="datefin" name="datefin">
</label> </label>
<br> <br>
<label for="formsemestre_id">Télécharger l'assiduité de </label> <label for="formsemestre_id">Origine :</label>
<select name="formsemestre_id" id="formsemestre_id"> <select name="formsemestre_id" id="formsemestre_id">
<option value="">Tout le département</option> <option value="">Tout le département</option>
{% for id, titre in formsemestres.items() %} {% for id, titre in formsemestres.items() %}
@ -47,14 +52,17 @@ le semestre concerné (saisie par jour ou saisie différée).
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</select> </select>
<br> <div class="scobox-buttons">
<input type="submit" value="Télécharger" name="telecharger"> <input type="submit" value="Télécharger" name="telecharger">
</div>
</form> </form>
</div> </div>
<br>
<section class="nonvalide"> <section class="nonvalide">
<div class="scobox">
{{tableau | safe }} {{tableau | safe }}
</div>
</section> </section>
{% endblock app_content %} {% endblock app_content %}

View File

@ -37,16 +37,10 @@ Bilan assiduité de {{sco.etud.nomprenom}}
flex-direction: column; flex-direction: column;
} }
.alerte { .scobox.alerte {
display: flex; text-align: center;
justify-content: center;
align-items: center;
padding: 10px;
margin: 5px 0;
border-radius: 7px; border-radius: 7px;
background-color: var(--color-error); background-color: var(--color-error);
} }
.alerte.invisible { .alerte.invisible {
@ -70,11 +64,11 @@ Bilan assiduité de {{sco.etud.nomprenom}}
<h2>Bilan de l'assiduité de {{sco.etud.html_link_fiche()|safe}}</span></h2> <h2>Bilan de l'assiduité de {{sco.etud.html_link_fiche()|safe}}</span></h2>
<section class="alerte invisible"> <div class="scobox alerte invisible">
<p>Attention, cet étudiant a trop d'absences</p> <p>Attention, cet étudiant a trop d'absences</p>
</section> </div>
<section class="stats"> <div class="scobox">
<!-- Statistiques d'assiduité (nb pres, nb retard, nb absence) + nb justifié --> <!-- Statistiques d'assiduité (nb pres, nb retard, nb absence) + nb justifié -->
<h4>Statistiques d'assiduité</h4> <h4>Statistiques d'assiduité</h4>
<div class="stats-inputs"> <div class="stats-inputs">
@ -88,13 +82,16 @@ Bilan assiduité de {{sco.etud.nomprenom}}
<div class="stats-values"> <div class="stats-values">
</div> </div>
</section> </div>
<br>
<div class="scobox">
<section class="nonvalide"> <section class="nonvalide">
<div>Le tableau n'affiche que les assiduités non justifiées et les justificatifs soumis / modifiés</div> <div class="help">Le tableau n'affiche que les assiduités non justifiées
et les justificatifs soumis / modifiés
</div>
{{tableau | safe }} {{tableau | safe }}
</section> </section>
</div>
<div class="legende"> <div class="legende">
<h3>Statistiques</h3> <h3>Statistiques</h3>

View File

@ -1,5 +1,5 @@
<div> <div class="assi-tableau">
<div class="sco_box_title">{{ titre }}</div> <div class="scobox-title">{{ titre }}</div>
<div class="options-tableau"> <div class="options-tableau">
{% if afficher_options != false %} {% if afficher_options != false %}
<input type="checkbox" id="show_pres" name="show_pres" <input type="checkbox" id="show_pres" name="show_pres"

View File

@ -33,9 +33,11 @@
{% endblock %} {% endblock %}
{% endif %} {% endif %}
<div class="sco-app-content">
{% block app_content %} {% block app_content %}
page vide page vide
{% endblock %} {% endblock %}
</div>
</div> </div>
{% endblock %} {% endblock %}