fix(ratings): bars can be touched on mobile

believer · Sep 30, 2023 · 2fe6d3a · 2fe6d3a
1 parent c1c40ad
commit 2fe6d3a
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 25 deletions.
diff --git a/handlers/stats.go b/handlers/stats.go
@@ -86,7 +86,7 @@ type Bar struct {
  BarX int
  BarY int
  LabelX float64
- LabelY int
+ LabelY float64
  ValueX float64
  ValueY int
 }
@@ -124,7 +124,7 @@ func HandleGetRatings(c *fiber.Ctx) error {
  )
 
  // Position centered on the bar. Subtract 3.4 which is half the width of the text.
- charWidth := 7.56 // Uses tabular nums so all characters are the same width
+ charWidth := 8.67 // Uses tabular nums so all characters are the same width
  numberOfCharsInCount := len(strconv.Itoa(rating.Count))
  numberOfCharsInRating := len(strconv.Itoa(rating.Rating))
 
@@ -136,8 +136,8 @@ func HandleGetRatings(c *fiber.Ctx) error {
 
  // Subtract 8 to put some space between the text and the bar
  valueY := barY - 8
- // 14 is the height of the text
- labelY := barY + barHeight/2 + 14/2
+ // 16,5 is the height of the text
+ labelY := float64(barY) + float64(barHeight)/2 + 16.5/2
 
  // Add the data to the graphData slice
  graphData = append(graphData, Bar{

diff --git a/public/styles.a44ed6.css → public/styles.b9207b.css b/public/styles.a44ed6.css → public/styles.b9207b.css
@@ -729,6 +729,10 @@ video {
  fill: #f5f5f5;
 }
 
+.fill-neutral-200 {
+ fill: #e5e5e5;
+}
+
 .fill-neutral-400 {
  fill: #a3a3a3;
 }
@@ -944,14 +948,6 @@ video {
  display: none;
 }
 
-.hover\:fill-neutral-200:hover {
- fill: #e5e5e5;
-}
-
-.focus\:fill-neutral-200:focus {
- fill: #e5e5e5;
-}
-
 .focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
@@ -1017,6 +1013,10 @@ video {
  fill: #737373;
  }
 
+ .dark\:fill-neutral-700 {
+ fill: #404040;
+ }
+
  .dark\:fill-neutral-800 {
  fill: #262626;
  }
@@ -1071,14 +1071,6 @@ video {
  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
  }
 
- .dark\:hover\:fill-neutral-700:hover {
- fill: #404040;
- }
-
- .dark\:focus\:fill-neutral-700:focus {
- fill: #404040;
- }
-
  .dark\:focus\:ring-neutral-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(115 115 115 / var(--tw-ring-opacity));
@@ -1190,3 +1182,17 @@ video {
  top: -2rem;
  }
 }
+
+@media(any-hover:hover) {
+ .\[\@media\(any-hover\:hover\)\{\&\:hover\}\]\:fill-neutral-200:hover {
+ fill: #e5e5e5;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ @media(any-hover:hover) {
+ .dark\:\[\@media\(any-hover\:hover\)\{\&\:hover\}\]\:fill-neutral-700:hover {
+ fill: #404040;
+ }
+ }
+}
diff --git a/public/styles.css b/public/styles.css
diff --git a/views/layouts/main.html b/views/layouts/main.html
@@ -4,7 +4,7 @@
  <meta charset="UTF-8" />
  <title>Movies</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <link href="/public/styles.a44ed6.css" rel="stylesheet" />
+ <link href="/public/styles.b9207b.css" rel="stylesheet" />
  <script
  src="https://unpkg.com/htmx.org@1.9.6"
  integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"

diff --git a/views/partials/stats/ratings.html b/views/partials/stats/ratings.html
@@ -3,7 +3,15 @@
  <svg role="img" viewBox="0 0 {{ .Width }} {{ .Height }}">
  {{ range .Data}}
  <g
- class="fill-neutral-100 hover:fill-neutral-200 [&>text]:hover:opacity-100 dark:fill-neutral-800 dark:hover:fill-neutral-700"
+ class="fill-neutral-100 [@media(any-hover:hover){&:hover}]:fill-neutral-200 dark:fill-neutral-800 dark:[@media(any-hover:hover){&:hover}]:fill-neutral-700"
+ _="on mouseenter add .opacity-100 to <text /> in me
+ on mouseleave remove .opacity-100 from <text /> in me
+ on touchstart toggle .opacity-100 on <text /> in me
+ on touchstart add .fill-neutral-200 .dark:fill-neutral-700
+ on touchend wait 1s then
+ remove .fill-neutral-200 .dark:fill-neutral-700
+ remove .opacity-100 from <text /> in me
+ end"
  >
  <rect
  class="stroke-neutral-400 dark:stroke-neutral-600"
@@ -16,14 +24,14 @@
  y="{{ .BarY }}"
  ></rect>
  <text
- class="opacity-0 transition-opacity fill-neutral-400 dark:fill-neutral-400 text-xs tabular-nums"
+ class="opacity-0 transition-opacity fill-neutral-400 dark:fill-neutral-400 text-sm tabular-nums"
  x="{{ .LabelX }}"
  y="{{ .LabelY }}"
  >
  {{ .Label }}
  </text>
  <text
- class="fill-neutral-400 dark:fill-neutral-500 opacity-0 transition-opacity text-xs tabular-nums"
+ class="fill-neutral-400 dark:fill-neutral-500 opacity-0 transition-opacity text-sm tabular-nums"
  x="{{ .ValueX }}"
  y="{{ .ValueY }}"
  >