Style client card. Hide QR code on small screens

ui/package-lock.json

@@ -1263,6 +1263,31 @@
                 "@smui/ripple": "^1.0.0-beta.16"
             }
         },
+        "@smui/icon-button": {
+            "version": "1.0.0-beta.16",
+            "resolved": "https://registry.npmjs.org/@smui/icon-button/-/icon-button-1.0.0-beta.16.tgz",
+            "integrity": "sha512-+oeyeDT/SvYTWV0RwDre8OZ3yFKi/vQSSVL+UDxt5fgwX37paDfsjrOkMMpHeCYfe4B7CUMFmjQ3CGceEkXqMw==",
+            "dev": true,
+            "requires": {
+                "@material/icon-button": "^3.1.0",
+                "@smui/common": "^1.0.0-beta.15",
+                "@smui/ripple": "^1.0.0-beta.16"
+            }
+        },
+        "@smui/paper": {
+            "version": "1.0.0-beta.16",
+            "resolved": "https://registry.npmjs.org/@smui/paper/-/paper-1.0.0-beta.16.tgz",
+            "integrity": "sha512-4URBIcsD6IOK/u1PuITzSanRjwb7gcsLbWsWj8n4q2H78e3046aJEesOq1J+JaT8TDcLX6qXxTiB12QnnViTCQ==",
+            "dev": true,
+            "requires": {
+                "@material/elevation": "^3.1.0",
+                "@material/feature-targeting": "^3.1.0",
+                "@material/shape": "^3.1.0",
+                "@material/theme": "^3.1.0",
+                "@material/typography": "^3.1.0",
+                "@smui/common": "^1.0.0-beta.15"
+            }
+        },
         "@smui/ripple": {
             "version": "1.0.0-beta.16",
             "resolved": "https://registry.npmjs.org/@smui/ripple/-/ripple-1.0.0-beta.16.tgz",

ui/package.json

@@ -21,6 +21,8 @@
         "@material/typography": "^3.1.0",
         "@smui/button": "^1.0.0-beta.16",
         "@smui/fab": "^1.0.0-beta.16",
+        "@smui/icon-button": "^1.0.0-beta.16",
+        "@smui/paper": "^1.0.0-beta.16",
         "@smui/top-app-bar": "^1.0.0-beta.16",
         "babel-jest": "^24.9.0",
         "babel-loader": "^8.0.6",

ui/src/Client.svelte

@@ -1,5 +1,9 @@
 <script>
-  import { link } from "svelte-routing";
+  import Button, {Group, GroupItem, Label} from '@smui/button';
+  import IconButton, {Icon} from '@smui/icon-button';
+  import Paper, {Title, Subtitle, Content} from '@smui/paper';
+  import { link,navigate } from "svelte-routing";
+
 
   export let client;
   export let user;
@@ -12,29 +16,38 @@
     hash = dev.PrivateKey.charCodeAt(i) + ((hash << 5) - hash);
   }
   const color = "hsl(" + (hash % 360) + ",50%,95%)";
+
+  function onEdit() {
+    navigate("/client/" + clientId, { replace: true });
+  }
 </script>
 
 <style>
-.card {
+  @media screen and (max-width: 800px) {
-  margin: 1em 0;
+    img {
+      display: none;
+    }
   }
 </style>
 
-<div class="card">
+<Paper elevation="4" style="background-color: {color}; margin-bottom: 2em;" class="card">
-  <div class="card-body" style="background-color: {color}">
+
+  <div class="float-right">
+    <IconButton class="float-right material-icons" on:click={onEdit}>edit</IconButton>
+  </div>
 
-  <a href="/client/{clientId}" use:link replace role="button" class="btn btn-secondary material-icons float-right">edit</a>
   <i class="material-icons" aria-hidden="true">devices</i>
+
   <img src="/api/v1/users/{user}/clients/{clientId}?format=qrcode" class="qrcode float-right" alt="Mobile client config"/>
-    <h4 class="card-title">{dev.Name}</h4>
+
-    <dl class="row">
+  <h3 class="card-title">{dev.Name}</h3>
-      <dt class="col-sm-2">IP</dt>
+
-      <dd class="col-sm-10">{dev.IP}</dd>
+  <dl>
-      <dt class="col-sm-2">Public Key</dt>
+    <dt>IP</dt>
-      <dd class="col-sm-10">{dev.PublicKey}</dd>
+    <dd>{dev.IP}</dd>
+    <dt>Public Key</dt>
+    <dd>{dev.PublicKey}</dd>
   </dl>
 
-    <a href="/api/v1/users/{user}/clients/{clientId}?format=config" role="button" class="btn btn-raised btn-primary">Download Config</a>
+  <Button href="/api/v1/users/{user}/clients/{clientId}?format=config" variant="raised"><Label>Download Config</Label></Button>
-  </div>
+</Paper>
-
-</div>

ui/src/style.scss

@@ -8,3 +8,26 @@ body {
   margin: 0;
   padding: 0;
 }
+
+.float-right {
+  float: right;
+}
+
+dl {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+dt {
+  flex-basis: 20%;
+  font-weight: bold;
+  text-align: right;
+}
+
+dd {
+  flex-basis: 70%;
+  flex-grow: 1;
+  margin-left: 0.5em;
+  overflow: hidden;
+}
+