More layout improvements for mobile.

TheRestartProject · Aug 28, 2023 · 6c9e7a9 · 6c9e7a9
1 parent d7f9e95
commit 6c9e7a9
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 12 deletions.
diff --git a/resources/js/components/CollapsibleSection.vue b/resources/js/components/CollapsibleSection.vue
@@ -14,7 +14,6 @@
             <slot name="title" />
           </div>
           <div v-if="count" :class="{
-          'd-inline' : true,
           'd-md-none' : !alwaysShowCount,
           'text-muted' : true,
           'd-flex' : true,
@@ -24,9 +23,7 @@
           <span v-if="countBadge">
             &nbsp;<b-badge variant="primary" pill>{{ count }}</b-badge>
           </span>
-            <span v-else>
-            &nbsp;<span :class="countClass">({{ count }})</span>
-          </span>
+          <span v-else :class="countClass + ' ml-1'">({{ count }})</span>
           </div>
           <slot name="title-icon" />
         </div>

diff --git a/resources/js/components/EventDeviceSummary.vue b/resources/js/components/EventDeviceSummary.vue
@@ -25,10 +25,10 @@
       </b-td>
       <b-td v-if="powered" class="d-td-cell d-md-none">
         <div>
-          <span class="pl-0 pl-md-2 pr-2 clickme edit" @click="editDevice">
+          <span class="pl-0 pl-md-2 pr-4 clickme edit" @click="editDevice">
             <b-img class="icon edit" src="/icons/edit_ico_green.svg" />
           </span>
-          <span class="pl-2 pr-2 clickme" @click="deleteConfirm">
+          <span class="pr-2 clickme" @click="deleteConfirm">
             <b-img class="icon" src="/icons/delete_ico_red.svg" />
           </span>
         </div>

diff --git a/resources/js/components/EventDevices.vue b/resources/js/components/EventDevices.vue
@@ -71,12 +71,12 @@
             </div>
           </template>
           <template slot="title-right">
-            <div class="d-flex text-brand small">
-              <div class="ml-2 mr-1 pt-1 lower small align-self-center">
+            <div class="d-flex text-brand small text-center">
+              <div class="ml-2 mr-1 pt-1 lower small">
                 <b-img src="/images/trash_brand.svg" class="icon" />
                 {{ Math.round(stats.waste_powered) }}
               </div>
-              <div class="ml-1 mr-1 lower pt-1 small align-self-center">
+              <div class="ml-1 mr-1 lower pt-1 small">
                 <b-img src="/images/co2_brand.svg" class="icon" />
                 {{ Math.round(stats.co2_powered) }}
               </div>
@@ -100,12 +100,12 @@
             </div>
           </template>
           <template slot="title-right">
-            <div class="d-flex text-brand small">
-              <div class="ml-2 mr-1 pt-1 lower small align-self-center">
+            <div class="d-flex text-brand small text-center">
+              <div class="ml-2 mr-1 pt-1 lower small">
                 <b-img src="/images/trash_brand.svg" class="icon" />
                 {{ Math.round(stats.waste_unpowered) }}
               </div>
-              <div class="ml-1 mr-1 lower pt-1 small align-self-center">
+              <div class="ml-1 mr-1 lower pt-1 small">
                 <b-img src="/images/co2_brand.svg" class="icon" />
                 {{ Math.round(stats.co2_unpowered) }}
               </div>