infoblock - copied from live

adapting live version for half width

by ian_smithz

HTML

<div class="drawer-container flex-vh-centre">

            <!-- initial desktop content -->

            <div class="drawer-open position-absolute z-1 trbl-0 flex-vh-centre p-15">

                <img class="swap mw-80p mr-40 mr-md-60 mr-lg-0" src="//www.screwfix.com/images/general/assets/gfx/milwaukee/m12-m18-logo.png" alt="M12 M18 Fuel logo">

            </div>

            <!-- desktop content on hover -->

            <div class="block-overlay-container text-center border bg-white flex-vh-centre flex-column">

                <h2 class="mb-15 mt-0 px-10 t-48 lh-1 text-upper text-milwaukee-red screwfix-bold">Milwaukee Fuel<sup><small>™</small></sup></h2>

                <p class="t-16 t-md-15 t-lg-16 text-milwaukee-red lh-1-2 screwfix-regular mb-0 px-20">M18 Fuel<sup><small>™</small></sup> products feature three <strong>Milwaukee<sup><small>®</small></sup> exclusive innovations</strong>. The POWERSTATE<sup><small>™</small></sup>Brushless Motor, Redlithium battery pack and redlink plus intelligence hardware &amp; software that deliver <strong>unmatched power, run time and durability</strong>. </p>

            </div>

            <!-- tablet/mobile content on swipe -->

            <div class="drawer">

                <div class="drawer-handle">

                    <span class="dots-container">

                        <span class="dots t-70 t-md-100 text-milwaukee-red screwfix-bold flex-vh-centre">⋮</span>

                    </span>

                    <span class="cross-container">

                        <span class="cross sans-serif-stack t-38 t-md-60 text-milwaukee-red text-bold bg-black w-26 h-26 w-md-42 h-md-42 flex-no-grow flex-no-shrink flex-vh-centre border-radius-50p rotate-45">+</span>

                    </span>

                </div>

                <div class="drawer-content text-center border bg-white flex-vh-centre flex-column">

                    <div class="drawer-content-inner">

                        <h2 class="mb-15 mt-0...

CSS

/* XXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXX */

/* info block classes */

/* XXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXX */


/* block hover overlay for desktop */

.block-overlay-container {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.drawer {
  position: absolute;
  left: calc(100% - 40px);  
  -webkit-transition: left 1s; 
  transition: left 1s;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
}

.expanded .drawer {
  left: 0;
  -webkit-transition: left 1s;  
  transition: left 1s;  
}

/* DRAWER BUTTONS */

.drawer-handle {
  position: relative;
  z-index: 1;
  width: 40px;
  padding: 0;
  border: 0;
  background-color: #000;
  -webkit-transition: background-color 1s;  
  transition: background-color 1s;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 6px 0px 8px 2px rgba(0, 0, 0, .2);
}

/* drawer container for mobile / tablet */

.drawer-container {
  height: 300px;
  background-color: #db011c;
  position: relative;
  color: white;
  padding: 15px 50px 15px 15px;
  overflow: hidden;
}

.reverse-colours.drawer-container {
  background-color: #d52225;
}

.drawer-content-inner {
  max-width: 500px;
  margin: 0 auto;
}

/* dots and cross */

.expanded .dots-container,
.cross-container {
  display: none
}

.expanded .cross-container {
  display: block;
}

.expanded .drawer-handle {
  background: #db011c;
  box-shadow: 6px 0px 8px 2px rgba(0, 0, 0, .2);
}

.reverse-colours .drawer-handle {
  background: #000;
}

.expanded .reverse-colours .drawer-handle {
  background: #db011c;
}

.drawer-open:hover,
.drawer-handle {
  cursor: pointer;
}

/* CONTENT CONTAINER */

.drawer-content {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 40px;
  color: #333;
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0,...

JavaScript

//uncomment the dom content loaded wrapper (first and last lines) when in cms

//document.addEventListener("DOMContentLoaded", function() {

	jQuery('.drawer-handle').on('click swipe', function() {
		jQuery(this).parent().parent().toggleClass('expanded');
	});

	jQuery('.drawer-open').on('click swipe', function(e) {
		jQuery(this).parent().toggleClass('expanded');
	});

//});






// plugin for combining swipe with click events in jquery

// https://github.com/benmajor/jQuery-Touch-Events

// https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/2.0.0/jquery.mobile-events.min.js

// paste the code below in page or use cdn link

//uncomment the dom content loaded wrapper (first and last lines) when in cms

//document.addEventListener("DOMContentLoaded", function() {

	/*!
	 * jQuery Mobile Events
	 * by Ben Major
	 *
	 * Copyright 2011-2017, Ben Major
	 * Licensed under the MIT License:
	 * 
	 * Permission is hereby granted, free of charge, to any person obtaining a copy
	 * of this software and associated documentation files (the "Software"), to deal
	 * in the Software without restriction, including without limitation the rights
	 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	 * copies of the Software, and to permit persons to whom the Software is
	 * furnished to do so, subject to the following conditions:
	 *
	 * The above copyright notice and this permission notice shall be included in
	 * all copies or substantial portions of the Software.
	 *
	 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
	 * THE...