to close #16, adds hierarchical rendering of laps when lap informatio…

…n is provided
dpfens · Jul 9, 2021 · 8a82903 · 8a82903
1 parent 01bfc2e
commit 8a82903
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -159,7 +159,7 @@ <h3>Privacy</h3>
                          <li>Settings changes</li>
                        </ul>
                      </li>
-                     <li>Splits
+                     <li>Splits/Laps
                       <ul>
                         <li>Adding</li>
                         <li>Edits</li>

diff --git a/scripts/app.js b/scripts/app.js
@@ -172,8 +172,10 @@
                     <option v-for="label in split.metadata.tags" value="{{value}}">{{ name }}</option>\
                 </select>\
             </div>\
-            <button class="stacked" v-on:click.prevent="deleteSplit(index)"><i class="fad fa-trash"></i><span>Delete</span></button>\
-            <button class="stacked" v-on:click.prevent="save"><i class="fad fa-save"></i><span>Save</span></button>\
+            <div class="controls">\
+              <button class="stacked" v-on:click.prevent="deleteSplit(index)"><i class="fad fa-trash"></i><span>Delete</span></button>\
+              <button class="stacked" v-on:click.prevent="save"><i class="fad fa-save"></i><span>Save</span></button>\
+            </div>\
         </form>'
     });
 
@@ -216,23 +218,22 @@
             }
         },
 
-        template: '<tr>\
-            <td>{{ index + 1 }}</td>\
-            <td><span v-if="split.distance && lapunit">{{ split.distance }}{{ lapunit }}</span></td>\
-            <td>{{ split.label }}</td>\
-            <td>\
+        template: '<div :class="{\'lap\': split.distance && split.distanceUnit, \'split\': !split.distance && !split.distanceUnit }">\
+            <div class="time">\
                 <time :class="\'localization-\' + locale" v-bind:datetime="formatDateTime(split.breakdown)">\
                 <span class="years" v-if="split.breakdown.years > 0">{{ formattedValue.years }}</span><span class="days" v-if="split.breakdown.years > 0 || split.breakdown.days > 0">{{ formattedValue.days }}</span><span class="hours" v-if="split.breakdown.years > 0 || split.breakdown.days > 0 || split.breakdown.hours > 0">{{ formattedValue.hours }}</span><span class="minutes" v-if="split.breakdown.years > 0 || split.breakdown.days > 0 || split.breakdown.hours > 0 || split.breakdown.minutes > 0">{{ formattedValue.minutes }}</span><span class="seconds">{{ formattedValue.seconds }}</span><span class="milliseconds">{{ formattedValue.milliseconds }}</span>\
                 </time>\
-            </td>\
-            <td>\
+            </div>\
+            <div v-if="split.distance && lapunit" class="lap-distance">{{ split.distance }}{{ lapunit }}</div>\
+            <div class="label"><span>{{ split.label }}</span></div>\
+            <div v-if="split.metadata.tags.length">\
                 <span v-for="label in split.metadata.tags">{{ label }}</span>\
-            </td>\
-            <td v-if="mutable">\
+            </div>\
+            <div v-if="mutable" class="controls">\
                 <button class="stacked" v-on:click="edit"><i class="fad fa-edit"></i><span>Edit</span></button>\
                 <button class="stacked" v-on:click="removeSplit"><i class="fad fa-trash"></i><span>Delete</span></button>\
-            </td>\
-        </tr>'
+            </div>\
+        </div>'
     });
 
     Vue.component('stopwatch', {
@@ -525,19 +526,9 @@
                     <button class="stacked" v-if="!stopwatch.isRunning() && stopwatch.isActive()" v-on:click="resetStopwatch()"><i class="fad fa-undo"></i><span>Reset</span></button>\
                     <button class="stacked" v-if="!stopwatch.isRunning() && stopwatch.isActive()" v-on:click="archiveStopwatch()"><i class="fad fa-box"></i><span>Archive</span></button>\
                 </div>\
-                <table class="splits" v-show="showSplits && stopwatch.splits.length > 0 && !edittingSplit">\
-                    <thead>\
-                        <tr>\
-                            <th>Split</th>\
-                            <th v-if="stopwatch.lapDistance && stopwatch.lapUnit">Lap</th>\
-                            <th>Label</th>\
-                            <th>Value</th>\
-                        </tr>\
-                    </thead>\
-                    <tbody>\
-                        <tr is="splitdisplay" v-for="(item, index) in stopwatch.splits" v-bind:key="index" v-bind:index="index" v-bind:split="item" v-bind:lapunit="stopwatch.lapUnit" v-bind:mutable="mutable" v-bind:locale="settings.locale"></tr>\
-                    <tbody>\
-                </table>\
+                <div :class="{\'splits-table\': true, \'splits-only-table\': !stopwatch.lapDistance || !stopwatch.lapUnit, \'lap-table\': stopwatch.lapDistance && stopwatch.lapUnit}" v-show="showSplits && stopwatch.splits.length > 0 && !edittingSplit">\
+                    <div is="splitdisplay" v-for="(item, index) in stopwatch.splits" v-bind:key="index" v-bind:index="index" v-bind:split="item" v-bind:lapunit="stopwatch.lapUnit" v-bind:mutable="mutable" v-bind:locale="settings.locale"></div>\
+                </div>\
                 <div v-if="edittingSplit" is="splitform" v-bind:split="edittingSplit" v-bind:index="edittingSplitIndex" v-bind:locale="settings.locale"></div>\
                 <div class="metadata">\
                   <p v-if="!mutable && stopwatch.metadata.createdAt">Created At: <time>{{ stopwatch.metadata.createdAt.toLocaleDateString() }} {{ stopwatch.metadata.createdAt.toLocaleTimeString() }}</time></p>\

diff --git a/service-worker.js b/service-worker.js
@@ -1,7 +1,7 @@
 importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
 
 
-const CACHE_NAME = 'offline-html-v7',
+const CACHE_NAME = 'offline-html-v10',
     FALLBACK_HTML_URL = '/stopwatch/';
 // Populate the cache with the offline HTML page when the
 // service worker is installed.

diff --git a/stylesheets/stopwatch.css b/stylesheets/stopwatch.css
@@ -276,8 +276,60 @@ button.stacked span {
   margin: 0.2em 0;
 }
 
-table.splits {
-  margin: 0 auto;
+.splits-table {
+  clear:both;
+  display: flex;
+  flex-direction: column;
+  padding-left: 0.5em;
+  margin-top: 1em;
+  margin-bottom: 2em;
+}
+
+.splits-table button {
+  display: inline-block;
+}
+
+.splits-table .split, .lap {
+  display: flex;
+  flex-direction: row;
+  min-height: 2em;
+}
+
+.splits-table .time, .splits-table .label, .splits-table .lap-distance {
+  display: flex;
+  flex-direction: column;
+}
+
+.splits-table .split > *, .splits-table .lap > * {
+  flex-grow: 1;
+}
+
+.splits-table .split > *, .splits-table .lap > * {
+  justify-content: center;
+}
+
+.splits-table .lap .lap-distance, .splits-table .label {
+  text-align: center;
+}
+
+.splits-table .time, .splits-table .controls {
+  flex-grow: 0;
+}
+
+.splits-table .time {
+  width: 5em;
+}
+
+.lap-table .split {
+  border-left: solid 2px currentColor;
+  margin-left: 1em;
+}
+
+.lap-table .split::before {
+  content: "";
+  width: 1em;
+  border-bottom: 2px solid currentColor;
+  transform: translateY(-50%);
 }
 
 button.add {