Fix reset zoom button

SauceLLC · Dec 27, 2024 · 40a8b37 · 40a8b37
1 parent fd2575e
commit 40a8b37
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 21 deletions.
diff --git a/scss/site/performance.scss b/scss/site/performance.scss
@@ -1443,13 +1443,14 @@ table.activity-table {
                         top: 0;
                         right: 0;
                         height: 100%;
+                        display: flex;
+                        align-items: center;
                         margin-right: 0.6em;
                     }
 
                     .btn {
                         font-size: 0.9em;
-                        height: 100%;
-                        padding: 0 0.4em;
+                        margin-left: 0.4rem;
                         opacity: 0;
                         visibility: hidden;
                         transition: opacity 300ms, visibility 300ms;
@@ -1460,6 +1461,20 @@ table.activity-table {
                             }
                         }
                     }
+
+                    @media only screen and (max-width: 768px) {
+                        & {
+                            padding-left: 0.6rem;
+                            padding-right: 0.6rem;
+                            justify-content: space-between;
+
+                            > .btn,
+                            > .buttons {
+                                position: static;
+                                margin-right: 0;
+                            }
+                        }
+                    }
                 }
 
                 .chart-tooltip {

diff --git a/templates/performance/fitness/activity-stats.html b/templates/performance/fitness/activity-stats.html
@@ -1,8 +1,10 @@
 <header class="title">
     <span><span class="panel-name">{{name}}</span> - <span class="metric-display"></span></span>
-    <div class="chart-reset-zoom hidden btn btn-xs btn-outline btn-secondary">{{{reset_zoom}}}</div>
-    <div class="btn btn-xs btn-icon-only btn-unstyled sauce-panel-settings"
-         title="{{{panel_settings_tooltip}}}">{{=icon cog-duotone=}}</div>
+    <div class="buttons">
+        <div class="chart-reset-zoom btn-sm hidden btn btn-outline btn-secondary">{{{reset_zoom}}}</div>
+        <div class="btn btn-icon-only btn-unstyled sauce-panel-settings"
+             title="{{{panel_settings_tooltip}}}">{{=icon cog-duotone=}}</div>
+    </div>
 </header>
 
 <div class="chart-tooltip"></div>

diff --git a/templates/performance/fitness/athlete-stats-chart.html b/templates/performance/fitness/athlete-stats-chart.html
@@ -1,8 +1,10 @@
 <header class="title">
     <span class="panel-name">{{name}}</span>
-    <div class="chart-reset-zoom hidden btn btn-xs btn-outline btn-secondary">{{{reset_zoom}}}</div>
-    <div class="btn btn-xs btn-icon-only btn-unstyled sauce-panel-settings"
-         title="{{{panel_settings_tooltip}}}">{{=icon cog-duotone=}}</div>
+    <div class="buttons">
+        <div class="chart-reset-zoom btn-sm hidden btn btn-outline btn-secondary">{{{reset_zoom}}}</div>
+        <div class="btn btn-icon-only btn-unstyled sauce-panel-settings"
+             title="{{{panel_settings_tooltip}}}">{{=icon cog-duotone=}}</div>
+    </div>
 </header>
 
 <div class="chart-tooltip"></div>

diff --git a/templates/performance/fitness/elevation.html b/templates/performance/fitness/elevation.html
@@ -1,8 +1,10 @@
 <header class="title">
     <span class="panel-name">{{name}}</span>
-    <div class="chart-reset-zoom hidden btn btn-xs btn-outline btn-secondary">{{{reset_zoom}}}</div>
-    <div class="btn btn-xs btn-icon-only btn-unstyled sauce-panel-settings"
-         title="{{{panel_settings_tooltip}}}">{{=icon cog-duotone=}}</div>
+    <div class="buttons">
+        <div class="chart-reset-zoom btn-sm hidden btn btn-outline btn-secondary">{{{reset_zoom}}}</div>
+        <div class="btn btn-icon-only btn-unstyled sauce-panel-settings"
+             title="{{{panel_settings_tooltip}}}">{{=icon cog-duotone=}}</div>
+    </div>
 </header>
 
 <div class="chart-tooltip"></div>

diff --git a/templates/performance/fitness/training-load.html b/templates/performance/fitness/training-load.html
@@ -1,8 +1,10 @@
 <header class="title">
     <span class="panel-name">{{name}}</span>
-    <div class="chart-reset-zoom hidden btn btn-xs btn-outline btn-secondary">{{{reset_zoom}}}</div>
-    <div class="btn btn-xs btn-icon-only btn-unstyled sauce-panel-settings"
-         title="{{{panel_settings_tooltip}}}">{{=icon cog-duotone=}}</div>
+    <div class="buttons">
+        <div class="chart-reset-zoom btn-sm hidden btn btn-outline btn-secondary">{{{reset_zoom}}}</div>
+        <div class="btn btn-icon-only btn-unstyled sauce-panel-settings"
+             title="{{{panel_settings_tooltip}}}">{{=icon cog-duotone=}}</div>
+    </div>
 </header>
 <div class="chart-tooltip"></div>
 <div class="sauce-panel-content chart"><canvas/></div>
diff --git a/templates/performance/fitness/zonetime.html b/templates/performance/fitness/zonetime.html
@@ -1,8 +1,10 @@
 <header class="title">
     <span><span class="panel-name">{{name}}</span> - <span class="metric-display"></span></span>
-    <div class="chart-reset-zoom hidden btn btn-xs btn-outline btn-secondary">{{{reset_zoom}}}</div>
-    <div class="btn btn-xs btn-icon-only btn-unstyled sauce-panel-settings"
-         title="{{{panel_settings_tooltip}}}">{{=icon cog-duotone=}}</div>
+    <div class="buttons">
+        <div class="chart-reset-zoom btn-sm hidden btn btn-outline btn-secondary">{{{reset_zoom}}}</div>
+        <div class="btn btn-icon-only btn-unstyled sauce-panel-settings"
+             title="{{{panel_settings_tooltip}}}">{{=icon cog-duotone=}}</div>
+    </div>
 </header>
 
 <div class="chart-tooltip zonetime"></div>

diff --git a/templates/performance/peaks/chart.html b/templates/performance/peaks/chart.html
@@ -1,8 +1,10 @@
 <header class="title">
     <span class="panel-name">{{name}}</span>
-    <div class="chart-reset-zoom hidden btn btn-xs btn-outline btn-secondary">{{{reset_zoom}}}</div>
-    <div class="btn btn-xs btn-icon-only btn-unstyled sauce-panel-settings"
-         title="{{{panel_settings_tooltip}}}">{{=icon cog-duotone=}}</div>
+    <div class="buttons">
+        <div class="chart-reset-zoom btn-sm hidden btn btn-outline btn-secondary">{{{reset_zoom}}}</div>
+        <div class="btn btn-icon-only btn-unstyled sauce-panel-settings"
+             title="{{{panel_settings_tooltip}}}">{{=icon cog-duotone=}}</div>
+    </div>
 </header>
 <div class="peaks-controls-view"></div>
 <div class="chart-tooltip"></div>

diff --git a/templates/performance/peaks/table.html b/templates/performance/peaks/table.html
@@ -1,6 +1,6 @@
 <header class="title">
     <span class="panel-name">{{name}}</span>
-    <div class="btn btn-xs btn-icon-only btn-unstyled sauce-panel-settings"
+    <div class="btn btn-icon-only btn-unstyled sauce-panel-settings"
          title="{{{panel_settings_tooltip}}}">{{=icon cog-duotone=}}</div>
 </header>
 <div class="sauce-panel-content table-view peaks-view loading-mask loading">