multi inputs, and minor UI fixes

Author: sasha

src/assets/documents.scss

@@ -13,6 +13,13 @@
       width: auto;
     }
   }
+
+  
+  .full-input {
+    width: 100%;
+  }
+
+
 }
 .swal-content__input {
   border: 1px solid #8395a7 !important;

src/assets/global.scss

@@ -854,6 +854,12 @@ a.button {
   text-decoration: none;
   color: #576574 !important;
   font-size: 0.8rem;
+  width: calc(100% - .2em);
+}
+
+.multi-input .input.button {
+  white-space: nowrap;
+  width: min-content;
 }
 .multi-input .input:focus {
   outline: none;
@@ -863,6 +869,7 @@ a.button {
 
 .multi-input {
   height: min-content;
+  display: flex;
 }
 
 .multi-input .input {

src/components/documents.vue

@@ -4,28 +4,28 @@
   <div class="container">
     <br />
     <h1>Documents</h1>
-    <span class="multi-input fullwidth">
-      <input v-model="search" class="input" type="text" width="100%" placeholder="Search"/>
-      <a class="button input dark" width="100%">Search</a>
+    <span class="multi-input">
+      <input v-model="search" class="input full-input" type="text" placeholder="Search"/>
+      <a @click="openNewDoc" class="button warning input" width="100%">New Document</a>
     </span>
     <br />
     <br />
-    <a @click="openNewDoc" class="button warning" width="100%">New Document</a>
+    
 
     <br /> <br />
-<div class="box material" style="padding: 2%;" v-if="noDocs">
-<h3>It looks like you have no docs.</h3>
-<button class="button" @click="openNewDoc">Create a new one!</button>
+    <div class="box material" style="padding: 2%;" v-if="noDocs">
+      <h3>It looks like you have no docs.</h3>
+      <button class="button" @click="openNewDoc">Create a new one!</button>
 
-</div>
-<div class="box material" style="padding: 2%; margin-bottom: 2%;" v-if="shareOffers">
-<h3>Shared With You:</h3>
+    </div>
+    <div class="box material" style="padding: 2%; margin-bottom: 2%;" v-if="shareOffers">
+      <h3>Shared With You:</h3>
 
-<button @click="openShared(doc)" class="shareOfferDoc button" v-for="doc in shareOffers" :key="doc.docId">
-{{doc.name}}
-</button>
+      <button @click="openShared(doc)" class="shareOfferDoc button" v-for="doc in shareOffers" :key="doc.docId">
+      {{doc.name}}
+      </button>
 
-</div>
+    </div>
     <router-link v-for="doc in docs" :key="doc.key" :alt="doc.doc.info.title" :to="{ name: 'editor', params: {document: doc.key, user: doc.uid} }" class="document-preview">
       <div class="box material hover-deep container">
         <h3 >{{doc.doc.info.title}}</h3>

src/components/editor.vue

@@ -4,13 +4,14 @@
   <br />
   <div class="container">
     <div class="box container material docInfo">
-      <span class="multi-input share-multi">
+      <span class="multi-input">
         <input @input="saveDoc()" :disabled="opts.readOnly" id="docTitle" v-model="docMeta.title" type="text" class="input">
+        <button  @click="remove" class="button warning input"><i class="fas fa-trash"></i>
+        </button>
       </span>
       <p v-if="opts.readOnly">Read Only</p>
       <div class="share-row">
-        <button  @click="remove" class="button warning" tooltip="Remove Document"><i class="fas fa-trash"></i>
-        </button>
+        
         <div class="share-col">
           <span class="user" v-for="user in users" :key="user.uid">
             <img :src="user.profile_picture" :alt="user.name" class="round-profile share-item" :tooltip="user.name">