4.3 - Expandable views

Introduction

expandable views

How it works

The application consist of two collapsable views: the filters view and the video view. Both are made with the checkbox hack. The bars consist of a checkbox label. When the label ( and thus the checkbox ) is checked the :checked CSS selector will be true and will move the panels to their correct positions. With a transition animation. Large benefit of the checkbox hack is that it will work without any JavaScript

.filters_overlay {
  background: var(--background-color);
  height: 100%;
  width: 100%;
  position: fixed;
  transition: all 2s ease-in-out;
  z-index: 2;
  top: -100vh;
}
#active-filters:checked + .filters_overlay {
  top: 84px;
}

.video_overlay {
  z-index: 2;
  background: var(--background-color);
  height: 100%;
  width: 100%;
  position: fixed;
  transition: all 2s ease-in-out;
  left: 100vw;
  top: 49px;
  display: flex;
  justify-content: space-around;
}
.video_video {
  width: 50%;
}