From d5ddc0901c49404764c00025688bcac1bd18754f Mon Sep 17 00:00:00 2001 From: frederikpyt Date: Tue, 23 Jun 2020 12:01:27 +0200 Subject: [PATCH] Created Calender --- skolehjem/public/css/webapp.css | 300 +++++++++++++ skolehjem/resources/js/navmenu/menu.js | 6 + skolehjem/resources/sass/webapp/_default.scss | 408 ++++++++++++++++++ skolehjem/resources/views/index.blade.php | 5 +- .../views/webapp/booking/index.blade.php | 245 +++++++++++ 5 files changed, 963 insertions(+), 1 deletion(-) create mode 100644 skolehjem/resources/views/webapp/booking/index.blade.php 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") +
+

Booking Liste

+
+
+
+ +

{Måned} {År}

+ +
+
+
+
+
+
Man
+
Tir
+
Ons
+
Tor
+
Fre
+
Lør
+
Søn
+
+
+
+
+
+
+ 30 +
+
+
+
+ 1 +
+
+
+
+ 2 +
+
+
+
+ 3 +
+
+
+
+ 4 +
+
+
+
+ 5 +
+
+
+
+ 6 +
+
+
+
+
+
+ 7 +
+
+
+
+ 8 +
+
+
+
+ 9 +
+
+
+
+ 10 +
+
+
+
+ 11 +
+
+
+
+ 12 +
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+ 15 +
+
+
+
+ 16 +
+
+
+
+ 17 +
+
+
+
+ 18 +
+
+
+
+ 19 +
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+ 22 +
+
+
+
+ 23 +
+
+
+
+ 24 +
+
+
+
+ 25 +
+
+
+
+ 26 +
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+ 29 +
+
+
+
+ 30 +
+
+
+
+ 31 +
+
+
+
+ 1 +
+
+
+
+ 2 +
+
+
+
+ 3 +
+
+
+
+
+
+
+
+ Tider +
    +
  • +
    + Vaskemaskine Tid + {Dato} +
    + Book +
    • +
  • +
    + Vaskemaskine Tid + {Dato} +
    + Book +
    • +
+
+
+
+@endsection