button with smart tooltip

app/assets/stylesheets/css/tooltip.css

@@ -1,168 +0,0 @@
-[data-tooltip] {
-  --arrow-size: 5px;
-  position: relative;
-  z-index: 10;
-}
-
-/* Positioning and visibility settings of the tooltip */
-[data-tooltip]:before,
-[data-tooltip]:after {
-  position: absolute;
-  visibility: hidden;
-  opacity: 0;
-  left: 50%;
-  bottom: calc(100% + var(--arrow-size));
-  pointer-events: none;
-  transition: 0.2s;
-  will-change: transform;
-}
-
-/* The actual tooltip with a dynamic width */
-[data-tooltip]:before {
-  content: attr(data-tooltip);
-  padding: 10px 18px;
-  min-width: 50px;
-  max-width: 300px;
-  width: max-content;
-  width: -moz-max-content;
-  border-radius: 6px;
-  font-size: 14px;
-  background-color: rgba(59, 72, 80, 0.9);
-  background-image: linear-gradient(30deg,
-      rgba(59, 72, 80, 0.44),
-      rgba(59, 68, 75, 0.44),
-      rgba(60, 82, 88, 0.44));
-  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
-  color: #fff;
-  text-align: center;
-  white-space: pre-wrap;
-  transform: translate(-50%, calc(0px - var(--arrow-size))) scale(0.5);
-}
-
-/* Tooltip arrow */
-[data-tooltip]:after {
-  content: '';
-  border-style: solid;
-  border-width: var(--arrow-size) var(--arrow-size) 0px var(--arrow-size);
-  /* CSS triangle */
-  border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
-  transition-duration: 0s;
-  /* If the mouse leaves the element, 
-                              the transition effects for the 
-                              tooltip arrow are "turned off" */
-  transform-origin: top;
-  /* Orientation setting for the
-                              slide-down effect */
-  transform: translateX(-50%) scaleY(0);
-}
-
-/* Tooltip becomes visible at hover */
-[data-tooltip]:hover:before,
-[data-tooltip]:hover:after {
-  visibility: visible;
-  opacity: 1;
-}
-
-/* Scales from 0.5 to 1 -> grow effect */
-[data-tooltip]:hover:before {
-  transition-delay: 0.3s;
-  transform: translate(-50%, calc(0px - var(--arrow-size))) scale(1);
-}
-
-/* 
-  Arrow slide down effect only on mouseenter (NOT on mouseleave)
-*/
-[data-tooltip]:hover:after {
-  transition-delay: 0.5s;
-  /* Starting after the grow effect */
-  transition-duration: 0.2s;
-  transform: translateX(-50%) scaleY(1);
-}
-
-/*
-  That's it for the basic tooltip.
-
-  If you want some adjustability
-  here are some orientation settings you can use:
-*/
-
-/* LEFT */
-/* Tooltip + arrow */
-[data-tooltip-location="left"]:before,
-[data-tooltip-location="left"]:after {
-  left: auto;
-  right: calc(100% + var(--arrow-size));
-  bottom: 50%;
-}
-
-/* Tooltip */
-[data-tooltip-location="left"]:before {
-  transform: translate(calc(0px - var(--arrow-size)), 50%) scale(0.5);
-}
-
-[data-tooltip-location="left"]:hover:before {
-  transform: translate(calc(0px - var(--arrow-size)), 50%) scale(1);
-}
-
-/* Arrow */
-[data-tooltip-location="left"]:after {
-  border-width: var(--arrow-size) 0px var(--arrow-size) var(--arrow-size);
-  border-color: transparent transparent transparent rgba(55, 64, 70, 0.9);
-  transform-origin: left;
-  transform: translateY(50%) scaleX(0);
-}
-
-[data-tooltip-location="left"]:hover:after {
-  transform: translateY(50%) scaleX(1);
-}
-
-
-
-/* RIGHT */
-[data-tooltip-location="right"]:before,
-[data-tooltip-location="right"]:after {
-  left: calc(100% + var(--arrow-size));
-  bottom: 50%;
-}
-
-[data-tooltip-location="right"]:before {
-  transform: translate(var(--arrow-size), 50%) scale(0.5);
-}
-
-[data-tooltip-location="right"]:hover:before {
-  transform: translate(var(--arrow-size), 50%) scale(1);
-}
-
-[data-tooltip-location="right"]:after {
-  border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) 0px;
-  border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent;
-  transform-origin: right;
-  transform: translateY(50%) scaleX(0);
-}
-
-[data-tooltip-location="right"]:hover:after {
-  transform: translateY(50%) scaleX(1);
-}
-
-
-
-/* BOTTOM */
-[data-tooltip-location="bottom"]:before,
-[data-tooltip-location="bottom"]:after {
-  top: calc(100% + var(--arrow-size));
-  bottom: auto;
-}
-
-[data-tooltip-location="bottom"]:before {
-  transform: translate(-50%, var(--arrow-size)) scale(0.5);
-}
-
-[data-tooltip-location="bottom"]:hover:before {
-  transform: translate(-50%, var(--arrow-size)) scale(1);
-}
-
-[data-tooltip-location="bottom"]:after {
-  border-width: 0px var(--arrow-size) var(--arrow-size) var(--arrow-size);
-  border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent;
-  transform-origin: bottom;
-}

app/helpers/pagy_helper.rb

@@ -4,7 +4,7 @@ module PagyHelper
   # preferable to sort_link, prepend page=1 as second args (options like) automatically
   def pagy_sort_link(search_object, attribute, *args, &)
     prepend_args_with_common_pagy_options(args)
