use css transitions instead of js

3liz · Jan 5, 2024 · 8af04bd · 8af04bd
1 parent 1ecbe1a
commit 8af04bd
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 19 deletions.
diff --git a/assets/src/legacy/view.js b/assets/src/legacy/view.js
@@ -1,16 +1,3 @@
-var addDescriptionSlider = function(){
-    $('.liz-project-img').parent().mouseenter(function(){
-        var self = $(this);
-        self.find('.liz-project-desc').slideDown();
-    }).mouseleave(function(){
-        var self = $(this);
-        self.find('.liz-project-desc').hide();
-    }).click(function(){
-        var self = $(this);
-        window.location = self.parent().find('a.liz-project-view').attr('href');
-        return false;
-    });
-}
 
 var searchProjects = function(){
     // Hide search if there are no projects
@@ -287,6 +274,5 @@ var searchProjects = function(){
 }
 
 window.addEventListener('load', function () {
-    addDescriptionSlider();
     searchProjects();
 });
diff --git a/lizmap/modules/view/templates/view.tpl b/lizmap/modules/view/templates/view.tpl
@@ -14,8 +14,9 @@
     <a name="link-projet-{$idm}"></a>
     <div class="thumbnail">
       <div class="liz-project">
-        <img width="250" height="250" loading="lazy" src="{$p->img}" alt="project image" class="liz-project-img">
-        <p class="liz-project-desc" style="display:none;">
+        <a href="{$p->url}{if $hide_header}&h=0{/if}">
+        <img width="250" height="250" loading="lazy" src="{$p->img}" alt="project image" class="_liz-project-img">
+        <p class="liz-project-desc" >
           <b class="title">{$p->title}</b>
           <br/>
           <br/><b>{@default.project.abstract.label@}</b>&nbsp;: <span class="abstract">{$p->abstract|strip_tags|truncate:100}</span>
@@ -25,6 +26,7 @@
           <br/><b>{@default.project.projection.label@}</b>&nbsp;: <span class="proj">{$p->proj}</span>
           <br/><b>{@default.project.bbox.label@}</b>&nbsp;: <span class="bbox">{$p->bbox}</span>
         </p>
+        </a>
       </div>
       <h5 class="liz-project-title">{$p->title}</h5>
       <p>

diff --git a/lizmap/www/assets/css/view.css b/lizmap/www/assets/css/view.css
@@ -19,19 +19,26 @@
 }
 .liz-project-desc {
   color: white;
-  font-size: 0.8em;
-  line-height: 0.8em;
+  font-size: 0em;
+  line-height: 0em;
   position: absolute;
   bottom:-1px;
   right:0px;
   left:0px;
   text-align: left;
   text-transform: none;
   background-color: rgba(0, 0, 0, 0.5);
-  padding:5px;
+  padding:0px;
   margin:0px;
   overflow-wrap: break-word;
 }
+.liz-project:hover .liz-project-desc {
+  line-height: 0.8em;
+  transition: line-height 300ms ease-in;
+  padding:5px;
+  font-size: 0.8em;
+}
+
 
 .liz-project-title{
   overflow-wrap: anywhere;