Completed edit block and fixed mobile view

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

 <template>
-  <p>pencil svg icon here</p>
+  <div class="edit-pencil">
+    <img v-svg-inline class="edit-pencil-icon" src="@/assets/pencil-sharp.svg"/>
+  </div>
 </template>
 
 <script>
+
 export default {
   name: 'Edit'
 }
 </script>
 
 <style scoped lang="scss">
+  .edit-pencil {
+    min-height: 100;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    cursor: pointer;
+    &:hover {
+      background: $lighter-green-theme-color;
+
+      .edit-pencil-icon {
+        fill: $lighter-green-theme-color;
+      }
+    }
+  }
 
+  .edit-pencil-icon {
+    max-height: 150px;
+    max-width: 150px;
+    fill: $light-green-theme-color;
+    background: $light-theme-color;
+  }
 </style>
\ No newline at end of file

website/studerende-dk/src/views/Home.vue

@@ -7,10 +7,10 @@
         <span class="col-preview">
           <component :is="previewType"></component>
         </span>
-        <div @click="editBlock(colBlock.type, rowIndex, colIndex)" @mousedown="resizeHorizontal($event, rowIndex, colIndex)" @mouseup="saveAndStopResizing()" :id="rowIndex+','+colIndex" class="col"
+        <div @mousedown="resizeHorizontal($event, rowIndex, colIndex)" @mouseup="saveAndStopResizing()" :id="rowIndex+','+colIndex" class="col" :class="colBlock.type"
           v-show="!isDragged(rowIndex, colIndex)" v-for="(colBlock, colIndex) in rowBlock.blocks" :key="colIndex" :style="{ 'flex-grow': colBlock.width, 'order': colIndex }">
-          <component :is="colBlock.type" :row="rowIndex" :col="colIndex"></component>
-          <button class="hidden-row-item pencil" @click="editBlock('Edit', rowIndex, colIndex)">
+          <component :is="colBlock.type" :row="rowIndex" :col="colIndex" @click="tryEditBlock(colBlock.type, rowIndex, colIndex)"></component>
+          <button class="hidden-row-item pencil" v-if="colBlock.type!=='Edit'" @click="editBlock(rowIndex, colIndex)">
             <img v-svg-inline class="icon" src="@/assets/pencil.svg"/>
           </button>
         </div>
@@ -150,9 +150,13 @@ export default {
       this.addBlockInfo.addBlocksActive = false;
     },
 
-    editBlock(type, row, col) {
+    tryEditBlock(type, row, col) {
       if (type !== "Edit")
         return;
+      this.editBlock(row, col);
+    },
+
+    editBlock(row, col) {
       this.addBlockInfo.chooseBlockActive = true;
       this.addBlockInfo.changeAtIndex = {row: row, col: col};
     },
@@ -169,7 +173,8 @@ export default {
     blurRow(rowIndex) {
       const cols = document.getElementById(rowIndex).getElementsByClassName("col");
       for (const col of cols) {
-        col.className = "col animate-blur-grey-out-zoom";
+        col.classList.remove("animate-slight-blur-grey-out");
+        col.classList.add("animate-blur-grey-out-zoom");
       }
     },
 
@@ -177,7 +182,7 @@ export default {
       if(!this.deleting) {
         const cols = document.getElementById(rowIndex).getElementsByClassName("col");
         for (const col of cols) {
-          col.className = "col animate-slight-blur-grey-out";
+          col.classList.add("animate-slight-blur-grey-out");
         }
       }
     },
@@ -186,7 +191,8 @@ export default {
       if(!this.deleting) {
         const cols = document.getElementById(rowIndex).getElementsByClassName("col");
         for (const col of cols) {
-          col.className = "col";
+          col.classList.remove("animate-slight-blur-grey-out");
+          col.classList.remove("animate-blur-grey-out-zoom");
         }
       }
     },
@@ -596,14 +602,18 @@ export default {
 
   .row {
     display: flex;
-    padding-top: $gap / 2;
+    //padding-top: $gap / 2;
     flex-direction: column;
     position: relative;
-    min-height: 150px;
+    //min-height: 150px;
 
     &.drag * {
       pointer-events: none;
     }
+
+    &:first-of-type {
+      padding-top: $gap / 2;
+    }
   }
     
   .col, .col-preview {
@@ -616,10 +626,11 @@ export default {
 
   .col {
     position: relative;
+    margin-bottom: $gap / 2;
+  }
 
-    &:not(:last-of-type) {
-      margin-bottom: $gap / 2;
-    }
+  .Edit {
+    display: none;
   }
 
   .col-preview {
@@ -729,6 +740,7 @@ export default {
       }
     }
   }
+
   .remove-block {
     right: $gap - 5px + $gap / 2;
     order: 1000;
@@ -883,6 +895,10 @@ export default {
       flex-direction: row;
       padding-top: $gap;
 
+      &:first-of-type {
+        padding-top: $gap;
+      }
+
       &:hover {
         .remove-block {
           width: 0;
@@ -990,6 +1006,10 @@ export default {
       }
     }
 
+    .Edit {
+      display: block;
+    }
+
     .add-block{
       display: initial;
     }