From 5a4409d137566f1ae89af752af7a4608b4f2639e Mon Sep 17 00:00:00 2001 From: c21128207 <demetriadesz@cardiff.ac.uk> Date: Fri, 3 Dec 2021 11:04:30 +0000 Subject: [PATCH] commit --- static/Location.css | 35 ++++++++++++++++++++++++++++ static/scripts/Location.js | 47 ++++++++++++++++++++++++++++++++++++++ templates/Locations.html | 26 +++++++++++++++++++++ templates/about.html | 4 ++-- templates/contact-us.html | 4 ++-- 5 files changed, 112 insertions(+), 4 deletions(-) create mode 100644 static/Location.css create mode 100644 static/scripts/Location.js create mode 100644 templates/Locations.html diff --git a/static/Location.css b/static/Location.css new file mode 100644 index 0000000..18b4e40 --- /dev/null +++ b/static/Location.css @@ -0,0 +1,35 @@ +.container { + overflow: hidden; +} + +.filterDiv { + float: left; + background-color: #2196F3; + color: #ffffff; + width: 100px; + line-height: 100px; + text-align: center; + margin: 2px; + display: none; /* Hidden by default */ +} + +.show { + display: block; +} + +.btn { + border: none; + outline: none; + padding: 12px 16px; + background-color: #f1f1f1; + cursor: pointer; +} + +.btn:hover { + background-color: #ddd; +} + +.btn.active { + background-color: #666; + color: white; +} diff --git a/static/scripts/Location.js b/static/scripts/Location.js new file mode 100644 index 0000000..d940a35 --- /dev/null +++ b/static/scripts/Location.js @@ -0,0 +1,47 @@ +filterSelection("all") +function filterSelection(c) { + var x, i; + x = document.getElementsByClassName("filterDiv"); + if (c == "all") c = ""; + // Add the Show class + for (i = 0; i < x.length; i++) { + RemoveClass(x[i], "show"); + if (x[i].className.indexOf(c) > -1) AddClass(x[i], "show"); + } +} + +// Showing filtered elements +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]; + } + } +} + +// Removing elements that are not selected +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(" "); +} + +// Add active class to current control button +var btnContainer = document.getElementById("myBtnContainer"); +var btns = btnContainer.getElementsByClassName("btn"); +for (var i = 0; i < btns.length; i++) { + btns[i].addEventListener("click", function() { + var current = document.getElementsByClassName("active"); + current[0].className = current[0].className.replace(" active", ""); + this.className += " active"; + }); +} diff --git a/templates/Locations.html b/templates/Locations.html new file mode 100644 index 0000000..7b8c2f9 --- /dev/null +++ b/templates/Locations.html @@ -0,0 +1,26 @@ +{% extends "main.html" %} +{% block title %}Locations{% endblock %} +{% block mainBlock %} +<div id="myBtnContainer"> + <button class="btn active" onclick="filterSelection('all')"> Show all</button> + <button class="btn" onclick="filterSelection('Wales')"> Wales</button> + <button class="btn" onclick="filterSelection('North-England')"> North England</button> + <button class="btn" onclick="filterSelection('South-West-England')"> South West England</button> + <button class="btn" onclick="filterSelection('Midlands')"> Midlands</button> + <button class="btn" onclick="filterSelection('Scotland')"> Scotland</button> +</div> + +<div class="container"> + <div class="filterDiv Wales">Location 1</div> + <div class="filterDiv Wales">Location 2</div> + <div class="filterDiv North-England">Location 3</div> + <div class="filterDiv North-England">Location 4</div> + <div class="filterDiv South-West-England">Location 5</div> + <div class="filterDiv South-West-England">Location 6</div> + <div class="filterDiv South-West-England">Location 7</div> + <div class="filterDiv Midlands">Location 8</div> + <div class="filterDiv Midlands">Location 9</div> + <div class="filterDiv Scotland">Location 10</div> + <div class="filterDiv Scotland">Location 11</div> + <div class="filterDiv Scotland">Location 12</div> +</div> diff --git a/templates/about.html b/templates/about.html index 5dfe09e..dda99e9 100644 --- a/templates/about.html +++ b/templates/about.html @@ -1,6 +1,6 @@ {% extends "main.html" %} -{% block title %}Map{% endblock %} +{% block title %}About{% endblock %} {% block mainBlock %} -<header> About Us </header> +<header> About 1</header> <p>text about us.</p> {% endblock %} diff --git a/templates/contact-us.html b/templates/contact-us.html index 76c03cb..cbc51ea 100644 --- a/templates/contact-us.html +++ b/templates/contact-us.html @@ -1,6 +1,6 @@ {% extends "main.html" %} {% block title %}Map{% endblock %} {% block mainBlock %} -<header> Contact Us </header> -<p>text about contact info.</p> +<header> Contact <header> + <p> tact info.</p> {% endblock %} -- GitLab