From 0cd0e6970a12f93f9cb6846560526b27b1f821da Mon Sep 17 00:00:00 2001
From: Thomas Ballmann <tom@Thomass-MacBook-Pro.local>
Date: Wed, 20 May 2020 21:28:19 +0200
Subject: [PATCH] handle different screen sizes

---
 app/src/views/Setup/Appearance.vue |  39 +++++-----
 app/src/views/Setup/Country.vue    | 110 +++++++++++++++------------
 app/src/views/Setup/Name.vue       |  76 ++++++++++---------
 app/src/views/Setup/Start.vue      | 108 +++++++++++++-------------
 app/src/views/Setup/Weather.vue    |  94 +++++++++++++----------
 app/src/views/Setup/Wifi.vue       | 118 +++++++++++++++--------------
 6 files changed, 291 insertions(+), 254 deletions(-)

diff --git a/app/src/views/Setup/Appearance.vue b/app/src/views/Setup/Appearance.vue
index 9003bee..bb0f7fb 100644
--- a/app/src/views/Setup/Appearance.vue
+++ b/app/src/views/Setup/Appearance.vue
@@ -1,24 +1,27 @@
 <template>
   <v-container fluid _fill-height>
-    <v-card flat class="mx-auto" width="520">
-      <v-card-title class="display-2 mb-12 justify-center text-center">Appearance</v-card-title>
-
-      <v-radio-group v-model="settings.device.theme" row>
-        <v-radio label="Light" value="white"></v-radio>
-        <v-radio label="Dark" value="black"></v-radio>
-      </v-radio-group>
-
-      <v-card-actions>
-        <v-btn depressed block color="primary" @click="commitStep()">Continue</v-btn>
-      </v-card-actions>
-    </v-card>
+    <v-row no-gutters justify="center">
+      <v-col lg="5" md="6" sm="8">
+        <v-card flat>
+          <v-card-title class="display-2 mb-12 justify-center text-center">Appearance</v-card-title>
+
+          <v-radio-group v-model="settings.device.theme" row>
+            <v-radio label="Light" value="white"></v-radio>
+            <v-radio label="Dark" value="black"></v-radio>
+          </v-radio-group>
+
+          <v-card-actions>
+            <v-btn depressed block color="primary" @click="commitStep()">Continue</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
 <script>
 import apiDevice from "@/api/device";
 
-
 export default {
   data: () => ({
     isLoading: true,
@@ -31,20 +34,20 @@ export default {
 
       this.isLoading = false;
     });
-	},
+  },
   methods: {
     commitStep() {
-			this.isSaving = true;
+      this.isSaving = true;
 
-			apiDevice.putSettings({device: this.settings.device}, () => {
+      apiDevice.putSettings({ device: this.settings.device }, () => {
         this.isSaving = false;
 
         this.nextStep();
-			});
+      });
     },
     nextStep() {
       this.$router.push("/setup/done");
     }
   }
-}
+};
 </script>
\ No newline at end of file
diff --git a/app/src/views/Setup/Country.vue b/app/src/views/Setup/Country.vue
index 901c44b..a54349c 100644
--- a/app/src/views/Setup/Country.vue
+++ b/app/src/views/Setup/Country.vue
@@ -1,54 +1,58 @@
 <template>
   <v-container fluid _fill-height>
-    <template v-if="currentStep === 0">
-      <!-- country -->
-      <v-card flat class="mx-auto" width="520">
-        <v-card-title
-          class="display-2 mb-12 justify-center text-center"
-        >Select Your Country or Region</v-card-title>
-
-        <v-list class="ml-5 pa-0">
-          <template v-for="(country, code) in availableCountries">
-            <div :key="code">
+    <v-row no-gutters justify="center">
+      <v-col lg="5" md="6" sm="8">
+        <template v-if="currentStep === 0">
+          <!-- country -->
+          <v-card flat>
+            <v-card-title
+              class="display-2 mb-12 justify-center text-center"
+            >Select Your Country or Region</v-card-title>
+
+            <v-list class="ml-5 pa-0">
+              <template v-for="(country, code) in availableCountries">
+                <div :key="code">
+                  <v-divider></v-divider>
+
+                  <v-list-item class="pl-1" @click="commitCountry(code, country)">
+                    <!--<v-list-item-icon>{{ country.emoji }}</v-list-item-icon>-->
+                    <v-list-item-content>{{ country.native }}</v-list-item-content>
+
+                    <v-list-item-action>
+                      <v-icon>$next</v-icon>
+                    </v-list-item-action>
+                  </v-list-item>
+                </div>
+              </template>
+            </v-list>
+          </v-card>
+        </template>
+
+        <template v-else-if="currentStep === 1">
+          <!-- timezone if needed -->
+          <v-card flat>
+            <v-card-title class="display-2 mb-12 justify-center text-center">Select Your Timezone</v-card-title>
+
+            <v-list class="ml-5 pa-0">
+              <template v-for="(zone, i) in availableTimeZones">
+                <div :key="i">
+                  <v-divider></v-divider>
+
+                  <v-list-item class="pl-1" @click="commitTimezone(zone)">
+                    <v-list-item-content>{{ zone }}</v-list-item-content>
+
+                    <v-list-item-action>
+                      <v-icon>$next</v-icon>
+                    </v-list-item-action>
+                  </v-list-item>
+                </div>
+              </template>
               <v-divider></v-divider>
