adjust pins on screen resize

ocadotechnology · Jul 16, 2024 · 02ccad7 · 02ccad7
1 parent bbb8163
commit 02ccad7
Show file tree

Hide file tree

Showing 3 changed files with 276 additions and 4 deletions.
diff --git 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 {

diff --git a/portal/static/portal/sass/partials/_images.scss b/portal/static/portal/sass/partials/_images.scss
@@ -79,6 +79,277 @@ img {
   min-width: 0px !important;
 }
 
+#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/templates/portal/ten_year_map.html b/portal/templates/portal/ten_year_map.html
@@ -20,16 +20,16 @@
 <div class="background container" id="map-container" style="position:relative">
     <section class="background background--primary">
         <img title="world map" alt="World map" src="{% static 'portal/img/long_europe_map.png' %}" width="95%"/>
-        <button class="map-pin" id="hatfield" style="left: 35%; top: 27.7%" onclick="setActivePin('hatfield')" data-target="#carousel-ten-year-map" data-slide-to="0">
+        <button class="map-pin" id="hatfield" onclick="setActivePin('hatfield')" data-target="#carousel-ten-year-map" data-slide-to="0">
             <map-pin id="hatfield-pin" />
         </button>
-        <button class="map-pin" id="barcelona" style="left: 38.2%; top: 59%" onclick="setActivePin('barcelona')" data-target="#carousel-ten-year-map" data-slide-to="1">
+        <button class="map-pin" id="barcelona" onclick="setActivePin('barcelona')" data-target="#carousel-ten-year-map" data-slide-to="1">
             <map-pin id="barcelona-pin" />
         </button>
-        <button class="map-pin" id="krakow" style="left:60.7%; top: 31.3%" onclick="setActivePin('krakow')" data-target="#carousel-ten-year-map" data-slide-to="2">
+        <button class="map-pin" id="krakow" onclick="setActivePin('krakow')" data-target="#carousel-ten-year-map" data-slide-to="2">
             <map-pin id="krakow-pin" />
         </button>
-        <button class="map-pin" id="sofia" style="left:68.5%; top: 55%" onclick="setActivePin('sofia')" data-target="#carousel-ten-year-map" data-slide-to="3">
+        <button class="map-pin" id="sofia" onclick="setActivePin('sofia')" data-target="#carousel-ten-year-map" data-slide-to="3">
             <map-pin id="sofia-pin" />
         </button>
     </section>