Merge branch 'improve-hiding-boxes' into 'develop'

Fixing a couple of issues in the redesign

See merge request R3/howto-cards!224

_layouts/landing.html

@@ -42,14 +42,21 @@
       <main class="page-content" aria-label="Content" style="margin-right: 0%">
         {% if site.internal %}
         <div class="indicator tooltip" id="external-indicator">
-            <i class="material-icons">verified</i>
+            <p>
+                External
+                <i class="material-icons">info</i>
+            </p>
             <span class="tooltip-text">
                 You are connected to the uni.lu network. <br />You see all the cards.
             </span>
         </div>
         {% else %}
         <div class="indicator tooltip" id="internal-indicator">
-            <i class="material-icons">pending</i>
+            <p>
+                External
+                <i class="material-icons">info</i>
+            </p>
+            
             <span class="tooltip-text">
                 You are <strong>not connected</strong> to the uni.lu network. <br />You can see only publicly available cards. <br />In order to see all, please connect to the university network via VPN.
             </span>

assets/css/landing.css

@@ -260,7 +260,7 @@
 /* ==================================================== */
 div.search-bar {
     width: 60%;
-    margin-left: 20%;
+    margin-left: 12%;
     display: flex;
 }
 @media (max-width: 1080px) {
@@ -300,19 +300,31 @@ div.search-bar {
 .indicator {
     position: absolute;
     top: 190px;
-    right: 75px;
+    right: 59px;
     color: #d6d6d6;
     text-align: center;
     cursor: pointer;
 }
 @media (max-width: 1080px) { 
     .indicator {
-        top: 40px;
-        right: 20px;
+        top: 128px;
+        right: 72px;
     }
 }
-.indicator > i {
-    font-size: 36px;
+@media (max-width: 650px) { 
+    .indicator {
+        top: 50px;
+        right: 50px;
+    }
+}
+.indicator > p > i {
+    font-size: 20px;
+    position: relative;
+    top: 5px;
+    left: 5px;
+}
+.indicator > p {
+    font-size: 14px;
 }
 /* ==================================================== */
 /*    Tooltip                                           */
@@ -321,7 +333,7 @@ div.search-bar {
     visibility: hidden;        
     width: 400px;
     right: 120%;
-    top: -15px;
+    top: -43px;
     background-color: var(--tooltip-bg);
     color: var(--secondary-color);
     text-align: center;

assets/js/box_hider.js

@@ -38,7 +38,7 @@ window.boxHider = (function() {
         }
     }
 
-    function UnhideElement(element) {
+    function ShowElement(element) {
         if (element instanceof HTMLElement) {
             element.style['display'] = 'inline-block';
         }
@@ -52,7 +52,7 @@ window.boxHider = (function() {
     function ShowAllBoxes() {
         var allBoxes = GetAllBoxElementsArray();
         allBoxes.map(function(box) {
-            UnhideElement(box);
+            ShowElement(box);
         });
     }
 
@@ -74,17 +74,22 @@ window.boxHider = (function() {
         // Hide the "All Categories" element
         HideAllCategories();
         // Finally, hide all boxes except of the selected one
+        // Moreover, make sure that the selected boxes are displayed.
         var allBoxes = GetAllBoxElementsArray();
         if (boxId.startsWith('handbook')) {
             allBoxes.map(function(box) {
                 if (!box.id.startsWith('handbook')) {
                     HideElement(box);
+                } else {
+                    ShowElement(box);
                 }
             });
         } else {
             allBoxes.map(function(box) {
                 if (box != selectedBox) {
                     HideElement(box);
+                } else {
+                    ShowElement(box);
                 }
             });
         }

cards.md

@@ -12,6 +12,21 @@ order: -1
 }
 </style>
 
+{% comment %}
+	This code adds CSS that hides the index-boxes by default.
+	It's in javascript, so that it doesn't effect the browsers with javascript disabled.
+	How the correct boxes are shown then? box_hider.js shows them
+{% endcomment %}
+<script>
+	var element = document.createElement('style');
+	var content = document.createTextNode(".index-box {display: none;}");
+	var head = document.getElementsByTagName('head');
+	if (head.length > 0) {
+		element.appendChild(content);
+		head[0].appendChild(element);	
+	}
+</script>
+
 <!-- index -->
 
 <div class="index-box-container">