Lehigh Clutch Style Guide

Org Unit - Hours 

<div class="office-hours">
    <div class="office-hours__item">
        <div class="office-hours__item-label day">Sunday: </div>
        <div class="office-hours__item-slots">
            <div class="time">5:08 pm-5:20 pm<span>, </span></div>
            <div class="time">6:00 pm-6:30 pm<span>, </span></div>
        </div>
    </div>
    <div class="office-hours__item">
        <div class="office-hours__item-label day">Monday: </div>
        <div class="office-hours__item-slots">
            Closed
        </div>
    </div>
    <div class="office-hours__item">
        <div class="office-hours__item-label day">Tuesday: </div>
        <div class="office-hours__item-slots">
            <div class="time">8:00 am-8:50 am<span>, </span></div>
            <div class="time">10:00 am-1:00 pm<span>, </span></div>
            <div class="time">3:00 pm-3:05 pm<span>, </span></div>
        </div>
    </div>
    <div class="office-hours__item">
        <div class="office-hours__item-label day">Wednesday: </div>
        <div class="office-hours__item-slots">
            Closed
        </div>
    </div>
    <div class="office-hours__item">
        <div class="office-hours__item-label day">Thursday: </div>
        <div class="office-hours__item-slots">
            <div class="time">7:50 am-3:30 pm<span>, </span></div>
        </div>
    </div>
    <div class="office-hours__item">
        <div class="office-hours__item-label day">Friday: </div>
        <div class="office-hours__item-slots">
            Closed
        </div>
    </div>
    <div class="office-hours__item">
        <div class="office-hours__item-label day">Saturday: </div>
        <div class="office-hours__item-slots">
            Closed
        </div>
    </div>
</div>
 
<div class="office-hours">
  {% for weekday in weekdays %}
  <div class="office-hours__item">
    <div class="office-hours__item-label day">{{ weekday.day }}: </div>
    <div class="office-hours__item-slots">
    {% if weekday.times %}
      {% for time in weekday.times %}
        <div class="time">{{ time.hour }}<span>, </span></div>
      {% endfor %}
    {% else %}
      Closed
    {% endif %}</div>
  </div>
  {% endfor %}
</div>
 
{
  "weekdays": {
    "1": {
      "day": "Sunday",
      "times": {
        "1": {
          "hour": "5:08 pm-5:20 pm"
        },
        "2": {
          "hour": "6:00 pm-6:30 pm"
        }
      }
    },
    "2": {
      "day": "Monday"
    },
    "3": {
      "day": "Tuesday",
      "times": {
        "1": {
          "hour": "8:00 am-8:50 am"
        },
        "2": {
          "hour": "10:00 am-1:00 pm"
        },
        "3": {
          "hour": "3:00 pm-3:05 pm"
        }
      }
    },
    "4": {
      "day": "Wednesday"
    },
    "5": {
      "day": "Thursday",
      "times": {
        "1": {
          "hour": "7:50 am-3:30 pm"
        }
      }
    },
    "6": {
      "day": "Friday"
    },
    "7": {
      "day": "Saturday"
    }
  }
}
  • Content: 
    .office-hours {
  &__item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    &-label.day {
      margin: 0 $space-one-quarter 0 0;
      font-weight: bold;
    }

    &-slots {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;

      .time {
        margin: 0 $space-one-quarter 0 0;

        &:last-of-type {
          margin: 0;

          span {
            display: none;
          }
        }
      }
    }
  }
}
  • URL: /components/raw/hours/hours.scss
  • Filesystem Path: bits/04-components/org_unit_and_services/hours/hours.scss
  • Size: 464 Bytes

Display the Org Unit - Hours.