fix(panel): update visuals on smaller screens (#2507)

Fixes #2505
sogebot · Sep 17, 2019 · dcb381c · dcb381c
1 parent 73a7ae9
commit dcb381c
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 43 deletions.
diff --git a/public/index.html b/public/index.html
@@ -95,8 +95,8 @@ <h4 class="modal-title">Changelog
       </ul>
 
       <ul class="navbar-nav mr-auto">
-        <li class="nav-item page-menu" style="font-size: 0.6rem; position: relative; top: .2rem">
-          <span class="alert alert-warning" style="padding:0;" id="APIStatus" title="API checking" >API</span>
+        <li class="nav-item page-menu d-flex pl-2 pr-2" style="font-size: 0.6rem; position: relative; top: .7rem">
+          <span class="alert alert-warning" style="padding:0;" id="APIStatus" title="API checking">API</span>
           <span class="alert alert-warning" style="padding:0;" id="TMIStatus" title="TMI checking">TMI</span>
           <span class="alert alert-warning" style="padding:0;" id="SOCStatus" title="SOC checking">SOC</span>
           <span class="alert alert-warning" style="padding:0;" id="MODStatus" title="MOD checking">MOD</span>

diff --git a/scss/custom.scss b/scss/custom.scss
@@ -177,31 +177,6 @@ a.active {
   vertical-align: sub;
 }
 
-
-@media (max-width : 770px) {
-  .stream-info:first-child::before {
-    border-left: 0;
-  }
-  .stream-info:nth-child(2n-1)::before {
-    border-left: 0;
-  }
-}
-
-@media (min-width : 770px) and (max-width : 992px) {
-  .stream-info:first-child::before {
-    border-left: 0;
-  }
-  .stream-info:nth-child(3n+1)::before {
-    border-left: 0;
-  }
-}
-
-@media (min-width : 992px){
-  .stream-info:nth-child(12)::before {
-    border-left: 0;
-  }
-}
-
 .stream-info::before {
     content: "";
     position: absolute;

diff --git a/src/panel/others/checklist.vue b/src/panel/others/checklist.vue
@@ -1,10 +1,12 @@
 <template>
   <div v-if="isSystemEnabled">
     <div
-      class="btn"
+      class="btn btn-sm"
+      style="overflow: hidden;max-height: 30px;"
       @click="toggleDisplay()"
       v-bind:class="[completed === items.length ? btnClass + 'success' : btnClass + 'danger']">
-      {{completed}}/{{items.length}} {{commons.translate('systems.checklist.check')}}
+      {{completed}}/{{items.length}}
+      <span><fa icon="tasks"/></span>
     </div>
     <div v-bind:class="[bDisplay ? 'd-block' : 'd-none']" style="position: absolute; width:200px">
       <div class="list-group">

diff --git a/src/panel/others/quickStatsApp.vue b/src/panel/others/quickStatsApp.vue
@@ -7,7 +7,7 @@
     </template>
     <template v-else>
       <div class="row">
-        <div class="col-sm stream-info" @click="saveHighlight">
+        <div class="col-6 col-sm-4 col-md-4 col-lg-1 stream-info" @click="saveHighlight">
           <h2>
             <span>{{ translate('uptime') }}</span>
             <small>{{ translate('click-to-highlight') }}</small>
@@ -16,7 +16,7 @@
           <span class="stats">&nbsp;</span>
         </div>
 
-        <div class="col-sm stream-info" v-on:click="toggleViewerShow">
+        <div class="col-6 col-sm-4 col-md-4 col-lg-1 stream-info" v-on:click="toggleViewerShow">
           <h2>
             <span>{{ translate('viewers') }}</span>
             <small>{{ translate('click-to-toggle-display') }}</small>
@@ -28,7 +28,7 @@
           <span class="stats">&nbsp;</span>
         </div>
 
-        <div class="col-sm stream-info" v-on:click="toggleViewerShow">
+        <div class="col-6 col-sm-4 col-md-4 col-lg-1 stream-info" v-on:click="toggleViewerShow">
           <h2>
             <span>{{ translate('max-viewers') }}</span>
             <small>{{ translate('click-to-toggle-display') }}</small>
@@ -40,7 +40,7 @@
           <span class="stats" v-html="difference(averageStats.maxViewers, maxViewers)"></span>
         </div>
 
-        <div class="col-sm stream-info" v-on:click="toggleViewerShow">
+        <div class="col-6 col-sm-4 col-md-4 col-lg-1 stream-info" v-on:click="toggleViewerShow">
           <h2>
             <span>{{ translate('new-chatters') }}</span>
             <small>{{ translate('click-to-toggle-display') }}</small>
@@ -52,31 +52,31 @@
           <span class="stats" v-html="difference(averageStats.newChatters, newChatters)"></span>
         </div>
 
-        <div class="col-sm stream-info">
+        <div class="col-6 col-sm-4 col-md-4 col-lg-1 stream-info">
           <h2>{{ translate('chat-messages') }}</h2>
           <span class="data" v-bind:title="chatMessages">{{ shortenNumber(chatMessages, b_shortenNumber) }}</span>
           <span class="stats" v-html="difference(averageStats.chatMessages, chatMessages)"></span>
         </div>
 
-        <div class="col-sm stream-info">
+        <div class="col-6 col-sm-4 col-md-4 col-lg-1 stream-info">
           <h2>{{ translate('views') }}</h2>
           <span class="data" v-bind:title="currentViews">{{ shortenNumber(currentViews, b_shortenNumber) }}</span>
           <span class="stats" v-html="difference(averageStats.currentViews, currentViews)"></span>
         </div>
 
-        <div class="col-sm stream-info">
+        <div class="col-6 col-sm-4 col-md-4 col-lg-1 stream-info">
           <h2>{{ translate('hosts') }}</h2>
           <span class="data">{{ currentHosts }}</span>
           <span class="stats" id="curHostsChange">&nbsp;</span>
         </div>
 
-        <div class="col-sm stream-info">
+        <div class="col-6 col-sm-4 col-md-4 col-lg-1 stream-info">
           <h2>{{ translate('followers') }}</h2>
           <span class="data" v-bind:title="currentFollowers">{{ shortenNumber(currentFollowers, b_shortenNumber) }}</span>
           <span class="stats" v-html="difference(averageStats.currentFollowers, currentFollowers)"></span>
         </div>
 
-        <div class="col-sm stream-info">
+        <div class="col-6 col-sm-4 col-md-4 col-lg-1 stream-info">
           <h2>{{ translate('subscribers') }}</h2>
           <template v-if="broadcasterType !== ''">
             <span class="data">{{ currentSubscribers }}</span>
@@ -87,7 +87,7 @@
           </template>
         </div>
 
-        <div class="col-sm stream-info">
+        <div class="col-6 col-sm-4 col-md-4 col-lg-1 stream-info">
           <h2>{{ translate('bits') }}</h2>
           <template v-if="broadcasterType !== ''">
             <span class="data" v-bind:title="currentBits">{{ shortenNumber(currentBits, b_shortenNumber) }}</span>
@@ -98,13 +98,13 @@
           </template>
         </div>
 
-        <div class="col-sm stream-info">
+        <div class="col-6 col-sm-4 col-md-4 col-lg-1 stream-info">
           <h2>{{ translate('tips') }}</h2>
           <span class="data">{{ Number(currentTips).toFixed(2) }}</span><span class="data ml-0 pl-0">{{ currency }}</span>
           <span class="stats" v-html="difference(averageStats.currentTips, currentTips, false, currency)"></span>
         </div>
 
-        <div class="col-sm stream-info">
+        <div class="col-6 col-sm-4 col-md-4 col-lg-1 stream-info">
           <h2>{{ translate('watched-time') }}</h2>
           <span class="data">{{ Number(currentWatched / 1000 / 60 / 60).toFixed(1) }}h</span>
           <span class="stats" v-html="difference(averageStats.currentWatched / 1000 / 60 / 60, currentWatched / 1000 / 60 / 60, false, 'h', 1)"></span>
@@ -121,7 +121,7 @@
           <span  class="data" v-else>{{ translate('not-available') }}</span>
         </div>
 
-        <div class="col stream-info" @click="showGameAndTitleDlg">
+        <div class="col-md stream-info" @click="showGameAndTitleDlg">
           <h2>
             <span>{{ translate('title') }}</span>
             <small>{{ translate('click-to-change') }}</small>
@@ -130,7 +130,7 @@
           <span class="data" v-else>{{ translate('not-available') }}</span>
         </div>
 
-        <div class="col stream-info" @click="showGameAndTitleDlg">
+        <div class="col-md stream-info" @click="showGameAndTitleDlg">
           <h2>
             <span>{{ translate('tags') }}</span>
             <small>{{ translate('click-to-change') }}</small>
@@ -374,4 +374,27 @@
 </script>
 
 <style scoped>
+@media (max-width : 576px) {
+  .stream-info:first-child::before {
+    border-left: 0;
+  }
+  .stream-info:nth-child(2n-1)::before {
+    border-left: 0;
+  }
+}
+
+@media (min-width : 576px) and (max-width : 992px) {
+  .stream-info:first-child::before {
+    border-left: 0;
+  }
+  .stream-info:nth-child(3n+1)::before {
+    border-left: 0;
+  }
+}
+
+@media (min-width : 992px){
+  .stream-info:nth-child(13)::before {
+    border-left: 0;
+  }
+}
 </style>