fix: improve header

bifravst · Aug 13, 2019 · 3926a98 · 3926a98
1 parent 2e82a87
commit 3926a98
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/Cat/Cat.scss b/src/Cat/Cat.scss
@@ -1,3 +1,5 @@
+@import "../variables";
+
 .cat {
   .card-header {
     position: relative;
@@ -19,16 +21,24 @@
       margin: 10px;
     }
     div {
+      text-align: left;
       display: flex;
-      justify-content: space-between;
+      flex-direction: column;
+      @media (min-width: $mobile-breakpoint) {
+        display: grid;
+        grid-template: auto / 1fr 1fr 2fr;
+      }
       font-size: 85%;
       opacity: 0.75;
       span.reportedTime {
         font-size: 85%;
         opacity: 0.75;
+        text-align: right;
       }
+      padding-top: 0.5rem;
       & + div {
         margin-top: 0.5rem;
+        border-top: 1px solid #dcdcdc;
       }
     }
   }

diff --git a/src/Cat/Cat.tsx b/src/Cat/Cat.tsx
@@ -268,6 +268,7 @@ const ShowCat = ({
 										<BatteryIcon />
 										{reported.bat.v.value / 1000}V
 									</span>
+									<span />
 									<ReportedTime
 										receivedAt={reported.bat.v.receivedAt}
 										reportedAt={new Date(reported.bat.ts.value)}