diff --git a/portal/static/portal/img/howe_dell_1.png b/portal/static/portal/img/howe_dell_1.png new file mode 100644 index 000000000..120672c22 Binary files /dev/null and b/portal/static/portal/img/howe_dell_1.png differ diff --git a/portal/static/portal/img/howe_dell_2.png b/portal/static/portal/img/howe_dell_2.png new file mode 100644 index 000000000..64a4e1329 Binary files /dev/null and b/portal/static/portal/img/howe_dell_2.png differ diff --git a/portal/static/portal/img/howe_dell_3.png b/portal/static/portal/img/howe_dell_3.png new file mode 100644 index 000000000..b24c29097 Binary files /dev/null and b/portal/static/portal/img/howe_dell_3.png differ diff --git a/portal/static/portal/img/long_europe_map.png b/portal/static/portal/img/long_europe_map.png new file mode 100644 index 000000000..491fb61b5 Binary files /dev/null and b/portal/static/portal/img/long_europe_map.png differ diff --git a/portal/static/portal/img/ten_year_map_pin.svg b/portal/static/portal/img/ten_year_map_pin.svg new file mode 100644 index 000000000..232e86eb8 --- /dev/null +++ b/portal/static/portal/img/ten_year_map_pin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/portal/static/portal/js/tenYearMap.js b/portal/static/portal/js/tenYearMap.js new file mode 100644 index 000000000..83ab43101 --- /dev/null +++ b/portal/static/portal/js/tenYearMap.js @@ -0,0 +1,14 @@ +let currentActivePin; + +function setActivePin(city) { + if (currentActivePin) { + currentActivePin.setAttribute("fill", "#FFC709"); + } + + currentActivePin = document.getElementById(city + "-pin").getElementsByTagName("svg")[0] + currentActivePin.setAttribute("fill", "#EE0857"); +} + +$(document).ready(function () { + setActivePin("hatfield"); +}); diff --git a/portal/static/portal/sass/partials/_carousel.scss b/portal/static/portal/sass/partials/_carousel.scss index 2b39d0bd3..5542fef03 100644 --- a/portal/static/portal/sass/partials/_carousel.scss +++ b/portal/static/portal/sass/partials/_carousel.scss @@ -13,6 +13,7 @@ &.next, &.prev { display: flex; + flex-wrap: wrap; } > .carousel-image-wrapper { @@ -155,3 +156,23 @@ /* shrink padding because cards have their own */ @include _padding(0px, 2px, 0px, 2px); } + +.carousel-button { + margin-top: 2rem; +} + +.carousel-image { + margin-top: 15px; +} + +.carousel-image--column { + padding-right: 20px; +} + +.carousel-column--images { + margin-top: -15px; +} + +.carousel-header { + margin-top: 0rem !important; +} diff --git a/portal/static/portal/sass/partials/_images.scss b/portal/static/portal/sass/partials/_images.scss index de16702ae..155729d0c 100644 --- a/portal/static/portal/sass/partials/_images.scss +++ b/portal/static/portal/sass/partials/_images.scss @@ -73,6 +73,287 @@ img { content: url("../img/logo_cfl.png"); } +.map-pin { + position: absolute; + background: 0 0; + min-width: 0px !important; +} + +#map-container { + position: relative; +} + +#hatfield { + left: 34.5%; + top: 26.7%; +} + +#barcelona { + left: 38%; + top: 58.8%; +} + +#krakow { + left: 61.7%; + top: 30.3%; +} + +#sofia { + left: 68.5%; + top: 55.5%; +} + +@media only screen and (max-width: 1400px) { + #sofia { + left: 68.8%; + top: 55.8%; + } +} + +@media only screen and (max-width: 1200px) { + #hatfield { + left: 33.5%; + top: 25.1%; + } + + #barcelona { + left: 36.7%; + top: 56.4%; + } + + #krakow { + left: 60.7%; + top: 28.7%; + } + + #sofia { + left: 68%; + top: 53.5%; + } +} + +@media only screen and (max-width: 992px) { + #hatfield { + left: 32.7%; + top: 22.8%; + } + + #barcelona { + left: 35.7%; + top: 54.6%; + } + + #krakow { + left: 59.7%; + top: 26.3%; + } + + #sofia { + left: 67%; + top: 50.2%; + } +} + +@media only screen and (max-width: 767px) { + #barcelona { + left: 36.7%; + top: 54%; + } + + #sofia { + left: 67.5%; + top: 51.2%; + } +} + +@media only screen and (max-width: 700px) { + #hatfield { + left: 32.5%; + top: 20.8%; + } + + #barcelona { + left: 35.4%; + top: 53.5%; + } + + #krakow { + left: 59.7%; + top: 25.3%; + } + + #sofia { + left: 67%; + top: 50.2%; + } +} + +@media only screen and (max-width: 650px) { + #barcelona { + left: 35.4%; + top: 52.5%; + } + + #sofia { + left: 66%; + top:48.2%; + } +} + +@media only screen and (max-width: 600px) { + #hatfield { + left: 31.5%; + top: 18.8%; + } + + #barcelona { + left: 34.4%; + top: 50.5%; + } + + #krakow { + left: 58.7%; + top: 23.3%; + } + + #sofia { + left: 66%; + top: 48.2%; + } +} + +@media only screen and (max-width: 550px) { + #hatfield { + left: 30.5%; + top: 17.3%; + } + + #barcelona { + left: 33.4%; + top: 49%; + } + + #krakow { + left: 57.7%; + top: 21.6%; + } + + #sofia { + left: 65%; + top: 46%; + } +} + +@media only screen and (max-width: 500px) { + #hatfield { + left: 29.8%; + top: 16.3%; + } + + #barcelona { + left: 33%; + top: 47%; + } + + #krakow { + left: 57%; + top: 20%; + } + + #sofia { + left: 64%; + top: 44%; + } +} + +@media only screen and (max-width: 450px) { + #hatfield { + left: 28.7%; + top: 17%; + } + + #barcelona { + left: 32%; + top: 44.5%; + } + + #krakow { + left: 56%; + top: 21.5%; + } + + #sofia { + left: 63%; + top: 42%; + } +} + +@media only screen and (max-width: 430px) { + #hatfield { + left: 28.5%; + top: 17%; + } + + #barcelona { + left: 31.5%; + top: 42.5%; + } + + #krakow { + left: 55%; + top: 19.5%; + } + + #sofia { + left: 62%; + top: 40.5%; + } +} + +@media only screen and (max-width: 390px) { + #hatfield { + left: 27.8%; + top: 15.5%; + } + + #barcelona { + left: 31%; + top: 40.5%; + } + + #krakow { + left: 52.5%; + top: 19%; + } + + #sofia { + left: 61%; + top: 39%; + } +} + +@media only screen and (max-width: 360px) { + #hatfield { + left: 27.5%; + top: 14.5%; + } + + #barcelona { + left: 30.5%; + top: 40%; + } + + #krakow { + left: 53%; + top: 18%; + } + + #sofia { + left: 60%; + top: 35.5%; + } +} + .glyphicon { @include _font-size(30px); font-weight: 500; diff --git a/portal/strings/ten_year_map.py b/portal/strings/ten_year_map.py new file mode 100644 index 000000000..0100d7145 --- /dev/null +++ b/portal/strings/ten_year_map.py @@ -0,0 +1,13 @@ +TEN_YEAR_MAP_BANNER = { + "title": "Celebrate", + "subtitle": "Join us in celebrating our 10 year anniversary", + "text": "", + "image_class": "banner--picture--educate", + "alt": "Female teacher helping young female student on a laptop", +} + +TEN_YEAR_MAP_HEADLINE = { + "title": "Code for Life is turning 10!", + "description": "For our 10th anniversary, we're going global! Click on the pins on the map " + "to check out what events are being run by our amazing volunteers from around the world.", +} diff --git a/portal/templates/portal/ten_year_map.html b/portal/templates/portal/ten_year_map.html new file mode 100644 index 000000000..9eec66bca --- /dev/null +++ b/portal/templates/portal/ten_year_map.html @@ -0,0 +1,147 @@ +{% extends 'portal/base.html' %} +{% load static %} +{% load app_tags banner_tags headline_tags character_list_tags %} + +{% block subNav %} +{% banner banner_name="BANNER" %} +{% endblock subNav %} + +{% block scripts %} +{{ block.super }} + +{% endblock scripts %} + +{% block content %} + +