re meta#267 Radioknapper, smalere søkefelt, ikon til venstre

src/App.vue

@@ -7,15 +7,30 @@
     </header>
     <main :class="(article.error || article.lemmas.length || search_results.length || waiting) ? '' : 'welcome  '">
       <div class="search_container">
-        <Autocomplete @submit="select_result" :endpoint="api_pref">
-        </Autocomplete>
         <div class="lang_select_container">
-          <select class="lang_select" name="lang"  v-model="lang">
-            <option value="bob,nob">Begge ordbøker </option>
-            <option value="bob">Bokmål</option>
-            <option value="nob">Nynorsk</option>
-          </select>
+          <v-radio-group row v-model="lang">
+            <template v-slot:label>
+              <span>VIS TREFF PÅ</span>
+            </template>
+            <v-radio value="bob,nob" color="rgb(188, 71, 123)">
+              <template v-slot:label>
+                <span>Begge ordbøker</span>
+              </template>
+            </v-radio>
+            <v-radio value="bob" color="rgb(188, 71, 123)">
+              <template v-slot:label>
+                <span>Bokmål</span>
+              </template>
+            </v-radio>
+            <v-radio value="nob" label="Nynorsk" color="rgb(188, 71, 123)">
+              <template v-slot:label>
+                <span>Nynorsk</span>
+              </template>
+            </v-radio>
+          </v-radio-group>
         </div>
+        <Autocomplete @submit="select_result" :endpoint="api_pref">
+        </Autocomplete>
       </div>
       <div id="spinner">
         <v-progress-circular indeterminate color="rgb(188, 71, 123)" size="120" v-show="waiting"></v-progress-circular>
@@ -440,11 +455,14 @@ footer {
 }
 
 .search_container {
-  display: flex;
-  flex-direction: row;
+  max-width: 1400px;
   padding-top: 50px;
 }
 
+.v-label span {
+  color: rgba(86, 0, 39, 1)
+}
+
 li.suggestion {
   font-weight: bold;
   padding-left: 20px;

src/components/Autocomplete.vue

@@ -6,7 +6,8 @@
       :search-input.sync="search"
       item-text="label"
       :menu-props="{maxHeight: 500, transition: 'fade-transition'}"
-      append-icon="search"
+      prepend-inner-icon="search"
+      append-icon="undefined"
       return-object
       hide-no-data
       no-filter