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:
return ""
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)
}">Dernières opérations</a>
</span><ul class="newslist">"""
</div><ul class="newslist">"""
]
for news in news_list:
@ -266,8 +266,9 @@ class ScolarNews(db.Model):
# Informations générales
H.append(
f"""<div><a class="discretelink" href="{scu.SCO_ANNONCES_WEBSITE}">
Pour en savoir plus sur ScoDoc voir le site scodoc.org</a>.
f"""<div>
Pour en savoir plus sur ScoDoc voir le site
<a class="stdlink" href="{scu.SCO_ANNONCES_WEBSITE}">scodoc.org</a>.
</div>
"""
)

View File

@ -303,13 +303,16 @@ def sco_header(
# div pour affichage messages temporaires
H.append('<div id="sco_msg" class="head_message"></div>')
#
H.append('<div class="sco-app-content">')
return "".join(H)
def sco_footer():
"""Main HTMl pages footer"""
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())
# 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:
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"
if cursems:
H.append('<h2 class="listesems">Sessions en cours</h2>')
H.append(_sem_table(cursems))
H.append(
f"""
<div class="scobox-title">Sessions en cours</div>
{ _sem_table(cursems) }
"""
)
else:
# aucun semestre courant: affiche aide
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>,
choisissez une formation, puis suivez le lien "<em>UE, modules, semestres</em>".
</p><p>
, en bas de page, suivez le lien
</p>
<p>, en bas de page, suivez le lien
"<em>Mettre en place un nouveau semestre de formation...</em>"
</p>"""
)
if showsemtable:
H.append(
f"""<hr>
<h2>Semestres de {sco_preferences.get_preference("DeptName")}</h2>
f"""
<div class="scobox-title">Semestres de {sco_preferences.get_preference("DeptName")}</div>
"""
)
H.append(_sem_table_gt(sems, showcodes=showcodes).html())
H.append("</table>")
if not showsemtable:
else:
H.append(
f"""<hr>
f"""
<p><a class="stdlink" href="{url_for('scolar.index_html',
scodoc_dept=g.scodoc_dept, showsemtable=1)
}">Voir table des semestres (dont {len(othersems)}
@ -141,17 +147,19 @@ def index_html(showcodes=0, showsemtable=0):
)
H.append(
f"""<p>
f"""
<form action="{url_for('notes.view_formsemestre_by_etape', scodoc_dept=g.scodoc_dept)}">
Chercher étape courante:
<input name="etape_apo" type="text" size="8" spellcheck="false"></input>
</form>
</p>"""
</div>
"""
)
#
H.append(
"""<hr>
<h3>Gestion des étudiants</h3>
"""
<div class="scobox">
<div class="scobox-title">Gestion des étudiants</div>
<ul>
"""
)
@ -191,27 +199,35 @@ def index_html(showcodes=0, showsemtable=0):
</li>
"""
)
H.append("</ul>")
H.append("</ul></div>")
#
if current_user.has_permission(Permission.EditApogee):
H.append(
f"""<hr>
<h3>Exports Apogée</h3>
f"""
<div class="scobox">
<div class="scobox-title">Exports Apogée</div>
<ul>
<li><a class="stdlink" href="{url_for('notes.semset_page', scodoc_dept=g.scodoc_dept)
}">Années scolaires / exports Apogée</a></li>
<li><a class="stdlink" href="{
url_for('notes.semset_page', scodoc_dept=g.scodoc_dept)
}">Années scolaires / exports Apogée</a>
</li>
</ul>
</div>
"""
)
#
H.append(
"""<hr>
<h3>Assistance</h3>
"""
<div class="scobox">
<div class="scobox-title">Assistance</div>
<ul>
<li><a class="stdlink" href="https://scodoc.org/Contact" target="_blank"
rel="noopener noreferrer">Contact (Discord)</a></li>
<li><a class="stdlink" href="sco_dump_and_send_db">Envoyer données</a></li>
rel="noopener noreferrer">Contact (Discord)</a>
</li>
<li><a class="stdlink" href="sco_dump_and_send_db">Envoyer données</a>
</li>
</ul>
</div>
"""
)
#

View File

@ -798,7 +798,7 @@ def _make_listes_sem(formsemestre: FormSemestre) -> str:
'Tous les étudiants'}
</div>
<div class="sem-groups-partition-titre">{
"Gestion de l'assiduité" if not partition_is_empty else ""
"Assiduité" if not partition_is_empty else ""
}</div>
"""
)
@ -824,14 +824,14 @@ def _make_listes_sem(formsemestre: FormSemestre) -> str:
</div>
<div class="sem-groups-assi">
<div>
<a class="btn" href="{
<a class="stdlink" href="{
url_for("assiduites.visu_assi_group",
scodoc_dept=g.scodoc_dept,
date_debut=formsemestre.date_debut.isoformat(),
date_fin=formsemestre.date_fin.isoformat(),
group_ids=group.id,
)}">
<button>Bilan assiduité</button></a>
Bilan</a>
</div>
"""
)
@ -839,42 +839,42 @@ def _make_listes_sem(formsemestre: FormSemestre) -> str:
H.append(
f"""
<div>
<a class="btn" href="{
<a class="stdlink" href="{
url_for("assiduites.visu_assiduites_group",
scodoc_dept=g.scodoc_dept,
formsemestre_id=formsemestre.id,
jour = datetime.date.today().isoformat(),
group_ids=group.id,
)}">
<button>Visualiser</button></a>
Visualiser</a>
</div>
<div>
<a class="btn" href="{
<a class="stdlink" href="{
url_for("assiduites.signal_assiduites_group",
scodoc_dept=g.scodoc_dept,
jour=datetime.date.today().isoformat(),
formsemestre_id=formsemestre.id,
group_ids=group.id,
)}">
<button>Saisie journalière</button></a>
Saisie journalière</a>
</div>
<div>
<a class="btn" href="{
<a class="stdlink" href="{
url_for("assiduites.signal_assiduites_diff",
scodoc_dept=g.scodoc_dept,
formsemestre_id=formsemestre.id,
group_ids=group.id,
)}">
<button>Saisie différée</button></a>
Saisie différée</a>
</div>
<div>
<a class="btn" href="{
<a class="stdlink" href="{
url_for("assiduites.bilan_dept",
scodoc_dept=g.scodoc_dept,
formsemestre_id=formsemestre.id,
group_ids=group.id,
)}">
<button>Justificatifs en attente</button></a>
Justificatifs en attente</a>
</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,
<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>.
</p>
<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).
</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)}
<div class="sco_box">
<div class="sco_box_title">
<div class="scobox">
<div class="scobox-title">
Enregistrer une UE antérieure
</div>
{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_XLS = icontag("xlsicon_img", title="Version tableur")
ICON_XLS = icontag("xlsicon_img", title="Export tableur (xlsx)")
# HTML emojis
EMO_WARNING = "&#9888;&#65039;" # warning /!\

View File

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

View File

@ -6,6 +6,7 @@
--sco-content-max-width: 1024px;
--sco-color-explication: rgb(10, 58, 140);
--sco-color-background: rgb(242, 242, 238);
--sco-color-box-bg: rgb(243, 240, 228);
--sco-color-mod-std: #afafc2;
--sco-color-ressources: #f8c844;
--sco-color-saes: #c6ffab;
@ -28,10 +29,6 @@ body {
}
}
div.container {
margin-bottom: 24px;
}
h1,
h2,
h3 {
@ -43,6 +40,47 @@ h3 {
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 */
.multiselect-container.dropdown-menu {
background-color: #e9e9e9;
@ -670,35 +708,20 @@ div#gtrcontent table.semlist tbody tr.css_MEXT td {
/* ----- Liste des news ----- */
div.news {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
div.scobox.news {
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;
}
div.news a,
div.news a.stdlink {
color: black;
text-decoration: none;
}
div.news a:hover {
color: rgb(153, 51, 51);
text-decoration: underline;
}
span.newstitle {
font-weight: bold;
}
ul.newslist {
padding-left: 1em;
padding-bottom: 0em;
@ -713,6 +736,21 @@ span.newsdate {
span.newstext {
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 {
margin-left: 1.5em;
@ -1184,7 +1222,6 @@ a.discretelink:hover {
text-align: center;
}
.expl,
.help {
max-width: var(--sco-content-max-width);
}
@ -1980,9 +2017,17 @@ ul.ue_inscr_list li.etud {
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-assi {
background-color: white;
background-color: #ebebeb;
border-radius: 6px;
margin: 4px;
}
@ -4102,22 +4147,18 @@ div.othersemlist input {
margin-left: 20px;
}
div#update_warning {
div.scobox.update_warning {
display: none;
border: 1px solid red;
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);
vertical-align: -80%;
}
div#update_warning > div:nth-child(2) {
div.scobox.update_warning > div:nth-child(2) {
font-size: 80%;
padding-left: 8ex;
}

View File

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

View File

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

View File

@ -7,23 +7,28 @@
{{ super() }}
<script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script>
{% endblock scripts %}
{% block app_content %}
<h2>Traitement de l'assiduité</h2>
<h1>Traitement de l'assiduité</h1>
<p class="help">
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).
</p>
<div class="scobox scobox-etud">
<p class="help">Pour signaler, annuler ou justifier l'assiduité d'un seul étudiant,
choisissez d'abord la personne concernée&nbsp;:</p>
<br>
{{search_etud | safe}}
<br>
{{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">
<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">
</label>
<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">
<option value="">Tout le département</option>
{% for id, titre in formsemestres.items() %}
@ -47,14 +52,17 @@ le semestre concerné (saisie par jour ou saisie différée).
{% endif %}
{% endfor %}
</select>
<br>
<div class="scobox-buttons">
<input type="submit" value="Télécharger" name="telecharger">
</div>
</form>
</div>
<br>
<section class="nonvalide">
<div class="scobox">
{{tableau | safe }}
</div>
</section>
{% endblock app_content %}

View File

@ -37,16 +37,10 @@ Bilan assiduité de {{sco.etud.nomprenom}}
flex-direction: column;
}
.alerte {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
margin: 5px 0;
.scobox.alerte {
text-align: center;
border-radius: 7px;
background-color: var(--color-error);
}
.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>
<section class="alerte invisible">
<div class="scobox alerte invisible">
<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é -->
<h4>Statistiques d'assiduité</h4>
<div class="stats-inputs">
@ -88,13 +82,16 @@ Bilan assiduité de {{sco.etud.nomprenom}}
<div class="stats-values">
</div>
</section>
<br>
</div>
<div class="scobox">
<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 }}
</section>
</div>
<div class="legende">
<h3>Statistiques</h3>

View File

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

View File

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