Release/3.0.1

_config/config.yml

@@ -1,3 +1,4 @@
 ---
 name: elemental-carousel
 ---
+

client/css/element-carousel.css

@@ -1,13 +1,5 @@
 .element-carousel__header {
   text-align: center;
-  padding-top: 4rem;
-  padding-bottom: 2rem;
-}
-
-.element-carousel__title {
-  font-size: 2.25rem;
-  line-height: 1.25;
-  margin: 0 0 2rem;
 }
 
 .element-carousel__container {
@@ -22,7 +14,6 @@
       -ms-flex-pack: center;
           justify-content: center;
   position: relative;
-  margin: 2rem auto;
 }
 
 .element-carousel__frame {
@@ -32,22 +23,22 @@
   overflow: hidden;
   white-space: nowrap;
   margin: 0 auto;
-  width: 800px;
+  width: 100%;
 }
 
 .element-carousel__slides {
   display: inline-block;
   margin: 0;
   padding: 0;
+  width: 100%;
 }
 
 .element-carousel__slide {
   position: relative;
   display: inline-block;
   margin: 0;
   padding: 0;
-  width: 800px;
-  max-width: 100%;
+  width: 100%;
 }
 
 .element-carousel__slide-container {
@@ -65,36 +56,56 @@
   padding: 1rem 2rem;
   background-color: rgba(0,0,0,0.35);
   white-space: normal;
+  color: white;
 }
 
-.element-carousel__title {
-  font-weight: bold;
+.element-carousel__content .element-carousel__title {
+  color: white;
 }
 
 .element-carousel__caption {
-  max-width: 30em;
 }
 
 /* Media */
-
 .element-carousel__image-container,
 .youtube-embed__container {
   position: relative;
   width: 100%;
   height: 100%;
+  min-height: 350px;
 }
 
 .element-carousel__image-container > img {
+  margin: auto;
+  display: block;
+}
+
+.element-carousel__image-container--stretch > img {
+  width: 100%;
+  height: auto;
+}
+
+.element-carousel__image-container--fit > img {
+  width: auto;
+ height: 350px;
+}
+
+.element-carousel__image-container--cover > img {
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
-  display: block;
+  min-width: 100%;
+  min-height: 100%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
 
 /* Dots */
-
-.element-carousel__dots {}
+.element-carousel__dots {
+  padding: 10px 0 0 0;
+  text-align: center;
+}
 
 .element-carousel__dots li {
   display: inline-block;

composer.json

@@ -14,7 +14,7 @@
         "dnadesign/silverstripe-youtube-embed": "^0.2.0",
         "gorriecoe/silverstripe-link": "^1.2.4",
         "silverstripe/vendor-plugin": "^1.0",
-        "silvershop/silverstripe-hasonefield" : "^3.0.1"
+        "silvershop/silverstripe-hasonefield" : "^3.0"
     },
     "extra": {
         "installer-name": "silverstripe-elemental-carousel",

src/DataObjects/CarouselSlide.php

@@ -39,7 +39,7 @@ class CarouselSlide extends DataObject
     'Video' => YoutubeEmbed::class,
     'Link' => Link::class
   ];
-  
+
   private static $owns = [
     'Image',
   ];

src/Elements/ElementCarousel.php

@@ -23,6 +23,7 @@ class ElementCarousel extends BaseElement
   private static $inline_editable = false;
 
   private static $db = [
+    'ImageSize' => "Enum('Native, Stretch, Fit, Cover')"
   ];
 
   private static $has_many = [

templates/DNADesign/Elemental/Models/ElementCarousel.ss

@@ -8,7 +8,7 @@
   <div class="element-carousel__frame">
     <ul class="element-carousel__slides">
       <% loop $Slides %>
-        <% include DNADesign\Elemental\Models\ElementCarouselSlide %>
+        <% include DNADesign\Elemental\Models\ElementCarouselSlide ImageSize=$Up.ImageSize %>
       <% end_loop %>
     </ul>
   </div>

templates/DNADesign/Elemental/Models/ElementCarouselArrows.ss

@@ -1,7 +1,7 @@
 <span class="element-carousel__prev">
-  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M302.67 90.877l55.77 55.508L254.575 250.75 358.44 355.116l-55.77 55.506L143.56 250.75z"/></g></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path d="M302.67 90.877l55.77 55.508L254.575 250.75 358.44 355.116l-55.77 55.506L143.56 250.75z"/></g></svg>
 </span>
 
 <span class="element-carousel__next">
-  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path fill="#2E435A" d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z"/></g></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 501.5 501.5"><g><path d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z"/></g></svg>
 </span>

templates/DNADesign/Elemental/Models/ElementCarouselCaption.ss

@@ -1,9 +1,9 @@
 <% if $Title && $ShowTitle || $Caption %>
   <div class="element-carousel__content">
     <% if $ShowTitle %>
-      <p class="element-carousel__title">{$Title}</p>
+      <h3 class="element-carousel__title">{$Title}</h3>
     <% end_if %>
 
-    <div class="element-carousel__caption">{$Caption}</div>
+    <div class="element-carousel__caption"><p>{$Caption}</p></div>
   </div>
 <% end_if %>

templates/DNADesign/Elemental/Models/ElementCarouselImage.ss

@@ -1,3 +1,3 @@
-<div class="element-carousel__image-container">
-  {$Image.Lazyloaded}
+<div class="element-carousel__image-container element-carousel__image-container--{$ImageSize.LowerCase}">
+  $Image.LazyLoaded
 </div>

templates/DNADesign/Elemental/Models/ElementCarouselSlide.ss

@@ -1,11 +1,11 @@
 <li class="element-carousel__slide">
   <% if $Link %>
-    <a href="{$Link.LinkURL}"{$Link.TargetAttr}>
+    <a href="{$Link.LinkURL}"{$Link.TargetAttr} class="element-carousel__link">
   <% end_if %>
 
   <div class="element-carousel__slide-container">
     <% if $Image %>
-      <% include DNADesign\Elemental\Models\ElementCarouselImage %>
+      <% include DNADesign\Elemental\Models\ElementCarouselImage  ImageSize=$ImageSize%>
     <% end_if %>
 
     <% if $Video %>