From c0a4272fcc15da322b3b63fb0a3e211e786504e0 Mon Sep 17 00:00:00 2001 From: TrueKuehli Date: Sun, 30 Sep 2018 16:04:18 +0200 Subject: Split up SASS into multiple files This will make adding pages much more easy, as some elements can be reused. --- WebInterface/NodeJSServer/src/style/index.scss | 435 +------------------------ 1 file changed, 10 insertions(+), 425 deletions(-) (limited to 'WebInterface/NodeJSServer/src/style/index.scss') diff --git a/WebInterface/NodeJSServer/src/style/index.scss b/WebInterface/NodeJSServer/src/style/index.scss index b5ca607..da347cb 100644 --- a/WebInterface/NodeJSServer/src/style/index.scss +++ b/WebInterface/NodeJSServer/src/style/index.scss @@ -1,425 +1,10 @@ -@import 'partials/_colors.scss'; - -html,body { - height: 100vh; - margin: 0; - padding: 0; - font-family: 'Roboto', sans-serif; - font-display: swap; - overflow: hidden; - background-color: $primary; - color: $primary-text; - user-select: none; -} - -body { - display: flex; - flex-direction: column; - background-color: $secondary; - position: relative; -} - -.btn { - border: none; - border-radius: 4px; - padding: 8px; - margin: 0; - font-size: 1rem; - font-family: 'Roboto Condensed', sans-serif; - font-weight: bold; - display: inline-block; - background-color: $secondary; - color: $secondary-text; - text-transform: uppercase; - box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); - cursor: pointer; - letter-spacing: 0.25rem; - - background-position: center; - transition: background 800ms ease, box-shadow 100ms ease, color 200ms ease; - - &:hover { - background: $secondary-dark radial-gradient(circle, transparent 1%, $secondary-dark 1%) center/15000%; - box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); - } - - &:active { - background-color: $secondary-light; - background-size: 100%; - box-shadow: 0 1px 3px rgba(0,0,0,0.12); - transition: background 0s, box-shadow 0s; - } - - &:disabled { - color: $secondary-text-disabled; - background: $secondary-disabled; - box-shadow: none; - transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease; - } -} - -.text-btn { - padding: 8px; - margin: 0; - font-size: 1rem; - font-family: 'Roboto Condensed', sans-serif; - font-weight: bold; - display: inline-block; - color: $secondary-text; - background-color: rgba(0, 0, 0, 0); - text-transform: uppercase; - box-shadow: none; - - background-position: center; - transition: background 800ms ease, box-shadow 100ms ease, color 200ms ease; - - &:hover { - background: $secondary-dark-transparent radial-gradient(circle, transparent 1%, $secondary-dark-transparent 1%) center/15000%; - box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); - } - - &:active { - background-color: $secondary-light; - background-size: 100%; - box-shadow: none; - transition: background 0s, box-shadow 0s; - } - - &:disabled { - background: rgba(0,0,0,0); - color: $secondary-text-disabled; - box-shadow: none; - transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease; - } -} - -.backdrop { - background-color: $secondary; - color: $secondary-text; - font-size: 1rem; - - .header-bar { - display: flex; - align-items: center; - - @media (max-height: 550px) { - margin-top: 0.125rem; - } - - .menu-icon { - background-image: url("./ressources/menu.png"); - background-position: center; - background-repeat: no-repeat; - width: 36px; - height: 36px; - padding: 4px; - margin: 1rem; - display: inline-block; - border: none; - border-radius: 32px; - transition: background-color 100ms ease; - - @media (max-height: 550px) { - padding: 0; - margin: 0.125rem; - } - - &:hover { - background-color: $secondary-dark; - } - - &.open { - background-image: url("./ressources/menu_close.png"); - } - } - - .header { - margin: 0; - padding: 16px; - text-align: center; - flex-grow: 1; - - @media (min-width: 450px) { - margin-right: 56px; - } - - @media (max-height: 550px) { - padding: 0; - } - } - } - - .menu-actions { - box-sizing: border-box; - transition: max-height 200ms ease, color 200ms ease, background-color 100ms ease;; - position: relative; - max-height: 16rem; - margin: 0 1rem; - - .menu-option { - color: $primary-text; - text-decoration: none; - box-sizing: border-box; - display: inline-block; - font-size: 1.5rem; - width: 100%; - text-align: center; - padding: 1rem; - border: none; - border-radius: 8px; - cursor: pointer; - - &:hover { - background-color: $secondary-half-dark; - } - - &.active { - background-color: $secondary-dark; - } - } - - &.hidden { - max-height: 0; - color: rgba(0,0,0,0); - - .menu-option { - color: rgba(0,0,0,0); - background-color: rgba(0,0,0,0) !important; - } - } - } -} - -.container { - @keyframes start { - from {top: 100vh;} - to {top: 0;} - } - - position: relative; - border: none; - border-radius: 16px 16px 0 0; - min-height: 0; - height: 100%; - - box-sizing: border-box; - background-color: white; - margin-top: 8px; - animation-name: start; - animation-duration: 1s; - animation-timing-function: ease; - color: black; - - display: flex; - flex-direction: column; - - .banner { - z-index: 1; - background-color: white; - border: none; - border-radius: 16px 16px 0 0; - display: flex; - margin: 0; - margin-bottom: 1rem; - padding-top: 1rem; - max-height: 10rem; - flex-direction: row; - flex-wrap: wrap; - transform-origin: top; - transition: max-height 200ms ease, transform 200ms ease, visibility 200ms step-start; - min-height: 3.5rem; - justify-items: center; - justify-content: center; - - @media (max-height: 550px) { - position: absolute; - width: 100%; - box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); - } - - &.hidden { - transform: scaleY(0); - visibility: hidden; - max-height: 0; - transition: max-height 200ms ease, transform 200ms ease, visibility 200ms step-end; - min-height: 0; - margin-bottom: 0; - } - - .banner-text { - align-self: left; - margin: 1rem; - flex-grow: 100; - } - - .btn-container{ - display: flex; - flex-grow: 1; - text-align: right; - - - .banner-button { - color: $secondary-dark; - padding: 8px 16px; - margin: 0; - margin-right: 1rem; - letter-spacing: 0.125rem; - } - } - - hr { - width: 100%; - - @media (max-height: 550px) { - margin-bottom: 0; - } - } - } - - .server-listing { - box-sizing: border-box; - background-color: $primary; - color: $primary-text; - min-height: 0; - display: flex; - flex-direction: column; - border-style: none; - border-radius: 8px; - margin: 1rem; - margin-bottom: 2rem; - padding: 0.5rem; - padding-top: 0.25rem; - box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2); - h1 { - text-align: center; - @media (max-height: 550px) { - display: none; - } - } - hr { - width: 100%; - @media (max-height: 550px) { - display: none; - } - } - - @media (max-height: 450px) { - padding-bottom: 0.125rem - } - - .server-entries { - overflow-y: auto; - min-height: 0; - - .server { - font-size: 1.25rem; - display: flex; - flex-direction: row; - - @media (max-width: 1000px) { - flex-wrap: wrap; - } - - align-items: center; - background-color: $primary-light; - padding: 0.5rem; - margin-bottom: 0.25rem; - border-style: none; - border-radius: 8px; - - .server-name { - font-weight: bold; - letter-spacing: 0.125rem; - white-space: nowrap; - overflow: hidden; - margin: 0.5rem 0; - } - - .player-count { - font-family: 'Roboto Condensed', sans-serif; - } - - .player-count-static { - @media (max-width: 1000px) { - display: none; - } - - white-space: nowrap; - margin-left: 0.25rem; - letter-spacing: 0; - font-family: 'Roboto Condensed', sans-serif; - } - - .player-count-dot { - background-color: $online-green; - border-radius: 50%; - min-width: 1rem; - min-height: 1rem; - width: 1rem; - height: 1rem; - margin-left: auto; - margin-right: 0.25rem; - } - - .join-btn { - margin-left: 0.5rem; - min-width: 12rem; - } - } - } - - .button-container { - display: flex; - flex-direction: row-reverse; - margin-top: 1rem; - margin-right: 0.25rem; - min-height: 2.5rem; - - @media (max-height: 450px) { - margin-top: 0.125rem; - min-height: 2rem; - } - } - } - - .copyright-container { - box-sizing: border-box; - position: absolute; - width: 100%; - margin: 4px; - bottom: 0; - text-align: center; - } -} - -.modal-container { - position:absolute; - top: 0; - width: 100vw; - height: 100vh; - background-color: #000000AA; - display: flex; - opacity: 1; - transition: opacity 200ms ease; - - &.hidden { - opacity: 0; - } - - .modal { - background-color: #546e7a; - margin: auto; - padding: 1rem; - border-style: none; - border-radius: 8px; - box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); - } - - .modal-title { - margin: 1rem; - } - - .modal-body { - margin: 0.25rem; - } -} +@import 'partials/colors'; +@import 'partials/base'; +@import 'partials/btn'; +@import 'partials/backdrop/base'; +@import 'partials/backdrop/menu'; +@import 'partials/front-layer/base'; +@import 'partials/front-layer/notifications'; +@import 'partials/front-layer/server-listing'; +@import 'partials/front-layer/copyright'; +@import 'partials/modal/base'; -- cgit v1.2.3-54-g00ecf From fe1356caa9a3739c338ff7d7b1e4e7a4b45c0b72 Mon Sep 17 00:00:00 2001 From: TrueKuehli Date: Sun, 30 Sep 2018 16:15:38 +0200 Subject: Moved color import to the modules requiring it --- WebInterface/NodeJSServer/src/style/index.scss | 1 - WebInterface/NodeJSServer/src/style/partials/_base.scss | 2 ++ WebInterface/NodeJSServer/src/style/partials/_btn.scss | 2 ++ WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss | 2 ++ WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss | 2 ++ .../NodeJSServer/src/style/partials/front-layer/_notifications.scss | 2 ++ .../NodeJSServer/src/style/partials/front-layer/_server-listing.scss | 2 ++ WebInterface/NodeJSServer/src/style/partials/modal/_base.scss | 4 +++- 8 files changed, 15 insertions(+), 2 deletions(-) (limited to 'WebInterface/NodeJSServer/src/style/index.scss') diff --git a/WebInterface/NodeJSServer/src/style/index.scss b/WebInterface/NodeJSServer/src/style/index.scss index da347cb..285a47b 100644 --- a/WebInterface/NodeJSServer/src/style/index.scss +++ b/WebInterface/NodeJSServer/src/style/index.scss @@ -1,4 +1,3 @@ -@import 'partials/colors'; @import 'partials/base'; @import 'partials/btn'; @import 'partials/backdrop/base'; diff --git a/WebInterface/NodeJSServer/src/style/partials/_base.scss b/WebInterface/NodeJSServer/src/style/partials/_base.scss index 77d5bdd..5f300fd 100644 --- a/WebInterface/NodeJSServer/src/style/partials/_base.scss +++ b/WebInterface/NodeJSServer/src/style/partials/_base.scss @@ -1,3 +1,5 @@ +@import 'colors'; + html,body { height: 100vh; margin: 0; diff --git a/WebInterface/NodeJSServer/src/style/partials/_btn.scss b/WebInterface/NodeJSServer/src/style/partials/_btn.scss index 6c41b1f..cf5ee33 100644 --- a/WebInterface/NodeJSServer/src/style/partials/_btn.scss +++ b/WebInterface/NodeJSServer/src/style/partials/_btn.scss @@ -1,3 +1,5 @@ +@import 'colors'; + .btn { border: none; border-radius: 4px; diff --git a/WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss b/WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss index b283c0b..1b7a924 100644 --- a/WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss +++ b/WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss @@ -1,3 +1,5 @@ +@import '../colors'; + .backdrop { background-color: $secondary; color: $secondary-text; diff --git a/WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss b/WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss index e98c798..26833d5 100644 --- a/WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss +++ b/WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss @@ -1,3 +1,5 @@ +@import '../colors'; + .backdrop { .menu-actions { box-sizing: border-box; diff --git a/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss b/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss index 1465b77..4dd7361 100644 --- a/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss +++ b/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss @@ -1,3 +1,5 @@ +@import '../colors'; + .front-layer { .banner { z-index: 1; diff --git a/WebInterface/NodeJSServer/src/style/partials/front-layer/_server-listing.scss b/WebInterface/NodeJSServer/src/style/partials/front-layer/_server-listing.scss index 2921e22..2efb73b 100644 --- a/WebInterface/NodeJSServer/src/style/partials/front-layer/_server-listing.scss +++ b/WebInterface/NodeJSServer/src/style/partials/front-layer/_server-listing.scss @@ -1,3 +1,5 @@ +@import '../colors'; + .front-layer { .server-listing { box-sizing: border-box; diff --git a/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss b/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss index c8705e4..1e7742e 100644 --- a/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss +++ b/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss @@ -1,3 +1,5 @@ +@import '../colors'; + .modal-container { position:absolute; top: 0; @@ -13,7 +15,7 @@ } .modal { - background-color: #546e7a; + background-color: $secondary; margin: auto; padding: 1rem; border-style: none; -- cgit v1.2.3-54-g00ecf From ef9a3da0528c659cc0ea430ba2729044fdcc8747 Mon Sep 17 00:00:00 2001 From: TrueKuehli Date: Sun, 30 Sep 2018 20:27:17 +0200 Subject: Added basic layout for login modal Shows form for inputting password and name. --- WebInterface/NodeJSServer/src/index.js | 5 +-- .../NodeJSServer/src/modules/ui/login-modal.js | 38 ++++++++++++++++++++++ WebInterface/NodeJSServer/src/modules/ui/modal.js | 5 +++ WebInterface/NodeJSServer/src/style/index.scss | 1 + .../src/style/partials/modal/_base.scss | 2 ++ .../src/style/partials/modal/_login.scss | 30 +++++++++++++++++ 6 files changed, 79 insertions(+), 2 deletions(-) create mode 100644 WebInterface/NodeJSServer/src/modules/ui/login-modal.js create mode 100644 WebInterface/NodeJSServer/src/style/partials/modal/_login.scss (limited to 'WebInterface/NodeJSServer/src/style/index.scss') diff --git a/WebInterface/NodeJSServer/src/index.js b/WebInterface/NodeJSServer/src/index.js index 8e615f2..0377a75 100644 --- a/WebInterface/NodeJSServer/src/index.js +++ b/WebInterface/NodeJSServer/src/index.js @@ -1,7 +1,8 @@ import Backdrop from './modules/ui/backdrop.js'; import BannerController from './modules/ui/notification-banner.js'; import ServerClient from './modules/server-client.js' -import Modal from './modules/ui/modal.js'; // TODO: DEBUGGING +import LoginModal from './modules/ui/login-modal.js'; // TODO: JUST FOR DEBUGGING +import './modules/hash.js'; let backdrop = new Backdrop('menu', 'front-layer', 'show-menu'); backdrop.register(); @@ -14,4 +15,4 @@ let client = new ServerClient('http://89.183.8.51:5000/chatHub', 'server-list', document.getElementById('refresh-button') .addEventListener('click', client.loadServers.bind(client)); -new Modal('Test Titel'); +// new LoginModal('The Crew'); diff --git a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js new file mode 100644 index 0000000..eeb98cb --- /dev/null +++ b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js @@ -0,0 +1,38 @@ +import Modal from './modal.js'; + +export default class LoginModal extends Modal { + constructor(serverName) { + super('Login: ' + serverName); + + let passBox = document.createElement('div'); + let nameBox = document.createElement('div'); + + let passwordLabel = document.createElement('label'); + let passwordInput = document.createElement('input'); + passwordLabel.setAttribute('for', 'password-input'); + passwordLabel.textContent = 'Passwort:'; + passwordLabel.title = 'Das Passwort des Spiels' + passwordInput.id = 'password-input'; + passwordInput.type = 'password'; + passwordInput.placeholder = 'Passwort'; + + let nameLabel = document.createElement('label'); + let nameInput = document.createElement('input'); + nameLabel.setAttribute('for', 'name-input'); + nameLabel.textContent = 'Benutzername:'; + nameLabel.title = 'Dein Anzeigename' + nameInput.id = 'name-input'; + nameInput.type = 'text'; + nameInput.autocomplete = 'on'; + nameInput.placeholder = 'Name'; + + + passBox.appendChild(passwordLabel); + passBox.appendChild(passwordInput); + nameBox.appendChild(nameLabel); + nameBox.appendChild(nameInput); + + this.body.appendChild(passBox); + this.body.appendChild(nameBox); + } +} diff --git a/WebInterface/NodeJSServer/src/modules/ui/modal.js b/WebInterface/NodeJSServer/src/modules/ui/modal.js index e1aa8a2..31e6397 100644 --- a/WebInterface/NodeJSServer/src/modules/ui/modal.js +++ b/WebInterface/NodeJSServer/src/modules/ui/modal.js @@ -13,6 +13,7 @@ export default class Modal { title.textContent = titleString; modal.appendChild(title); + modal.appendChild(body); modalBackground.appendChild(modal); document.body.appendChild(modalBackground); @@ -25,6 +26,10 @@ export default class Modal { } registerEvents() { + this.modal.addEventListener('click', (e) => { + e.stopPropagation(); + }); + this.bg.addEventListener('click', () => { this.bg.classList.add('hidden'); this.bg.addEventListener('transitionend', () => { diff --git a/WebInterface/NodeJSServer/src/style/index.scss b/WebInterface/NodeJSServer/src/style/index.scss index 285a47b..04c896a 100644 --- a/WebInterface/NodeJSServer/src/style/index.scss +++ b/WebInterface/NodeJSServer/src/style/index.scss @@ -7,3 +7,4 @@ @import 'partials/front-layer/server-listing'; @import 'partials/front-layer/copyright'; @import 'partials/modal/base'; +@import 'partials/modal/login'; diff --git a/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss b/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss index 1e7742e..1665003 100644 --- a/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss +++ b/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss @@ -24,7 +24,9 @@ } .modal-title { + max-width: 85vw; margin: 1rem; + text-align: center; } .modal-body { diff --git a/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss b/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss new file mode 100644 index 0000000..7aa1bf8 --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss @@ -0,0 +1,30 @@ +.modal { + .modal-title { + white-space: nowrap; + overflow: hidden; + } + + .modal-body { + display: grid; + grid-template-columns: 10em 1fr; + grid-template-rows: 1fr 1fr; + grid-row-gap: 0.5rem; + + div { + display: contents; + font-size: 1.25rem; + + label { + flex-basis: 30%; + margin-right: 2rem; + + grid-column: 1 2; + } + + input { + flex-basis: calc(70% - 2rem); + grid-column: 2 3; + } + } + } +} -- cgit v1.2.3-54-g00ecf