Grid position

compiler/src/mastodon/client.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
-.client
+.client(@scroll="onScroll")
   .statues
     .header(v-if="notifications.length > 0") Accueil
-    .list(v-if="statues.length > 0" @scroll="onScroll")
+    .list(v-if="statues.length > 0")
       template(v-for="status in statues")
         status(v-if="showStatus(status)" :key="status.id" :status="status" :now="now" :showMedia="showMedia" @mark="onStatusMark")
       .status(v-show="loadingOlder")

compiler/src/nextcloud-news/main.vue

@@ -1,10 +1,11 @@
 <template lang="pug">
-.nextcloud-news(v-show="unreaded.length > 0 || !server || !token || !username")
+.nextcloud-news(v-show="showEmpty || unreaded.length > 0 || !server || !token || !username")
   service-header
     template(#title) Nextcloud News
     template(#settings)
       setting-int(:id="'update'" :title="'Update interval'" :value="update" @change="setOptionCouple")
       setting-int(:id="'buffer'" :title="'Buffer size'" :value="buffer" @change="setOptionCouple")
+      setting-boolean(:id="'showEmpty'" :title="'Show empty'" :value="showEmpty" @change="setOptionCouple")
   .unreaded
     .news(v-for="news in unreaded")
       a(:href="news.url" target="_blank")
@@ -53,6 +54,10 @@ export default {
     update: {
       default: 5 * 60, //5min
       type: Number
+    },
+    showEmpty: {
+      default: false,
+      type: Boolean
     }
   },
   data() {

compiler/src/openweathermap/chart.vue

@@ -8,7 +8,7 @@ export default {
   mixins: [ reactiveProp ],
   mounted () {
     this.renderChart(this.chartData, {
-      responsive: true,
+      responsive: true, maintainAspectRatio: false,
       legend: {
         labels: {
          fontColor: "white"

compiler/src/openweathermap/main.vue

@@ -23,7 +23,7 @@
           | {{ city.main.temp }}°C ─ {{ city.main.humidity }}%
       input.weather(v-show="showAdd" placeholder="city id" @keyup.enter="addCity(parseInt($event.target.value))")
     .forecast
-      chart(v-if="forecast" :chartData="forecastChart")
+      chart.chart(v-if="forecast" :chartData="forecastChart")
       .service-loader(v-else)
   .service-loader(v-else)
 </template>

index.html

@@ -25,7 +25,11 @@
             <input v-show="showManager" v-model="newService" @keyup.enter="addService">
         </div>
         <div id="services">
-            <component v-for="(service, key) in services" :is="service.type" :key="key" v-bind="service.options" @error="addError" @save="setService(key, $event)"></component>
+            <component
+                v-for="(service, key) in services" :is="service.type" :key="key"
+                v-bind="service.options" @error="addError" @save="setService(key, $event)"
+                :style="gridPos(key, service.position)"
+            />
         </div>
     </div>
     <script src="main.js"></script>

main.css

@@ -2,6 +2,7 @@
   margin: 0;
   padding: 0;
   font-family: Verdana, Geneva, sans-serif;
+  scrollbar-width: thin;
 }
 
 body {
@@ -51,16 +52,18 @@ a {
 
 #services {
   height: 100vh;
-  overflow: hidden;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+  display: -ms-grid;
+  display: grid;
+  grid-gap: .2em;
+  -ms-grid-columns: (minmax(0, 1fr))[8];
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+  -ms-grid-rows: (minmax(0, 1fr))[4];
+      grid-template-rows: repeat(4, minmax(0, 1fr));
+  justify-items: stretch;
 }
 
 #services > div {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  overflow: auto;
 }
 
 #services > div .service-header .title, #services > div .service-header .settings {
@@ -117,20 +120,21 @@ a {
   }
 }
 
+.mastodon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
 .mastodon .client {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  height: 100vh;
-  overflow: hidden;
-}
-
-.mastodon .client .list {
-  height: 100%;
   overflow-y: auto;
-  min-height: -webkit-min-content;
-  min-height: -moz-min-content;
-  min-height: min-content;
 }
 
 .mastodon .client .list > div {
@@ -228,7 +232,6 @@ a {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  max-width: 30%;
 }
 
 .openweathermap .list {
@@ -253,9 +256,12 @@ a {
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
-  max-height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden;
+}
+
+.openweathermap .forecast .chart {
+  position: relative;
+  height: 100%;
 }
 
 .openweathermap .weather {
@@ -308,9 +314,9 @@ a {
   grid-area: remove;
   -ms-grid-column-align: right;
       justify-self: right;
-  -ms-flex-item-align: bottom;
-      -ms-grid-row-align: bottom;
-      align-self: bottom;
+  -ms-flex-item-align: end;
+      -ms-grid-row-align: end;
+      align-self: end;
   font-size: .8em;
 }
 
@@ -324,6 +330,20 @@ a {
   margin-top: -10px;
 }
 
+.nextcloud-news {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.nextcloud-news .unreaded {
+  overflow-y: auto;
+}
+
 .nextcloud-news .news {
   margin: 0.3em;
   background-color: #222;

main.js

@@ -33,7 +33,7 @@ var app = new Vue({
 
             this.services.push({
                 type: this.newService,
-                options: {}
+                options: {}, position: {}
             })
             this.newService = ''
             this.showManager = false
@@ -41,7 +41,7 @@ var app = new Vue({
         },
         setService(id, options) {
             this.$set(this.services, id, {
-                type: this.services[id].type,
+                ...this.services[id],
                 options: options
             })
             this.saveServices()
@@ -53,6 +53,12 @@ var app = new Vue({
         saveServices() {
             localStorage.setItem(servicesStorage, JSON.stringify(this.services))
             this.$forceUpdate()
+        },
+        gridPos(id, position = {}) {
+            return {
+                "grid-row": `${position.x || 1} / span ${position.h || 2}`,
+                "grid-column": `${position.y || id*2+1} / span ${position.w || 2}`
+            }
         }
     }
 })

main.sass

@@ -18,6 +18,7 @@ $foreColor: #eee
   margin: 0
   padding: 0
   font-family: Verdana, Geneva, sans-serif
+  scrollbar-width: thin
 
 body
   background-color: $backColor
@@ -53,10 +54,13 @@ a
 
 #services
   height: 100vh
-  overflow: hidden
-  display: flex
+  display: grid
+  grid-gap: .2em
+  grid-template-columns: repeat(8, minmax(0, 1fr))
+  grid-template-rows: repeat(4, minmax(0, 1fr))
+  justify-items: stretch
   & > div
-    flex: 1
+    overflow: auto
     .service-header
       .title, .settings
         @include tile
@@ -85,14 +89,12 @@ a
         transform: rotate(360deg)
 
 .mastodon
+  display: flex
+  flex-direction: column
   .client
     display: flex
-    height: 100vh
-    overflow: hidden
+    overflow-y: auto
     .list
-      height: 100%
-      overflow-y: auto
-      min-height: min-content
       & > div
         @include tile
     .statues
@@ -151,7 +153,6 @@ a
 .openweathermap
   display: flex
   flex-direction: column
-  max-width: 30%
   .list
     display: flex
     flex-wrap: wrap
@@ -160,9 +161,10 @@ a
     @include tile
   .forecast
     flex: 1
-    max-height: 100%
-    overflow-y: auto
-    overflow-x: hidden
+    overflow: hidden
+    .chart
+      position: relative
+      height: 100%
   .weather
     min-width: 17em
     border: 1px solid $tileColor
@@ -188,7 +190,7 @@ a
     .remove
       grid-area: remove
       justify-self: right
-      align-self: bottom
+      align-self: end
       font-size: .8em
   .ic
     overflow: hidden
@@ -198,6 +200,10 @@ a
       margin-top: -10px
 
 .nextcloud-news
+  display: flex
+  flex-direction: column
+  .unreaded
+    overflow-y: auto
   .news
     @include tile
     .date