Commit fd1f89de authored by Sli's avatar Sli

pedagogy: wrap all css inside a class named pedagogy to avoid name clashes

parent c15ea345
Pipeline #1898 failed with stage
in 60 minutes and 4 seconds
...@@ -1683,392 +1683,391 @@ $pedagogy-light-blue: #caf0ff; ...@@ -1683,392 +1683,391 @@ $pedagogy-light-blue: #caf0ff;
$pedagogy-white-text: #f0f0f0; $pedagogy-white-text: #f0f0f0;
.pedagogy { .pedagogy {
&.star-not-checked { font-family: "Fira Sans";
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 { &.star-not-checked {
margin-left: 5px; color : #f7f7f7;
margin-right: 5px; margin-bottom: 0px;
margin-top: 0px;
} }
&.star-checked { &.star-checked {
margin-left: 5px; color: $pedagogy-orange;
margin-right: 5px; margin-bottom: 0px;
margin-top: 0px;
} }
}
}
#dynamic_view {
font-family: "Fira Sans";
font-size: 1.1em;
table {
}
td {
text-align: center;
border: none;
}
}
#search_form {
font-family: "Fira Sans";
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;
}
}
#pedagogy {
font-family: "Fira Sans";
color: #062f38;
.uv-quick-info-container { @media screen and (max-width: $large-devices){
display: grid; &.star-not-checked {
grid-template-columns: 20% 20% 20% 20% auto; margin-left: 5px;
grid-template-rows: auto auto; margin-right: 5px;
grid-template-areas: "hours-cm hours-td hours-tp hours-te hours-the" "department credit-type semester . ." ; }
} &.star-checked {
margin-left: 5px;
.department { margin-right: 5px;
grid-area: department; }
} }
.credit-type {
grid-area: credit-type;
}
.semester {
grid-area: semester;
}
.hours-cm {
grid-area: hours-cm;
}
.hours-td { #dynamic_view {
grid-area: hours-td; font-size: 1.1em;
}
.hours-tp { table {
grid-area: hours-tp; }
}
.hours-te { td {
grid-area: hours-te; text-align: center;
} border: none;
}
.hours-the {
grid-area: hours-the;
} }
#leave_comment { #search_form {
.leave-comment-grid-container { margin: 0px;
display: grid; width: 100%;
grid-template-columns: 270px auto;
grid-template-rows: 100%;
grid-template-areas: "stars comment";
@media screen and (max-width: $large-devices){ .input-search {
grid-template-columns: 100%; background: $pedagogy-light-blue;
grid-template-rows: auto auto; width: 300px;
grid-template-areas: "stars" "comment"; height: 21px;
}
} }
.button-search {
.ui-accordion-content { background: $pedagogy-orange;
background-color: $white-color; color: white;
border-color: $pedagogy-orange; font-weight: bold;
border-right: none; margin-left: 20px;
} }
.radio-guide input[type="radio"],input[type="checkbox"] {
.form-stars { display:none;
grid-area: stars;
} }
.radio-guide {
.form-comment { margin-top: 10px;
grid-area: comment; color: white;
} }
.radio-guide label {
.ui-accordion-header { display:inline-block;
background-color: $pedagogy-orange; background-color: $pedagogy-blue;
color: $pedagogy-white-text; padding: 10px 20px;
clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0); font-family:Arial;
font-size:16px;
@media screen and (max-width: $large-devices){ border-radius: 4px;
clip-path: none;
}
} }
.radio-guide input[type="radio"]:checked + label {
.ui-accordion-header-icon { background-color:$pedagogy-orange;
color: $pedagogy-white-text;
margin-right: 10px;
} }
.radio-guide input[type="checkbox"]:checked + label {
.input-stars { background-color:$pedagogy-orange;
margin-top: 20px; }
.radio-guide label:hover {
background-color: $pedagogy-hover-blue;
} }
input[type="submit"] { #radioAUTUMN + label {
float: right; margin-left: 50px;
} }
} }
.uv-details-container { #uv_detail {
display: grid; color: #062f38;
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){ .uv-quick-info-container {
grid-template-columns: 50% 50%; display: grid;
grid-template-columns: 20% 20% 20% 20% auto;
grid-template-rows: auto auto; grid-template-rows: auto auto;
grid-template-areas: "grade grade-stars" "uv-infos uv-infos"; grid-template-areas: "hours-cm hours-td hours-tp hours-te hours-the" "department credit-type semester . ." ;
} }
}
.grade {
grid-area: grade;
color: $pedagogy-white-text;
background-color: $pedagogy-blue;
padding-right: 10px;
> p { .department {
text-align: right; grid-area: department;
font-weight: bold;
} }
}
.grade-stars { .credit-type {
grid-area: grade-stars; grid-area: credit-type;
color: $pedagogy-white-text; }
background-color: $pedagogy-blue;
font-weight: bold;
}
.uv-infos { .semester {
grid-area: uv-infos; grid-area: semester;
padding-left: 10px; }
}
.comment-container { .hours-cm {
display: grid; grid-area: hours-cm;
grid-template-columns: auto auto; }
grid-template-rows: 156px 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){ .hours-td {
grid-template-columns: auto; grid-area: hours-td;
grid-template-rows: auto auto auto auto;
grid-template-areas: "grade-block" "comment" "info" "comment-end-bar"
} }
.grade-block { .hours-tp {
grid-area: grade-block; grid-area: hours-tp;
width: 300px; }
display: grid; .hours-te {
grid-template-columns: 150px 150px; grid-area: hours-te;
grid-template-rows: auto; }
grid-template-areas: "grade-type grade-stars";
grid-gap: 15px;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20%, 80% 0); .hours-the {
align-content: space-evenly; grid-area: hours-the;
}
background-color: $pedagogy-blue; #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){ @media screen and (max-width: $large-devices){
grid-template-columns: auto auto; grid-template-columns: 100%;
grid-template-rows: auto; grid-template-rows: auto auto;
grid-template-areas: "grade-type grade-stars"; grid-template-areas: "stars" "comment";
width: auto; }
clip-path: none;
} }
.grade-type { .ui-accordion-content {
grid-area: grade-type; background-color: $white-color;
border-color: $pedagogy-orange;
border-right: none;
}
> p { .form-stars {
color: $pedagogy-white-text; grid-area: stars;
font-weight: bold;
text-align: right;
}
} }
.grade-stars { .form-comment {
grid-area: grade-stars; grid-area: comment;
} }
}
.comment { .ui-accordion-header {
grid-area: comment; background-color: $pedagogy-orange;
color: $pedagogy-white-text;
clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);
display: grid; @media screen and (max-width: $large-devices){
grid-template-columns: auto; clip-path: none;
grid-template-rows: auto auto; }
grid-template-areas: "anchor" "markdown"; }
@media screen and (max-width: $large-devices){ .ui-accordion-header-icon {
border-left: solid; color: $pedagogy-white-text;
border-right: solid; margin-right: 10px;
border-color: $pedagogy-blue;
} }
.anchor { .input-stars {
grid-area: anchor; margin-top: 20px;
text-align: right;
margin-right: 15px;
} }
.markdown { input[type="submit"] {
grid-area: markdown; float: right;
overflow: scroll;
margin-top: 0px;
margin-right: 0px;
padding: 10px;
padding-left: 40px;
text-align: justify;
} }
} }
.info { .uv-details-container {
grid-area: info; display: grid;
margin-bottom: 0px; 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){ @media screen and (max-width: $large-devices){
border-left: solid; grid-template-columns: 50% 50%;
border-right: solid; grid-template-rows: auto auto;
border-color: $pedagogy-blue; grid-template-areas: "grade grade-stars" "uv-infos uv-infos";
} }
}
.status-reported { .grade {
color: red; grid-area: grade;
float: left; color: $pedagogy-white-text;
padding-left: 10px; background-color: $pedagogy-blue;
padding-bottom: 10px; padding-right: 10px;
}
.actions { > p {
float: right; text-align: right;
font-weight: bold;
} }
} }
.comment-end-bar { .grade-stars {
grid-area: comment-end-bar; grid-area: grade-stars;
color: $pedagogy-white-text;
background-color: $pedagogy-blue;
font-weight: bold;
}
display: grid; .uv-infos {
grid-template-columns: auto auto auto; grid-area: uv-infos;
grid-template-rows: 2.5em; padding-left: 10px;
grid-template-areas: "report date author"; }
background-color: $pedagogy-blue; .comment-container {
margin-top: 0px; display: grid;
grid-template-columns: auto auto;
grid-template-rows: 156px 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){ @media screen and (max-width: $large-devices){
grid-template-columns: auto; grid-template-columns: auto;
grid-template-rows: auto; grid-template-rows: auto auto auto auto;
grid-template-areas: "author" "date" "report" grid-template-areas: "grade-block" "comment" "info" "comment-end-bar"
} }
.report { .grade-block {
grid-area: report; grid-area: grade-block;
padding-top: 6px; width: 300px;
padding-left: 20px;
background-color: $pedagogy-orange; display: grid;
clip-path: polygon(0 0%, 0 200%, 300px 200%, 250px 0); grid-template-columns: 150px 150px;
grid-template-rows: auto;
grid-template-areas: "grade-type grade-stars";
grid-gap: 15px;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20%, 80% 0);
align-content: space-evenly;
background-color: $pedagogy-blue;
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices){
grid-template-columns: auto auto;
grid-template-rows: auto;
grid-template-areas: "grade-type grade-stars";
width: auto;
clip-path: none; clip-path: none;
text-align: center;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 0px;
} }
& a { .grade-type {
color: $pedagogy-white-text; grid-area: grade-type;
font-weight: bold;
> p {
color: $pedagogy-white-text;
font-weight: bold;
text-align: right;
}
} }
.grade-stars {
grid-area: grade-stars;
}
} }
.date { .comment {
grid-area: date; grid-area: comment;
color: $pedagogy-white-text;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto auto;
grid-template-areas: "anchor" "markdown";
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices){
text-align: center; border-left: solid;
border-right: solid;
border-color: $pedagogy-blue;
}
.anchor {
grid-area: anchor;
text-align: right;
margin-right: 15px;
}
.markdown {
grid-area: markdown;
overflow: scroll;
margin-top: 0px;
margin-right: 0px;
padding: 10px;
padding-left: 40px;
text-align: justify;
} }
} }
.author { .info {
grid-area: author; grid-area: info;
justify-self: right; margin-bottom: 0px;
padding-right: 30px;
a { @media screen and (max-width: $large-devices){
color: $pedagogy-white-text; border-left: solid;
font-weight: bold; border-right: solid;
border-color: $pedagogy-blue;
} }
a:hover { .status-reported {
color: $pedagogy-light-blue; color: red;
float: left;
padding-left: 10px;
padding-bottom: 10px;
} }
.actions {
float: right;
}
}
.comment-end-bar {
grid-area: comment-end-bar;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 2.5em;
grid-template-areas: "report date author";
background-color: $pedagogy-blue;
margin-top: 0px;
@media screen and (max-width: $large-devices){ @media screen and (max-width: $large-devices){
text-align: center; grid-template-columns: auto;
justify-self: inherit; grid-template-rows: auto;
padding-right: 0px; grid-template-areas: "author" "date" "report"
}
.report {
grid-area: report;
padding-top: 6px;
padding-left: 20px;
background-color: $pedagogy-orange;
clip-path: polygon(0 0%, 0 200%, 300px 200%, 250px 0);
@media screen and (max-width: $large-devices){
clip-path: none;
text-align: center;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 0px;
}
& a {
color: $pedagogy-white-text;
font-weight: bold;
}
}
.date {
grid-area: date;
color: $pedagogy-white-text;
@media screen and (max-width: $large-devices){
text-align: center;
}
}
.author {
grid-area: author;
justify-self: right;
padding-right: 30px;
a {
color: $pedagogy-white-text;
font-weight: bold;
}
a:hover {
color: $pedagogy-light-blue;
}
@media screen and (max-width: $large-devices){
text-align: center;
justify-self: inherit;
padding-right: 0px;
}
} }
} }
} }
......
...@@ -6,78 +6,79 @@ ...@@ -6,78 +6,79 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<form id="search_form" action="{{ url('pedagogy:guide') }}" method="get"> <div class="pedagogy">
{% if can_create_uv(user) %} <form id="search_form" action="{{ url('pedagogy:guide') }}" method="get">
<p>