Code clean up

website/studerende-dk/src/components/blocks/Calendar.vue

@@ -7,7 +7,7 @@
               <th id="calendarHead" colspan="6">
               <div style="display:flex;">
                 <div style="flex-grow: 25">
-                  <button id="offSizeButton" @click="prevWeek()"> &larr; </button>
+                  <button @click="prevWeek()"> &larr; </button>
                 </div>
                 <div style="flex-grow: 50">
                   Uge: {{getWeek(today)}} - {{getMonthName(today.getMonth())}}
@@ -17,19 +17,6 @@
                 </div>
               </div>
             </th>
-            <!--
-            <th>
-              <div>
-                <button id="offSizeButton" @click="prevWeek()"> &larr; </button>
-              </div>
-            </th>
-            <th colspan="4">Uge: {{getWeek(today)}} - {{getMonthName(today.getMonth())}}</th>
-            <th>
-              <div>
-                <button @click="nextWeek()"> &rarr; </button>
-              </div>
-            </th>
-            -->
           </tr>
           <tr>
             <!-- Empty cell to make monday move 1 cell left -->
@@ -40,6 +27,7 @@
                   {{weekDays[today.getDay()-1]}} - {{today.getDate()}}
               </th>
             </template>
+            <!-- Generate a single day, if size is too small -->
             <template v-else>
               <th v-bind:colspan="colSpanValue" v-for="(n,i) in schedule" :key="i">
                   {{weekDays[i]}} - {{getDateOfISOWeek(getWeek(today), today.getFullYear(), i).getDate()}}
@@ -119,6 +107,7 @@ export default {
       // the size of an half hour of time in the schema
       halfHourSpace: [19],
       colSpanValue: [1],
+      calendarDayWidth: [400],
 
       // Names of all month, used in the schema header
       monthName: ["January", "Februar", "Marts", "April", "Maj", "Juni",
@@ -211,24 +200,21 @@ export default {
     },
 
     updateHalfHourSize(){
-      const tbody = document.getElementById("calendar").getElementsByTagName("tbody")[0]
+      const tbody = document.getElementById("calendar").getElementsByTagName("tbody")[0];
       this.halfHourSpace = (parseInt(window.getComputedStyle(tbody).height)/(2*9));
     },
 
     updateDaysInDisplay(){
-      if(parseInt(document.getElementById("calendar").clientWidth) < 400){
+      if(parseInt(document.getElementById("calendar").clientWidth) < this.calendarDayWidth){
         if(this.schedule.length == 5){
           this.colSpanValue = 5;
-          const day =(this.schedule[this.today.getDay() - 1])
-          console.log(this.schedule);
-          console.log(day);
-          console.log(this.scheduleDay);
+          const day = this.schedule[this.today.getDay() - 1];
           this.scheduleDay[0] = day;
           this.schedule = this.scheduleDay;
         }
       }else{
         this.colSpanValue = 1;
-        this.schedule=this.scheduleWeek12;
+        this.schedule = this.scheduleWeek12;
         this.changeSchedule();
       }
     },
@@ -247,8 +233,7 @@ export default {
     this.initToday();
     this.updateHalfHourSize();
     this.updateDaysInDisplay();
-    window.addEventListener("resize", this.updateDaysInDisplay)
-    // Update en data variable, da alle td også skal have colspan
+    window.addEventListener("resize", this.updateDaysInDisplay);
   },
   updated(){
     this.updateHalfHourSize();
@@ -334,6 +319,7 @@ export default {
         box-sizing: border-box;
         box-shadow: 1px 1px 2px;
         padding-top: 5px;
+
         &:hover{
           box-shadow: 1px 1px 6px;
         }
@@ -375,12 +361,6 @@ export default {
       box-sizing: border-box;
       box-shadow: 1px 1px 3px black;
     }
-    /*
-    #offSizeButton{
-      width: 122%;
-      margin-left: 60%;
-    }
-    */
   }
 
   #skematd{