CWV responsive

by Rozina Szogyenyi

HTML

<html>

  <head>

    <!-- HTML in your document's head -->
    <link rel="preconnect" href="https://rsms.me/">
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">

  </head>

  <body>

    <div class="strucContainer">

      <div class="strucHeader"></div>
      <div class="strucNav">
        <ul>
          <li class="item"><span class="skeletonIcon"></span><span class="skeletonText one"></span></li>
          <li class="item"><span class="skeletonIcon"></span><span class="skeletonText one"></span></li>
          <li class="item"><span class="skeletonIcon"></span><span class="skeletonText two"></span></li>
          <li class="item"><span class="skeletonIcon"></span><span class="skeletonText three"></span></li>
          <li class="item"><span class="skeletonIcon"></span><span class="skeletonText two"></span></li>

          <li class="item subitem selected">Reports</li>
          <li class="item subitem2"><span class="skeletonText three"></span></li>

          <li class="item"><span class="skeletonIcon"></span><span class="skeletonText three"></span></li>
          <li class="item"><span class="skeletonIcon"></span><span class="skeletonText two"></span></li>

          <li class="title">Sales channels</li>

          <li class="item"><span class="skeletonIcon"></span><span class="skeletonText two"></span></li>
          <li class="item"><span class="skeletonIcon"></span><span class="skeletonText three"></span></li>
          <li class="item"><span class="skeletonIcon"></span><span class="skeletonText two"></span></li>

          <li class="title">Apps</li>

          <li class="item"><span class="skeletonIcon"></span><span class="skeletonText two"></span></li>
          <li class="item"><span class="skeletonIcon"></span><span class="skeletonText three"></span></li>
          <li class="item"><span class="skeletonIcon"></span><span class="skeletonText two"></span></li>


        </ul>

      </div>

      <div class="strucMain">
      
     ...

CSS

:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
  
  --p-min-card-width: 375px;
  --p-min-bubble-width: 300px;
  --p-max-bubble-width: 320px;
  --p-space-1: 48px;
  --p-space-2: 48px;
}

@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}


html {
  height: 100vh;
}

body {
  margin: 0;
  padding: 0;
  font-family: Inter;
  color: #303030;
  background: #F1F1F1;
  position: relative;
  height: 100%;
  overflow: hidden;
}

.strucContainer {
  position: relative;
  height: 100%;
}

.strucHeader {
  background: #1A1A1A;
  height: 56px;
}

.strucNav {
  width: 240px;
  background: #EBEBEB;
  height: 100%;
  position: absolute;
  top: 56px;
}

.strucNav ul {
  margin: 16px 0 0 0;
  list-style-type: none;
  padding: 0;
}

.strucNav li {
  padding: 4px 12px;
  height: 20px;
}

.strucNav li.item {
  height: 20px;
}

.strucNav li.item.selected {
  background: white;
}


.strucNav li.item.subitem {
  padding-left: 52px;
  padding-top: 8px;
  font-size: 13px;
  font-weight: 500;
}
.strucNav li.item.subitem2{
  padding-left: 44px;
}

.strucNav li.title {
  height: 20px;
  padding-top: 30px;
  padding-left: 20px;
  padding-bottom: 0;
  font-size: 11px;
  color: #616161;
}

.strucNav .skeletonIcon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #D4D4D4;
  border-radius: 4px;
  margin: 8px;
}

.strucNav .skeletonText {
  display: inline-block;
  height: 8px;
  background: #D4D4D4;
  border-radius: 4px;
  margin: 12px 8px;
}

.strucNav .skeletonText.one {
  width: 47px;
}

.strucNav .skeletonText.two {
  width: 61px;
}

.strucNav .skeletonText.three {
  width: 77px;
}

.strucNav .skeletonText.four {
  width: 91px;
}

.strucNav .skeletonText.five {
  width: 107px;
}

.strucNav .skeletonText.six {
  width: 133px;
}


.strucMain {
  width: calc(100% - 240px);
  padding: 0 24px;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  left:...

JavaScript

// Get the root element
var r = document.querySelector(':root');

function cssVarSet(variable, value) {
  r.style.setProperty(variable, value);
}

/* CARD SPACING 
var range = document.querySelector('.js-input-range'),
    value = document.querySelector('.js-range-value');

value.innerHTML = range.getAttribute('value');

range.addEventListener('input', function(){
    value.innerHTML = this.value;
    cssVarSet('--p-space-1', this.value + 'px');
    cssVarSet('--p-space-2', this.value + 'px');
    
});
*/

/* MIN CARD WIDTH 
var range2 = document.querySelector('.js-input-range2'),
    value2 = document.querySelector('.js-range-value2');

value2.innerHTML = range2.getAttribute('value');

range2.addEventListener('input', function(){
    value2.innerHTML = this.value;
    cssVarSet('--p-max-bubble-width', this.value + 'px');
    cssVarSet('--p-min-card-width', this.value-30 + 'px');
    cssVarSet('--p-min-bubble-width', this.value-70 + 'px');
});
*/

function reportWindowSize() {
  var widthOutput = window.innerWidth;
  
  var columns = document.getElementsByClassName("columns");
  
  for (var i = 0; i < columns.length; i++) {
   	
    var colWidth = columns.item(i).offsetWidth;
		var metricWidth = columns.item(i).querySelector(".metric").offsetWidth;
   
    console.log(colWidth - metricWidth);
    if (colWidth - metricWidth < 160) {
    	columns.item(i).classList.remove("top");
    } else {
    	columns.item(i).classList.add("top");
    }
    
    reportWindowSize;
	}
  
}


function calcBubbleSpace() {

	

	var bubbleContainers = document.getElementsByClassName("bubbleContainer");
  
  for (var i = 0; i < bubbleContainers.length; i++) {
  
  	const bubbleMaxWidth = 350;
  
    var bubbleItem = bubbleContainers.item(i).querySelector(".bubble");
    var bubbleItemWidth = bubbleItem.offsetWidth;
    var bubbleContainerWidth = bubbleContainers.item(i).offsetWidth;
    
    if (bubbleContainerWidth == bubbleItem.offsetWidth) {
    	
      bubbleItem.style.right =...