💄 Updating the UI and style files

components/firebase/feeds.vue

@@ -8,15 +8,10 @@
   >
     <ul v-for="feed in fb.currentFeeds" :key="feed.id" class="entry">
       <div class="show-on-large-screen">
-        <li>
-          <input
-            :aria-label="$t('label')"
-            type="text"
-            readonly
-            :value="feed.label"
-            :placeholder="$t('no_label')"
-            class="bg-color"
-          />
+        <li class="info">
+          <label>
+            {{ feed.label || $t("no_label") }}
+          </label>
         </li>
         <button class="icon" @click="deleteFeed(feed)">
           <i class="material-icons">delete</i>
@@ -24,7 +19,7 @@
       </div>
       <div class="show-on-large-screen">
         <li class="info clamb-3">
-          <label>{{ feed.message }}</label>
+          <label>{{ feed.message || $t("empty") }}</label>
         </li>
       </div>
     </ul>

components/firebase/inputform.vue

@@ -1,41 +1,50 @@
 <template>
   <div>
     <ul>
-      <li>
-        <input
-          :aria-label="$t('label')"
-          type="text"
-          autofocus
-          v-model="message"
-          :placeholder="$t('paste_a_note')"
-          @keyup.enter="formPost"
-        />
-      </li>
-    </ul>
-    <ul>
-      <li>
-        <input
-          :aria-label="$t('label')"
-          type="text"
-          autofocus
-          v-model="label"
-          :placeholder="$t('label')"
-          @keyup.enter="formPost"
-        />
-      </li>
-      <button
-        class="icon"
-        :disabled="!(this.message || this.label)"
-        value="Save"
-        @click="formPost"
-      >
-        <i class="material-icons">add</i>
-        <span>Add</span>
-      </button>
+      <div class="show-on-large-screen">
+        <li>
+          <input
+            :aria-label="$t('label')"
+            type="text"
+            autofocus
+            v-model="message"
+            :placeholder="$t('paste_a_note')"
+            @keyup.enter="formPost"
+          />
+        </li>
+      </div>
+      <div class="show-on-large-screen">
+        <li>
+          <input
+            :aria-label="$t('label')"
+            type="text"
+            autofocus
+            v-model="label"
+            :placeholder="$t('label')"
+            @keyup.enter="formPost"
+          />
+        </li>
+        <button
+          class="icon"
+          :disabled="!(this.message || this.label)"
+          value="Save"
+          @click="formPost"
+        >
+          <i class="material-icons">add</i>
+          <span>Add</span>
+        </button>
+      </div>
     </ul>
   </div>
 </template>
 
+<style scoped lang="scss">
+ul,
+ol {
+  flex-direction: column;
+}
+</style>
+
 <script>
 import { fb } from "../../functions/fb";
 

components/graphql/argument.vue

@@ -8,7 +8,7 @@
   </span>
 </template>
 
-<style></style>
+<style scoped lang="scss"></style>
 
 <script>
 import typelink from "./typelink";

components/graphql/field.vue

@@ -28,7 +28,7 @@
   </div>
 </template>
 
-<style>
+<style scoped lang="scss">
 .field-box {
   padding: 16px;
   margin: 4px;

components/graphql/type.vue

@@ -14,7 +14,7 @@
   </div>
 </template>
 
-<style>
+<style scoped lang="scss">
 .type-box {
   padding: 16px;
   margin: 4px 0;

components/graphql/typelink.vue

@@ -2,7 +2,7 @@
   <span class="typelink" @click="jumpToType">{{ typeString }}</span>
 </template>
 
-<style>
+<style scoped lang="scss">
 .typelink {
   color: var(--ac-color);
   font-family: "Roboto Mono", monospace;

components/history.vue

@@ -1,14 +1,19 @@
 <template>
   <pw-section class="green" icon="history" :label="$t('history')" ref="history">
     <ul>
-      <li id="filter-history">
-        <input
-          aria-label="Search"
-          type="text"
-          :placeholder="$t('search_history')"
-          v-model="filterText"
-        />
-      </li>
+      <div class="show-on-large-screen">
+        <li id="filter-history">
+          <input
+            aria-label="Search"
+            type="text"
+            :placeholder="$t('search')"
+            v-model="filterText"
+          />
+        </li>
+        <button class="icon">
+          <i class="material-icons">search</i>
+        </button>
+      </div>
     </ul>
     <virtual-list
       class="virtual-list"

components/section.vue

@@ -15,7 +15,7 @@
   </fieldset>
 </template>
 
-<style>
+<style scoped lang="scss">
 fieldset.no-colored-frames legend {
   color: var(--fg-color);
 }