Text area in edit field and a input field for image uploads. Cleaned up large shame css

src/components/EditEvent.vue

@@ -2,62 +2,67 @@
   <div class="parent">
     <h1 class="slipping-left">registrer en ny opplevelse</h1>
 
-<div class="container">
-  <div class="cont2" data-block-type="9">
-    <div class="sqs-block-content">
-      <div class="form-wrapper">
-        <div class="form-inner-wrapper">
-          <form>
-            <div class="field-list clear">
-              <div class="form-item field email required">
-                <label class="title" for="email2-field">Tittel <span class="required">*</span></label>
-                
-                <input class="field-element" name="email" x-autocompletetype="email" type="email" spellcheck="false">
-              </div>    
+    <div class="container">
+      <div class="cont2">
+        <div class="form-item required">
+          <label class="title" for="email2-field">Tittel <span class="required">*</span></label>
+          <input class="field-element" name="email" x-autocompletetype="email" type="email" spellcheck="false">
+        </div>
 
-              <fieldset class="form-item fields name required">
-                <div class="title">Dato <span class="required">*</span></div>
-                <div class="field first-name">
-                  <label class="caption"><input class="field-element field-control" name="fname" x-autocompletetype="given-name" type="date" spellcheck="false" maxlength="30" data-title="First">
-                  Fra Dato</label>
-                </div>
-                <div class="field last-name">
-                  <label class="caption"><input class="field-element field-control" name="lname" x-autocompletetype="surname" type="date" spellcheck="false" maxlength="30" data-title="Last">
-                  Til Dato</label>
-                </div>
-              </fieldset>
+        <fieldset class="form-item fields required">
+          <div class="title">Dato <span class="required">*</span></div>
+          <div class="field first-name">
+            <label class="caption"><input class="field-element field-control" name="fname" x-autocompletetype="given-name" type="date" spellcheck="false" maxlength="30" data-title="First">
+                    Fra Dato</label>
+          </div>
 
-           
-              <div class="form-item field text required">
-                <label class="title" for="text3-field">Sted<span class="required">*</span></label>
-                
-                <input class="field-element text" v-model="locationInput" v-on:keydown.enter.prevent @click="show" type="text">
+          <div class="field last-name">
+            <label class="caption"><input class="field-element field-control" name="lname" x-autocompletetype="surname" type="date" spellcheck="false" maxlength="30" data-title="Last">
+            Til Dato</label>
+          </div>
+        </fieldset>
 
-                <ul class="field-autocompleted" v-click-outside="hide" v-if="showAutocompleted && features.length > 1">
-                  <li v-for="result in features" @click="choosePlace(result)">{{ result.place_name_no }}</li>
-                </ul>
-              </div>
+        <div class="form-item required">
+          <label class="title" for="text3-field">Sted<span class="required">*</span></label>
+          <input class="field-element" v-model="locationInput" v-on:keydown.enter.prevent @click="show" type="text">
 
-<!--               <div class="form-item field textarea required">
-                <label class="title" for="textarea4-field">love letter <span class="required">*</span></label>
-                
-                <textarea class="field-element "></textarea>
-              </div> -->
+          <ul class="field-autocompleted" v-click-outside="hide" v-if="showAutocompleted && features.length > 1">
+            <li v-for="result in features" @click="choosePlace(result)">{{ result.place_name_no }}</li>
+          </ul>
+        </div>
+
+        <div class="form-item field textarea required">
+          <label class="title" for="textarea4-field">love letter <span class="required">*</span></label>
+          
+          <textarea class="field-element "></textarea>
+        </div>
+
+        <div class="form-button-wrapper form-button-wrapper--align-left">
+          <input class="button sqs-system-button sqs-editable-button" type="submit" value="Legg til">
+        </div>
+
+        <input id="file-upload" type="file" multiple>
+
+        <div class="hidden form-submission-text">Thank you!</div>
+
+        <div class="hidden form-submission-html" data-submission-html=""></div>
 
-        </div> 
-      <div class="form-button-wrapper form-button-wrapper--align-left">
-        <input class="button sqs-system-button sqs-editable-button" type="submit" value="Legg til">
       </div>
+    </div>
 
-      <div class="hidden form-submission-text">Thank you!</div>
 
-      <div class="hidden form-submission-html" data-submission-html=""></div>
-    </form>
 
-  </div>
+     <!--    <div style="
+          width: 100%;
+          height: 5rem;
+          border: 1px solid red;
+          margin-bottom: 1rem;
+          margin-left: -0.5rem;
+          padding-right: 0.5rem;
+        ">
+
+        </div> -->
 
-</div>
-</div></div></div>
   </div>
 </template>
 
