booking 2

by Bateman

HTML

<div class="container">
  <div class="title-col">
    <div class="title-header">Tables</div>
    <div class="table-title">Table 1</div>
    <div class="table-title">Table 2</div>
    <div class="table-title">Table 3</div>
  </div>
  <div class="bookings-col">
    <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 class="table-row">
      <div class="table-booked dur-2 from-2">10-11</div>
      <div class="not-available dur-2 from-6"></div>
    </div>
    <div class="table-row"></div>
    <div class="table-row"></div>
  </div>
</div>

SCSS

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

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

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

$hour-width: 50px;
$row-height: 35px;
$book-pad: 5px;

.container {
  display: flex;
  flex-direction: row;
  
  margin: 10px;
}

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

.bookings-col {
  display: flex;
  flex-direction: column;
  
  overflow-x: auto;
}

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

.table-row {
  height: $row-height;
  position: relative;
}

.table-booked {
  background: orange;
  border: 1px solid gray;
  border-radius: 2px;
  position: absolute;
  
  top: $book-pad;
  bottom: $book-pad;
  
  @for $i from 1 through 10 {
    &.dur-#{$i} {
      width: $i * $hour-width - $book-pad * 2;
    }
  }
  
  @for $i from 1 through 10 {
    &.from-#{$i} {
      left: ($i - 1)*$hour-width + $book-pad;
    }
  }
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.not-available {
  background: repeating-linear-gradient(-45deg, darken(gray, 10%) 0%, darken(gray, 10%) 10%, black 10%, black 20%);
  /* background: gray; */
  position: absolute;
  top: 0;
  bottom: 0;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  color: white;
  
  &:after {
    content: 'Not avail';
    text-shadow: 1px 1px 20px black;
  }
  
  @for $i from 1 through 10 {
    &.dur-#{$i} {
     ...