TV Items

by Yaroslav Samardak

HTML

<div class="list">
  <div class="item blue">
    <div class="visitor-info">
      <div class="visitor-description">George Washington</div>
      <div class="visitor-value">E321</div>
    </div>
    
    <span class="arrow">→</span>
    
    <div class="operator-info">
      <div>
        <div class="operator-title">Room</div>
        <div class="operator-job-title">Сardiologist</div>
        <div class="operator-description">Janet G. Travell</div>
        <div class="operator-value">7</div>
      </div>

      <img
        alt=""
        src="https://upload.wikimedia.org/wikipedia/commons/4/4e/JFKWHP-AR6661-E%281%29.jpg"
      />
    </div>
  </div>
  
  <div class="item purple">
    <div class="visitor-info">
      <div class="visitor-value">F42</div>
    </div>
    
    <span class="arrow">→</span>
    
    <div class="operator-info">
      <div>
        <div class="operator-title">Касса</div>
        <div class="operator-value">K15</div>
      </div>

      <img
        alt=""
        src="https://i.pravatar.cc/150?img=5"
      />
    </div>
  </div>
  
  <div class="item orange" id="test">
    <div class="visitor-info">
      <div class="visitor-description">Тоштимиров Мухаммад-Кодир</div>
      <div class="visitor-value">A257</div>
    </div>
    
    <span class="arrow">→</span>
    
    <div class="operator-info">
      <div>
        <div class="operator-title">Кабинет</div>
        <div class="operator-job-title">Job Title</div>
        <div class="operator-description">Operator description</div>
        <div class="operator-value">УЗИ-4</div>
      </div>
      
      <img
        alt=""
        src="https://i.pravatar.cc/150?img=19"
      />
    </div>
  </div>
  
  <div class="item">
    <div class="visitor-info">
      <div class="visitor-value">F127</div>
    </div>
    
    <span class="arrow">→</span>
    
    <div class="operator-info">
      <div>
        <div class="operator-title">Инспектор</div>
        <div class="operator-value">12</div>
   ...

SCSS

body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
  outline: none;
}

button {
  margin-left: 16px;
}

.list {
  margin: 16px;
  gap: 16px;
  font-size: 16px;
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  grid-template-columns: 1fr;
}

.item {
  box-sizing: border-box;
  background: #e0e0e0;
  /* border: 1px solid black; */
  border-radius: 4px;
  padding: 8px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: 700;
  height: 100px;

  > div {
    flex: 1;
  }
  
  &.green { background: #81c784; }
  &.blue { background: #64b5f6; }
  &.orange { background: #ffb74d; }
  &.purple { background: #ce93d8; }
  
  .visitor-info {
    display: flex;
    flex-direction: column-reverse;
  }
  
  .visitor-value, .operator-value {
    font-size: 56px;
  }
  
  .visitor-description + .visitor-value {
    font-size: 48px;
  }
  
  .operator-description + .operator-value {
    font-size: 40px;
  }
  
  .arrow {
    font-size: 32px;
    margin-right: 8px;
  }
  
  .operator-info {
    display: flex;
    flex-direction: row;
    height: 100%;
    
    > div:first-child {
      flex: 1;
      position: relative;
      padding: 0 0 0 22px;
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
      text-align: right;
    }
    
    .operator-title {
      position: absolute;
      left: 0;
      bottom: 8px;
      text-transform: uppercase;
      width: 120px;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      transform: translateX(-84px);
    }
  }
  
  img {
    width: 63px;
    height: 84px;
    object-fit: cover;
    aspect-ratio: 3 / 4;
    margin-left: 16px;
    margin-right: -8px;
    
    border-radius: 4px;
    border: 2px solid white;
    box-shadow: 0 1px...

JavaScript

const btn = document.getElementById('btn')
const el = document.getElementById('test')

btn.addEventListener('click', () => {
	el.classList.toggle('animate')
})