From ab40d2649f0e4ec31695e681c1524421c74424df Mon Sep 17 00:00:00 2001 From: jlpereira Date: Wed, 29 Jan 2025 11:36:13 -0300 Subject: [PATCH] Add visual effect for fav icons and tooltip for category icons #4177 --- CHANGELOG.md | 2 + app/assets/stylesheets/base/animations.scss | 65 +++++++++-- app/assets/stylesheets/base/navigation.scss | 41 ++++--- app/assets/stylesheets/helpers/hub/tasks.scss | 108 +++++++++--------- app/helpers/hub_helper.rb | 2 +- 5 files changed, 133 insertions(+), 85 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 21c7ec1e9a..178f206db7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,12 +13,14 @@ This project does not yet adheres to [Semantic Versioning](https://semv - Grab cursor to make sorting feature visible [#4153] - API endpoint for image matrix - Added order of depictions comming from the image matrix +- Hub tasks: Add visual effect for fav icons and tooltip for categories [#4177] ### Fixed - CSD: change of namespace not updating [#4147] - TaxonWorks bibliography style for book chapter. +[#4177]: https://github.com/SpeciesFileGroup/taxonworks/issues/4177 [#4135]: https://github.com/SpeciesFileGroup/taxonworks/issues/4135 [#4147]: https://github.com/SpeciesFileGroup/taxonworks/issues/4147 [#4153]: https://github.com/SpeciesFileGroup/taxonworks/issues/4153 diff --git a/app/assets/stylesheets/base/animations.scss b/app/assets/stylesheets/base/animations.scss index 8f00d4a3d3..66a4d2c431 100644 --- a/app/assets/stylesheets/base/animations.scss +++ b/app/assets/stylesheets/base/animations.scss @@ -18,7 +18,7 @@ @keyframes alert-show { 0% { - opacity: 0.50; + opacity: 0.5; transform: translateY(100%) translateX(-50%); } 10% { @@ -28,7 +28,7 @@ 76% { transform: scale(1) translateX(-50%); } - 77%{ + 77% { transform: scale(1.5) translateX(-33.5%); } 80% { @@ -40,10 +40,10 @@ } 95% { transform: translateY(0%) translateX(-50%); - opacity: 1; + opacity: 1; } 100% { - opacity: 0.50; + opacity: 0.5; transform: translateY(100%) translateX(-50%); } } @@ -57,32 +57,73 @@ } } - @keyframes pulse-blue { 0% { transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7) + box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7); + } + 70% { + transform: scale(1); + box-shadow: 0 0 0 10px rgba(33, 150, 243, 0); + } + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); + } +} + +@keyframes pulse-red { + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7); + } + 70% { + transform: scale(1); + box-shadow: 0 0 0 10px rgba(244, 67, 54, 0); + } + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); + } +} + +@keyframes pulse-green { + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(156, 204, 101, 0.9); } 70% { transform: scale(1); - box-shadow: 0 0 0 10px rgba(33, 150, 243, 0) + box-shadow: 0 0 0 10px rgba(156, 204, 101, 0); } 100% { transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(33, 150, 243, 0) + box-shadow: 0 0 0 0 rgba(156, 204, 101, 0); } } -.pulse-blue { - box-shadow: 0 0 0 0 #2196F3; +.pulse-blue, +.pulse-primary { + box-shadow: 0 0 0 0 var(--primary); animation: pulse-blue 2s infinite; } +.pulse-destroy { + box-shadow: 0 0 0 0 var(--destroy); + animation: pulse-red 2s infinite; +} + +.pulse-update, +.pulse-create { + box-shadow: 0 0 0 0 var(--create); + animation: pulse-green 2s infinite; +} + .bounce-enter-active { - animation: bounce-in .5s; + animation: bounce-in 0.5s; } .bounce-leave-active { - animation: bounce-in .5s reverse; + animation: bounce-in 0.5s reverse; } @keyframes bounce-in { 0% { diff --git a/app/assets/stylesheets/base/navigation.scss b/app/assets/stylesheets/base/navigation.scss index d593a550e5..2ee072ded6 100644 --- a/app/assets/stylesheets/base/navigation.scss +++ b/app/assets/stylesheets/base/navigation.scss @@ -1,4 +1,5 @@ .favourite_link { + display: block; background-image: image-url('empty_star.svg'); background-size: 16px; background-position: left, center; @@ -10,6 +11,7 @@ } .unfavorite_link { + display: block; font-size: 0px; padding: 16px; padding-right: 0px; @@ -21,10 +23,10 @@ } // see navigation_emphasis in palette -a, .link { +a, +.link { text-decoration: none; - transition: background-color 0.4s ease, - color 0.4s ease; + transition: background-color 0.4s ease, color 0.4s ease; color: $color-secondary-2-4; &:hover { @@ -42,7 +44,7 @@ a, .link { font-weight: 300; position: relative; box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2); - background-color: #FFF; + background-color: #fff; height: 45px; padding-right: $standard_margin; .hub-project { @@ -114,9 +116,8 @@ a, .link { border-radius: 100%; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); - transition: background-size 0.3s ease, - background-color 0.3s ease, - opacity 0.5s ease, + transition: background-size 0.3s ease, background-color 0.3s ease, + opacity 0.5s ease; } .hub_project_name { @@ -129,9 +130,8 @@ a, .link { .hub-project:hover { .hub_link { opacity: 1; - transition: background-size 0.3s ease, - background-color 0.3s ease, - opacity 0.5s ease; + transition: background-size 0.3s ease, background-color 0.3s ease, + opacity 0.5s ease; background-size: 40px; color: $default_text; } @@ -139,9 +139,7 @@ a, .link { .active-section { font-weight: bold; - } - } .context-menu { @@ -150,22 +148,21 @@ a, .link { align-items: center; margin: 0px; - &> li:last-child:after { + & > li:last-child:after { content: none; } - &> li:last-child { + & > li:last-child { border-right: none; padding-right: 0px; padding-left: $standard_padding; } - &> li:first-child { + & > li:first-child { padding-left: 0px; } - - &> li { + & > li { justify-content: center; //text-align: center; padding-left: $standard_padding; @@ -173,7 +170,7 @@ a, .link { border-right: 1px solid $navigation_border; } - &> li a { + & > li a { font-size: $font_small; text-decoration: none; } @@ -201,13 +198,15 @@ a, .link { } @media all and (max-width: 800px) { - .horizontal_navbar, .hub-navbar { + .horizontal_navbar, + .hub-navbar { justify-content: space-around; } } @media all and (max-width: 600px) { - .horizontal_navbar, .hub-navbar { + .horizontal_navbar, + .hub-navbar { -webkit-flex-flow: column wrap; flex-flow: column wrap; padding: 0; @@ -292,4 +291,4 @@ a, .link { .overflow-y-scroll { overflow-y: scroll; -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/helpers/hub/tasks.scss b/app/assets/stylesheets/helpers/hub/tasks.scss index b4b816ac46..8be8fed433 100644 --- a/app/assets/stylesheets/helpers/hub/tasks.scss +++ b/app/assets/stylesheets/helpers/hub/tasks.scss @@ -2,8 +2,8 @@ #task_carrousel { display: flex; - flex-direction:column; - justify-content:flex-start; + flex-direction: column; + justify-content: flex-start; .task-section { display: flex; @@ -12,7 +12,7 @@ justify-content: flex-start; width: auto; height: auto; - align-content: flex-start + align-content: flex-start; } @keyframes show { @@ -52,7 +52,7 @@ animation-name: show; animation-duration: 0.2s; animation-timing-function: ease; - animation-fill-mode: forwards; + animation-fill-mode: forwards; } .task_card { @@ -60,18 +60,17 @@ display: none; flex-direction: row; position: relative; - margin-left: 0px; - margin-top:$standard_margin; + margin-left: 0px; + margin-top: $standard_margin; margin-right: $standard_margin; width: 420px; max-height: 180px; min-height: 160px; - border-top-right-radius: .9rem; - border-bottom-right-radius: .9rem; - background-color: #FFF; + border-top-right-radius: 0.9rem; + border-bottom-right-radius: 0.9rem; + background-color: #fff; box-shadow: rgba(36, 37, 38, 0.08) 4px 4px 15px 0px; - transition: transform 0.3s ease, - box-shadow 0.3s ease; + transition: transform 0.3s ease, box-shadow 0.3s ease; .task_header { opacity: 0.2; overflow: hidden; @@ -82,12 +81,10 @@ } .task_card:hover { - transition: background-color 0.5s ease, - box-shadow 0.5s ease; - box-shadow: 0px 3px 5px 0px rgba(0,0,0,.3); - transition: background-color 0.5s ease, - transform 0.3s ease, - box-shadow 0.3s ease; + transition: background-color 0.5s ease, box-shadow 0.5s ease; + box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3); + transition: background-color 0.5s ease, transform 0.3s ease, + box-shadow 0.3s ease; .filter_data { opacity: 1; } @@ -95,8 +92,7 @@ transition: opacity 0.5s ease; opacity: 1; } - - } + } .status { box-sizing: border-box; @@ -112,7 +108,20 @@ .fav-link { position: absolute; right: 14px; - top:$standard_margin * 0.5; + top: 12px; + } + + .fav-link a { + padding: 8px; + border-radius: 100%; + } + + .fav-link .unfavorite_link:hover { + animation: pulse-red 2s infinite; + } + + .fav-link .favourite_link:hover { + animation: pulse-green 2s infinite; } .task_header { @@ -126,8 +135,7 @@ .status:first-letter { text-transform: uppercase; - } - + } .categories { margin: 8px; @@ -140,66 +148,64 @@ } .source { - background-image: image-url("book.svg"); + background-image: image-url('book.svg'); } .collecting_event { - background-image: image-url("geo_location.svg"); + background-image: image-url('geo_location.svg'); } .biology { - background-image: image-url("biology.svg"); + background-image: image-url('biology.svg'); } .taxon_name { - background-image: image-url("new.svg"); + background-image: image-url('new.svg'); } .collection_object { - background-image: image-url("bug.svg"); + background-image: image-url('bug.svg'); } .nomenclature { - background-image: image-url("new.svg"); + background-image: image-url('new.svg'); } .matrix { - background-image: image-url("matrix.svg"); + background-image: image-url('matrix.svg'); } .dna { - background-image: image-url("helix.svg"); + background-image: image-url('helix.svg'); } .image { - background-image: image-url("image.svg"); + background-image: image-url('image.svg'); } - } .task_name { font-size: 18px; max-width: 330px; - padding: $standard_padding * 0.25; - padding-left: $standard_padding; - padding-top: $standard_padding; + padding: $standard_padding * 0.25; + padding-left: $standard_padding; + padding-top: $standard_padding; a { color: $color-secondary-2-4; } - } .task-header-left { display: flex; - flex-direction:row; - align-items:center; + flex-direction: row; + align-items: center; } .task-header-right { display: flex; - flex-direction:column; - align-items:center; - justify-content:flex-end; + flex-direction: column; + align-items: center; + justify-content: flex-end; a { margin-left: 5px; } @@ -216,15 +222,15 @@ .navigation { display: flex; - background-color: #FFF; - box-shadow: 0px 1px 1px rgba(0,0,0,.2); - flex-direction:row; - justify-content:center; - order:-1; - align-items:center; + background-color: #fff; + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); + flex-direction: row; + justify-content: center; + order: -1; + align-items: center; min-height: 42px; min-width: 450px; - border-radius: .9rem; + border-radius: 0.9rem; padding: 0px 8px; } @@ -239,7 +245,7 @@ .navigation-arrow { display: flex; padding: 5px; - } + } .more_tasks_nav { display: flex; @@ -277,9 +283,9 @@ height: 15px; } } - @media screen and (min-height:1000px) { + @media screen and (min-height: 1000px) { .more_tasks_nav { position: fixed !important; } - } + } } diff --git a/app/helpers/hub_helper.rb b/app/helpers/hub_helper.rb index df39730f73..a2a338360d 100644 --- a/app/helpers/hub_helper.rb +++ b/app/helpers/hub_helper.rb @@ -8,7 +8,7 @@ def task_card(task) content_tag(:div,'' , class: "task_header status #{task.status}") { content_tag(:div, '') { task.categories.collect{|c| - content_tag(:div, c.humanize, class: "categories #{c}", "data-category-#{c}" => 'true', "data-category-#{task.status}" => 'true' ) + content_tag(:div, c.humanize, title: c.humanize, class: "categories #{c}", "data-category-#{c}" => 'true', "data-category-#{task.status}" => 'true' ) }.join().html_safe } } +