From 12cbbd46e0b4b42b3fd0211f6078bc9827b02ffc Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 20 May 2023 12:54:44 +0200
Subject: [PATCH] better space manageemnt

---
 .../record/components/RecordControls.vue      | 92 ++++++++++---------
 1 file changed, 47 insertions(+), 45 deletions(-)

diff --git a/src/modules/record/components/RecordControls.vue b/src/modules/record/components/RecordControls.vue
index 9799837..6c418cc 100644
--- a/src/modules/record/components/RecordControls.vue
+++ b/src/modules/record/components/RecordControls.vue
@@ -109,52 +109,54 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="record-controls buttons has-addons">
-    <template v-if="record && record.currentStepId">
-      <button
-        class="button is-primary is-light"
-        v-if="record.breakTime"
-        @click="recordStore.resume(taskId)"
-      >
-        <img src="/icons/start.svg" alt="resume" />
-      </button>
-      <button
-        class="button is-primary is-light"
-        v-else
-        @click="recordStore.pause(taskId)"
-      >
-        <img src="/icons/pause.svg" alt="pause" />
-      </button>
-    </template>
+  <div class="columns record-controls">
+    <div class="column buttons has-addons">
+      <template v-if="record && record.currentStepId">
+        <button
+          class="button is-primary is-light"
+          v-if="record.breakTime"
+          @click="recordStore.resume(taskId)"
+        >
+          <img src="/icons/start.svg" alt="resume" />
+        </button>
+        <button
+          class="button is-primary is-light"
+          v-else
+          @click="recordStore.pause(taskId)"
+        >
+          <img src="/icons/pause.svg" alt="pause" />
+        </button>
+      </template>
 
-    <template v-if="!record || !record.end">
-      <button
-        v-if="canStart"
-        @click="startRecording"
-        class="button is-primary is-light"
-      >
-        <img src="/icons/start.svg" alt="start" />
-      </button>
-      <button
-        class="button is-primary is-light"
-        v-else-if="!record?.breakTime"
-        @click="nextStep"
-      >
-        <img src="/icons/next.svg" alt="next" />
-      </button>
-    </template>
+      <template v-if="!record || !record.end">
+        <button
+          v-if="canStart"
+          @click="startRecording"
+          class="button is-primary is-light"
+        >
+          <img src="/icons/start.svg" alt="start" />
+        </button>
+        <button
+          class="button is-primary is-light"
+          v-else-if="!record?.breakTime"
+          @click="nextStep"
+        >
+          <img src="/icons/next.svg" alt="next" />
+        </button>
+      </template>
 
-    <button
-      v-if="hasStarted"
-      class="button is-warning"
-      @click="recordStore.reset(taskId)"
-    >
-      <img src="/icons/recycle.svg" alt="reset" />
-    </button>
-  </div>
-  <div class="message">
-    <p><kbd>s</kbd>: start record</p>
-    <p><kbd>n</kbd>: next step</p>
-    <p><kbd>p</kbd>: pause</p>
+      <button
+        v-if="hasStarted"
+        class="button is-warning"
+        @click="recordStore.reset(taskId)"
+      >
+        <img src="/icons/recycle.svg" alt="reset" />
+      </button>
+    </div>
+    <div class="column message">
+      <p><kbd>s</kbd>: start record</p>
+      <p><kbd>n</kbd>: next step</p>
+      <p><kbd>p</kbd>: pause</p>
+    </div>
   </div>
 </template>