💄 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,6 +1,7 @@
 <template>
   <div>
     <ul>
+      <div class="show-on-large-screen">
         <li>
           <input
             :aria-label="$t('label')"
@@ -11,8 +12,8 @@
             @keyup.enter="formPost"
           />
         </li>
-    </ul>
-    <ul>
+      </div>
+      <div class="show-on-large-screen">
         <li>
           <input
             :aria-label="$t('label')"
@@ -32,10 +33,18 @@
           <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>
+      <div class="show-on-large-screen">
         <li id="filter-history">
           <input
             aria-label="Search"
             type="text"
-          :placeholder="$t('search_history')"
+            :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);
 }

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
-              v-if="fb.currentUser"
-              class="pink"
-              :label="$t('notes')"
-              ref="sync"
-            >
+            <pw-section class="pink" :label="$t('notes')" ref="sync">
+              <div v-if="fb.currentUser">
                 <inputform />
                 <ballsfeed />
-            </pw-section>
-            <pw-section v-else>
+              </div>
+              <div v-else>
                 <ul>
                   <li>
                     <label>{{ $t("login_first") }}</label>
                   </li>
                 </ul>
+              </div>
             </pw-section>
           </div>
         </section>