@@ -174,10 +179,7 @@ export default {
     outline-color: rgba(0, 0, 0, 0.701961);
     outline-style: none;
     outline-width: 0px;
-    padding-bottom: 17px;
-    padding-left: 15px;
-    padding-right: 15px;
-    padding-top: 0px;
+    padding: 0px 15px 17px;
     position: relative;
     transition-delay: 0s;
     transition-duration: 0.2s;
@@ -186,42 +188,16 @@ export default {
   }
 
   .form-item {
-    border-bottom-color: rgba(0, 0, 0, 0.701961);
-    border-bottom-style: none;
-    border-bottom-width: 0px;
-    border-image-outset: 0px;
-    border-image-repeat: stretch;
-    border-image-slice: 100%;
-    border-image-source: none;
-    border-image-width: 1;
-    border-left-color: rgba(0, 0, 0, 0.701961);
-    border-left-style: none;
-    border-left-width: 0px;
-    border-right-color: rgba(0, 0, 0, 0.701961);
-    border-right-style: none;
-    border-right-width: 0px;
-    border-top-color: rgba(0, 0, 0, 0.701961);
-    border-top-style: none;
-    border-top-width: 0px;
+    border-width: 0px;
     color: rgba(0, 0, 0, 0.701961);
     display: block;
     font-family: 'Proxima Nova';
     font-size: 14px;
-    font-style: normal;
-    font-weight: 300;
-    height: 110px;
-    letter-spacing: normal;
     line-height: 17px;
-    margin-bottom: 0px;
-    margin-left: -11.625px;
-    margin-right: 0px;
-    margin-top: 0px;
+    margin: 0 0 1rem -12px;
     min-width: min-content;
-    padding-bottom: 0px;
-    padding-left: 0px;
-    padding-right: 0px;
-    padding-top: 0px;
-
+    padding: 0px;
+    
     & .title {
       color: rgba(0, 0, 0, 0.701961);
       display: block;
@@ -235,19 +211,9 @@ export default {
     }
 
     & .field {
-      color: rgba(0, 0, 0, 0.701961);
       display: block;
       float: left;
-      font-family: 'Proxima Nova';
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 300;
-      height: 69px;
-      letter-spacing: normal;
-      line-height: 17px;
-      margin-bottom: 24px;
-      margin-right: 0px;
-      margin-top: 0px;
+      // margin-bottom: 24px;
       position: relative;
       width: 290.9375px;
 
@@ -261,7 +227,6 @@ export default {
       }
 
       & .caption {
-        color: rgba(0, 0, 0, 0.701961);
         cursor: pointer;
         display: inline;
         font-family: 'Proxima Nova';
@@ -298,88 +263,72 @@ export default {
         }
       }
       
-      border-bottom-color: rgb(204, 204, 204);
-      border-bottom-left-radius: 2px;
-      border-bottom-right-radius: 2px;
-      border-bottom-style: solid;
-      border-bottom-width: 1px;
-      border-image-outset: 0px;
-      border-image-repeat: stretch;
-      border-image-slice: 100%;
-      border-image-source: none;
-      border-image-width: 1;
-      border-left-color: rgb(204, 204, 204);
-      border-left-style: solid;
-      border-left-width: 1px;
-      border-right-color: rgb(204, 204, 204);
-      border-right-style: solid;
-      border-right-width: 1px;
-      border-top-color: rgb(204, 204, 204);
-      border-top-left-radius: 2px;
-      border-top-right-radius: 2px;
-      border-top-style: solid;
-      border-top-width: 1px;
+      border-color: rgb(204, 204, 204);
+      border-radius: 2px;
+      border-style: solid;
+      border-width: 1px;
     }
 
     & input {
       -webkit-appearance: none;
       -webkit-rtl-ordering: logical;
       -webkit-user-select: text;
-      background-attachment: scroll;
-      background-clip: border-box;
       background-color: rgb(250, 250, 250);
-      background-image: none;
-      background-origin: padding-box;
-      background-size: auto;
-      border-bottom-color: rgb(204, 204, 204);
-      border-bottom-left-radius: 2px;
-      border-bottom-right-radius: 2px;
-      border-bottom-style: solid;
-      border-bottom-width: 1px;
+
+      border: 1px solid rgb(204, 204, 204);
+      border-radius: 3px;
       border-image-outset: 0px;
       border-image-repeat: stretch;
       border-image-slice: 100%;
       border-image-source: none;
       border-image-width: 1;
-      border-left-color: rgb(204, 204, 204);
-      border-left-style: solid;
-      border-left-width: 1px;
-      border-right-color: rgb(204, 204, 204);
-      border-right-style: solid;
-      border-right-width: 1px;
-      border-top-color: rgb(204, 204, 204);
-      border-top-left-radius: 2px;
-      border-top-right-radius: 2px;
-      border-top-style: solid;
-      border-top-width: 1px;
       box-sizing: border-box;
-      color: rgb(0, 0, 0);
       cursor: auto;
       display: inline-block;
-      font-family: sans-serif;
-      font-size: 14px;
-      font-style: normal;
-      font-variant-caps: normal;
-      font-weight: normal;
+     
       height: 42px;
+      font-family: 'Proxima Nova';
       letter-spacing: normal;
+      font-size: 14px;
       line-height: 16px;
-      margin-bottom: 4px;
-      margin-left: 0px;
-      margin-right: 0px;
-      margin-top: 6px;
-      padding-bottom: 12px;
-      padding-left: 12px;
-      padding-right: 12px;
-      padding-top: 12px;
+      margin: 6px 0 4px;
+      padding: 12px;
+
+      width: 100%;
+    }
+
+    & textarea {
+      -webkit-appearance: none;
+      -webkit-rtl-ordering: logical;
+      -webkit-user-select: text;
+      border-color: rgb(204, 204, 204);
+      border-left-radius: 2px;
+      border-right-radius: 2px;
+      border-style: solid;
+      border-width: 1px;
+
+      font-family: 'Proxima Nova';
+      letter-spacing: normal;
+      font-size: 14px;
+
+      box-sizing: border-box;
+
+      line-height: 14px;
+      margin: 6px 0px 4px;
+      min-height: 100px;
+      overflow-x: auto;
+      overflow-y: auto;
+      padding: 12px;
+      resize: vertical;
       text-align: start;
       text-indent: 0px;
       text-shadow: none;
       text-transform: none;
-      vertical-align: baseline;
-
+      vertical-align: top;
+      white-space: pre-wrap;
       width: 100%;
       word-spacing: 0px;
+      word-wrap: break-word;
       writing-mode: horizontal-tb;
     }
   }
@@ -389,47 +338,20 @@ export default {
     -webkit-appearance: none;
     -webkit-backface-visibility: none;
     background-color: rgb(39, 39, 39);
-    border-bottom-color: rgb(39, 39, 39);
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
-    border-bottom-style: outset;
-    border-bottom-width: 0px;
-    border-image-outset: 0px;
-    border-image-repeat: stretch;
-    border-image-slice: 100%;
-    border-image-source: none;
-    border-image-width: 1;
-    border-left-color: rgb(39, 39, 39);
-    border-left-style: outset;
-    border-left-width: 0px;
-    border-right-color: rgb(39, 39, 39);
-    border-right-style: outset;
-    border-right-width: 0px;
-    border-top-color: rgb(39, 39, 39);
-    border-top-left-radius: 0px;
-    border-top-right-radius: 0px;
-    border-top-style: outset;
-    border-top-width: 0px;
-    // box-sizing: border-box;
+    border-color: rgb(39, 39, 39);
+    border-style: outset;
+    border-width: 0px;
     color: rgb(255, 255, 255);
     cursor: pointer;
-    // display: inline-block;
-    font-family: proxima-nova, sans-serif;
     font-size: 14px;
-    font-style: normal;
-    font-variant-caps: normal;
     font-weight: 600;
     height: 42px;
     letter-spacing: 1px;
     line-height: 14px;
     margin-left: -10px;
-    outline-color: rgb(255, 255, 255);
-    outline-style: none;
-    outline-width: 0px;
-    padding: auto;
+    padding: 0 1rem;
     text-align: center;
     text-decoration: none;
-    text-indent: 0px;
     text-shadow: none;
     text-transform: uppercase;
     transition-delay: 0s;
@@ -438,8 +360,6 @@ export default {
     transition-timing-function: linear;
     vertical-align: baseline;
     white-space: pre;
-    width: 126.859375px;
-    word-spacing: 0px;
     writing-mode: horizontal-tb;
   }
 </style>

src/components/Popover.vue

@@ -3,9 +3,12 @@
     <div class="popover-content">
       <div class="image-container">
         <img :src="image.url" />
+      
+        <div class="other-elements">
+          <p>There is something here</p>
+        </div>
+      
       </div>
-
-      <div class="other-elements"></div>
     </div>
     <div style="position: fixed; width: 100%; bottom: 2rem">
       <div style="display: block; width: max-content; margin: 0 auto;">
@@ -74,6 +77,11 @@ export default {
       // flex-direction: column;
       overflow: auto;
     }
+
+    .image-container {
+      // background-color: white;
+      // padding: 0.4rem;
+    }
    
     img {
       max-height: 90vh;
@@ -85,8 +93,11 @@ export default {
     }
 
     .other-elements {
-      // height: 2000px;
-      background-color: NavajoWhite;
+      margin-top: -3px;
+      // height: 100px;
+      padding: 1rem;
+      color: white;
+      background-color: rgba(0,0,0,0.75);
     }
 
     .hover-options {

src/scss/main.scss

@@ -13,6 +13,10 @@ html, body {
   overflow: hidden;
 }
 
+a {
+  cursor: pointer;
+}
+
 #app {
   color: black;
   font-weight: 400;