diff --git a/skolehjem/public/css/webapp.css b/skolehjem/public/css/webapp.css
index b5a841d..1697924 100644
--- a/skolehjem/public/css/webapp.css
+++ b/skolehjem/public/css/webapp.css
@@ -503,3 +503,303 @@ main {
}
}
+.mock-up-link {
+ display: none;
+}
+
+@media (min-width: 768px) {
+ .mock-up-link {
+ display: block;
+ }
+}
+
+.main-container-wrapper {
+ background-color: #F8FAFA;
+ min-width: 320px;
+ min-height: 568px;
+ max-width: 414px;
+ overflow-y: auto;
+}
+
+@media (min-width: 415px) {
+ .main-container-wrapper {
+ box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
+ margin: 24px auto;
+ }
+}
+
+.header__btn {
+ background-color: #00788a;
+ border: 2px solid #fff;
+ border-radius: 50%;
+ box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+ cursor: pointer;
+ height: 80px;
+ padding-top: 18px;
+ position: absolute;
+ top: -25px;
+ width: 80px;
+}
+
+.header__btn:hover,
+.header__btn:focus {
+ background: #005561;
+ transition: all 0.3s ease-in;
+ outline: none;
+}
+
+.header__btn .icon {
+ display: inline-block;
+}
+
+.header__btn--left {
+ left: -25px;
+ padding-left: 38px;
+ text-align: left;
+}
+
+.header__btn--right {
+ padding-right: 32px;
+ right: -25px;
+ text-align: right;
+}
+
+.calendar-container {
+ background-color: #fff;
+ padding: 16px;
+ margin-bottom: 24px;
+}
+
+.calendar-container__header {
+ display: flex;
+ justify-content: space-between;
+}
+
+.calendar-container__btn {
+ background: transparent;
+ border: 0;
+ cursor: pointer;
+ font-size: 16px;
+ outline: none;
+ color: #E9E8E8;
+}
+
+.calendar-container__btn:hover,
+.calendar-container__btn:focus {
+ color: #9FAAB7;
+ transition: all 0.3s ease-in;
+}
+
+.calendar-container__title {
+ color: #222741;
+ font-size: 20px;
+ font-weight: 700;
+}
+
+.calendar-table {
+ margin-top: 12px;
+ width: 100%;
+}
+
+.calendar-table__item {
+ border: 2px solid transparent;
+ border-radius: 50%;
+ color: #424588;
+ font-size: 12px;
+ font-weight: 700;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+}
+
+.calendar-table__item:hover {
+ background: RGBA(0, 120, 138, 0.6);
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ transition: 0.2s all ease-in;
+}
+
+.calendar-table__item:hover > span {
+ color: white;
+}
+
+.calendar-table__row {
+ display: flex;
+ justify-content: center;
+}
+
+.calendar-table__header {
+ border-bottom: 2px solid #F2F6F8;
+ margin-bottom: 4px;
+}
+
+.calendar-table__header .calendar-table__col {
+ display: inline-block;
+ color: #99A4AE;
+ font-size: 12px;
+ font-weight: 700;
+ padding: 12px 3px;
+ text-align: center;
+ text-transform: uppercase;
+ width: 40px;
+ height: 38px;
+}
+
+@media (min-width: 360px) {
+ .calendar-table__header .calendar-table__col {
+ width: 46px;
+ }
+}
+
+@media (min-width: 410px) {
+ .calendar-table__header .calendar-table__col {
+ width: 54px;
+ }
+}
+
+.calendar-table__body .calendar-table__col {
+ width: 40px;
+ height: 42px;
+ padding-bottom: 2px;
+}
+
+@media (min-width: 360px) {
+ .calendar-table__body .calendar-table__col {
+ width: 46px;
+ height: 48px;
+ }
+}
+
+@media (min-width: 410px) {
+ .calendar-table__body .calendar-table__col {
+ width: 54px;
+ height: 56px;
+ }
+}
+
+.calendar-table__today .calendar-table__item {
+ border-color: #FEFEFE;
+ background-color: #00788a;
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+}
+
+.calendar-table__event .calendar-table__item {
+ background-color: #00788a;
+ border-color: #FEFEFE;
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ color: #fff;
+}
+
+.calendar-table__event--long {
+ overflow-x: hidden;
+}
+
+.calendar-table__event--long .calendar-table__item {
+ border-radius: 0;
+ border-width: 2px 0;
+}
+
+.calendar-table__event--start .calendar-table__item {
+ border-left: 2px solid #fff;
+ border-radius: 50% 0 0 50%;
+}
+
+.calendar-table__event--start.calendar-table__col:last-child .calendar-table__item {
+ border-width: 2px;
+}
+
+.calendar-table__event--end .calendar-table__item {
+ border-right: 2px solid #fff;
+ border-radius: 0 50% 50% 0;
+}
+
+.calendar-table__event--end.calendar-table__col:first-child .calendar-table__item {
+ border-width: 2px;
+}
+
+.calendar-table__inactive .calendar-table__item {
+ color: #DCDCE3;
+ cursor: default;
+}
+
+.calendar-table__inactive .calendar-table__item:hover {
+ background: transparent;
+ box-shadow: none;
+}
+
+.calendar-table__inactive.calendar-table__event .calendar-table__item {
+ color: #fff;
+ opacity: 0.25;
+}
+
+.calendar-table__inactive.calendar-table__event .calendar-table__item:hover {
+ background: #00788a;
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+}
+
+.calendar-table__today > .calendar-table__item > span {
+ color: white;
+}
+
+.events-container {
+ padding: 0 15px;
+}
+
+.events__title {
+ color: #BEC1CA;
+ display: inline-block;
+ font-size: 14px;
+ font-weight: 600;
+ margin-bottom: 16px;
+}
+
+.events__tag {
+ background: #00788a;
+ border: 2px solid #FEFEFE;
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ border-radius: 20px;
+ color: #fff;
+ font-size: 10px;
+ font-weight: 600;
+ width: 60px;
+ margin-left: 16px;
+ padding: 5px 2px;
+ text-align: center;
+}
+
+.events__tag--highlighted {
+ background: #FDCA40;
+}
+
+.events__item {
+ background: #fff;
+ border-left: 8px solid #00788a;
+ border-radius: 2px;
+ box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
+ padding: 15px 16px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.events__item--left {
+ width: calc(100% - 76px);
+}
+
+.events__name {
+ font-size: 12px;
+ font-weight: 700;
+ color: #222741;
+ display: block;
+ margin-bottom: 6px;
+}
+
+.events__date {
+ font-size: 12px;
+ color: #9FAAB7;
+ display: inline-block;
+}
+
diff --git a/skolehjem/resources/js/navmenu/menu.js b/skolehjem/resources/js/navmenu/menu.js
index 06634aa..54305c4 100644
--- a/skolehjem/resources/js/navmenu/menu.js
+++ b/skolehjem/resources/js/navmenu/menu.js
@@ -12,6 +12,8 @@ function toggleMenu() {
var buttonElement = document.getElementById('menuIcon');
var htmlElement = document.getElementsByTagName('html')[0];
+ var headerElement = document.getElementsByTagName('header')[0];
+ var bodyElement = document.getElementsByTagName('body')[0];
var logoElement = document.getElementById('sdeLogo');
var mainElement = document.getElementsByTagName('main')[0];
@@ -20,6 +22,8 @@ function toggleMenu() {
if(buttonElement.alt === '-')
{
htmlElement.style.backgroundColor = 'rgb(0, 120, 138)';
+ bodyElement.style.backgroundColor = 'rgb(0, 120, 138)';
+ headerElement.style.backgroundColor = 'rgb(0, 120, 138)';
logoElement.src = '/images/logos/Logo-hvid.svg';
menu.classList.remove('d-none');
mainElement.classList.add('d-none');
@@ -29,6 +33,8 @@ function toggleMenu() {
else
{
htmlElement.style.backgroundColor = 'rgb(255, 255, 255)';
+ bodyElement.style.backgroundColor = 'rgb(255, 255, 255)';
+ headerElement.style.backgroundColor = 'rgb(255, 255, 255)';
logoElement.src = '/images/logos/Logo-normal.svg';
menu.classList.add('d-none');
mainElement.classList.remove('d-none');
diff --git a/skolehjem/resources/sass/webapp/_default.scss b/skolehjem/resources/sass/webapp/_default.scss
index 833f4ca..8c38155 100644
--- a/skolehjem/resources/sass/webapp/_default.scss
+++ b/skolehjem/resources/sass/webapp/_default.scss
@@ -63,3 +63,411 @@ and (max-width : 900px)
font-size: 4vw;
}
}
+
+
+//Don't mind me
+//Text
+$base__font-size: 16px;
+
+$font-family--montserrat: 'Montserrat', sans-serif;
+$font-family--primary : $font-family--montserrat;
+
+//Colors
+$white: #fff;
+$black: #222741;
+$gray: #99A4AE;
+$blue: #00788a;
+$yellow: #FDCA40;
+$green: #86D8C9;
+
+//Color Palette
+$palettes: (
+ gray-shades: (
+ darker: #9FAAB7,
+ base: #99A4AE,
+ light: #DCDCE3,
+ lighter: #BEC1CA,
+ lightest: #F2F6F8
+ )
+);
+
+// Color usages
+$main-background-color: #F8FAFA;
+$calendar-item-border: #FEFEFE;
+$calendar-item-text: #424588;
+$calendar-button-color: #E9E8E8;
+
+//Font size variables
+$lg-font-size: 20px;
+$default-font-size: 14px;
+$sm-font-size: 12px;
+$xsm-font-size: 10px;
+
+//Font weight variables
+$font-weight--bold: 700;
+$font-weight--semi-bold: 600;
+$font-weight--regular: 400;
+
+//Color Usage
+$primary-color: $blue;
+
+@function palette($palette, $shade: base){
+ @return map-get(map-get($palettes, $palette), $shade);
+}
+// Retrieved from https://github.com/sshikhrakar/Sass-Starter/
+// BEM(Block Element Modifier) Naming Convention
+// For Element
+// $element - Just the element name for the parent block (doesn't require the parent Block name)
+// @usage - `.Nav {@include e(item){...}}`
+@mixin e($element){
+ &__#{$element}{
+ @content;
+ }
+}
+
+// For Modifier
+// $modifier - Just the modifier name for the parent block or element
+// @usage - `.Nav {@include e(item) {@include m(active) {...}}}`
+@mixin m($modifier){
+ &--#{$modifier}{
+ @content;
+ }
+}
+
+// Media Query
+@mixin mq($break){
+ @if type-of($break) == 'number' {
+ @media(min-width: $break + 'px') {
+ @content;
+ }
+ }
+ @else {
+ @error "No value could be retrieved for '#{$break}'";
+ }
+}
+
+.mock-up-link {
+ display: none;
+
+ @include mq(768) {
+ display: block;
+ }
+}
+
+.main-container-wrapper {
+ background-color: $main-background-color;
+ min-width: 320px;
+ min-height: 568px;
+ max-width: 414px;
+ overflow-y: auto;
+
+ @include mq(415) {
+ -moz-box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
+ -webkit-box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
+ box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09);
+ margin: 24px auto;
+ }
+}
+
+.header {
+ @include e(btn) {
+ background-color: $primary-color;
+ border: 2px solid $white;
+ border-radius: 50%;
+ -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+ cursor: pointer;
+ height: 80px;
+ padding-top: 18px;
+ position: absolute;
+ top: -25px;
+ width: 80px;
+
+ &:hover,
+ &:focus {
+ background: darken($primary-color, 8%);
+ transition: all 0.3s ease-in;
+ outline: none;
+ }
+
+ .icon {
+ display: inline-block;
+ }
+
+ @include m(left) {
+ left: -25px;
+ padding-left: 38px;
+ text-align: left;
+ }
+
+ @include m(right) {
+ padding-right: 32px;
+ right: -25px;
+ text-align: right;
+ }
+ }
+}
+
+.calendar-container {
+ background-color: $white;
+ padding: 16px;
+ margin-bottom: 24px;
+
+ @include e(header) {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ @include e(btn) {
+ background: transparent;
+ border: 0;
+ cursor: pointer;
+ font-size: 16px;
+ outline: none;
+ color: $calendar-button-color;
+
+ &:hover,
+ &:focus {
+ color: palette(gray-shades, darker);
+ transition: all 0.3s ease-in;
+ }
+ }
+
+ @include e(title) {
+ color: $black;
+ font-size: $lg-font-size;
+ font-weight: $font-weight--bold;
+ }
+}
+
+.calendar-table {
+ margin-top: 12px;
+ width: 100%;
+
+ @include e(item) {
+ border: 2px solid transparent;
+ border-radius: 50%;
+ color: $calendar-item-text;
+ font-size: $sm-font-size;
+ font-weight: $font-weight--bold;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ &:hover {
+ background: RGBA(0, 120, 138, 0.6);
+ -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ transition: 0.2s all ease-in;
+ }
+
+ &:hover > span {
+ color: white;
+ }
+ }
+
+ @include e(row) {
+ display: flex;
+ justify-content: center;
+ }
+
+ @include e(header) {
+ border-bottom: 2px solid palette(gray-shades, lightest);
+ margin-bottom: 4px;
+
+ .calendar-table__col {
+ display: inline-block;
+ color: $gray;
+ font-size: $sm-font-size;
+ font-weight: $font-weight--bold;
+ padding: 12px 3px;
+ text-align: center;
+ text-transform: uppercase;
+ width: 40px;
+ height: 38px;
+
+ @include mq(360) {
+ width: 46px;
+ }
+
+ @include mq(410) {
+ width: 54px;
+ }
+ }
+ }
+
+ @include e(body) {
+ .calendar-table__col {
+ width: 40px;
+ height: 42px;
+ padding-bottom: 2px;
+
+ @include mq(360) {
+ width: 46px;
+ height: 48px;
+ }
+
+ @include mq(410) {
+ width: 54px;
+ height: 56px;
+ }
+ }
+ }
+
+ @include e(today) {
+ .calendar-table__item {
+ border-color: $calendar-item-border;
+ background-color: $blue;
+ -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ }
+ }
+
+ @include e(event) {
+ .calendar-table__item {
+ background-color: $blue;
+ border-color: $calendar-item-border;
+ -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ color: $white;
+ }
+
+ @include m(long) {
+ overflow-x: hidden;
+
+ .calendar-table__item {
+ border-radius: 0;
+ border-width: 2px 0;
+ }
+ }
+
+ @include m(start) {
+ .calendar-table__item {
+ border-left: 2px solid $white;
+ border-radius: 50% 0 0 50%;
+ }
+
+ &.calendar-table__col:last-child {
+ .calendar-table__item {
+ border-width: 2px;
+ }
+ }
+ }
+
+ @include m(end) {
+ .calendar-table__item {
+ border-right: 2px solid $white;
+ border-radius: 0 50% 50% 0;
+ }
+
+ &.calendar-table__col:first-child {
+ .calendar-table__item {
+ border-width: 2px;
+ }
+ }
+ }
+ }
+
+ @include e(inactive) {
+ .calendar-table__item {
+ color: palette(gray-shades, light);
+ cursor: default;
+
+ &:hover {
+ background: transparent;
+ box-shadow: none;
+ }
+ }
+
+ &.calendar-table__event {
+ .calendar-table__item {
+ color: $white;
+ opacity: 0.25;
+
+ &:hover {
+ background: $blue;
+ -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ }
+ }
+ }
+ }
+}
+
+.calendar-table__today > .calendar-table__item > span {
+ color: white;
+}
+
+.events-container {
+ padding: 0 15px;
+}
+
+.events {
+ @include e(title) {
+ color: palette(gray-shades, lighter);
+ display: inline-block;
+ font-size: $default-font-size;
+ font-weight: $font-weight--semi-bold;
+ margin-bottom: 16px;
+ }
+
+ @include e(tag) {
+ background: $blue;
+ border: 2px solid $calendar-item-border;
+ -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
+ border-radius: 20px;
+ color: $white;
+ font-size: $xsm-font-size;
+ font-weight: $font-weight--semi-bold;
+ width: 60px;
+ margin-left: 16px;
+ padding: 5px 2px;
+ text-align: center;
+
+ @include m(highlighted) {
+ background: $yellow;
+ }
+ }
+
+ @include e(item) {
+ background: $white;
+ border-left: 8px solid $primary-color;
+ border-radius: 2px;
+ -moz-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
+ box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
+ padding: 15px 16px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 16px;
+
+ @include m(left) {
+ width: calc(100% - 76px);
+ }
+ }
+
+ @include e(name) {
+ font-size: $sm-font-size;
+ font-weight: $font-weight--bold;
+ color: $black;
+ display: block;
+ margin-bottom: 6px;
+ }
+
+ @include e(date) {
+ font-size: $sm-font-size;
+ color: palette(gray-shades, darker);
+ display: inline-block;
+ }
+}
diff --git a/skolehjem/resources/views/index.blade.php b/skolehjem/resources/views/index.blade.php
index d83617f..0c0c62a 100644
--- a/skolehjem/resources/views/index.blade.php
+++ b/skolehjem/resources/views/index.blade.php
@@ -12,12 +12,15 @@
{{--Vagttelefon--}}
{{--@extends("webapp.vagttelefon.index")--}}
+{{--Booking Liste--}}
+{{----}}@extends("webapp.booking.index")
+
{{----}}
{{------Admin Panel
{{----}}
{{--Index--}}
-{{----}}@extends("admin.index")
+{{--@extends("admin.index")--}}
{{--Create User--}}
{{--@extends("admin.users.create")--}}
diff --git a/skolehjem/resources/views/webapp/booking/index.blade.php b/skolehjem/resources/views/webapp/booking/index.blade.php
new file mode 100644
index 0000000..608651d
--- /dev/null
+++ b/skolehjem/resources/views/webapp/booking/index.blade.php
@@ -0,0 +1,245 @@
+@extends("webapp.layout.base")
+@extends("webapp.layout.header")
+@section("title")
+ Booking Liste
+@endsection
+
+@section("content")
+ <main>
+ <h1 class="text-center sde-blue mb-0">Booking Liste</h1>
+ <div class="col w-100 mt-auto">
+ <div class="calendar-container">
+ <div class="calendar-container__header">
+ <button class="calendar-container__btn calendar-container__btn--left" title="Previous">
+ <i class="icon ion-ios-arrow-back"></i>
+ </button>
+ <h2 class="calendar-container__title">{Måned} {År}</h2>
+ <button class="calendar-container__btn calendar-container__btn--right" title="Next">
+ <i class="icon ion-ios-arrow-forward"></i>
+ </button>
+ </div>
+ <div class="calendar-container__body">
+ <div class="calendar-table">
+ <div class="calendar-table__header">
+ <div class="calendar-table__row">
+ <div class="calendar-table__col">Man</div>
+ <div class="calendar-table__col">Tir</div>
+ <div class="calendar-table__col">Ons</div>
+ <div class="calendar-table__col">Tor</div>
+ <div class="calendar-table__col">Fre</div>
+ <div class="calendar-table__col">Lør</div>
+ <div class="calendar-table__col">Søn</div>
+ </div>
+ </div>
+ <div class="calendar-table__body">
+ <div class="calendar-table__row">
+ <div class="calendar-table__col calendar-table__inactive">
+ <div class="calendar-table__item">
+ <span>30</span>
+ </div>
+ </div>
+ <div class="calendar-table__col calendar-table__today">
+ <div class="calendar-table__item">
+ <span>1</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>2</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>3</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>4</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>5</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>6</span>
+ </div>
+ </div>
+ </div>
+ <div class="calendar-table__row">
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>7</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>8</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>9</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>10</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>11</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>12</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>13</span>
+ </div>
+ </div>
+ </div>
+ <div class="calendar-table__row">
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>14</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>15</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>16</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>17</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>18</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>19</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>20</span>
+ </div>
+ </div>
+ </div>
+ <div class="calendar-table__row">
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>21</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>22</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>23</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>24</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>25</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>26</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>27</span>
+ </div>
+ </div>
+ </div>
+ <div class="calendar-table__row">
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>28</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>29</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>30</span>
+ </div>
+ </div>
+ <div class="calendar-table__col">
+ <div class="calendar-table__item">
+ <span>31</span>
+ </div>
+ </div>
+ <div class="calendar-table__col calendar-table__inactive">
+ <div class="calendar-table__item">
+ <span>1</span>
+ </div>
+ </div>
+ <div class="calendar-table__col calendar-table__inactive">
+ <div class="calendar-table__item">
+ <span>2</span>
+ </div>
+ </div>
+ <div class="calendar-table__col calendar-table__inactive">
+ <div class="calendar-table__item">
+ <span>3</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="events-container">
+ <span class="events__title">Tider</span>
+ <ul class="events__list">
+ <li class="events__item">
+ <div class="events__item--left">
+ <span class="events__name">Vaskemaskine Tid</span>
+ <span class="events__date">{Dato}</span>
+ </div>
+ <span class="events__tag">Book</span>
+ </li>
+ <li class="events__item">
+ <div class="events__item--left">
+ <span class="events__name">Vaskemaskine Tid</span>
+ <span class="events__date">{Dato}</span>
+ </div>
+ <span class="events__tag">Book</span>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </main>
+@endsection