fix: minor style improvements to new timeline

ActivityWatch · Oct 5, 2024 · c41e6e1 · c41e6e1 · github-actions · Oct 5, 2024
1 parent 2ccd3c1
commit c41e6e1
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 38 deletions.
diff --git a/src/components/InputTimeInterval.vue b/src/components/InputTimeInterval.vue
@@ -6,46 +6,44 @@ div
     b-alert(v-if="daterangeTooLong", variant="warning", show)
       | The selected date range is too long. The maximum is {{ maxDuration/(24*60*60) }} days.
 
-  table
-    tr
-      td.pr-2
-        label.col-form-label Show last:
-      td(colspan=2)
-        .btn-group(role="group")
-          template(v-for="(dur, idx) in durations")
-            input(
-              type="radio"
-              :id="'dur' + idx"
-              :value="dur.seconds"
-              v-model="duration"
-              @change="applyLastDuration"
-            ).d-none
-            label(:for="'dur' + idx" v-html="dur.label").btn.btn-light
+  div.d-flex.justify-content-between
+    table
+      tr
+        td.pr-2
+          label.col-form-label.col-form-label-sm Show last
+        td(colspan=2)
+          .btn-group(role="group")
+            template(v-for="(dur, idx) in durations")
+              input(
+                type="radio"
+                :id="'dur' + idx"
+                :value="dur.seconds"
+                v-model="duration"
+                @change="applyLastDuration"
+              ).d-none
+              label(:for="'dur' + idx" v-html="dur.label").btn.btn-light.btn-sm
 
-    tr
-      td.pr-2
-        label.col-form-label Show from:
-      td
-        input.form-control.d-inline-block.p-1(type="date", v-model="start", style="height: auto; width: auto;")
-        label.col-form-label.pr-1.pl-2 to:
-        input.form-control.d-inline.p-1(type="date", v-model="end", style="height: auto; width: auto")
-      td.text-right
-        button(
-          class="btn btn-outline-dark btn-sm",
-          type="button",
-          :disabled="invalidDaterange || emptyDaterange || daterangeTooLong",
-          @click="applyRange"
-        ) Apply
+      tr
+        td.pr-2
+          label.col-form-label.col-form-label-sm Show from
+        td
+          input.form-control.form-control-sm.d-inline-block.p-1(type="date", v-model="start", style="height: auto; width: auto;")
+          label.col-form-label.col-form-label-sm.px-2 to
+          input.form-control.form-control-sm.d-inline.p-1(type="date", v-model="end", style="height: auto; width: auto")
+        td.text-right
+          button.ml-2.btn.btn-outline-dark.btn-sm(
+            type="button",
+            :disabled="invalidDaterange || emptyDaterange || daterangeTooLong",
+            @click="applyRange"
+          ) Apply
 
-  div.mt-1
-    div.d-inline-block.mr-2(v-if="showUpdate")
-      b-button.px-2(@click="update()", variant="outline-dark", size="sm")
+    div.text-muted.d-none.d-md-block(style="text-align:right" v-if="showUpdate")
+      b-button.mt-2.px-2(@click="refresh()", variant="outline-dark", size="sm", style="opacity: 0.7")
         icon(name="sync")
         span.d-none.d-md-inline
-          |  Reload
-
-    div.d-inline-block.small.text-muted(v-if="lastUpdate", v-bind:title="lastUpdate")
-      | Last update: #[time(:datetime="lastUpdate.format()") {{lastUpdate | friendlytime}}]
+          | Refresh
+      div.mt-2.small(v-if="lastUpdate")
+        | Last update: #[time(:datetime="lastUpdate.format()") {{lastUpdate | friendlytime}}]
 </template>
 
 <style scoped lang="scss">
@@ -141,7 +139,7 @@ export default {
         this.$emit('input', this.value);
       }
     },
-    update() {
+    refresh() {
       const tmpMode = this.mode;
       this.mode = '';
       this.mode = tmpMode;

diff --git a/src/visualizations/VisTimeline.vue b/src/visualizations/VisTimeline.vue
@@ -2,7 +2,7 @@
 div
   div#visualization
 
-  div.small.my-2(v-if="bucketsFromEither.length != 1")
+  div.small.text-muted.my-2(v-if="bucketsFromEither.length != 1")
     i Buckets with no events in the queried range will be hidden.
 
   div(v-if="editingEvent")