campus: hide items when it is too small

2 files changed, 14 insertions, 6 deletions

diff --git a/js/campus.js b/js/campus.js
index 55e0efe..effd5b6 100644
--- a/js/campus.js
+++ b/js/campus.js
@@ -3,7 +3,7 @@ define(['campus-coords', 'd3'], function(coords, d3) {
 
     var imageUrl = 'images/campus.jpg';
     var width = 1280, height = 893;
-    var scalingFactor = 0.75;
+    var scalingFactor = 780 / width;
 
     function initSvg(svg) {
         svg
@@ -18,8 +18,8 @@ define(['campus-coords', 'd3'], function(coords, d3) {
             .attr('viewBox', [
                 0,
                 0,
-                width / scalingFactor,
-                height / scalingFactor,
+                width,
+                height,
             ].join(' '));
 
         svg.append('image')
diff --git a/style/campus.less b/style/campus.less
index 02d9126..60b28d7 100644
--- a/style/campus.less
+++ b/style/campus.less
@@ -22,11 +22,19 @@ body[data-page="campus"] {
     img.description-picture {
         float: right;
         margin-left: 1em;
+    }
+}
 
-        &.small {
+@media (max-width: 800px) {
+    /* do not bother showing large elements */
+    body[data-page="campus"] {
+        #campus-map {
+            display: none;
         }
-
-        &.large {
+        img.description-picture {
+            &.large {
+                display: none;
+            }
         }
     }
 }