diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml new file mode 100644 index 0000000..3577762 --- /dev/null +++ b/.idea/jsLibraryMappings.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/skolehjem/public/fonts/TitilliumWeb-Bold.ttf b/skolehjem/public/fonts/TitilliumWeb-Bold.ttf new file mode 100644 index 0000000..b51a4d6 Binary files /dev/null and b/skolehjem/public/fonts/TitilliumWeb-Bold.ttf differ diff --git a/skolehjem/public/fonts/TitilliumWeb-Regular.ttf b/skolehjem/public/fonts/TitilliumWeb-Regular.ttf new file mode 100644 index 0000000..a54ad4b Binary files /dev/null and b/skolehjem/public/fonts/TitilliumWeb-Regular.ttf differ diff --git a/skolehjem/public/fonts/TitilliumWeb-SemiBold.ttf b/skolehjem/public/fonts/TitilliumWeb-SemiBold.ttf new file mode 100644 index 0000000..49109f8 Binary files /dev/null and b/skolehjem/public/fonts/TitilliumWeb-SemiBold.ttf differ diff --git a/skolehjem/public/images/icons/Aktiviteter.svg b/skolehjem/public/images/icons/Aktiviteter.svg new file mode 100644 index 0000000..1984302 --- /dev/null +++ b/skolehjem/public/images/icons/Aktiviteter.svg @@ -0,0 +1 @@ +Artboard 3 \ No newline at end of file diff --git a/skolehjem/public/images/icons/Galleri.svg b/skolehjem/public/images/icons/Galleri.svg new file mode 100644 index 0000000..3bae6f2 --- /dev/null +++ b/skolehjem/public/images/icons/Galleri.svg @@ -0,0 +1 @@ +Artboard 6 \ No newline at end of file diff --git a/skolehjem/public/images/icons/Kontoret.svg b/skolehjem/public/images/icons/Kontoret.svg new file mode 100644 index 0000000..20c70b6 --- /dev/null +++ b/skolehjem/public/images/icons/Kontoret.svg @@ -0,0 +1 @@ +Artboard 8 \ No newline at end of file diff --git a/skolehjem/public/images/icons/Menuplan.svg b/skolehjem/public/images/icons/Menuplan.svg new file mode 100644 index 0000000..5fdc5a0 --- /dev/null +++ b/skolehjem/public/images/icons/Menuplan.svg @@ -0,0 +1 @@ +Artboard 2 \ No newline at end of file diff --git a/skolehjem/public/images/icons/Vagttelefon-hvid.svg b/skolehjem/public/images/icons/Vagttelefon-hvid.svg new file mode 100644 index 0000000..ad8fbd1 --- /dev/null +++ b/skolehjem/public/images/icons/Vagttelefon-hvid.svg @@ -0,0 +1 @@ +Artboard 9 diff --git a/skolehjem/public/images/icons/Vagttelefon-normal.svg b/skolehjem/public/images/icons/Vagttelefon-normal.svg new file mode 100644 index 0000000..2c2ceb6 --- /dev/null +++ b/skolehjem/public/images/icons/Vagttelefon-normal.svg @@ -0,0 +1 @@ +Artboard 9 diff --git a/skolehjem/public/images/icons/Vaske booking liste.svg b/skolehjem/public/images/icons/Vaske booking liste.svg new file mode 100644 index 0000000..08ca341 --- /dev/null +++ b/skolehjem/public/images/icons/Vaske booking liste.svg @@ -0,0 +1 @@ +Artboard 4 \ No newline at end of file diff --git a/skolehjem/public/images/logos/Logo-hvid.svg b/skolehjem/public/images/logos/Logo-hvid.svg new file mode 100644 index 0000000..c143f1c --- /dev/null +++ b/skolehjem/public/images/logos/Logo-hvid.svg @@ -0,0 +1 @@ +Logo-hvid \ No newline at end of file diff --git a/skolehjem/public/Logo-normal.svg b/skolehjem/public/images/logos/Logo-normal.svg similarity index 100% rename from skolehjem/public/Logo-normal.svg rename to skolehjem/public/images/logos/Logo-normal.svg diff --git a/skolehjem/resources/js/app.js b/skolehjem/resources/js/app.js index 91c4dcf..b682fbf 100644 --- a/skolehjem/resources/js/app.js +++ b/skolehjem/resources/js/app.js @@ -5,6 +5,8 @@ */ require('./bootstrap'); +require('./navmenu/menu'); +require('./date'); // window.Vue = require('vue'); diff --git a/skolehjem/resources/js/date.js b/skolehjem/resources/js/date.js new file mode 100644 index 0000000..2e93d12 --- /dev/null +++ b/skolehjem/resources/js/date.js @@ -0,0 +1,11 @@ +Date.prototype.getWeek = function() { + var date = new Date(this.getTime()); + date.setHours(0, 0, 0, 0); + // Thursday in current week decides the year. + date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7); + // January 4 is always in week 1. + var week1 = new Date(date.getFullYear(), 0, 4); + // Adjust to Thursday in week 1 and count number of weeks from date to week1. + return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 + - 3 + (week1.getDay() + 6) % 7) / 7); +} diff --git a/skolehjem/resources/js/menuplan/menuplan.js b/skolehjem/resources/js/menuplan/menuplan.js new file mode 100644 index 0000000..9a3d225 --- /dev/null +++ b/skolehjem/resources/js/menuplan/menuplan.js @@ -0,0 +1,15 @@ +document.addEventListener("DOMContentLoaded", function(){ + // Handler when the DOM is fully loaded + start(); +}); + +function start() { + updateWeek(); +} + +function updateWeek() { + var elm = document.getElementById('week'); + var date = new Date(); + + elm.innerHTML = "Uge " + date.getWeek(); +} diff --git a/skolehjem/resources/js/navmenu/menu.js b/skolehjem/resources/js/navmenu/menu.js new file mode 100644 index 0000000..b5f5012 --- /dev/null +++ b/skolehjem/resources/js/navmenu/menu.js @@ -0,0 +1,37 @@ +document.addEventListener("DOMContentLoaded", function(){ + // Handler when the DOM is fully loaded + start(); +}); + +function start() { + document.getElementById ('toggle').addEventListener ('click', toggleMenu, false); +} + +function toggleMenu() { + var buttonElement = document.getElementById('menuIcon'); + + var htmlElement = document.getElementsByTagName('html')[0]; + var logoElement = document.getElementById('sdeLogo'); + var mainElement = document.getElementsByTagName('main')[0]; + + var menu = document.getElementById('menu'); + + if(buttonElement.alt === '-') + { + htmlElement.style.backgroundColor = 'rgb(0, 120, 138)'; + logoElement.src = '/images/logos/Logo-hvid.svg'; + menu.classList.remove('d-none'); + mainElement.classList.add('d-none'); + + buttonElement.alt = 'X'; + } + else + { + htmlElement.style.backgroundColor = 'rgb(255, 255, 255)'; + logoElement.src = '/images/logos/Logo-normal.svg'; + menu.classList.add('d-none'); + mainElement.classList.remove('d-none'); + + buttonElement.alt = '-'; + } +} diff --git a/skolehjem/resources/sass/_checkboxes.scss b/skolehjem/resources/sass/_checkboxes.scss new file mode 100644 index 0000000..59a1fc8 --- /dev/null +++ b/skolehjem/resources/sass/_checkboxes.scss @@ -0,0 +1,119 @@ +.toggle{ + --uiToggleSize: var(--toggleSize, 20px); + --uiToggleIndent: var(--toggleIndent, .4em); + --uiToggleBorderWidth: var(--toggleBorderWidth, 2px); + --uiToggleColor: var(--toggleColor, #000); + --uiToggleDisabledColor: var(--toggleDisabledColor, #868e96); + --uiToggleBgColor: var(--toggleBgColor, #fff); + --uiToggleArrowWidth: var(--toggleArrowWidth, 2px); + --uiToggleArrowColor: var(--toggleArrowColor, #fff); + + margin-bottom: 1.5rem; + + display: inline-block; + position: relative; +} +.toggle__input{ + position: absolute; + left: -99999px; +} +.toggle__label{ + display: inline-flex; + min-height: var(--uiToggleSize); + padding-left: calc(var(--uiToggleSize) + var(--uiToggleIndent)); +} +.toggle__input:not(:disabled) ~ .toggle__label{ + cursor: pointer; +} +.toggle__label::before, +.toggle__label::after{ + content: ""; + box-sizing: border-box; + width: 1em; + height: 1em; + font-size: var(--uiToggleSize); + position: absolute; + left: 0; + top: 0; +} +.toggle__label:before{ + border: var(--uiToggleBorderWidth) solid var(--uiToggleColor); + z-index: 2; +} +.toggle__input:disabled ~ .toggle__label::before{ + border-color: var(--uiToggleDisabledColor); +} +.toggle__input:focus ~ .toggle__label::before{ + box-shadow: 0 0 0 2px var(--uiToggleBgColor), 0 0 0 4px var(--uiToggleColor); +} +.toggle__input:not(:disabled):checked:focus ~ .toggle__label::after{ + box-shadow: 0 0 0 2px var(--uiToggleBgColor), 0 0 0 4px var(--uiToggleColor); +} +.toggle__input:not(:disabled) ~ .toggle__label::after{ + background-color: var(--uiToggleColor); + opacity: 0; +} +.toggle__input:not(:disabled):checked ~ .toggle__label::after{ + opacity: 1; +} +.toggle__text{ + margin-top: auto; + margin-bottom: auto; +} +.toggle__text::before{ + content: ""; + box-sizing: border-box; + width: 0; + height: 0; + font-size: var(--uiToggleSize); + + border-left-width: 0; + border-bottom-width: 0; + border-left-style: solid; + border-bottom-style: solid; + border-color: var(--uiToggleArrowColor); + + position: absolute; + top: .5428em; + left: .2em; + z-index: 3; + + transform-origin: left top; + transform: rotate(-40deg) skew(10deg); +} +.toggle__input:not(:disabled):checked ~ .toggle__label .toggle__text::before{ + width: .5em; + height: .25em; + border-left-width: var(--uiToggleArrowWidth); + border-bottom-width: var(--uiToggleArrowWidth); + will-change: width, height; + transition: width .1s ease-out .2s, height .2s ease-out; + margin-top: 3px; +} +.toggle__input:disabled ~ .toggle__label{ + opacity: .24; + cursor: not-allowed; +} +.toggle__label::before, +.toggle__label::after{ + border: 2px solid; + border-color: white; +} +.toggle__input:not(:disabled) ~ .toggle__label::before, +.toggle__input:not(:disabled) ~ .toggle__label::after{ + opacity: 1; + transform-origin: center center; + margin-top: 3px; +} +.toggle__text::before{ + opacity: 0; +} +.toggle__input:not(:disabled):checked ~ .toggle__label .toggle__text::before{ + opacity: 1; + transition: opacity .1s ease-out .3s, width .1s ease-out .5s, height .2s ease-out .3s; +} +.toggle{ + --toggleColor: transparent; + --toggleBgColor: transparent; + --toggleSize: 1.25rem; +} diff --git a/skolehjem/resources/sass/_default.scss b/skolehjem/resources/sass/_default.scss new file mode 100644 index 0000000..98e74fb --- /dev/null +++ b/skolehjem/resources/sass/_default.scss @@ -0,0 +1,76 @@ +* { + font-family: $font-family-sans-serif; +} + +html, body { + width: 100%; + margin: 0; + height: 100%; +} + +::placeholder { + opacity: 1; +} + +a { + color: #000000; + text-decoration: none; +} + + +// Mobile +@media only screen +and (max-width : 900px) +{ + main { + max-width: 460px; + display: flex; + flex-direction: column; + justify-content: center; + margin: auto; + padding: 0 1.25rem 0 1.25rem; + } + + .brand { + padding: 0 1rem 0 1rem; + margin: 7rem 0 5rem 0; + } + + header, #menu { + padding: 1.25rem 1.75rem 0 1.75rem; + } + + #menu { + padding-top: 4rem; + } + + #menu > a { + color: white; + font-size: 8vw; + font-weight: 600; + display: flex; + align-items: center; + margin-bottom: 1.5rem; + } + + #menu > a > img { + height: 1em; + margin-right: 8px; + } + + h1 { + font-size: 12vw; + } + + h3 { + font-size: 8vw; + } + + span { + font-size: 5vw; + } + + p { + font-size: 4vw; + } +} diff --git a/skolehjem/resources/sass/_displays.scss b/skolehjem/resources/sass/_displays.scss new file mode 100644 index 0000000..b5167bd --- /dev/null +++ b/skolehjem/resources/sass/_displays.scss @@ -0,0 +1,21 @@ +.d-flex { + display: flex; +} + +.d-none { + display: none !important; +} + +.row { + display: flex; + flex-direction: row; +} + +.align-items-center { + align-items: center; +} + +.col { + display: flex; + flex-direction: column; +} diff --git a/skolehjem/resources/sass/_forms.scss b/skolehjem/resources/sass/_forms.scss index ad3ab61..239469a 100644 --- a/skolehjem/resources/sass/_forms.scss +++ b/skolehjem/resources/sass/_forms.scss @@ -1,23 +1,54 @@ -input[type=text], select, textarea { - width: 100%; - padding: 12px; - border: 1px solid #CCC; - border-radius: 4px; - box-sizing: border-box; - resize: vertical; -} +/* Mobile */ +@media only screen +and (max-width : 900px) +{ + form { + max-width: 100%; + padding: 0 .45rem 0 .45rem; + display: flex; + flex-direction: column; + justify-content: center; + } -label { - padding: 12px 12px 12px 0; - display: inline-block; -} + input[type="email"], input[type="password"] { + border: none; + border-bottom: white solid 2px; + background-color: transparent; + font-size: 1rem; + color: rgba(255,255,255,1); + line-height: 2rem; + margin-bottom: 1rem; + } + + .btn { + border: 0; + border-radius: 4px; + padding: .75rem; + cursor: pointer; + font-weight: 700; + font-size: 1.05rem; + background-color: white; + color: $sde-black-80; + margin-bottom: .5rem; + } + + .btn-dark { + color: white; + background-color: $sde-black-80; + } + + .btn-sde-blue { + color: white; + background-color: $sde-blue; + } + + .btn-disabled { + color: white; + background-color: $sde-black-20; + } + + .form-inline { + display: inline-flex; + } -input[type=submit] { - background-color: #4CAF50; - color: white; - padding: 12px 20px; - border: none; - border-radius: 4px; - cursor: pointer; - float: right; } diff --git a/skolehjem/resources/sass/_margins.scss b/skolehjem/resources/sass/_margins.scss new file mode 100644 index 0000000..21c2481 --- /dev/null +++ b/skolehjem/resources/sass/_margins.scss @@ -0,0 +1,67 @@ +.m-auto { + margin: auto; +} + +.mr-auto { + margin-right: auto; +} + +.ml-auto { + margin-left: auto; +} + +.mt-auto { + margin-top: auto; +} + +.mb-auto { + margin-bottom: auto; +} + +.ml-0 { + margin-left: 0; +} + +.mr-0 { + margin-right: 0; +} + +.mb-0 { + margin-bottom: 0; +} + +.mt-0 { + margin-top: 0; +} + +.ml-2 { + margin-left: 3rem; +} + +.mr-2 { + margin-right: 3rem; +} + +.mb-2 { + margin-bottom: 3rem; +} + +.mt-2 { + margin-top: 3rem; +} + +.ml-3 { + margin-left: 3rem; +} + +.mr-3 { + margin-right: 4.75rem; +} + +.mb-3 { + margin-bottom: 4.75rem; +} + +.mt-3 { + margin-top: 4.75rem; +} diff --git a/skolehjem/resources/sass/_sizes.scss b/skolehjem/resources/sass/_sizes.scss new file mode 100644 index 0000000..7cba17b --- /dev/null +++ b/skolehjem/resources/sass/_sizes.scss @@ -0,0 +1,23 @@ +.w-100 { + width: 100%; +} + +.w-75 { + width: 75%; +} + +.w-50 { + width: 50%; +} + +.w-25 { + width: 25%; +} + +.min-height-100 { + min-height: 100%; +} + +.bg-sde-blue { + background-color: $sde-blue; +} diff --git a/skolehjem/resources/sass/_texts.scss b/skolehjem/resources/sass/_texts.scss new file mode 100644 index 0000000..bea82f5 --- /dev/null +++ b/skolehjem/resources/sass/_texts.scss @@ -0,0 +1,43 @@ +.text-white { + color: #ffffff; +} + +.text-center { + text-align: center; +} + +.sde-blue { + color: $sde-blue; +} + +.sde-black-80 { + color: $sde-black-80; +} + +.sde-black-20 { + color: $sde-black-20; +} + +.regular { + font-weight: 400; +} + +.semi-bold { + font-weight: 600; +} + +.bold { + font-weight: 700; +} + +.toggle__label.sde-blue::before { + border-color: $sde-blue; +} + +.sde-blue.toggle__text::before { + border-color: $sde-blue; +} + +span.toggle__text.sde-blue { + font-size: 5vw; +} diff --git a/skolehjem/resources/sass/_variables.scss b/skolehjem/resources/sass/_variables.scss index 283d38b..7088063 100644 --- a/skolehjem/resources/sass/_variables.scss +++ b/skolehjem/resources/sass/_variables.scss @@ -2,7 +2,7 @@ $body-bg: #f8fafc; // Typography -$font-family-sans-serif: 'Nunito', sans-serif; +$font-family-sans-serif: 'Titillium Web'; $font-size-base: 0.9rem; $line-height-base: 1.6; @@ -18,4 +18,11 @@ $green: #38c172; $teal: #4dc0b5; $cyan: #6cb2eb; -$sde-blue: #00788A; +// SDE Colors +$sde-blue: rgb(0, 120, 138); + +$sde-black-100: rgb(0, 0, 0); +$sde-black-80: rgb(51, 51, 51); +$sde-black-60: rgb(102, 102, 102); +$sde-black-40: rgb(153, 153, 153); +$sde-black-20: rgb(204, 204, 204); diff --git a/skolehjem/resources/sass/app.scss b/skolehjem/resources/sass/app.scss index 0d9b616..b935aea 100644 --- a/skolehjem/resources/sass/app.scss +++ b/skolehjem/resources/sass/app.scss @@ -1,8 +1,43 @@ // Fonts -@import url('https://fonts.googleapis.com/css?family=Nunito'); +@font-face { + font-family: 'Titillium Web'; + src: url('/fonts/TitilliumWeb-Regular.ttf'); + font-weight: normal; +} +@font-face { + font-family: 'Titillium Web'; + src: url('/fonts/TitilliumWeb-SemiBold.ttf'); + font-weight: 600; +} +@font-face { + font-family: 'Titillium Web'; + src: url('/fonts/TitilliumWeb-Bold.ttf'); + font-weight: 700; +} // Variables @import 'variables'; +// Defaults +@import "default"; + +// Forms +@import "forms"; + +// Displays +@import "displays"; + +// Texts +@import "texts"; + +// Margins +@import "margins"; + +// Sizes +@import "sizes"; + +// Checkboxes +@import "checkboxes"; + // Bootstrap //@import '~bootstrap/scss/bootstrap'; diff --git a/skolehjem/resources/views/layout/base.blade.php b/skolehjem/resources/views/layout/base.blade.php index 5d3009b..ca32441 100644 --- a/skolehjem/resources/views/layout/base.blade.php +++ b/skolehjem/resources/views/layout/base.blade.php @@ -1,13 +1,16 @@ - + @yield("title") - + + + @yield("header") @yield("content") + @yield("scripts") diff --git a/skolehjem/resources/views/layout/header.blade.php b/skolehjem/resources/views/layout/header.blade.php new file mode 100644 index 0000000..73a27d1 --- /dev/null +++ b/skolehjem/resources/views/layout/header.blade.php @@ -0,0 +1,34 @@ +@section("header") +
+ + + - + +
+ +@endsection diff --git a/skolehjem/resources/views/menuplan/index.blade.php b/skolehjem/resources/views/menuplan/index.blade.php new file mode 100644 index 0000000..1883ed5 --- /dev/null +++ b/skolehjem/resources/views/menuplan/index.blade.php @@ -0,0 +1,42 @@ +@extends("layout.base") +@extends("layout.header") +@section("title") + Menuplan +@endsection + +@section("content") +
+

