mirror of
https://github.com/ae-utbm/sith.git
synced 2026-09-17 17:54:22 +00:00
style: improve ue detail infos appearance
This commit is contained in:
imperosol
@@ -9,44 +9,18 @@ $pedagogy-light-blue: #caf0ff;
|
||||
$pedagogy-white-text: #f0f0f0;
|
||||
|
||||
.pedagogy {
|
||||
&.star-not-checked {
|
||||
color: #f7f7f7;
|
||||
.star-not-checked {
|
||||
color: lightgray;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.star-checked {
|
||||
.star-checked {
|
||||
color: $pedagogy-orange;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.grade-without-star {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $large-devices) {
|
||||
&.star-not-checked {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&.star-checked {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $small-devices) {
|
||||
&.grade-without-star {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.grade-with-star {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#ue-list {
|
||||
font-size: 1.1em;
|
||||
|
||||
@@ -64,12 +38,10 @@ $pedagogy-white-text: #f0f0f0;
|
||||
}
|
||||
|
||||
#search_form {
|
||||
|
||||
.radio-guide fieldset {
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
color: white;
|
||||
@@ -85,58 +57,65 @@ $pedagogy-white-text: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
#ue_detail {
|
||||
color: #062f38;
|
||||
|
||||
.ue-quick-info-container {
|
||||
&#ue_detail {
|
||||
.ue-infos {
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
flex-direction: row;
|
||||
@media screen and (max-width: 700px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.infos-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
min-width: 300px;
|
||||
}
|
||||
.info-container {
|
||||
// Darken the background color just enough to make this part
|
||||
// stand out a little, while not being too perceptible
|
||||
background: darken($white-color, 1%);
|
||||
display: grid;
|
||||
grid-template-columns: 20% 20% 20% 20% auto;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"hours-cm hours-td hours-tp hours-te hours-the"
|
||||
"department credit-type semester . .";
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-radius: 5px;
|
||||
padding: .75rem 1rem ;
|
||||
grid-gap: .5rem;
|
||||
@include shadow;
|
||||
|
||||
.info-container-item {
|
||||
display: grid;
|
||||
grid-column: span 2;
|
||||
grid-template-rows: subgrid;
|
||||
grid-template-columns: subgrid;
|
||||
grid-column-gap: 1rem;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:first-child {
|
||||
justify-content: right;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
grid-column: span 2;
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.department {
|
||||
grid-area: department;
|
||||
}
|
||||
|
||||
.credit-type {
|
||||
grid-area: credit-type;
|
||||
}
|
||||
|
||||
.semester {
|
||||
grid-area: semester;
|
||||
}
|
||||
|
||||
.hours-cm {
|
||||
grid-area: hours-cm;
|
||||
}
|
||||
|
||||
.hours-td {
|
||||
grid-area: hours-td;
|
||||
}
|
||||
|
||||
.hours-tp {
|
||||
grid-area: hours-tp;
|
||||
}
|
||||
|
||||
.hours-te {
|
||||
grid-area: hours-te;
|
||||
}
|
||||
|
||||
.hours-the {
|
||||
grid-area: hours-the;
|
||||
}
|
||||
|
||||
.leave-comment-not-allowed {
|
||||
#leave_comment_not_allowed {
|
||||
p {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.leave-comment {
|
||||
#leave_comment {
|
||||
.leave-comment-grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 270px auto;
|
||||
@@ -171,42 +150,6 @@ $pedagogy-white-text: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.ue-details-container {
|
||||
display: grid;
|
||||
grid-template-columns: 150px 130px auto;
|
||||
grid-template-rows: 156px 1fr;
|
||||
grid-template-areas:
|
||||
"grade grade-stars ue-infos"
|
||||
". . ue-infos";
|
||||
|
||||
@media screen and (max-width: $large-devices) {
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"grade grade-stars"
|
||||
"ue-infos ue-infos";
|
||||
}
|
||||
}
|
||||
|
||||
.grade {
|
||||
grid-area: grade;
|
||||
color: $pedagogy-white-text;
|
||||
background-color: $pedagogy-blue;
|
||||
padding-right: 10px;
|
||||
|
||||
>p {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.grade-stars {
|
||||
grid-area: grade-stars;
|
||||
color: $pedagogy-white-text;
|
||||
background-color: $pedagogy-blue;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ue-infos {
|
||||
grid-area: ue-infos;
|
||||
padding-left: 10px;
|
||||
|
||||
+8
-9
@@ -7,8 +7,7 @@
|
||||
{% endif %}
|
||||
|
||||
<section>
|
||||
{% for comment in comments %}
|
||||
|
||||
{%- for comment in comments -%}
|
||||
<div id="comment-{{ comment.id }}" class="comment-container">
|
||||
|
||||
<div class="grade-block">
|
||||
@@ -54,11 +53,12 @@
|
||||
</button>
|
||||
{% endif %}
|
||||
{% if comment.author_id == user.id or user.has_perm("pedagogy.delete_comment") %}
|
||||
<form class="action"
|
||||
hx-post="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}"
|
||||
hx-confirm='{% trans obj=object %}Are you sure you want to delete "{{ obj }}"?{% endtrans %}'
|
||||
hx-swap="outerHTML"
|
||||
hx-target="#comment-{{ comment.id }}"
|
||||
<form
|
||||
class="action"
|
||||
hx-post="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}"
|
||||
hx-confirm='{% trans obj=object %}Are you sure you want to delete "{{ obj }}"?{% endtrans %}'
|
||||
hx-swap="outerHTML"
|
||||
hx-target="#comment-{{ comment.id }}"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<button class="btn btn-red action">
|
||||
@@ -82,10 +82,9 @@
|
||||
</div>
|
||||
|
||||
<div class="date"><p>{{ comment.publish_date.strftime('%d/%m/%Y') }}</p></div>
|
||||
|
||||
<div class="author"><p>{{ user_profile_link(comment.author) }}</p></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
{%- endfor -%}
|
||||
</section>
|
||||
@@ -0,0 +1,20 @@
|
||||
<div class="info-container-item">
|
||||
<span>{% trans %}Global grade{% endtrans %}</span>
|
||||
<span>{{ display_star(object.grade_global_average) }}</span>
|
||||
</div>
|
||||
<div class="info-container-item">
|
||||
<span>{% trans %}Utility{% endtrans %}</span>
|
||||
<span>{{ display_star(object.grade_utility_average) }}</span>
|
||||
</div>
|
||||
<div class="info-container-item">
|
||||
<span>{% trans %}Interest{% endtrans %}</span>
|
||||
<span>{{ display_star(object.grade_interest_average) }}</span>
|
||||
</div>
|
||||
<div class="info-container-item">
|
||||
<span>{% trans %}Teaching{% endtrans %}</span>
|
||||
<span>{{ display_star(object.grade_teaching_average) }}</span>
|
||||
</div>
|
||||
<div class="info-container-item">
|
||||
<span>{% trans %}Workload{% endtrans %}</span>
|
||||
<span>{{ display_star(object.grade_work_load_average) }}</span>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
<hx-partial id="ue-grade">
|
||||
{% include "pedagogy/fragments/ue_detail/grade.jinja" %}
|
||||
</hx-partial>
|
||||
|
||||
<hx-partial id="comment-form">
|
||||
{% include "pedagogy/fragments/ue_detail/form.jinja" %}
|
||||
</hx-partial>
|
||||
|
||||
<hx-partial id="comments" hx-swap="innerMorph">
|
||||
{% include "pedagogy/fragments/ue_detail/comments.jinja" %}
|
||||
</hx-partial>
|
||||
@@ -1,27 +0,0 @@
|
||||
<div class="ue-details-container">
|
||||
<div class="grade">
|
||||
<p>{% trans %}Global grade{% endtrans %}</p>
|
||||
<p>{% trans %}Utility{% endtrans %}</p>
|
||||
<p>{% trans %}Interest{% endtrans %}</p>
|
||||
<p>{% trans %}Teaching{% endtrans %}</p>
|
||||
<p>{% trans %}Work load{% endtrans %}</p>
|
||||
</div>
|
||||
<div class="grade-stars">
|
||||
<p>{{ display_star(object.grade_global_average) }}</p>
|
||||
<p>{{ display_star(object.grade_utility_average) }}</p>
|
||||
<p>{{ display_star(object.grade_interest_average) }}</p>
|
||||
<p>{{ display_star(object.grade_teaching_average) }}</p>
|
||||
<p>{{ display_star(object.grade_work_load_average) }}</p>
|
||||
</div>
|
||||
<div class="ue-infos">
|
||||
<p><b>{% trans %}Objectives{% endtrans %}</b></p>
|
||||
<p>{{ object.objectives|markdown }}</p>
|
||||
<p><b>{% trans %}Program{% endtrans %}</b></p>
|
||||
<p>{{ object.program|markdown }}</p>
|
||||
<p><b>{% trans %}Earned skills{% endtrans %}</b></p>
|
||||
<p>{{ object.skills|markdown }}</p>
|
||||
<p><b>{% trans %}Key concepts{% endtrans %}</b></p>
|
||||
<p>{{ object.key_concepts|markdown }}</p>
|
||||
<p><b>{% trans %}UE manager: {% endtrans %}</b>{{ object.manager }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,5 +1,4 @@
|
||||
{% macro display_star(grade) -%}
|
||||
|
||||
{% if grade >= 0 %}
|
||||
{% for i in range(5) %}
|
||||
{% if i <= grade %}
|
||||
@@ -8,9 +7,7 @@
|
||||
<span class="fa-solid fa-star pedagogy star-not-checked grade-with-star"></span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<span class="pedagogy grade-without-star">{{ grade }}/5</span>
|
||||
{% else %}
|
||||
<span class="grade-text"> {% trans %} not rated {% endtrans %} </span>
|
||||
{% endif %}
|
||||
|
||||
{%- endmacro %}
|
||||
|
||||
@@ -1,91 +1,87 @@
|
||||
{% extends "core/base.jinja" %}
|
||||
{% from "pedagogy/macros.jinja" import display_star %}
|
||||
|
||||
{% if is_fragment %}
|
||||
|
||||
<hx-partial id="ue-grade">
|
||||
{% include "pedagogy/fragments/ue_details/grade.jinja" %}
|
||||
</hx-partial>
|
||||
{% block additional_css %}
|
||||
<link rel="stylesheet" href="{{ static('pedagogy/css/pedagogy.scss') }}">
|
||||
{% endblock %}
|
||||
|
||||
<hx-partial id="comment-form">
|
||||
{% include "pedagogy/fragments/ue_details/form.jinja" %}
|
||||
</hx-partial>
|
||||
{% block title %}
|
||||
{% trans %}UE Details{% endtrans %}
|
||||
{% endblock %}
|
||||
|
||||
<hx-partial id="comments" hx-swap="innerMorph">
|
||||
{% include "pedagogy/fragments/ue_details/comments.jinja" %}
|
||||
</hx-partial>
|
||||
|
||||
{% else %}
|
||||
{% extends "core/base.jinja" %}
|
||||
|
||||
{% block additional_css %}
|
||||
<link rel="stylesheet" href="{{ static('pedagogy/css/pedagogy.scss') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block title %}
|
||||
{% trans %}UE Details{% endtrans %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="pedagogy">
|
||||
<div id="ue_detail">
|
||||
<button onclick='(function(){
|
||||
// If comes from the guide page, go back with history
|
||||
if (document.referrer.replace(/\?(.+)/gm,"").endsWith(`{{ url("pedagogy:guide") }}`)){
|
||||
window.history.back();
|
||||
return;
|
||||
}
|
||||
// Simply goes to the guide page
|
||||
window.location.href = `{{ url("pedagogy:guide") }}`;
|
||||
})()' hidden>{% trans %}Back{% endtrans %}</button>
|
||||
|
||||
<h1>{{ object.code }} - {{ object.title }}</h1>
|
||||
<br>
|
||||
<div class="ue-quick-info-container">
|
||||
<div class="hours-cm">
|
||||
<b>{% trans %}CM: {% endtrans %}</b>{{ object.hours_CM }}
|
||||
{% block content %}
|
||||
<h1>{{ object.code }}</h1>
|
||||
<h2 class="margin-bottom">{{ object.title }}</h2>
|
||||
<div class="pedagogy" id="ue_detail">
|
||||
<div class="ue-infos">
|
||||
<div class="infos-column">
|
||||
<aside class="info-container">
|
||||
<div class="info-container-item">
|
||||
<div>{% trans %}Category{% endtrans %}</div>
|
||||
<div>{{ object.credit_type }}</div>
|
||||
</div>
|
||||
<div class="hours-td">
|
||||
<b>{% trans %}TD: {% endtrans %}</b>{{ object.hours_TD }}
|
||||
<div class="info-container-item">
|
||||
<div>{% trans %}Credits{% endtrans %}</div>
|
||||
<div>{{ object.credits }}</div>
|
||||
</div>
|
||||
<div class="hours-tp">
|
||||
<b>{% trans %}TP: {% endtrans %}</b>{{ object.hours_TP }}
|
||||
<hr>
|
||||
<div class="info-container-item">
|
||||
<div>Cours magistraux</div>
|
||||
<div>{{ object.hours_CM }}h</div>
|
||||
</div>
|
||||
<div class="hours-te">
|
||||
<b>{% trans %}TE: {% endtrans %}</b>{{ object.hours_TE }}
|
||||
<div class="info-container-item">
|
||||
<div>Travaux dirigés</div>
|
||||
<div>{{ object.hours_TD }}h</div>
|
||||
</div>
|
||||
<div class="hours-the">
|
||||
<b>{% trans %}THE: {% endtrans %}</b>{{ object.hours_THE }}
|
||||
<div class="info-container-item">
|
||||
<div>Travaux pratiques</div>
|
||||
<div>{{ object.hours_TP }}h</div>
|
||||
</div>
|
||||
|
||||
<div class="department">
|
||||
{{ object.department }}
|
||||
<div class="info-container-item">
|
||||
<div>Travail hors encadrement</div>
|
||||
<div>{{ object.hours_THE }}h</div>
|
||||
</div>
|
||||
<div class="credit-type">
|
||||
{{ object.credit_type }}
|
||||
<div class="info-container-item">
|
||||
<div>Cours magistraux</div>
|
||||
<div>{{ object.hours_TE }}h</div>
|
||||
</div>
|
||||
<div class="semester">
|
||||
{{ object.get_semester_display() }}
|
||||
<hr>
|
||||
<div class="info-container-item">
|
||||
<div>{% trans %}Availability{% endtrans %}</div>
|
||||
<div>{{ object.get_semester_display() }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div id="ue-grade">
|
||||
{% include "pedagogy/fragments/ue_details/grade.jinja" %}
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div id="comment-form">
|
||||
{% include "pedagogy/fragments/ue_details/form.jinja" %}
|
||||
</div>
|
||||
|
||||
<div id="comments">
|
||||
{% include "pedagogy/fragments/ue_details/comments.jinja" %}
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="info-container-item">
|
||||
<div>{% trans %}Manager{% endtrans %}</div>
|
||||
<div>{{ object.manager }}</div>
|
||||
</div>
|
||||
</aside>
|
||||
<aside class="info-container" id="ue-grade">
|
||||
{% include "pedagogy/fragments/ue_detail/grade.jinja" %}
|
||||
</aside>
|
||||
</div>
|
||||
<section class="ue-main-infos">
|
||||
<h3>{% trans %}Objectives{% endtrans %}</h3>
|
||||
<p>{{ object.objectives|markdown }}</p>
|
||||
<h3>{% trans %}Program{% endtrans %}</h3>
|
||||
<p>{{ object.program|markdown }}</p>
|
||||
<h3>{% trans %}Earned skills{% endtrans %}</h3>
|
||||
<p>{{ object.skills|markdown }}</p>
|
||||
<h3>{% trans %}Key concepts{% endtrans %}</h3>
|
||||
<p>{{ object.key_concepts|markdown }}</p>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
<div id="comment-form">
|
||||
{% include "pedagogy/fragments/ue_detail/form.jinja" %}
|
||||
</div>
|
||||
|
||||
<div id="comments">
|
||||
{% include "pedagogy/fragments/ue_detail/comments.jinja" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
+10
-7
@@ -88,16 +88,19 @@ class UEDetailView(
|
||||
|
||||
model = UE
|
||||
pk_url_kwarg = "ue_id"
|
||||
template_name = "pedagogy/ue_detail.jinja"
|
||||
permission_required = "pedagogy.view_ue"
|
||||
fragments = {
|
||||
"add_comment_form": UECommentCreateView,
|
||||
}
|
||||
fragments = {"add_comment_form": UECommentCreateView}
|
||||
|
||||
def get_template_names(self) -> list[str]:
|
||||
is_fragment = self.request.headers.get("HX-Request", False)
|
||||
return (
|
||||
["pedagogy/fragments/ue_detail/ue_detail.jinja"]
|
||||
if is_fragment
|
||||
else ["pedagogy/ue_detail.jinja"]
|
||||
)
|
||||
|
||||
def get_fragment_data(self):
|
||||
return {
|
||||
"add_comment_form": {"ue_id": self.object.id},
|
||||
}
|
||||
return {"add_comment_form": {"ue_id": self.object.id}}
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
return super().get_context_data(**kwargs) | {
|
||||
|
||||
Reference in New Issue
Block a user