-    sort_link(search_object, attribute, *args, &)
+    sort_link(search_object, attribute.to_s, *args, &)
   end
 
   # TODO: needs some refactoring

app/views/common/_button.html.erb

@@ -0,0 +1,15 @@
+<div>
+  <%= link_to path,
+          data: local_assigns.fetch(:data, nil) do %>
+    <div class="group relative inline-block">
+      <div class='mr-1 py-2 px-3 text-white border rounded-lg bg-white dark:bg-slate-900'>
+        <%=fa_icon icon %>
+      </div>
+      <div class="bg-purple-800 text-white absolute top-full left-1/2 z-20 mt-2 -translate-x-1/2 whitespace-nowrap rounded-[5px] py-1.5 px-3.5 text-sm opacity-0 group-hover:opacity-100 pointer-events-none">
+        <span class="bg-purple-800 absolute top-[-3px] left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45">
+        </span>
+        <%= tooltip %>
+      </div>
+    </div>
+  <% end %>
+</div>

app/views/layouts/application.html.erb

@@ -22,10 +22,10 @@
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
   </head>
-  <body>
+  <body class='bg-white dark:bg-black'>
     <%=render 'layouts/navbar' %>
     <%=render 'layouts/notification' %>
-    <main class=" flex flex-col bg-slate-300 p-8 ">
+    <main class="flex flex-col p-8 dark:bg-slate-700">
       <%= yield %>
     </main>
   </body>

app/views/scores/_score.html.erb

@@ -1,18 +1,16 @@
 <tr class="text-sm even:bg-gray-100 dark:even:bg-gray-900 dark:text-gray-200">
-  <td class="px-2 w-full md:w-1/4">
+  <td class="px-2 w-1/2">
     <%= score.name %>
   </td>
-  <td class="px-2 hidden lg:table-cell w-full">
+  <td class="px-2 ">
     <%= score.grade %>
   </td>
-  <td class="px-2 hidden lg:table-cell w-full">
+  <td class="px-2">
     <%= score.created_at %>
   </td>
-  <td class="">
-    <div class="flex flex-row flex-nowrap mr-2">
-      <%= link_to score, 'data-tooltip': 'show',class: 'mr-1 border rounded-lg border-purple-800 p-2 bg-white' do %><%=fa_icon :eye %><% end %>
-      <%= link_to edit_score_path(score), 'data-tooltip': 'edit', class: 'mr-1 border rounded-lg border-purple-800 p-2 bg-white' do %><%=fa_icon :edit %><% end %>
-      <%= link_to score, 'data-tooltip': 'delete', data:{ turbo_method: :delete}, class: 'border rounded-lg border-purple-800 mr-1 p-2 bg-white' do %><%=fa_icon :trash %><% end %>
-    </div>
+  <td class="w-1/4 p-2 flex flex-nowrap justify-end">
+    <%= render partial: 'common/button', locals: {path: score, icon: :eye, tooltip: 'open score'} %>
+    <%= render partial: 'common/button', locals: {path: edit_score_path(score), icon: :edit, tooltip: 'edit score'} %>
+    <%= render partial: 'common/button', locals: {path: score, icon: :trash, tooltip: 'delete score',data:{ turbo_method: :delete}} %>
   </td>
 </tr>

app/views/scores/_scores.html.erb

@@ -1,15 +1,15 @@
 <%= turbo_frame_tag :scores do %>
-  <table class="min-w-full divide-gray-300 dark:divide-gray-500 divide-y-4 border-gray-200 dark:border-gray-600 border-2">
+  <table class="min-w-full divide-gray-300 dark:divide-gray-500 divide-y-4 border-gray-200 dark:border-gray-600 border-2 dark:bg-gray-600">
     <thead>
       <tr class="whitespace-nowrap text-md text-left font-semibold text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-700">
         <th scope="col" class="p-2">
-          <%= pagy_sort_link(@q, :name, t('modules.etherpad.padname')) %>
+          <%= pagy_sort_link(@q, :name) %>
         </th>
         <th scope="col" class="p-2">
-          <%= pagy_sort_link(@q, :grade, t('modules.etherpad.comment')) %>
+          <%= pagy_sort_link(@q, :grade) %>
         </th>
         <th scope="col" class="p-2">
-          <%= pagy_sort_link(@q, :created_at, t('modules.etherpad.created_at')) %>
+          <%= pagy_sort_link(@q, :created_at) %>
         </th>
         <th scope="col" class="p-2">
           Actions
@@ -19,15 +19,15 @@
         <th class='p-1'>
           <%= pagy_search_field(@q, :name_cont, class: "text-sm w-full h-8 text-gray-800 dark:text-gray-400 bg-gray-200 dark:bg-gray-700") %>
         </th>
-        <th class='p-1 hidden lg:table-cell'>
+        <th class='p-1'>
         </th>
-        <th>
+        <th class='p-1'>
         </th>
-        <th class='p-1 hidden sm:table-cell'>
+        <th class='p-1'>
         </th>
       </tr>
     </thead>
-    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+    <tbody class="divide-y divide-gray-200 dark:divide-gray-500 ">
       <%= render @scores %>
     </tbody>
   </table>

app/views/scores/index.html.erb

@@ -1,5 +1,8 @@
+<h1 class="flex justify-center font-bold text-4xl dark:text-slate-300 border-2 border-black p-6">
+  List of Scores
+</h1>
+
 <div class="m-5 flex justify-end">
-  <h1 class="font-bold text-4xl">List of Scores</h1>
   <%= link_to "New score", new_score_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
 </div>