-
-              <v-list-item class="pl-1" @click="commitCountry(code, country)">
-                <!--<v-list-item-icon>{{ country.emoji }}</v-list-item-icon>-->
-                <v-list-item-content>{{ country.native }}</v-list-item-content>
-
-                <v-list-item-action>
-                  <v-icon>$next</v-icon>
-                </v-list-item-action>
-              </v-list-item>
-            </div>
-          </template>
-        </v-list>
-      </v-card>
-    </template>
-
-    <template v-else-if="currentStep === 1">
-      <!-- timezone if needed -->
-      <v-card flat class="mx-auto" width="520">
-        <v-card-title class="display-2 mb-12 justify-center text-center">Select Your Timezone</v-card-title>
-
-        <v-list class="ml-5 pa-0">
-          <template v-for="(zone, i) in availableTimeZones">
-            <div :key="i">
-              <v-divider></v-divider>
-
-              <v-list-item class="pl-1" @click="commitTimezone(zone)">
-                <v-list-item-content>{{ zone }}</v-list-item-content>
-
-                <v-list-item-action>
-                  <v-icon>$next</v-icon>
-                </v-list-item-action>
-              </v-list-item>
-            </div>
-          </template>
-          <v-divider></v-divider>
-        </v-list>
-      </v-card>
-    </template>
+            </v-list>
+          </v-card>
+        </template>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
@@ -111,4 +115,12 @@ export default {
     }
   }
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+/* issue https://github.com/vuetifyjs/vuetify/issues/9130 */
+>>> .v-card__text,
+.v-card__title {
+  word-break: normal;
+}
+</style>
\ No newline at end of file
diff --git a/app/src/views/Setup/Name.vue b/app/src/views/Setup/Name.vue
index 08d8b1a..4dc49c3 100644
--- a/app/src/views/Setup/Name.vue
+++ b/app/src/views/Setup/Name.vue
@@ -1,42 +1,46 @@
 <template>
   <v-container fluid _fill-height>
-    <v-card flat class="mx-auto" width="520">
-      <div class="justify-center text-center">
-        <v-icon viewBox="0 0 24 24" style="width: 64px; height: 64px; fill: #FF9800">$face</v-icon>
-      </div>
-      <v-card-title class="display-2 mb-12 justify-center text-center">Give it a name</v-card-title>
+    <v-row no-gutters justify="center">
+      <v-col lg="5" md="6" sm="8">
+        <v-card flat>
+          <div class="justify-center text-center">
+            <v-icon viewBox="0 0 24 24" style="width: 64px; height: 64px; fill: #FF9800">$face</v-icon>
+          </div>
+          <v-card-title class="display-2 mb-12 justify-center text-center">Give it a name</v-card-title>
 
-      <p
-        class="text-center"
-      >TODO:Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
+          <p
+            class="text-center"
+          >TODO:Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
 
-      <v-skeleton-loader v-if="isLoading" type="list-item-two-line" class="mx-auto"></v-skeleton-loader>
+          <v-skeleton-loader v-if="isLoading" type="list-item-two-line" class="mx-auto"></v-skeleton-loader>
 
