Metric card interactions

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 the one I click on is minimized then it should be maximized
  	if (card.classList.contains("minimize")) {
    
    	card.classList.remove("minimize");  
      metrics.classList.add("activate");  
    	
      for (var i = 0; i < metricCards.length; i++) {
        if (metricCards[i] == card) {
           
          card.classList.add("maximize");  

        } else {

           metricCards[i].classList.remove("maximize");   
           metricCards[i].classList.add("minimize");

        }
        
      }
      
      
    // if the one I click on is maximized then all should go back to normal
    } else if (card.classList.contains("maximize")) {
    	
      card.classList.remove("maximize");
      metrics.setAttribute("data-active", "none"); 
      metrics.classList.remove("activate");  
      
      for (var i = 0; i < metricCards.length; i++) {
      
      		if (metricCards[i] == card) {
       
						card.classList.remove("maximize");            
            
          } else {
           	
            metricCards[i].classList.remove("minimize");
            
          }
         
      }
    
    // 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++) {
      
      	  metrics.classList.add("activate");  
          
      		if (metricCards[i] == card) {
       
						card.classList.add("maximize");            
            
          } else {
           	
            metricCards[i].classList.add("minimize");
            
          }
         
      }
    }
   
   
  });
});