CWV Cards As Tabs

Interaction test

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

@font-face {
    font-family: 'Inter'; /* give your font a name to reference it by later on! */
    src: url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap);  */
}

:root {
  font-family: 'Inter', sans-serif;
  
  --p-min-card-width: 375px;
  --p-min-bubble-width: 300px;
  --p-max-bubble-width: 320px;
  --p-space-1: 48px;
  --p-space-2: 48px;
  --p-color-text: #303030;
  --p-color-text: #616161;
}

html {
  height: 100vh;
}

body {
  margin: 0;
  padding: 0;
  font-family: Inter;
  color: var(--p-color-text);
  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% -...

JavaScript

const metrics = document.getElementById("metrics");
const metricCards = document.querySelectorAll(".metric");

metricCards.forEach(function(card) {

  card.addEventListener("click", function() {
  
  	var thisID = card.getAttribute('id');
    metrics.setAttribute("data-active", thisID); 
  
 	 if (card.classList.contains("active")) {
    	
      card.classList.remove("active");
      metrics.setAttribute("data-active", "none"); 
    
    // if the cards are in default state the current one should be maximized the rest minimized
    } else {
    
    	for (var i = 0; i < metricCards.length; i++) {
      
      		if (metricCards[i] == card) {
       
						card.classList.add("active");            
            
          } else {
           	
            metricCards[i].classList.remove("active");
            
          }
         
      }
    }
   
   
  });
});


function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY,
    height: rect.height
  };
}


// TOOLTIP SHIT
const toolTips = document.querySelectorAll(".js-tooltip");


toolTips.forEach(function(tooltip) {
tooltip.addEventListener(
  "mouseenter",
  (event) => {
  
  	var tooltipID = event.target.dataset.target;
    var activeTooltip = document.getElementById(tooltipID);
    
    activeTooltip.style.opacity = "1";
    activeTooltip.style.marginTop = "0px";

  },
  false,
);


tooltip.addEventListener(
  "mouseout",
  (event) => {
	  console.log(event);
  	var tooltipID = event.target.dataset.target;
    var activeTooltip = document.getElementById(tooltipID);
    
    if (!activeTooltip || !activeTooltip.style) {
	    return
    }
    
    activeTooltip.style.opacity = "0";
    activeTooltip.style.marginTop = "-10px";
  },
  false,
);


});

function positionTooltips() {	
	// this will place the tooltips to the right place

	var toolTips = document.querySelectorAll(".js-tooltip");
  
  for (var i = 0; i <...