Menuplan

+ Uge x +
+
+

Mandag

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales pulvinar congue aenean suspendisse.

+
+
+

Tirsdag

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales pulvinar congue aenean suspendisse.

+
+
+

Onsdag

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales pulvinar congue aenean suspendisse.

+
+
+

Torsdag

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales pulvinar congue aenean suspendisse.

+
+
+

Fredag

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales pulvinar congue aenean suspendisse.

+
+
+

Lørdag

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales pulvinar congue aenean suspendisse.

+
+
+

Søndag

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales pulvinar congue aenean suspendisse.

+
+
+
+@endsection diff --git a/skolehjem/resources/views/user/login.blade.php b/skolehjem/resources/views/user/login.blade.php new file mode 100644 index 0000000..4d2ec0d --- /dev/null +++ b/skolehjem/resources/views/user/login.blade.php @@ -0,0 +1,26 @@ +@extends("layout.base") + +@section("title") + Login +@endsection + +@section("content") +
+
+ Syddansk Erhvervsskole +
+
+ + + + + +
+ Forgot password? +
+@endsection diff --git a/skolehjem/resources/views/user/register.blade.php b/skolehjem/resources/views/user/register.blade.php new file mode 100644 index 0000000..dd917ab --- /dev/null +++ b/skolehjem/resources/views/user/register.blade.php @@ -0,0 +1,20 @@ +@extends("layout.base") + +@section("title") + Register +@endsection + +@section("content") +
+
+ Syddansk Erhvervsskole +
+
+ + + + + +
+
+@endsection diff --git a/skolehjem/resources/views/vagttelefon/index.blade.php b/skolehjem/resources/views/vagttelefon/index.blade.php new file mode 100644 index 0000000..6ebc38e --- /dev/null +++ b/skolehjem/resources/views/vagttelefon/index.blade.php @@ -0,0 +1,48 @@ +@extends("layout.base") +@extends("layout.header") +@section("title") + Menuplan +@endsection + +@section("content") +
+ Vagttelefon +

Vagttelefon

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales pulvinar congue aenean suspendisse.

+ + +45 56 30 45 66 + Tilkald +
+@endsection + +@section("scripts") + +@endsection