Merge pull request #889 from pyrra-dev/ui-scale

ui: Improve the scale buttons on the detail page

Author: metalmatze

Diff for: ui/src/pages/Detail.scss

@@ -16,7 +16,21 @@
       display: flex;
       margin: 0 auto;
       background-color: $body-bg;
+      row-gap: 20px;
       column-gap: 20px;
+      flex-direction: column;
+
+      .time {
+        display: flex;
+        column-gap: 20px;
+        justify-content: center;
+      }
+
+      .scale {
+        svg {
+          margin-right: 8px;
+        }
+      }
 
       @media (min-width: 576px) {
         width: 66%;
@@ -25,7 +39,8 @@
         width: 50%;
       }
       @media (min-width: 1440px) {
-        width: 33%;
+        justify-content: center;
+        flex-direction: row;
       }
     }
   }

Diff for: ui/src/pages/Detail.tsx

@@ -287,35 +287,41 @@ const Detail = () => {
           <Row>
             <Col className="text-center timerange">
               <div className="inner">
-                <ButtonGroup aria-label="Time Range">
-                  {timeRanges.map((t: number) => (
-                    <Button
-                      key={t}
-                      variant="light"
-                      onClick={handleTimeRangeClick(t)}
-                      active={to - from === t}>
-                      {formatDuration(t)}
-                    </Button>
-                  ))}
-                </ButtonGroup>
-                <OverlayTrigger
-                  key="auto-reload"
-                  overlay={
-                    <OverlayTooltip id={`tooltip-auto-reload`}>Automatically reload</OverlayTooltip>
-                  }>
-                  <span>
-                    <Toggle
-                      checked={autoReload}
-                      onChange={() => setAutoReload(!autoReload)}
-                      onText={formatDuration(interval)}
-                    />
-                  </span>
-                </OverlayTrigger>
-                <ButtonGroup aria-label="Time Range">
+                <div className="time">
+                  <ButtonGroup aria-label="Time Range">
+                    {timeRanges.map((t: number) => (
+                      <Button
+                        key={t}
+                        variant="light"
+                        onClick={handleTimeRangeClick(t)}
+                        active={to - from === t}>
+                        {formatDuration(t)}
+                      </Button>
+                    ))}
+                  </ButtonGroup>
+                  <OverlayTrigger
+                    key="auto-reload"
+                    overlay={
+                      <OverlayTooltip id={`tooltip-auto-reload`}>
+                        Automatically reload
+                      </OverlayTooltip>
+                    }>
+                    <span>
+                      <Toggle
+                        checked={autoReload}
+                        onChange={() => setAutoReload(!autoReload)}
+                        onText={formatDuration(interval)}
+                      />
+                    </span>
+                  </OverlayTrigger>
+                </div>
+                <ButtonGroup aria-label="Charts" className="scale">
                   <OverlayTrigger
                     key="auto-reload"
                     overlay={
-                      <OverlayTooltip id={`tooltip-auto-reload`}>Absolute Chart</OverlayTooltip>
+                      <OverlayTooltip id={`tooltip-auto-reload`}>
+                        Absolute scale gives a good impression of the big picture.
+                      </OverlayTooltip>
                     }>
                     <Button
                       variant="light"
@@ -324,12 +330,15 @@ const Detail = () => {
                       }}
                       active={absolute}>
                       <IconChartArea width={16} height={16} fill={absolute ? 'white' : 'black'} />
+                      Absolute
                     </Button>
                   </OverlayTrigger>
                   <OverlayTrigger
                     key="auto-reload"
                     overlay={
-                      <OverlayTooltip id={`tooltip-auto-reload`}>Relative Chart</OverlayTooltip>
+                      <OverlayTooltip id={`tooltip-auto-reload`}>
+                        Relative scale gives a good impression of every detail.
+                      </OverlayTooltip>
                     }>
                     <Button
                       variant="light"
@@ -338,6 +347,7 @@ const Detail = () => {
                       }}
                       active={!absolute}>
                       <IconChartLine width={16} height={16} fill={!absolute ? 'white' : 'black'} />
+                      Relative
                     </Button>
                   </OverlayTrigger>
                 </ButtonGroup>