infoblock - copied from live - blue!

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>

            <!-- 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 px-10 t-22 t-md-48 text-milwaukee-red lh-1 text-upper 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>

                </div>

            </div>


        </div>

CSS

/* XXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXX */

/* info block classes */

/* XXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXX */


.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: #0053a0;
  -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);
}

.expanded .drawer-handle {
  background-color: #0053a0;
  box-shadow: 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;
}

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

/* dots and cross */

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

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

.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, .2);
}

/*med-only*/
	
@media (max-width: 64em) and (min-width: 40.063em) {
  .drawer-container {
     height: 270px;
   }	
}

/*med&large-only*/
@media (min-width: 40.063em) {
  .drawer {
    left: calc(100% - 60px);
  }
  .drawer-handle {
    width: 60px;
  }
  .drawer-content {
    left: 60px;
  }
}

/*lrg-only*/
@media (min-width: 64.063em) {

  .drawer-container {
    height: 275px;
    padding: 10px 15px;
  }
  /*
  .drawer-handle {display: none}
 ...

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...