klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-09 19:40:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

introduce djhtml as jinja+scss formater

Browse Source
This commit is contained in:
thomas girod
2024-07-24 00:16:31 +02:00
committed by Bartuccio Antoine
parent 13d0d2a300
commit b25805e0a1
171 changed files with 7070 additions and 7018 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
core/static/com/slideshow.scss
View File

@ -1,149 +1,149 @@
body{
position: absolute;
width: 100vw;
height: 100vh;
position: absolute;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
padding: 0;
margin: 0;
}
#slideshow{
position: relative;
background-color: lightgrey;
position: relative;
background-color: lightgrey;
height: 100%;
*{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
&:hover{
&::before{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
content: "Click to expand";
color: white;
background-color: rgba(black, 0.5);
}
}
&.fullscreen{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: none;
*{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
&:hover{
&::before{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
content: "Click to expand";
color: white;
background-color: rgba(black, 0.5);
}
}
&.fullscreen{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: none;
&:before{
display:none;
}
#slides{
height: 100vh;
}
&:before{
display:none;
}
#slides{
position: relative;
height: 100%;
overflow: hidden;
.slide{
position: absolute;
width: 100%;
height: 100%;
display: inline-flex;
justify-content: center;
top: 0px;
background-color: grey;
transition: left 1s ease-out;
img{
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
.slide.left{
left: -100%;
}
.slide.center{
left: 0px;
}
.slide.right{
left: 100%;
transition: none;
}
height: 100vh;
}
}
#progress_bullets{
position: absolute;
bottom: 10px;
width: 100%;
height: 10px;
#slides{
position: relative;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
.slide{
position: absolute;
width: 100%;
height: 100%;
margin-bottom: 10px;
display: inline-flex;
justify-content: center;
.bullet{
height: 10px;
width: 10px;
top: 0px;
margin-left: 5px;
margin-right: 5px;
background-color: grey;
transition: left 1s ease-out;
border-radius: 50%;
background-color: grey;
&.active{
background-color: #c99836;
}
}
img{
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
#progress_bar{
position: absolute;
bottom: 0px;
height: 10px;
background-color: #304c83;
&.init{
width: 0px;
transition: none;
}
&.progress{
width: 100%;
transition: width 10s linear;
}
.slide.left{
left: -100%;
}
.slide.center{
left: 0px;
}
.slide.right{
left: 100%;
transition: none;
}
}
#progress_bullets{
position: absolute;
bottom: 10px;
width: 100%;
height: 10px;
display: flex;
justify-content: center;
margin-bottom: 10px;
.bullet{
height: 10px;
width: 10px;
margin-left: 5px;
margin-right: 5px;
border-radius: 50%;
background-color: grey;
&.active{
background-color: #c99836;
}
}
}
#progress_bar{
position: absolute;
bottom: 0px;
height: 10px;
background-color: #304c83;
&.init{
width: 0px;
transition: none;
}
&.progress{
width: 100%;
transition: width 10s linear;
}
}
}

6
core/static/core/markdown.scss
View File

@ -21,9 +21,9 @@
overflow: auto;
max-width: 100%;
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
"Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
"Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
monospace;
"Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
"Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
monospace;
font-size: 14px;
tab-size: 4;
border-radius: 4px;

4
core/static/core/navbar.scss
View File

@ -43,7 +43,7 @@ nav.navbar {
justify-content: center;
display: flex !important;
}
> .menu,
> .link {
box-sizing: border-box;
@ -146,5 +146,5 @@ nav.navbar {
}
}
}
}
}
}

117
core/static/core/style.scss
View File

