From a821deb12a88f1a2d39785e05e3abf34e82f37ab Mon Sep 17 00:00:00 2001
From: Cecilia Vela Gurovic <ceciliavg@catalyst.net.nz>
Date: Tue, 26 Mar 2019 10:41:02 +1300
Subject: [PATCH] Bug 1820931: image gallery should use carousel-item class

behatnotneeded

Change-Id: I2c2cbed0528a7d009a8ce5c51d23ccb876e9541a
---
 .../blocktype/gallery/templates/slideshow.tpl |  2 +-
 htdocs/theme/raw/sass/_custom.scss            |  4 +++
 .../theme/raw/sass/components/_carousel.scss  | 36 +++++++++++++++----
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/htdocs/theme/raw/plugintype/artefact/file/blocktype/gallery/templates/slideshow.tpl b/htdocs/theme/raw/plugintype/artefact/file/blocktype/gallery/templates/slideshow.tpl
index 9c5653d197..3df049c1ec 100644
--- a/htdocs/theme/raw/plugintype/artefact/file/blocktype/gallery/templates/slideshow.tpl
+++ b/htdocs/theme/raw/plugintype/artefact/file/blocktype/gallery/templates/slideshow.tpl
@@ -4,7 +4,7 @@
         <div class="carousel-inner" role="listbox">
             {foreach from=$images item=image key=k name=images}
 
-            <div class="{if $dwoo.foreach.images.first}item active{else}item{/if}">
+            <div class="{if $dwoo.foreach.images.first}carousel-item active{else}carousel-item{/if}">
                 <img src="{$image.source}" alt="{$image.title}" title="{$image.title}" class="mx-auto d-block">
 
                 {if $showdescription && $image.title}
diff --git a/htdocs/theme/raw/sass/_custom.scss b/htdocs/theme/raw/sass/_custom.scss
index 8ac4ad808a..eb7aaa339c 100644
--- a/htdocs/theme/raw/sass/_custom.scss
+++ b/htdocs/theme/raw/sass/_custom.scss
@@ -296,6 +296,10 @@
         background: #fff;
         box-shadow: 0 0 3px 5px #f8f8f8;
     }
+    &.card.card-secondary > .block > .card-body {
+        overflow: hidden;
+        padding: 15px 20px;
+    }
 }
 
 .user-thumbnails {
diff --git a/htdocs/theme/raw/sass/components/_carousel.scss b/htdocs/theme/raw/sass/components/_carousel.scss
index daca50fa1b..2795dff019 100644
--- a/htdocs/theme/raw/sass/components/_carousel.scss
+++ b/htdocs/theme/raw/sass/components/_carousel.scss
@@ -1,12 +1,15 @@
 .carousel {
     width: 82%;
     margin: 0 auto;
-    .item {
+    .carousel-inner {
+        overflow: visible;
+    }
+    .carousel-item {
         display: block;
     }
 
     &.carousel-ready {
-        .item {
+        .carousel-item {
             display: none;
             &.active,
             &.next {
@@ -30,37 +33,56 @@
         padding: 10px 0 0 0;
     }
     .carousel-control {
-        width: 8%;
+        width: auto;
         opacity: 1;
         top: 0;
         bottom: 100%;
+        position: absolute;
         ~ .icon {
             vertical-align: middle;
         }
         &.left {
-            left: -10%;
+            left: -25px;
         }
         &.right {
-            right: -10%;
+            right: -25px;
         }
         &:hover,
         &:focus {
             opacity: 1;
         }
         .icon-lg {
-            font-size: 1.5em;
+            font-size: 1.875rem;
+        }
+        .carousel-control-first,
+        .carousel-control-last {
+            margin-top: 35px;
+        }
+        .carousel-control-last {
+            text-align: right;
+        }
+        .carousel-control-prev,
+        .carousel-control-next {
+            .icon {
+                margin-right: 0;
+                margin-left: 0;
+            }
         }
         a {
             display: block;
-            padding: 3px;
             color: $theme-text-color;
             opacity: .5;
+            width: 20px;
             &:hover,
             &:focus {
                 outline: 0;
                 text-decoration: none;
                 opacity: .9;
             }
+            .icon {
+                width: 100%;
+                text-align: center;
+            }
         }
     }
 }
-- 
GitLab