-      <template v-else>
-        <v-card-text>
-          <v-text-field label="i8n:My paperdash name" v-model="settings.device.name">
-            <template v-slot:append-outer>
-              <v-icon
-                viewBox="0 0 24 24"
-                style="width: 48px; height: 48px;"
-                @click="setRandomeName()"
-              >$autorenew</v-icon>
-            </template>
-          </v-text-field>
-        </v-card-text>
+          <template v-else>
+            <v-card-text>
+              <v-text-field label="i8n:My paperdash name" v-model="settings.device.name">
+                <template v-slot:append-outer>
+                  <v-icon
+                    viewBox="0 0 24 24"
+                    style="width: 48px; height: 48px;"
+                    @click="setRandomeName()"
+                  >$autorenew</v-icon>
+                </template>
+              </v-text-field>
+            </v-card-text>
 
-        <v-card-actions class="flex-column">
-          <v-btn
-            :disabled="!isStepValid"
-            :loading="isSaving"
-            depressed
-            block
-            color="primary"
-            @click="commitStep()"
-          >Continue</v-btn>
-        </v-card-actions>
-      </template>
-    </v-card>
+            <v-card-actions class="flex-column">
+              <v-btn
+                :disabled="!isStepValid"
+                :loading="isSaving"
+                depressed
+                block
+                color="primary"
+                @click="commitStep()"
+              >Continue</v-btn>
+            </v-card-actions>
+          </template>
+        </v-card>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
@@ -71,13 +75,13 @@ export default {
   },
   methods: {
     commitStep() {
-			this.isSaving = true;
+      this.isSaving = true;
 
-			apiDevice.putSettings({device: this.settings.device}, () => {
+      apiDevice.putSettings({ device: this.settings.device }, () => {
         this.isSaving = false;
 
         this.nextStep();
-			});
+      });
     },
     nextStep() {
       this.$router.push("/setup/appearance");
diff --git a/app/src/views/Setup/Start.vue b/app/src/views/Setup/Start.vue
index 78c2f0d..dd21600 100644
--- a/app/src/views/Setup/Start.vue
+++ b/app/src/views/Setup/Start.vue
@@ -1,61 +1,65 @@
 <template>
   <v-container fluid _fill-height>
-    <v-card flat class="mx-auto" width="520">
-      <v-card-title class="display-2 mt-12 justify-center text-center">Hello paperdash</v-card-title>
+		<v-row no-gutters justify="center">
+			<v-col lg="5" md="6" sm="8">
+				<v-card flat>
+					<v-card-title class="display-2 mt-12 justify-center text-center">Hello paperdash</v-card-title>
 
-      <Case
-        v-if="0"
-        id="device_"
-        :class="[device.theme, device.case, device.front, 'case_orange', 'my-12']"
-      />
+					<Case
+						v-if="0"
+						id="device_"
+						:class="[device.theme, device.case, device.front, 'case_orange', 'my-12']"
+					/>
 
-      <svg
-        id="device"
-        :class="[device.theme, device.case, device.front, 'case_orange front_orange', 'my-12 mx-auto']"
-        version="1.0"
-        xmlns="http://www.w3.org/2000/svg"
-        _width="561px"
-        _height="527px"
-        viewBox="0 0 5610 5270"
-        preserveAspectRatio="xMidYMid meet"
-        width="400"
-      >
-        <!--
-					<defs>
-						<pattern id="pattern_b" width="100%" height="100%">
-							<image x="0" y="0" height="84%" href="/face-weather-b.png"/>
-						</pattern>
-						<pattern id="pattern_w" width="100%" height="100%">
-							<image x="0" y="0" height="84%" href="/face-weather-w.png"/>
-						</pattern>
-					</defs>
-        -->
+					<svg
+						id="device"
+						:class="[device.theme, device.case, device.front, 'case_orange front_orange', 'my-12 mx-auto']"
+						version="1.0"
+						xmlns="http://www.w3.org/2000/svg"
+						_width="561px"
+						_height="527px"
+						viewBox="0 0 5610 5270"
+						preserveAspectRatio="xMidYMid meet"
+						width="400"
+					>
+						<!--
+							<defs>
+								<pattern id="pattern_b" width="100%" height="100%">
+									<image x="0" y="0" height="84%" href="/face-weather-b.png"/>
+								</pattern>
+								<pattern id="pattern_w" width="100%" height="100%">
+									<image x="0" y="0" height="84%" href="/face-weather-w.png"/>
+								</pattern>
+							</defs>
+						-->
 
-        <g id="border" fill="#262626" stroke="none">
-          <path
-            d="M442 5110 c-227 -86 -417 -161 -422 -166 -4 -5 -12 -1063 -16 -2350 -7 -2292 -6 -2342 12 -2352 31 -16 817 -242 844 -242 14 0 1086 158 2383 352 l2358 353 6 25 c9 35 -66 3683 -76 3693 -4 4 -1049 194 -2322 422 -1273 228 -2323 416 -2334 419 -11 2 -206 -67 -433 -154z"
-          />
-        </g>
-        <g fill="#f3f3f3" stroke="none">
-          <path
-            id="front"
-            d="M860 2630 l0 -2611 33 6 c17 3 1080 163 2360 355 1281 191 2330 350 2332 352 6 6 -70 3666 -76 3672 -4 4 -4627 836 -4645 836 -2 0 -4 -1175 -4 -2610z m2378 1721 c1217 -175 2214 -320 2216 -322 7 -6 69 -3179 63 -3185 -8 -9 -4489 -624 -4499 -618 -10 6 -11 4444 0 4444 4 0 1003 -144 2220 -319z m2249 2 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z m60 -2890 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z"
-          />
-          <path
-            id="image"
-            d="M1022 4642 c-7 -19 5 -4393 13 -4400 5 -5 4465 605 4472 611 4 4 -59 3161 -63 3166 -3 3 -3200 465 -4387 634 -19 2 -31 -1 -35 -11z"
-          />
-          <path
-            id="case"
-            d="M438 5081 c-214 -81 -390 -150 -393 -153 -7 -6 -28 -4658 -22 -4664 2 -2 182 -56 400 -119 218 -64 403 -118 412 -121 13 -6 15 259 15 2600 0 2078 -3 2606 -12 2605 -7 0 -187 -67 -400 -148z"
-          />
-        </g>
-      </svg>
+						<g id="border" fill="#262626" stroke="none">
+							<path
+								d="M442 5110 c-227 -86 -417 -161 -422 -166 -4 -5 -12 -1063 -16 -2350 -7 -2292 -6 -2342 12 -2352 31 -16 817 -242 844 -242 14 0 1086 158 2383 352 l2358 353 6 25 c9 35 -66 3683 -76 3693 -4 4 -1049 194 -2322 422 -1273 228 -2323 416 -2334 419 -11 2 -206 -67 -433 -154z"
+							/>
+						</g>
+						<g fill="#f3f3f3" stroke="none">
+							<path
+								id="front"
+								d="M860 2630 l0 -2611 33 6 c17 3 1080 163 2360 355 1281 191 2330 350 2332 352 6 6 -70 3666 -76 3672 -4 4 -4627 836 -4645 836 -2 0 -4 -1175 -4 -2610z m2378 1721 c1217 -175 2214 -320 2216 -322 7 -6 69 -3179 63 -3185 -8 -9 -4489 -624 -4499 -618 -10 6 -11 4444 0 4444 4 0 1003 -144 2220 -319z m2249 2 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z m60 -2890 c-4 -3 -7 0 -7 7 0 7 3 10 7 7 3 -4 3 -10 0 -14z"
+							/>
+							<path
+								id="image"
+								d="M1022 4642 c-7 -19 5 -4393 13 -4400 5 -5 4465 605 4472 611 4 4 -59 3161 -63 3166 -3 3 -3200 465 -4387 634 -19 2 -31 -1 -35 -11z"
+							/>
+							<path
+								id="case"
+								d="M438 5081 c-214 -81 -390 -150 -393 -153 -7 -6 -28 -4658 -22 -4664 2 -2 182 -56 400 -119 218 -64 403 -118 412 -121 13 -6 15 259 15 2600 0 2078 -3 2606 -12 2605 -7 0 -187 -67 -400 -148z"
+							/>
+						</g>
+					</svg>
 
-      <v-card-actions>
-        <v-btn depressed block color="primary" @click="commitStep()">Continue</v-btn>
-      </v-card-actions>
-    </v-card>
+					<v-card-actions>
+						<v-btn depressed block color="primary" @click="commitStep()">Continue</v-btn>
+					</v-card-actions>
+				</v-card>
+			</v-col>
+		</v-row>
   </v-container>
 </template>
 
diff --git a/app/src/views/Setup/Weather.vue b/app/src/views/Setup/Weather.vue
index 5de8336..ffc8a4b 100644
--- a/app/src/views/Setup/Weather.vue
+++ b/app/src/views/Setup/Weather.vue
@@ -1,45 +1,55 @@
 <template>
   <v-container fluid _fill-height>
-    <v-card flat class="mx-auto" width="520">
-      <div class="justify-center text-center">
-        <v-icon viewBox="0 0 24 24" style="width: 64px; height: 64px; fill: #FF9800">$wb_sunny</v-icon>
-      </div>
-      <v-card-title class="display-2 mb-12 justify-center text-center">Weather</v-card-title>
+    <v-row no-gutters justify="center">
+      <v-col lg="5" md="6" sm="8">
+        <v-card flat>
+          <div class="justify-center text-center">
+            <v-icon viewBox="0 0 24 24" style="width: 64px; height: 64px; fill: #FF9800">$wb_sunny</v-icon>
+          </div>
+          <v-card-title class="display-2 mb-12 justify-center text-center">Weather</v-card-title>
 
-      <v-skeleton-loader
-        v-if="isLoading"
-        type="list-item-two-line,list-item-two-line"
-        class="mx-auto"
-      ></v-skeleton-loader>
+          <v-skeleton-loader
+            v-if="isLoading"
+            type="list-item-two-line,list-item-two-line"
+            class="mx-auto"
+          ></v-skeleton-loader>
 
-      <template v-else>
-        <v-card-text>
-          <v-text-field label="i8n:OpenWeatherMap API key" v-model="settings.weather.api">
-            <template v-slot:append-outer>
-              <v-icon @click="registerApiKey()">$open_in_new</v-icon>
-            </template>
-          </v-text-field>
+          <template v-else>
+            <v-card-text>
+              <v-text-field label="i8n:OpenWeatherMap API key" v-model="settings.weather.api">
+                <template v-slot:append-outer>
+                  <v-icon @click="registerApiKey()">$open_in_new</v-icon>
+                </template>
+              </v-text-field>
 
-          <weather-find-location
-            :api="settings.weather.api"
-            :location.sync="settings.weather.location"
-            :lang="lang"
-            :unit="unit"
-          ></weather-find-location>
-        </v-card-text>
+              <weather-find-location
+                :api="settings.weather.api"
+                :location.sync="settings.weather.location"
+                :lang="lang"
+                :unit="unit"
+              ></weather-find-location>
+            </v-card-text>
 
-        <v-card-actions class="flex-column">
-          <v-btn :disabled="!isLocationValid" depressed block color="primary" @click="commitStep()">Continue</v-btn>
-          <v-btn
-            class="ma-0 mt-3"
-            text
-            block
-            color="primary"
-            @click="nextStep()"
-          >Set Up Later in Settings</v-btn>
-        </v-card-actions>
-      </template>
-    </v-card>
+            <v-card-actions class="flex-column">
+              <v-btn
+                :disabled="!isLocationValid"
+                depressed
+                block
+                color="primary"
+                @click="commitStep()"
+              >Continue</v-btn>
+              <v-btn
+                class="ma-0 mt-3"
+                text
+                block
+                color="primary"
+                @click="nextStep()"
+              >Set Up Later in Settings</v-btn>
+            </v-card-actions>
+          </template>
+        </v-card>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
@@ -68,21 +78,21 @@ export default {
     },
     unit() {
       return this.settings.language === "EN" ? "" : "metric";
-		},
-		isLocationValid() {
-			return this.settings.weather.location > 0;
-		}
+    },
+    isLocationValid() {
+      return this.settings.weather.location > 0;
+    }
   },
 
   methods: {
     commitStep() {
       // TODO sav
 
-			this.nextStep();
+      this.nextStep();
     },
     nextStep() {
       this.$router.push("/setup/name");
-		},
+    },
     registerApiKey() {
       window.open("http://openweathermap.org/");
     }
