commit 9af11077e2eb769b4a077f23fd5990f2d40a3b8a
parent 6a33add0366c95870b8e14e0247fd4144303922c
Author: Vetle Haflan <vetle@haflan.dev>
Date: Fri, 10 Apr 2020 00:49:02 +0200
More fancy prototype CSS stuff
Diffstat:
2 files changed, 24 insertions(+), 7 deletions(-)
diff --git a/proto.html b/proto.html
@@ -11,18 +11,22 @@
<body>
<div id="app" style="padding: 0">
<header>
- <div style="float: left;">Service Monitor</div>
- <div style="float: right;">S</div>
+ <div id="bar">
+ <div style="font-family: Helvetica; font-size: 1.5em; color: #555 ">> sermoni</div> <!-- color #bbf instead? -->
+ <div style="margin-left: auto;">
+ <img src="/eye.png" style="height: 3em; opacity: 0.3;">
+ </div>
+ </div>
</header>
<main>
<div class="events-wrapper">
<div v-for="e in events">
- <div class="list-item"
+ <div class="event"
style="display: flex;"
:style="e.style">
- <div>{{ e.service }}</div>
+ <div class="event-field">{{ e.service }}</div>
<mq-layout mq="md+">
- <div>{{ e.title }}</div>
+ <div class="event-field">{{ e.title }}</div>
</mq-layout>
</div>
<div v-show="false"> more info here </div>
diff --git a/style.css b/style.css
@@ -15,6 +15,14 @@ header {
width: 100%;
padding: 0;
height: 4em;
+ display: flex;
+ align-items: center;
+}
+#bar {
+ width: 100%;
+ display: flex;
+ margin: 1em;
+ align-items: center;
}
main {
margin: 4em 0 0 0;
@@ -22,16 +30,21 @@ main {
min-height: 1em;
padding: 1em;
}
-.list-item {
+.event {
height: 3em;
/*
margin-bottom: 0.5em;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0,0,0,.1);
*/
- padding: .75rem 1.25rem;
+ padding: .75rem;
border: 1px solid rgba(0,0,0,.125);
box-sizing: border-box;
+ overflow-x: scroll;
+ white-space: nowrap;
+}
+.event-field {
+ flex: 1;
}
.events-wrapper {
margin: 0;
