Add slider to index page

app/assets/javascripts/application.js

@@ -15,6 +15,28 @@
 //= require turbolinks
 //= require_tree .
 //= require cookies_eu
+//= require siema/dist/siema.min.js
+
+const initiateSlider = (selector) => {
+    App.slider = new Siema({
+        selector: selector,
+        duration: 2,
+        easing: 'ease-out',
+        perPage: 1,
+        startIndex: 0,
+        draggable: true,
+        multipleDrag: true,
+        threshold: 20,
+        loop: true,
+        rtl: false,
+        onInit: () => { },
+        onChange: () => { },
+    });
+    const prev = document.querySelector('.prev');
+    const next = document.querySelector('.next');
+    prev.addEventListener('click', () => App.slider.prev());
+    next.addEventListener('click', () => App.slider.next());
+}
 
 const addFadeOutAnimation = (element) => {
     element.classList.add('fadeOut')
@@ -139,5 +161,10 @@ document.addEventListener('turbolinks:load', () => {
         stripeModalToggle();
         hideModalListener('cancel_modal');
     }
+
+    let slider = document.querySelector('.carousel');
+    if (slider) {
+        initiateSlider('.carousel')
+    };
 })
 

app/assets/stylesheets/application.scss

@@ -16,4 +16,50 @@
     width: 100px;
     background-color: rgb(50, 177, 165) !important;
 }  
+.carousel {
+    overflow: hidden;
+    .carousel-item {
+        position: relative;
+        width: 500%;
+        margin: 0;
+        left: 0;
+        text-align: left;
+        font-size: 0;
+    }
+    img {
+        width: 20%; 
+        float: left;
+    }
+    .carousel-caption {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        height: 100%;
+        left: 0;
+        padding: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+}
+
+.carousel-control:nth-of-type(1) {
+    height: 100px;
+    position: absolute;
+    left: 0;
+    top: 50%;
+}
+
+.carousel-control:nth-of-type(2) {
+    height: 100px;
+    position: absolute;
+    right: 0;
+    top: 50%;
+}
+.carousel-control svg {
+    height: 40px;
+    width: 95px;
+}
+
+
 

app/controllers/application_controller.rb

@@ -1,2 +1,17 @@
+# frozen_string_literal: true
+
 class ApplicationController < ActionController::Base
+  before_action :get_slider_entries
+
+  private
+
+  def get_slider_entries
+    @entries = [
+      { marketing_slug: 'Just some text',
+        image_url: 'https://assets.craftacademy.se/images/backgrounds/ca_background_git.png' },
+      { marketing_slug: 'Just some text',
+        image_url: 'https://assets.craftacademy.se/images/backgrounds/ca_background_group_coding.png' }
+    ]
+  end
 end
+

app/javascript/css/tailwind.scss

@@ -371,4 +371,30 @@ body {
 	&:hover {
 		@apply opacity-75 ;
 	}
-}
+}
+
+.carousel {
+	@apply px-2;
+
+	a {
+		text-decoration: none;
+		display: inline-block;
+		padding: 8px 16px;
+	}
+
+	a:hover {
+		background-color: #ddd;
+		color: black;
+	}
+
+	.prev {
+		background-color: #f1f1f1;
+		color: black;
+	}
+
+	.next {
+		background-color: #4CAF50;
+		color: white;
+	}
+}
+

app/views/layouts/application.html.haml

@@ -15,6 +15,8 @@
     %section.flex-1.mt-8
       = alert || notice
       #content
+        - if current_page?(root_path)
+          = render partial: 'partials/carousell'
         = yield
       #added_content
     .pin-b

app/views/partials/_carousell.html.haml

@@ -0,0 +1,18 @@
+.carousel
+    - @entries.each_with_index do |entry|
+        .carousel-item
+            = image_tag entry[:image_url]
+            .carousel-caption
+                %h1= entry[:marketing_slug]
+/ Controls
+%a.carousel-control.prev
+    %svg#Layer_1{:style => "enable-background:new 0 0 24 42;", :version => "1.1", :viewbox => "0 0 24 42", :x => "0px", "xml:space" => "preserve", :xmlns => "http://www.w3.org/2000/svg", "xmlns:xlink" => "http://www.w3.org/1999/xlink", :y => "0px"}
+        :css
+            .st0{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+        %polyline.st0{:points => "21,39 3,21 21,3 "}
+
+%a.carousel-control.next
+    %svg#Layer_1{:style => "enable-background:new 0 0 24 42;", :version => "1.1", :viewbox => "0 0 24 42", :x => "0px", "xml:space" => "preserve", :xmlns => "http://www.w3.org/2000/svg", "xmlns:xlink" => "http://www.w3.org/1999/xlink", :y => "0px"}
+        :css
+            .st0{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+        %polyline.st0{:points => "3,2 21,20 3,38 "}

db/seeds.rb

@@ -4,14 +4,15 @@
 require 'faker'
 
 10.times do
-    User.create!( email: Faker::Internet.email,
+    user = User.create!( email: Faker::Internet.email,
         first_name: Faker::Name.first_name,
         last_name:Faker::Name.last_name,
         password: "password",
-        role: 1,
         gender: Faker::Gender.binary_type,
         age: rand(18..99),
-        role: :member)
+        role: :member )
+    user.avatar.attach(io: File.open(Rails.root.join('spec', 'fixtures', 'dummy_avatar.png')), filename: "avatar-#{user.email}.png", content_type: 'image/png')
+
 end
 
 Resource.create([

features/support/env.rb

@@ -17,7 +17,7 @@
   OmniAuth.config.mock_auth[:crafted_oauth] = OmniAuth::AuthHash.new(OmniAuthFixtures.crafted_oauth_mock)
 end
 
-Chromedriver.set_version '2.36' unless ENV['CI'] == 'true'
+Chromedriver.set_version '2.45' unless ENV['CI'] == 'true'
 
 chrome_options = %w(no-sandbox disable-popup-blocking disable-infobars)
 chrome_options << 'headless' if ENV['CI'] == 'true'

package.json

@@ -4,6 +4,7 @@
   "dependencies": {
     "@rails/webpacker": "3.5",
     "animate.css": "^3.7.0",
+    "siema": "^1.5.1",
     "tailwindcss": "^0.6.6"
   },
   "devDependencies": {

yarn.lock

@@ -5916,6 +5916,11 @@ shebang-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
   integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
 
+siema@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/siema/-/siema-1.5.1.tgz#eff312b77e8340fa4d81d5d053ebbeb9113ff888"
+  integrity sha1-7/MSt36DQPpNgdXQU+u+uRE/+Ig=
+
 signal-exit@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"