commit 6a33add0366c95870b8e14e0247fd4144303922c
parent 6e6b595d8a7706d83de93c8472ae80a0d9b57988
Author: Vetle Haflan <vetle@haflan.dev>
Date: Thu, 9 Apr 2020 23:44:55 +0200
Add VueMq for responsive UI
Diffstat:
2 files changed, 30 insertions(+), 10 deletions(-)
diff --git a/proto.html b/proto.html
@@ -6,26 +6,40 @@
content="width=device-width,initial-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script src="https://unpkg.com/vue"></script>
+ <script src="https://cdn.jsdelivr.net/npm/vue-mq@1.0.1/dist/vue-mq.min.js"></script>
</head>
<body>
<div id="app" style="padding: 0">
<header>
- Service Monitor
+ <div style="float: left;">Service Monitor</div>
+ <div style="float: right;">S</div>
</header>
<main>
- <div v-for="e in events">
- <div class="list-item"
- style="display: flex;"
- :style="e.style">
- <div>{{ e.service }}</div>
- <div>{{ e.title }}</div>
+ <div class="events-wrapper">
+ <div v-for="e in events">
+ <div class="list-item"
+ style="display: flex;"
+ :style="e.style">
+ <div>{{ e.service }}</div>
+ <mq-layout mq="md+">
+ <div>{{ e.title }}</div>
+ </mq-layout>
+ </div>
+ <div v-show="false"> more info here </div>
</div>
- <div v-show="false"> more info here </div>
</div>
<main>
</div>
<script>
+ Vue.use(vueMq, {
+ breakpoints: {
+ sm: 450,
+ md: 1250,
+ lg: Infinity,
+ },
+ defaultBreakpoint: 'sm'
+ });
var app = new Vue({
el: "#app",
data: {
diff --git a/style.css b/style.css
@@ -24,10 +24,16 @@ main {
}
.list-item {
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;
border: 1px solid rgba(0,0,0,.125);
box-sizing: border-box;
- -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
- box-shadow: 0 0 10px rgba(0,0,0,.1);
+}
+.events-wrapper {
+ margin: 0;
+ padding: 0;
}