diff --git a/app/src/views/Setup/Wifi.vue b/app/src/views/Setup/Wifi.vue
index fd71be1..b8fa94f 100644
--- a/app/src/views/Setup/Wifi.vue
+++ b/app/src/views/Setup/Wifi.vue
@@ -1,62 +1,66 @@
 <template>
   <v-container fluid _fill-height>
-    <v-card flat class="mx-auto" width="520">
-      <v-card-title class="display-2 mb-12 justify-center text-center">
-        Choose a
-        <br />Wi-Fi Network
-      </v-card-title>
-
-      <v-skeleton-loader
-        v-if="isLoading"
-        type="list-item-two-line,list-item-two-line,list-item-two-line"
-        class="mx-auto"
-      ></v-skeleton-loader>
-
-      <v-list v-else>
-        <template v-for="(wifi, i) in wifiAvailable">
-          <div :key="i">
-            <v-divider v-if="i > 0"></v-divider>
-
-            <v-list-item class="px-1" @click="onWifiSelect(wifi)">
-              <v-list-item-icon class="mr-2 ml-2">
-                <v-icon v-if="wifi.ssid === settings.system.wifi">$check</v-icon>
-
-                <v-progress-circular
-                  v-if="wifi.ssid === connectingSSID"
-                  :size="24"
-                  :width="2"
-                  color="grey "
-                  indeterminate
-                ></v-progress-circular>
-              </v-list-item-icon>
-
-              <v-list-item-content dark>
-                <v-list-item-title v-text="wifi.ssid"></v-list-item-title>
-                <v-list-item-subtitle v-text="wifi.bssid"></v-list-item-subtitle>
-              </v-list-item-content>
-
-              <v-list-item-icon>
-                <v-icon class="mx-2" v-if="wifi.secure">$lock</v-icon>
-                <v-icon class="mx-2">{{ wifi.rssi | wifiIcon(0) }}</v-icon>
-                <v-icon class="ml-3">$next</v-icon>
-              </v-list-item-icon>
-            </v-list-item>
-          </div>
-        </template>
-
-        <v-divider></v-divider>
-
-        <v-btn text color="primary" class="_px-0 my-2">Choose Another Network</v-btn>
-      </v-list>
-
-      <v-dialog v-model="wifiPasswordModal" max-width="450">
-        <setup-wifi-connect
-          :ssid="connectSSID"
-          :onConnect="onWifiConnect"
-          @cancel="wifiPasswordModal = false"
-        ></setup-wifi-connect>
-      </v-dialog>
-    </v-card>
+    <v-row no-gutters justify="center">
+      <v-col lg="5" md="6" sm="8">
+        <v-card flat>
+          <v-card-title class="display-2 mb-12 justify-center text-center">
+            Choose a
+            <br />Wi-Fi Network
+          </v-card-title>
+
+          <v-skeleton-loader
+            v-if="isLoading"
+            type="list-item-two-line,list-item-two-line,list-item-two-line"
+            class="mx-auto"
+          ></v-skeleton-loader>
+
+          <v-list v-else>
+            <template v-for="(wifi, i) in wifiAvailable">
+              <div :key="i">
+                <v-divider v-if="i > 0"></v-divider>
+
+                <v-list-item class="px-1" @click="onWifiSelect(wifi)">
+                  <v-list-item-icon class="mr-2 ml-2">
+                    <v-icon v-if="wifi.ssid === settings.system.wifi">$check</v-icon>
+
+                    <v-progress-circular
+                      v-if="wifi.ssid === connectingSSID"
+                      :size="24"
+                      :width="2"
+                      color="grey "
+                      indeterminate
+                    ></v-progress-circular>
+                  </v-list-item-icon>
+
+                  <v-list-item-content dark>
+                    <v-list-item-title v-text="wifi.ssid"></v-list-item-title>
+                    <v-list-item-subtitle v-text="wifi.bssid"></v-list-item-subtitle>
+                  </v-list-item-content>
+
+                  <v-list-item-icon>
+                    <v-icon class="mx-2" v-if="wifi.secure">$lock</v-icon>
+                    <v-icon class="mx-2">{{ wifi.rssi | wifiIcon(0) }}</v-icon>
+                    <v-icon class="ml-3">$next</v-icon>
+                  </v-list-item-icon>
+                </v-list-item>
+              </div>
+            </template>
+
+            <v-divider></v-divider>
+
+            <v-btn text color="primary" class="_px-0 my-2">Choose Another Network</v-btn>
+          </v-list>
+
+          <v-dialog v-model="wifiPasswordModal" max-width="450">
+            <setup-wifi-connect
+              :ssid="connectSSID"
+              :onConnect="onWifiConnect"
+              @cancel="wifiPasswordModal = false"
+            ></setup-wifi-connect>
+          </v-dialog>
+        </v-card>
+      </v-col>
+    </v-row>
   </v-container>
 </template>