10 changed files with 233 additions and 84 deletions
@ -0,0 +1,69 @@ |
|||
/* Dropdown Button */ |
|||
/* for sorting on Academicyear, Term, Course |
|||
*/ |
|||
button { |
|||
background-color: #E0B0FF; |
|||
text-decoration: none; |
|||
border: none; |
|||
} |
|||
.filter { |
|||
display: none; |
|||
} |
|||
|
|||
.activebtn { |
|||
background-color: #62b264; |
|||
} |
|||
|
|||
.show { |
|||
display: block; |
|||
} |
|||
.dropdown { |
|||
position: relative; |
|||
display: inline-block; |
|||
} |
|||
|
|||
/* Dropdown Content (Hidden by Default) */ |
|||
.dropdown-content { |
|||
display: none; |
|||
position: absolute; |
|||
background-color: #E0B0FF; |
|||
min-width: 120px; |
|||
border: 2px solid; |
|||
z-index: 1; |
|||
border-style: outset; |
|||
} |
|||
|
|||
/* Links inside the dropdown */ |
|||
.dropdown-content button { |
|||
color: black; |
|||
padding: 6px; |
|||
border: none; |
|||
min-width: inherit; |
|||
text-align: left; |
|||
text-decoration: none; |
|||
display: block; |
|||
} |
|||
.dropbtn { |
|||
margin-top: 1em; |
|||
} |
|||
/* Change color of dropdown links on hover */ |
|||
.dropdown-content button:hover {background-color: #62b264;} |
|||
|
|||
|
|||
/* Show the dropdown menu on hover */ |
|||
.dropdown:hover .dropdown-content {display: block;} |
|||
|
|||
/* Change the background color of the dropdown button when the dropdown content is shown */ |
|||
.dropdown:hover .dropbtn {background-color: #62b264;} |
|||
|
|||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { |
|||
.dropdown-content button { |
|||
font-size: 0.7em; |
|||
} |
|||
.container > button { |
|||
font-size: 0.7em; |
|||
} |
|||
.dropdown > button { |
|||
font-size: 0.7em; |
|||
} |
|||
} |
|||
@ -1,74 +0,0 @@ |
|||
::selection{ |
|||
color: #fff; |
|||
background: #5372F0; |
|||
} |
|||
.wrapper{ |
|||
width: 496px; |
|||
background: #fff; |
|||
padding: 18px 25px 20px; |
|||
box-shadow: 0 0 30px rgba(0,0,0,0.06); |
|||
} |
|||
.wrapper :where(.title, li, li i, .details){ |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.title img{ |
|||
max-width: 21px; |
|||
} |
|||
.title h2{ |
|||
font-size: 21px; |
|||
font-weight: 600; |
|||
margin-left: 8px; |
|||
} |
|||
.wrapper .content{ |
|||
margin: 10px 0; |
|||
} |
|||
.tags p{ |
|||
font-size: 15px; |
|||
} |
|||
.tags ul{ |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 7px; |
|||
margin: 12px 0; |
|||
border-radius: 5px; |
|||
border: 1px solid #a6a6a6; |
|||
} |
|||
.tags ul li{ |
|||
color: #333; |
|||
margin: 4px 3px; |
|||
list-style: none; |
|||
background: #F2F2F2; |
|||
padding: 5px 8px 5px 10px; |
|||
border: 1px solid #e3e1e1; |
|||
} |
|||
.tags ul li i{ |
|||
height: 20px; |
|||
width: 20px; |
|||
color: #808080; |
|||
margin-left: 8px; |
|||
font-size: 12px; |
|||
cursor: pointer; |
|||
border-radius: 50%; |
|||
background: #dfdfdf; |
|||
justify-content: center; |
|||
} |
|||
.tags ul input{ |
|||
flex: 1; |
|||
padding: 5px; |
|||
border: none; |
|||
outline: none; |
|||
font-size: 16px; |
|||
} |
|||
.wrapper .details{ |
|||
justify-content: space-between; |
|||
} |
|||
.details button{ |
|||
border: none; |
|||
background: #E0B0FF; |
|||
text-decoration: none; |
|||
margin: 1px; |
|||
} |
|||
.details button:hover{ |
|||
background: #2c52ed; |
|||
} |
|||
@ -0,0 +1,54 @@ |
|||
filterSelection("all", "None"); |
|||
function filterSelection(c, id) { |
|||
resetDropDownButtons(); |
|||
var i; |
|||
var button = document.getElementById(id); |
|||
if(button){ |
|||
button.innerText = c; |
|||
addClass(button, "activebtn"); |
|||
} |
|||
var alldistribusis = document.getElementsByClassName("filter"); |
|||
if (c == "all") { |
|||
for (i = 0; i < alldistribusis.length; i++) { |
|||
addClass(alldistribusis[i], "show"); |
|||
} |
|||
} |
|||
else { |
|||
for (i = 0; i < alldistribusis.length; i++) { |
|||
removeClass(alldistribusis[i], "show"); |
|||
if (alldistribusis[i].className.indexOf(c) > -1) { |
|||
addClass(alldistribusis[i], "show"); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
function resetDropDownButtons(){ |
|||
document.getElementById("Academicyear").innerText = "Academic year"; |
|||
document.getElementById("Term").innerText = "Term"; |
|||
document.getElementById("Course").innerText = "Course"; |
|||
allactivebuttons = document.getElementsByClassName("activebtn"); |
|||
for(var i = 0;allactivebuttons.length; i++) { |
|||
removeClass(allactivebuttons[i], "activebtn"); |
|||
} |
|||
} |
|||
function addClass(element, name) { |
|||
var i, arr1, arr2; |
|||
arr1 = element.className.split(" "); |
|||
arr2 = name.split(" "); |
|||
for (i = 0; i < arr2.length; i++) { |
|||
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];} |
|||
} |
|||
} |
|||
|
|||
function removeClass(element, name) { |
|||
var i, arr1, arr2; |
|||
arr1 = element.className.split(" "); |
|||
arr2 = name.split(" "); |
|||
for (i = 0; i < arr2.length; i++) { |
|||
while (arr1.indexOf(arr2[i]) > -1) { |
|||
arr1.splice(arr1.indexOf(arr2[i]), 1); |
|||
} |
|||
} |
|||
element.className = arr1.join(" "); |
|||
} |
|||
@ -0,0 +1,27 @@ |
|||
{% block menu %} |
|||
<button onclick="filterSelection('all')" id="removefilter">Remove filter</button> |
|||
<div class="dropdown"> |
|||
<button id="Academicyear" class="dropbtn">Academic year</button> |
|||
<div class="dropdown-content"> |
|||
{% for year in years %} |
|||
<button type="button" name="button" onclick="filterSelection('{{ year[1] }}', 'Academicyear')" >{{ year[1] }}</button> |
|||
{% endfor %} |
|||
</div> |
|||
</div> |
|||
<div class="dropdown"> |
|||
<button id="Term" class="dropbtn">Term</button> |
|||
<div class="dropdown-content"> |
|||
{% for term in terms %} |
|||
<button type="button" name="button" onclick="filterSelection('{{ term[1] }}', 'Term')" >{{ term[1] }}</button> |
|||
{% endfor %} |
|||
</div> |
|||
</div> |
|||
<div class="dropdown"> |
|||
<button id="Course" class="dropbtn">Course</button> |
|||
<div class="dropdown-content"> |
|||
{% for course in courses %} |
|||
<button type="button" name="button" onclick="filterSelection('{{ course[1] }}', 'Course')" >{{ course[1] }}</button> |
|||
{% endfor %} |
|||
</div> |
|||
</div> |
|||
{% endblock menu %} |
|||
Loading…
Reference in new issue