diff --git a/core/static/core/style.scss b/core/static/core/style.scss index 548c3b97..e919eb81 100644 --- a/core/static/core/style.scss +++ b/core/static/core/style.scss @@ -30,6 +30,12 @@ $shadow-color: rgb(223, 223, 223); $background-bouton-color: hsl(0, 0%, 90%); +/*--------------------------MEDIA QUERY HELPERS------------------------*/ +$small-devices: 576px; +$medium-devices: 768px; +$large-devices: 992px; +$extra-large-devices: 1200px; + /*--------------------------------GENERAL------------------------------*/ body { @@ -1564,7 +1570,6 @@ footer { form { margin: 0px auto; margin-bottom: 10px; - width: 60%; } label { @@ -1668,3 +1673,445 @@ label { } } + +/* --------------------------------------pedagogy-----------------------------------*/ + +$pedagogy-blue: #1bb9ea; +$pedagogy-orange: #ea7900; +$pedagogy-hover-blue: #0e97ce; +$pedagogy-light-blue: #caf0ff; +$pedagogy-white-text: #f0f0f0; + +.pedagogy { + &.star-not-checked { + color : #f7f7f7; + margin-bottom: 0px; + margin-top: 0px; + } + &.star-checked { + color: $pedagogy-orange; + margin-bottom: 0px; + margin-top: 0px; + } + + @media screen and (max-width: $large-devices){ + &.star-not-checked { + margin-left: 5px; + margin-right: 5px; + } + &.star-checked { + margin-left: 5px; + margin-right: 5px; + } + } + + #dynamic_view { + font-size: 1.1em; + + table { + } + + td { + text-align: center; + border: none; + } + + } + + #search_form { + margin: 0px; + width: 100%; + + .input-search { + background: $pedagogy-light-blue; + width: 300px; + height: 21px; + } + .button-search { + background: $pedagogy-orange; + color: white; + font-weight: bold; + margin-left: 20px; + } + .radio-guide input[type="radio"],input[type="checkbox"] { + display:none; + } + .radio-guide { + margin-top: 10px; + color: white; + } + .radio-guide label { + display:inline-block; + background-color: $pedagogy-blue; + padding: 10px 20px; + font-family:Arial; + font-size:16px; + border-radius: 4px; + } + .radio-guide input[type="radio"]:checked + label { + background-color:$pedagogy-orange; + } + .radio-guide input[type="checkbox"]:checked + label { + background-color:$pedagogy-orange; + } + .radio-guide label:hover { + background-color: $pedagogy-hover-blue; + } + + #radioAUTUMN + label { + margin-left: 50px; + } + } + + #uv_detail { + color: #062f38; + + .uv-quick-info-container { + 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 . ." ; + } + + .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 { + .leave-comment-grid-container { + display: grid; + grid-template-columns: 270px auto; + grid-template-rows: 100%; + grid-template-areas: "stars comment"; + + @media screen and (max-width: $large-devices){ + grid-template-columns: 100%; + grid-template-rows: auto auto; + grid-template-areas: + "stars" + "comment"; + } + } + + .ui-accordion-content { + background-color: $white-color; + border-color: $pedagogy-orange; + border-right: none; + } + + .form-stars { + grid-area: stars; + } + + .form-comment { + grid-area: comment; + } + + .ui-accordion-header { + background-color: $pedagogy-orange; + color: $pedagogy-white-text; + clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0); + + @media screen and (max-width: $large-devices){ + clip-path: none; + } + } + + .ui-accordion-header-icon { + color: $pedagogy-white-text; + margin-right: 10px; + } + + .input-stars { + margin-top: 20px; + } + + input[type="submit"] { + float: right; + } + } + + .uv-details-container { + display: grid; + grid-template-columns: 150px 100px auto; + grid-template-rows: 156px 1fr; + grid-template-areas: + "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 { + 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; + } + + .uv-infos { + grid-area: uv-infos; + padding-left: 10px; + } + + .comment-container { + display: grid; + 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"; + margin-bottom: 30px; + margin-top: 10px; + + @media screen and (max-width: $large-devices){ + grid-template-columns: auto; + grid-template-rows: auto auto auto auto; + grid-template-areas: + "grade-block" + "comment" + "info" + "comment-end-bar" + } + + .grade-block { + grid-area: grade-block; + width: 300px; + + display: grid; + grid-template-columns: 150px 150px; + grid-template-rows: 156px auto; + grid-template-areas: + "grade-type grade-stars" + "grade-extension grade-extension"; + grid-gap: 15px; + + clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30px, 270px 0); + align-items: start; + + background-color: $pedagogy-blue; + + @media screen and (max-width: $large-devices){ + grid-template-columns: 50% auto; + grid-template-rows: auto; + grid-template-areas:"grade-type grade-stars"; + width: auto; + clip-path: none; + align-content: space-evenly; + align-items: end; + } + + .grade-extension { + grid-area: grade-extension; + background-color: $pedagogy-blue; + } + + .grade-type { + grid-area: grade-type; + + > p { + color: $pedagogy-white-text; + font-weight: bold; + text-align: right; + } + } + + .grade-stars { + grid-area: grade-stars; + } + } + + .comment { + grid-area: comment; + + display: grid; + grid-template-columns: auto; + grid-template-rows: auto auto; + grid-template-areas: + "anchor" + "markdown"; + + @media screen and (max-width: $large-devices){ + border-left: solid; + border-right: solid; + border-color: $pedagogy-blue; + } + + .anchor { + grid-area: anchor; + text-align: right; + margin-right: 15px; + } + + .markdown { + grid-area: markdown; + + min-height: 139px; + margin-top: 0px; + margin-right: 0px; + padding: 10px; + text-align: justify; + overflow: auto; + } + } + + .info { + grid-area: info; + padding-bottom: 10px; + + @media screen and (max-width: $large-devices){ + border-left: solid; + border-right: solid; + border-color: $pedagogy-blue; + } + + .status-reported { + color: red; + float: left; + padding-left: 10px; + } + + .actions { + float: right; + } + } + + .comment-end-bar { + grid-area: comment-end-bar; + + display: grid; + grid-template-columns: 33% auto auto; + grid-template-rows: 2.5em; + grid-template-areas: "author date report"; + + background-color: $pedagogy-blue; + margin-top: -1px; + + @media screen and (max-width: $large-devices){ + grid-template-columns: auto; + grid-template-rows: auto auto auto; + grid-template-areas: + "report" + "date" + "author"; + margin-top: 0px; + text-align: center; + } + + .author { + grid-area: author; + + padding-top: 6px; + padding-left: 20px; + + background-color: $pedagogy-orange; + clip-path: polygon(0 10px, 0 100%, 350px 200%, 300px 10px); + + @media screen and (max-width: $large-devices){ + clip-path: none; + padding: 0px; + padding-bottom: 7px; + } + + a { + color: $pedagogy-white-text; + font-weight: bold; + } + + a:hover { + color: $pedagogy-hover-blue; + } + + } + + .date { + grid-area: date; + color: $pedagogy-white-text; + + @media screen and (max-width: $large-devices){ + padding-bottom: 7px; + } + } + + .report { + grid-area: report; + justify-self: right; + padding-right: 30px; + padding-left: 30px; + + a { + color: $pedagogy-white-text; + } + + a:hover { + color: $pedagogy-hover-blue; + } + + @media screen and (max-width: $large-devices){ + text-align: center; + justify-self: inherit; + padding-bottom: 7px; + background-color: $white-color; + + border-left: solid; + border-right: solid; + border-color: $pedagogy-blue; + + a { + color: $black-color; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/core/templates/core/user_tools.jinja b/core/templates/core/user_tools.jinja index 6aa80f82..e5c8081b 100644 --- a/core/templates/core/user_tools.jinja +++ b/core/templates/core/user_tools.jinja @@ -104,6 +104,16 @@
  • {{ m.club }}
    • {% endfor %} + +
    +

    {% trans %}Pedagogy{% endtrans %}

    + +

    {% trans %}Elections{% endtrans %}

    + +

    {% trans %}Other tools{% endtrans %}