table booking

by Bateman

HTML

<div class="scrollable">
  <div class="table-list">
    <div class="header">
      <div class="header-title">Tables</div>
      <div class="timeline">
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
      </div>
    </div>
    <div class="table-row">
      <div class="table-name">Table 1</div>
      <div class="table-story">
        <div class="table-booked d2 s2">
          10-11
        </div>
        <div class="table-booked d2 s6">
          14-15
        </div>
      </div>
    </div>
    <div class="table-row">
      <div class="table-name">Table 2</div>
      <div class="table-story">
        <div class="table-booked d3 s4">
          12-14
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto');

$row-height: 35px;
$hour-width: 50px;
$booking-padding: 3px;

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

body {
  font-size: 16px;
  font-family: Roboto;
}

.table-list {
  width: $hour-width * 10 + 100px;
}

.header,
.table-row {
  display: flex;
  border-bottom: 1px solid gray;
}

.header-title,
.table-name {
  width: 100px;
  height: $row-height;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: none;
  border-right: 1px solid gray;
  padding: 0 10px;
}

.timeline {
  display: flex;
  
  div {
    width: $hour-width;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-right: 1px solid gray;
    
    &:last-child {
      border-right: none;
    }
  }
}

.table-story {
  position: relative;
  width: 100%;
}

.table-booked {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: orange;
  border: 1px solid gray;
  cursor: pointer;
  top: $booking-padding;
  bottom: $booking-padding;
  border-radius: 3px;
  
  @for $i from 1 through 10 {
    &.d#{$i} {
      width: $i * $hour-width - $booking-padding * 2;
    }
  }
  
  @for $i from 1 through 10 {
    &.s#{$i} {
      left: ($i - 1)*$hour-width + $booking-padding;
    }
  }
    
  transition-property: background color;
  transition-duration: 150ms;
  transition-delay: 50ms;
  
  &:hover {
    background: darken(orange, 20%);
    color: white;
  }
}