Merge pull request #4 from salahinlibro/master

Correction du probleme d'affichage des fleches du Carrousel
inLibro · Oct 31, 2023 · f2457fc · f2457fc
2 parents 65eeb7e + 6a36abd
commit f2457fc
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 9 deletions.
diff --git a/Koha/Plugin/Carrousel/opac-carrousel.tt b/Koha/Plugin/Carrousel/opac-carrousel.tt
@@ -36,11 +36,12 @@
                                 <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% item.biblionumber %]" title="[% item.title %]"><img class="cloudcarousel" src="[% item.url %]" alt="[% item.title %]" ></a>
                             [% END %]   
                         [% END %]
-
-                        <button class="[% carrousel.title || carrousel.name %]" aria-label="previous" style="float:left; height:175px" onclick="Right(this)" type="button">&lt;</button>
-                        <button class="[% carrousel.title || carrousel.name %]" aria-label="next" style="float:right; height:175px" onclick="Left(this)" type="button">&gt;</button>    
                     </div>
                 </div>
+                <div class="controls">
+                    <button class="[% carrousel.title || carrousel.name %]" aria-label="previous" style="left: 0;" onclick="Right(this)" type="button">&lt;</button>
+                    <button class="[% carrousel.title || carrousel.name %]" aria-label="next" style="right: 0;" onclick="Left(this)" type="button">&gt;</button>
+                </div>
             [% END %]
         </div>
     [% END %]
@@ -259,14 +260,22 @@
     width:100px;
 }
 
-#inlibro-carrousel .slider style="position:relative;" {
+#inlibro-carrousel .slider {
     overflow: hidden;
+    position: relative;
 }
 
 #inlibro-carrousel .slider img {
     height: 175px;
 }
 
+#inlibro-carrousel .slider button {
+    position:absolute;
+    top: 70%;
+    transform: translateY(-70%);
+    height:160px
+}
+
 #inlibro-carrousel .slider hr + div {
     background-color: #d5e1df;
 }
@@ -292,11 +301,15 @@
 
 #inlibro-carrousel .images {
     left: 0px;
-    position:relative;
+    position: relative;
     white-space: nowrap;
 
 }
 
+#inlibro-carrousel .controls{
+    margin-top: 20px;
+}
+
 #inlibro-carrousel button{
     color : #[%txtColor%];
     background-color: #[%bgColor%];

diff --git a/Koha/Plugin/Carrousel/opac-carrousel_fr-CA.tt b/Koha/Plugin/Carrousel/opac-carrousel_fr-CA.tt
@@ -26,7 +26,6 @@
         <div id="carrousel-[% loop.index %]" class="slider">
             <H2>[% carrousel.title || carrousel.name %]</H2>
             <hr>
-
             [% IF (carrousel.documents.size() > 0) %]
                 <div id="[% carrousel.title || carrousel.name %]">
                     <div class="images">
@@ -37,11 +36,12 @@
                                 <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% item.biblionumber %]" title="[% item.title %]"><img class="cloudcarousel" src="[% item.url %]" alt="[% item.title %]" ></a>
                             [% END %]   
                         [% END %]
-
-                        <button class="[% carrousel.title || carrousel.name %]" aria-label="previous" style="float:left; height:175px" onclick="Right(this)" type="button">&lt;</button>
-                        <button class="[% carrousel.title || carrousel.name %]" aria-label="next" style="float:right; height:175px" onclick="Left(this)" type="button">&gt;</button>    
                     </div>
                 </div>
+                <div class="controls">
+                    <button class="[% carrousel.title || carrousel.name %]" aria-label="précédent" style="left:0" onclick="Right(this)" type="button">&lt;</button>
+                    <button class="[% carrousel.title || carrousel.name %]" aria-label="suivant" style="right:0" onclick="Left(this)" type="button">&gt;</button>
+                </div>
             [% END %]
         </div>
     [% END %]
@@ -262,12 +262,20 @@
 
 #inlibro-carrousel .slider {
     overflow: hidden;
+    position: relative;
 }
 
 #inlibro-carrousel .slider img {
     height: 175px;
 }
 
+#inlibro-carrousel .slider button {
+    position:absolute;
+    top: 70%;
+    transform: translateY(-70%);
+    height:160px
+}
+
 #inlibro-carrousel .slider hr + div {
     background-color: #d5e1df;
 }
@@ -298,6 +306,10 @@
 
 }
 
+#inlibro-carrousel .controls{
+    margin-top: 20px;
+}
+
 #inlibro-carrousel button{
     color : #[%txtColor%];
     background-color: #[%bgColor%];