💄 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>
+        <li class="info">
-          <input
+          <label>
-            :aria-label="$t('label')"
+            {{ feed.label || $t("no_label") }}
-            type="text"
+          </label>
-            readonly
-            :value="feed.label"
-            :placeholder="$t('no_label')"
-            class="bg-color"
-          />
         </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>
+      <div class="show-on-large-screen">
-        <input
+        <li>
-          :aria-label="$t('label')"
+          <input
-          type="text"
+            :aria-label="$t('label')"
-          autofocus
+            type="text"
-          v-model="message"
+            autofocus
-          :placeholder="$t('paste_a_note')"
+            v-model="message"
-          @keyup.enter="formPost"
+            :placeholder="$t('paste_a_note')"
-        />
+            @keyup.enter="formPost"
-      </li>
+          />
-    </ul>
+        </li>
-    <ul>
+      </div>
-      <li>
+      <div class="show-on-large-screen">
-        <input
+        <li>
-          :aria-label="$t('label')"
+          <input
-          type="text"
+            :aria-label="$t('label')"
-          autofocus
+            type="text"
-          v-model="label"
+            autofocus
-          :placeholder="$t('label')"
+            v-model="label"
-          @keyup.enter="formPost"
+            :placeholder="$t('label')"
-        />
+            @keyup.enter="formPost"
-      </li>
+          />
-      <button
+        </li>
-        class="icon"
+        <button
-        :disabled="!(this.message || this.label)"
+          class="icon"
-        value="Save"
+          :disabled="!(this.message || this.label)"
-        @click="formPost"
+          value="Save"
-      >
+          @click="formPost"
-        <i class="material-icons">add</i>
+        >
-        <span>Add</span>
+          <i class="material-icons">add</i>
-      </button>
+          <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">
+      <div class="show-on-large-screen">
-        <input
+        <li id="filter-history">
-          aria-label="Search"
+          <input
-          type="text"
+            aria-label="Search"
-          :placeholder="$t('search_history')"
+            type="text"
-          v-model="filterText"
+            :placeholder="$t('search')"
-        />
+            v-model="filterText"
-      </li>
+          />
+        </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);
 }

lang/en-US.js

@@ -111,7 +111,7 @@ export default {
   no_label: "No label",
   prerequest_script: "Pre-Request Script",
   no_prerequest_script: "No pre-request script",
-  search_history: "search history",
+  search: "Search",
   history_empty: "History is empty",
   history_deleted: "History Deleted",
   clear: "Clear",

lang/es-ES.js

@@ -111,7 +111,7 @@ export default {
   no_label: "Sin etiqueta",
   prerequest_script: "Pre-Request Script",
   no_prerequest_script: "Script sin pre-requisito",
-  search_history: "buscar historial",
+  search: "buscar historial",
   history_empty: "Historial vacío",
   history_deleted: "Historial borrado",
   clear: "Limpiar",

lang/fr-FR.js

@@ -111,7 +111,7 @@ export default {
   no_label: "Aucun label",
   prerequest_script: "Pre-Request Script",
   no_prerequest_script: "No pre-request script",
-  search_history: "Historique de la recherche",
+  search: "Historique de la recherche",
   history_empty: "L'historique est vide",
   history_deleted: "Historique supprimé",
   clear: "Nettoyer",

lang/ja-JP.js

@@ -111,7 +111,7 @@ export default {
   no_label: "ラベル無し",
   prerequest_script: "プレリクエストスクリプト",
   no_prerequest_script: "プレリクエストスクリプト無し",
-  search_history: "検索履歴",
+  search: "検索履歴",
   history_empty: "履歴が空です",
   history_deleted: "履歴が削除された",
   clear: "クリア",

pages/index.vue

@@ -934,21 +934,18 @@
           <input id="sync-tab" type="radio" name="side" />
           <label for="sync-tab">{{ $t("notes") }}</label>
           <div class="tab">
-            <pw-section
+            <pw-section class="pink" :label="$t('notes')" ref="sync">
-              v-if="fb.currentUser"
+              <div v-if="fb.currentUser">
-              class="pink"
+                <inputform />
-              :label="$t('notes')"
+                <ballsfeed />
-              ref="sync"
+              </div>
-            >
+              <div v-else>
-              <inputform />
+                <ul>
-              <ballsfeed />
+                  <li>
-            </pw-section>
+                    <label>{{ $t("login_first") }}</label>
-            <pw-section v-else>
+                  </li>
-              <ul>
+                </ul>
-                <li>
+              </div>
-                  <label>{{ $t("login_first") }}</label>
-                </li>
-              </ul>
             </pw-section>
           </div>
         </section>