diff --git a/app/assets/stylesheets/css/tooltip.css b/app/assets/stylesheets/css/tooltip.css
deleted file mode 100644
index 3890d82..0000000
--- a/app/assets/stylesheets/css/tooltip.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/app/helpers/pagy_helper.rb b/app/helpers/pagy_helper.rb
index 2c4f183..d2615f7 100644
--- a/app/helpers/pagy_helper.rb
+++ b/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
diff --git a/app/views/common/_button.html.erb b/app/views/common/_button.html.erb
new file mode 100644
index 0000000..f0b1e92
--- /dev/null
+++ b/app/views/common/_button.html.erb
@@ -0,0 +1,15 @@
+
+ <%= link_to path,
+ data: local_assigns.fetch(:data, nil) do %>
+
+
+ <%=fa_icon icon %>
+
+
+
+
+ <%= tooltip %>
+
+
+ <% end %>
+
\ No newline at end of file
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index a6b8af3..71266f1 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -22,10 +22,10 @@
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
-
+
<%=render 'layouts/navbar' %>
<%=render 'layouts/notification' %>
-
+
<%= yield %>
diff --git a/app/views/scores/_score.html.erb b/app/views/scores/_score.html.erb
index c4cb44d..f011924 100644
--- a/app/views/scores/_score.html.erb
+++ b/app/views/scores/_score.html.erb
@@ -1,18 +1,16 @@
-
+ |
<%= score.name %>
|
-
+ |
<%= score.grade %>
|
-
+ |
<%= score.created_at %>
|
-
-
- <%= 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 %>
-
+ |
+ <%= 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}} %>
|
\ No newline at end of file
diff --git a/app/views/scores/_scores.html.erb b/app/views/scores/_scores.html.erb
index c46b932..3190353 100644
--- a/app/views/scores/_scores.html.erb
+++ b/app/views/scores/_scores.html.erb
@@ -1,15 +1,15 @@
<%= turbo_frame_tag :scores do %>
-
+
- <%= pagy_sort_link(@q, :name, t('modules.etherpad.padname')) %>
+ <%= pagy_sort_link(@q, :name) %>
|
- <%= pagy_sort_link(@q, :grade, t('modules.etherpad.comment')) %>
+ <%= pagy_sort_link(@q, :grade) %>
|
- <%= pagy_sort_link(@q, :created_at, t('modules.etherpad.created_at')) %>
+ <%= pagy_sort_link(@q, :created_at) %>
|
Actions
@@ -19,15 +19,15 @@
|
<%= 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") %>
|
-
+ |
|
-
+ |
|
-
+ |
|
-
+
<%= render @scores %>
diff --git a/app/views/scores/index.html.erb b/app/views/scores/index.html.erb
index ea4caeb..adbeb26 100644
--- a/app/views/scores/index.html.erb
+++ b/app/views/scores/index.html.erb
@@ -1,5 +1,8 @@
+
+ List of Scores
+
+
-
List of Scores
<%= link_to "New score", new_score_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>