From 22f515e19e9ae95b10b816d325394e1534f942ea Mon Sep 17 00:00:00 2001 From: pvincent Date: Wed, 21 Aug 2024 23:33:50 +0400 Subject: [PATCH] button with smart tooltip --- app/assets/stylesheets/css/tooltip.css | 168 ------------------------- app/helpers/pagy_helper.rb | 2 +- app/views/common/_button.html.erb | 15 +++ app/views/layouts/application.html.erb | 4 +- app/views/scores/_score.html.erb | 16 ++- app/views/scores/_scores.html.erb | 16 +-- app/views/scores/index.html.erb | 5 +- 7 files changed, 37 insertions(+), 189 deletions(-) delete mode 100644 app/assets/stylesheets/css/tooltip.css create mode 100644 app/views/common/_button.html.erb 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 %> - +
- - - - + <%= render @scores %>
- <%= 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") %> +
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" %>