Bug 1530606 - Styled First and last button on carousel block

behatnotneeded

Change-Id: If377cc507a3ee524ffe28d72b87c3f906a045812

htdocs/theme/raw/plugintype/artefact/file/blocktype/gallery/templates/slideshow.tpl

@@ -16,27 +16,28 @@
             {/foreach}
         </div>
 
-        <a class="left carousel-control" href="#slideshow{$instanceid}" role="button" data-slide="prev">
-            <span class="icon icon-chevron-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
-            <span class="sr-only">Previous</span>
-        </a>
+        <div class="left carousel-control">
+            <a class="carousel-control-prev" href="#slideshow{$instanceid}" role="button" data-slide="prev" title="{str tag=previous}">
+                <span class="icon icon-angle-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
+                <span class="sr-only">{str tag=previous}</span>
+            </a>
 
-        <a class="left carousel-control carousel-control-first" href="#slideshow{$instanceid}" role="button" data-slide-to="0">
-            <span class="icon icon-chevron-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
-            <span class="icon icon-chevron-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
-            <span class="sr-only">First</span>
-        </a>
-
-        <a class="right carousel-control carousel-control-last" href="#slideshow{$instanceid}" role="button" data-slide-to="{$k}">
-            <span class="icon icon-chevron-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
-            <span class="icon icon-chevron-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
-            <span class="sr-only">Last</span>
-        </a>
+            <a class="carousel-control-first" href="#slideshow{$instanceid}" role="button" data-slide-to="0" title="{str tag=first}">
+                <span class="icon icon-angle-double-left icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
+                <span class="sr-only">{str tag=first}</span>
+            </a>
+        </div>
 
-        <a class="right carousel-control" href="#slideshow{$instanceid}" role="button" data-slide="next">
-            <span class="icon icon-chevron-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
-            <span class="sr-only">Next</span>
-        </a>
+        <div class="right carousel-control">
+            <a class="carousel-control-next" href="#slideshow{$instanceid}" role="button" data-slide="next" title="{str tag=next}">
+                <span class="icon icon-angle-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
+                <span class="sr-only">{str tag=next}</span>
+            </a>
+            <a class="carousel-control-last" href="#slideshow{$instanceid}" role="button" data-slide-to="{$k}" title="{str tag=last}">
+                <span class="icon icon-angle-double-right icon-lg" role="presentation" aria-hidden="true" aria-hidden="true"></span>
+                <span class="sr-only">{str tag=last}</span>
+            </a>
+        </div>
     </div>
     {else}
       {str tag=noimagesfound section=artefact.file}

htdocs/theme/raw/sass/_custom.scss

@@ -390,19 +390,3 @@
         color: #333;
     }
 }
-
-// Styles for the first and last buttons on the image gallery block
-.carousel-control {
-    &.carousel-control-first {
-        margin-left: 40px;
-        span:first-of-type {
-            margin-right: -10px;
-        }
-    }
-    &.carousel-control-last {
-        margin-right: 40px;
-        span:first-of-type {
-            margin-right: -10px;
-        }
-    }
-}

htdocs/theme/raw/sass/components/_carousel.scss

@@ -22,11 +22,31 @@
         padding: 10px;
     }
     .carousel-control {
-        color: #000;
-        top: 50%;
-        bottom: 50%;
+        width: 10%;
+        opacity: 1;
+        &:hover,
+        &:focus {
+            opacity: 1;
+        }
+        top: 5%;
+        bottom: 95%;
         ~ .icon {
             vertical-align: middle;
         }
+        .icon-lg {
+            font-size: 1.6em;
+        }
+        a {
+            display: block;
+            padding: 3px 0;
+            color: #000;
+            opacity: .5;
+            &:hover,
+            &:focus {
+                outline: 0;
+                text-decoration: none;
+                opacity: .9;
+            }
+        }
     }
 }