@ -170,7 +170,7 @@ a:not(.button) {
.shadow {
box-shadow: rgba(60, 64, 67, 0.3) 0 1px 3px 0,
rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
}
.w_big {
@ -246,7 +246,7 @@ a:not(.button) {
#page {
width: 90%;
margin: 20px auto 0;
/*---------------------------------NAV---------------------------------*/
/*---------------------------------NAV---------------------------------*/
.btn {
font-size: 15px;
@ -278,7 +278,7 @@ a:not(.button) {
}
}
/*--------------------------------CONTENT------------------------------*/
/*--------------------------------CONTENT------------------------------*/
#quick_notif {
width: 100%;
margin: 0 auto;
@ -357,7 +357,7 @@ a:not(.button) {
}
}
/*---------------------------------NEWS--------------------------------*/
/*---------------------------------NEWS--------------------------------*/
#news {
display: flex;
@ -385,11 +385,11 @@ a:not(.button) {
background: $second-color;
box-shadow: $shadow-color 1px 1px 1px;
padding: 0.4em;
margin: 0em 0em 0.5em 0em;
margin: 0 0 0.5em 0;
text-transform: uppercase;
font-size: 1.1em;
&:not(:first-of-type) {
margin: 2em 0em 1em 0em;
margin: 2em 0 1em 0;
}
}
}
@ -400,7 +400,7 @@ a:not(.button) {
}
}
/* AGENDA/BIRTHDAYS */
/* AGENDA/BIRTHDAYS */
#agenda,
#birthdays {
display: block;
@ -410,7 +410,7 @@ a:not(.button) {
margin-bottom: 1em;
#agenda_title,
#birthdays_title {
margin: 0em;
margin: 0;
border-radius: 5px 5px 0 0;
box-shadow: $shadow-color 1px 1px 1px;
padding: 0.5em;
@ -444,7 +444,7 @@ a:not(.button) {
}
}
ul.birthdays_year {
margin: 0em;
margin: 0;
list-style-type: none;
font-weight: bold;
> li {
@ -454,7 +454,7 @@ a:not(.button) {
}
}
ul {
margin: 0em;
margin: 0;
margin-left: 1em;
list-style-type: square;
list-style-position: inside;
@ -463,9 +463,9 @@ a:not(.button) {
}
}
}
/* END AGENDA/BIRTHDAYS */
/* END AGENDA/BIRTHDAYS */
/* EVENTS TODAY AND NEXT FEW DAYS */
/* EVENTS TODAY AND NEXT FEW DAYS */
.news_events_group {
box-shadow: $shadow-color 1px 1px 1px;
margin-left: 1em;
@ -516,14 +516,14 @@ a:not(.button) {
float: left;
min-width: 7em;
max-width: 9em;
margin: 0em;
margin: 0;
margin-right: 1em;
margin-top: 0.8em;
img {
max-height: 6em;
max-width: 8em;
display: block;
margin: 0em auto;
margin: 0 auto;
}
}
.news_date {
@ -544,15 +544,15 @@ a:not(.button) {
}
}
}
/* END EVENTS TODAY AND NEXT FEW DAYS */
/* END EVENTS TODAY AND NEXT FEW DAYS */
/* COMING SOON */
/* COMING SOON */
.news_coming_soon {
display: list-item;
list-style-type: square;
list-style-position: inside;
margin-left: 1em;
padding-left: 0em;
padding-left: 0;
a {
font-weight: bold;
text-transform: uppercase;
@ -561,35 +561,35 @@ a:not(.button) {
font-size: 0.9em;
}
}
/* END COMING SOON */
/* END COMING SOON */
/* NOTICES */
/* NOTICES */
.news_notice {
margin: 0em 0em 1em 1em;
margin: 0 0 1em 1em;
padding: 0.4em;
padding-left: 1em;
background: $secondary-neutral-light-color;
box-shadow: $shadow-color 0 0 2px;
border-radius: 18px 5px 18px 5px;
h4 {
margin: 0em;
margin: 0;
}
.news_content {
margin-left: 1em;
}
}
/* END NOTICES */
/* END NOTICES */
/* CALLS */
/* CALLS */
.news_call {
margin: 0em 0em 1em 1em;
margin: 0 0 1em 1em;
padding: 0.4em;
padding-left: 1em;
background: $secondary-neutral-light-color;
border: 1px solid grey;
box-shadow: $shadow-color 1px 1px 1px;
h4 {
margin: 0em;
margin: 0;
}
.news_date {
font-size: 0.9em;
@ -598,7 +598,7 @@ a:not(.button) {
margin-left: 1em;
}
}
/* END CALLS */
/* END CALLS */
.news_empty {
margin-left: 1em;
@ -631,12 +631,12 @@ a:not(.button) {
width: 19%;
float: left;
min-width: 15em;
margin: 0em;
margin: 0;
img {
max-height: 15em;
max-width: 12em;
display: block;
margin: 0em auto;
margin: 0 auto;
margin-bottom: 10px;
}
}
@ -646,7 +646,6 @@ a:not(.button) {
padding: 0.5em 1em;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1.2em;
border-radius: 2px;
float: right;
@ -978,7 +977,7 @@ table {
-moz-border-radius: 5px;
overflow: hidden;
box-shadow: rgba(60, 64, 67, 0.3) 0 1px 3px 0,
rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
}
@media screen and (max-width: 500px) {
@ -1198,8 +1197,8 @@ u,
color: $primary-neutral-dark-color;
height: 100%;
width: 100%;
margin: 0em;
padding: 0em;
margin: 0;
padding: 0;
display: block;
}
}
@ -1393,7 +1392,7 @@ footer {
text-align: center;
vertical-align: middle;
div {
margin: 0.6em 0em;
margin: 0.6em 0;
color: $white-color;
border-radius: 5px;
display: flex;
@ -1573,10 +1572,10 @@ $pedagogy-white-text: #f0f0f0;
grid-template-columns: auto auto;
grid-template-rows: auto auto auto;
grid-template-areas:
"action-bar action-bar"
"search-bar search-bar"
"radio-department radio-department"
"radio-credit-type radio-semester";
"action-bar action-bar"
"search-bar search-bar"
"radio-department radio-department"
"radio-credit-type radio-semester";
}
.action-bar {
@ -1668,8 +1667,8 @@ $pedagogy-white-text: #f0f0f0;
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 . .";
"hours-cm hours-td hours-tp hours-te hours-the"
"department credit-type semester . .";
}
.department {
@ -1722,8 +1721,8 @@ $pedagogy-white-text: #f0f0f0;
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"stars"
"comment";
"stars"
"comment";
}
}
@ -1770,15 +1769,15 @@ $pedagogy-white-text: #f0f0f0;
grid-template-columns: 150px 100px auto;
grid-template-rows: 156px 1fr;
grid-template-areas:
"grade grade-stars uv-infos"
". . uv-infos";
"grade grade-stars uv-infos"
". . uv-infos";
@media screen and (max-width: $large-devices) {
grid-template-columns: 50% 50%;
grid-template-rows: auto auto;
grid-template-areas:
"grade grade-stars"
"uv-infos uv-infos";
"grade grade-stars"
"uv-infos uv-infos";
}
}
@ -1811,9 +1810,9 @@ $pedagogy-white-text: #f0f0f0;
grid-template-columns: 300px auto;
grid-template-rows: auto auto auto;
grid-template-areas:
"grade-block comment"
"grade-block info"
"comment-end-bar comment-end-bar";
"grade-block comment"
"grade-block info"
"comment-end-bar comment-end-bar";
margin-bottom: 30px;
margin-top: 10px;
@ -1821,10 +1820,10 @@ $pedagogy-white-text: #f0f0f0;
grid-template-columns: auto;
grid-template-rows: auto auto auto auto;
grid-template-areas:
"grade-block"
"comment"
"info"
"comment-end-bar";
"grade-block"
"comment"
"info"
"comment-end-bar";
}
.grade-block {
@ -1835,8 +1834,8 @@ $pedagogy-white-text: #f0f0f0;
grid-template-columns: 150px 150px;
grid-template-rows: 156px auto;
grid-template-areas:
"grade-type grade-stars"
"grade-extension grade-extension";
"grade-type grade-stars"
"grade-extension grade-extension";
grid-gap: 15px;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30px, 270px 0);
@ -1881,8 +1880,8 @@ $pedagogy-white-text: #f0f0f0;
grid-template-columns: auto;
grid-template-rows: auto auto;
grid-template-areas:
"anchor"
"markdown";
"anchor"
"markdown";
@media screen and (max-width: $large-devices) {
border-left: solid;
@ -1944,9 +1943,9 @@ $pedagogy-white-text: #f0f0f0;
grid-template-columns: auto;
grid-template-rows: auto auto auto;
grid-template-areas:
"report"
"date"
"author";
"report"
"date"
"author";
margin-top: 0;
text-align: center;
}

486
core/static/election/election.scss
View File

@ -5,287 +5,287 @@ $border: .01rem solid black;
$min_col_width: 100px;
.error {
color: red !important;
color: red !important;
}
.radio-btn {
display: flex;
flex-direction: row;
gap: $gap;
display: flex;
flex-direction: row;
gap: $gap;
> input,
> label {
margin: 0;
}
> input,
> label {
margin: 0;
}
&:hover {
cursor: pointer;
}
&:hover {
cursor: pointer;
}
}
.election_vote {
overflow-x: scroll !important;
overflow-x: scroll !important;
}
.election_table {
width: 100%;
width: 100%;
>.lists {
>.lists {
display: flex;
flex-direction: row;
>tr {
display: flex;
flex-direction: row;
width: 100%;
>.column {
display: flex;
flex-direction: column-reverse;
align-items: center;
justify-content: center;
padding: $padding;
border: $border;
border-collapse: collapse;
position: relative;
min-width: $min_col_width;
>a{
margin-left: $padding;
width: 20px;
height: 20px;
text-align: center;
padding: 5px;
border-radius: 25%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: $gap;
top: $gap;
&:hover {
background-color: #ddd;
}
}
}
}
}
>.role {
display: flex;
flex-direction: column;
>tr {
display: flex;
flex-direction: row;
background-color: lightgrey;
&:hover {
background-color: lightgrey;
}
>.role_title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 0;
padding: $padding;
width: 100%;
>tr {
display: flex;
flex-direction: row;
width: 100%;
>.column {
display: flex;
flex-direction: column-reverse;
align-items: center;
justify-content: center;
padding: $padding;
border: $border;
border-collapse: collapse;
position: relative;
min-width: $min_col_width;
>a{
margin-left: $padding;
width: 20px;
height: 20px;
text-align: center;
padding: 5px;
border-radius: 25%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: $gap;
top: $gap;
&:hover {
background-color: #ddd;
}
}
}
>.role_text {
>h4 {
margin: 0;
}
>p {
margin-top: .5em;
}
}
}
>.role {
>.role_buttons {
display: flex;
flex-direction: row;
align-items: center;
gap: $gap;
> button,
> button > i,
> a {
width: 20px;
height: 20px;
background-color: #e9e9e9;
text-align: center;
padding: 5px;
border-radius: 25%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
&:hover,
&:hover > i {
background-color: #fff;
}
}
> button {
width: 30px;
height: 30px;
}
> button[disabled] {
background-color: #eee;
cursor: not-allowed;
>i,
&:hover,
&:hover > i {
background-color: #eee;
}
}
}
}
>.list_per_role {
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: center;
border: $border;
border-collapse: collapse;
background-color: #fff;
padding: $padding_smaller;
margin: 0;
min-width: $min_col_width;
>tr {
>.candidates {
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 100%;
gap: $gap;
>.candidate {
display: flex;
flex-direction: row;
background-color: lightgrey;
flex-direction: column;
align-items: center;
list-style-type: none;
width: 100%;
gap: $gap;
&:hover {
background-color: lightgrey;
}
>input[type="radio"]:checked + label,
>input[type="checkbox"]:checked + label {
background-color: lightgray;
border-radius: 10px;
>.role_title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 0;
padding: $padding;
width: 100%;
>.role_text {
>h4 {
margin: 0;
}
>p {
margin-top: .5em;
}
}
>.role_buttons {
display: flex;
flex-direction: row;
align-items: center;
gap: $gap;
> button,
> button > i,
> a {
width: 20px;
height: 20px;
background-color: #e9e9e9;
text-align: center;
padding: 5px;
border-radius: 25%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
&:hover,
&:hover > i {
background-color: #fff;
}
}
> button {
width: 30px;
height: 30px;
}
> button[disabled] {
background-color: #eee;
cursor: not-allowed;
>i,
&:hover,
&:hover > i {
background-color: #eee;
}
}
}
}
>.list_per_role {
display: flex;
flex-direction: row;
justify-content: center;
border: $border;
border-collapse: collapse;
>figure>.edit_btns>a:hover{
background-color: #fff;
padding: $padding_smaller;
margin: 0;
min-width: $min_col_width;
>.candidates {
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 100%;
gap: $gap;
>.candidate {
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
width: 100%;
gap: $gap;
>input[type="radio"]:checked + label,
>input[type="checkbox"]:checked + label {
background-color: lightgray;
border-radius: 10px;
>figure>.edit_btns>a:hover{
background-color: #fff;
}
}
>label {
width: 100%;
}
>label>figure,
>figure {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: $gap;
padding: 10px;
max-width: 100%;
>img {
max-width: 100% !important;
}
>figcaption {
width: 100%;
max-width: inherit !important;
overflow: hidden;
h5 {
margin: 0;
text-align: center;
}
.candidate_program {
margin: 5px 0;
}
}
>.edit_btns {
position: absolute;
display: flex;
flex-direction: column;
top: $gap;
right: $gap;
gap: $gap;
> a {
width: 20px;
height: 20px;
background-color: #e9e9e9;
text-align: center;
padding: 5px;
border-radius: 25%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background-color: #d8d8d8;
}
}
}
}
}
}
}
}
>label {
width: 100%;
}
>label>figure,
>figure {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: $gap;
padding: 10px;
max-width: 100%;
>img {
max-width: 100% !important;
}
>figcaption {
width: 100%;
max-width: inherit !important;
overflow: hidden;
h5 {
margin: 0;
text-align: center;
}
.candidate_program {
margin: 5px 0;
}
}
>.edit_btns {
position: absolute;
display: flex;
flex-direction: column;
top: $gap;
right: $gap;
gap: $gap;
> a {
width: 20px;
height: 20px;
background-color: #e9e9e9;
text-align: center;
padding: 5px;
border-radius: 25%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background-color: #d8d8d8;
}
}
}
}
}
}
}
}
}
}
.election_details {
margin: .5em 0;
margin: .5em 0;
}
.buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: $gap;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: $gap;
}
.button {
border: none;
border: none;
color: black;
text-decoration: none;
background-color: #f2f2f2;
padding: 0.4em;
margin: 0.1em;
font-size: 1.18em;
border-radius: 5px;
box-shadow: #dfdfdf 0px 0px 1px;
cursor: pointer;
&:hover {
color: black;
text-decoration: none;
background-color: #f2f2f2;
padding: 0.4em;
margin: 0.1em;
font-size: 1.18em;
border-radius: 5px;
box-shadow: #dfdfdf 0px 0px 1px;
cursor: pointer;
background: #d4d4d4;
}
&_send {
background-color: #59aee2;
&:hover {
color: black;
background: #d4d4d4;
}
&_send {
background-color: #59aee2;
&:hover {
background-color: rgb(130, 186, 235);
}
background-color: rgb(130, 186, 235);
}
}
}

6
core/static/user/user_godfathers.scss
View File

@ -50,7 +50,7 @@
align-items: flex-start;
max-height: 65px;
}
> span {
height: 150px;
width: 100%;
@ -66,14 +66,14 @@
max-height: 100%;
height: auto;
object-fit: contain;
@media (max-width: 375px) {
max-width: 100%;
max-height: 65px;
}
}
}
> em {
box-sizing: border-box;
padding: 0 5px;

4
core/static/user/user_tools.scss
View File

@ -35,7 +35,7 @@ main {
> span {
margin-top: 5px;
}
> span > span,
> span {
display: flex;
@ -43,7 +43,7 @@ main {
flex-wrap: wrap;
gap: 5px;
width: 100%;
>.button {
font-size: smaller;
width: 100%;