📲 responsive design

Author: sandix34

package-lock.json

@@ -11,6 +11,7 @@
     "ol": "^6.1.1",
     "proj4": "^2.6.0",
     "vue": "^2.6.10",
+    "vue-burger-menu": "^2.0.3",
     "vue-code-highlight": "^0.7.4",
     "vue-router": "^3.1.3"
   },

package.json

@@ -9,14 +9,13 @@ body {
 /* Base layout in App.vue */
 #app {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  grid-template-columns: repeat(5, 1fr);
   grid-template-rows: auto;
   grid-template-areas: 
     "header header header header header"
     "navbar map map map map"
 }
 
-
 .header {
   grid-area: header;
   background-color: black;
@@ -30,7 +29,7 @@ body {
 }
 
 .header h1 {
-  font-size: 2vw;
+  font-size: larger;
   padding: 10px;
 }
 
@@ -80,7 +79,7 @@ body {
 .navbar-item  {
   color: white;
   text-decoration: none; /* Remove underline from links */
-  font-size:1vw
+  font-size:1vw;
 }
 
 .router-link-active{
@@ -94,6 +93,8 @@ body {
   margin: auto;
 }
 
+
+
 /* Higthliting code */
 .map-code {
   width: 80%;
@@ -105,7 +106,7 @@ body {
   padding: 2em 0 2em 0;
   width: 80%;
   margin: auto;
-  font-size:1vw;
+  font-size:medium;
   line-height: 1.3;
 }
 
@@ -130,3 +131,41 @@ body {
 .openlayers-link {
   color: #d63200;
 }
+
+/*responsive design*/
+@media (max-width: 1024px) {
+  #app {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: auto;
+    grid-template-areas: 
+    "header header header header header"
+    "map map map map map"
+  }
+
+  #map {
+    width: 95%;
+    margin: auto;
+    height: 20em;
+  }
+
+  .description {
+    padding: 2em 0 2em 0;
+    width: 90%;
+    font-size: small;
+    margin: auto;
+  }
+
+  .map-code {
+    width: 100%;
+    margin: auto;
+    font-size: small;
+  }
+
+  .header {
+    height: 2em;
+  }
+  .header h1 {
+    font-size: small;
+  }
+}

src/assets/css/styles.css

@@ -1,11 +1,47 @@
 <template>
   <div>
+    <Slide right>
+      <router-link class="navbar-item" :to="{name: 'home'}">Accueil</router-link>
+      <router-link class="navbar-item" :to="{name: 'firstMap'}">Afficher une carte</router-link>
+      <router-link class="navbar-item" :to="{name: 'changeView'}">Centrer la carte</router-link>
+      <router-link class="navbar-item" :to="{name: 'projections'}">Utiliser des projections différentes</router-link>
+      <router-link class="navbar-item" :to="{name: 'controles'}">Afficher les contrôles disponibles</router-link>
+      <router-link class="navbar-item" :to="{name: 'tileMap'}">Les sources de couche OpenLayers</router-link>
+      <router-link class="navbar-item" :to="{name: 'rasterTiles'}">Les tuiles raster OpenStreetMap</router-link>
+      <router-link class="navbar-item" :to="{name: 'mapEvent'}">Les évènements liés à la carte</router-link>
+      <router-link class="navbar-item" :to="{name: 'vectorGeometry'}">Créer des géométries</router-link>
+      <router-link class="navbar-item" :to="{name: 'vectorFile'}">Charger des fichiers de données</router-link>
+      <router-link class="navbar-item" :to="{name: 'vectorData'}">Manipuler des données vectorielles</router-link>
+      <router-link class="navbar-item" :to="{name: 'overlays'}">Afficher un overlay</router-link>
+      <router-link class="navbar-item" :to="{name: 'multipleOverlays'}">Afficher plusieurs overlays</router-link>
+      <router-link class="navbar-item" :to="{name: 'popup'}">Afficher des infos dans une popup</router-link>
+    </Slide>
     <h1><span class="vue">Vue.js</span> + <span class="openlayers">OpenLayers 6</span> 🌍</h1>
   </div>
 </template>
 
 <script>
+import { Slide } from 'vue-burger-menu'
+import TheNavBar from './TheNavBar'
   export default {
-    
+    components: {
+      Slide,
+      TheNavBar
+    },
   }
-</script>
+</script>
+
+<style>
+  .bm-burger-bars {
+    background-color:white;
+  }
+  .bm-burger-button {
+    width: 1em;
+    height: 1em;
+    left: 0px;
+    top: 5px;
+  }
+  .bm-item-list a {
+    font-size: small;
+  }
+</style>

src/components/TheHeader.vue

@@ -58,4 +58,11 @@ a {
 i {
   font-size: 1.5em;
 }
+
+@media (max-width: 1024px) {
+  .backdrop-home {
+    font-size: smaller;
+    width: 70%;
+  }
+}
 </style>

src/pages/PageHome.vue

@@ -90,7 +90,7 @@ export default {
           target: 'map',
           view: new View({
             center: [0, 0],
-            zoom: 2
+            zoom: 0
           })
         })
 
@@ -121,6 +121,13 @@ export default {
   margin: auto;
 }
 
+@media (max-width: 1024px) {
+  #map {
+    width: 95%;
+    margin: auto;
+  }
+}
+
 .mount {
   width: 15px;
   height: 15px;

src/pages/PageMultipleOverlays.vue

@@ -77,6 +77,13 @@ export default {
   margin: auto;
 }
 
+@media (max-width: 1024px) {
+  #map {
+    width: 95%;
+    margin: auto;
+  }
+}
+
 #marker {
   width: 20px;
   height: 20px;

src/pages/PageOverlays.vue

@@ -139,11 +139,6 @@ export default {
 </script>
 
 <style scoped>
-#map {
-  height: 80vh;
-  width: 80%;
-  margin: auto;
-}
 
 .ol-popup {
 	position: absolute;

src/pages/PagePopup.vue

@@ -71,12 +71,4 @@ export default {
   }
 }
 
-</script>
-
-<style scoped>
-#map {
-  height: 80vh;
-  width: 80%;
-  margin: auto;
-}    
-</style>
+</script>

src/pages/PageProjections.vue

@@ -219,4 +219,24 @@ h2 {
   padding-bottom: 1.5em;
   font-size: 1.5em;
 }
+
+@media (max-width: 1024px) {
+  .content {
+    display: block;
+  }
+  h2 {
+    padding-bottom: 0;
+    font-size: small;
+  }
+  .sidebar {
+    font-size: small;
+    padding: 0em 0em 0em 1em;
+  }
+  #map {
+    width: 95%;
+    margin: auto;
+    height: 20em;
+  }
+}
+
 </style>

src/pages/PageRasterTiles.vue

@@ -194,4 +194,23 @@ h2 {
   margin: auto;
 }
 
+@media (max-width: 1024px) {
+  .content {
+    display: block;
+  }
+  h2 {
+    padding-bottom: 0;
+    font-size: small;
+  }
+  .sidebar {
+    font-size: small;
+    padding: 0em 0em 0em 1em;
+  }
+  #map {
+    width: 95%;
+    margin: auto;
+    height: 20em;
+  }
+}
+
 </style>