pvincent
/
easy-going-rails
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

button with smart tooltip

main
pvincent 1 year ago
parent
1f02a28db5
commit
22f515e19e
7 changed files with 37 additions and 189 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 168
      app/assets/stylesheets/css/tooltip.css
  2. 2
      app/helpers/pagy_helper.rb
  3. 15
      app/views/common/_button.html.erb
  4. 4
      app/views/layouts/application.html.erb
  5. 16
      app/views/scores/_score.html.erb
  6. 16
      app/views/scores/_scores.html.erb
  7. 5
      app/views/scores/index.html.erb

168
app/assets/stylesheets/css/tooltip.css
View File

@ -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;
}

2
app/helpers/pagy_helper.rb
View File

@ -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

15
app/views/common/_button.html.erb
View File

@ -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>

4
app/views/layouts/application.html.erb
View File

@ -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>

16
app/views/scores/_score.html.erb
View File

@ -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>

16
app/views/scores/_scores.html.erb
View File

@ -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>

5
app/views/scores/index.html.erb
View File

@ -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>

Write Preview
Loading…
Cancel
Save