From 3a3d0fc3d4733f8908e23a03f860d76340479ec4 Mon Sep 17 00:00:00 2001 From: Dennis Kobert Date: Tue, 11 Jun 2019 23:53:30 +0200 Subject: Reorganize Project structure --- WebInterface/src/style/about.scss | 43 ++++++++ WebInterface/src/style/index.scss | 10 ++ WebInterface/src/style/partials/_base.scss | 20 ++++ WebInterface/src/style/partials/_btn.scss | 75 +++++++++++++ WebInterface/src/style/partials/_colors.scss | 18 +++ WebInterface/src/style/partials/_game.scss | 13 +++ .../src/style/partials/backdrop/_base.scss | 58 ++++++++++ .../src/style/partials/backdrop/_menu.scss | 43 ++++++++ .../src/style/partials/front-layer/_base.scss | 23 ++++ .../src/style/partials/front-layer/_copyright.scss | 10 ++ .../style/partials/front-layer/_notifications.scss | 84 ++++++++++++++ .../partials/front-layer/_server-listing.scss | 121 +++++++++++++++++++++ WebInterface/src/style/partials/game/_chat.scss | 28 +++++ WebInterface/src/style/partials/modal/_base.scss | 35 ++++++ WebInterface/src/style/partials/modal/_login.scss | 55 ++++++++++ WebInterface/src/style/play.scss | 17 +++ 16 files changed, 653 insertions(+) create mode 100644 WebInterface/src/style/about.scss create mode 100644 WebInterface/src/style/index.scss create mode 100644 WebInterface/src/style/partials/_base.scss create mode 100644 WebInterface/src/style/partials/_btn.scss create mode 100644 WebInterface/src/style/partials/_colors.scss create mode 100644 WebInterface/src/style/partials/_game.scss create mode 100644 WebInterface/src/style/partials/backdrop/_base.scss create mode 100644 WebInterface/src/style/partials/backdrop/_menu.scss create mode 100644 WebInterface/src/style/partials/front-layer/_base.scss create mode 100644 WebInterface/src/style/partials/front-layer/_copyright.scss create mode 100644 WebInterface/src/style/partials/front-layer/_notifications.scss create mode 100644 WebInterface/src/style/partials/front-layer/_server-listing.scss create mode 100644 WebInterface/src/style/partials/game/_chat.scss create mode 100644 WebInterface/src/style/partials/modal/_base.scss create mode 100644 WebInterface/src/style/partials/modal/_login.scss create mode 100644 WebInterface/src/style/play.scss (limited to 'WebInterface/src/style') diff --git a/WebInterface/src/style/about.scss b/WebInterface/src/style/about.scss new file mode 100644 index 0000000..3b45674 --- /dev/null +++ b/WebInterface/src/style/about.scss @@ -0,0 +1,43 @@ +@import 'partials/base'; +@import 'partials/backdrop/base'; +@import 'partials/backdrop/menu'; +@import 'partials/front-layer/base'; +@import 'partials/front-layer/copyright'; + + +h1, h2, p, a { + margin: 0.5rem 1rem; +} + +h1, h2 { + margin-top: 1rem; + text-align: center; +} + +.front-layer { + padding-bottom: 5rem; + display: flex; +} + +.about-container { + flex-grow: 1; + overflow-y: auto; + margin: 0.5rem; + display: flex; + flex-direction: column; + .about { + flex-grow: 1; + } + + .contact { + margin: 1rem; + display: grid; + grid-template-columns: 1fr 5fr; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr; + flex-direction: column; + + h2 { + grid-column: 1/3; + } + } +} diff --git a/WebInterface/src/style/index.scss b/WebInterface/src/style/index.scss new file mode 100644 index 0000000..04c896a --- /dev/null +++ b/WebInterface/src/style/index.scss @@ -0,0 +1,10 @@ +@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'; +@import 'partials/modal/login'; diff --git a/WebInterface/src/style/partials/_base.scss b/WebInterface/src/style/partials/_base.scss new file mode 100644 index 0000000..5f300fd --- /dev/null +++ b/WebInterface/src/style/partials/_base.scss @@ -0,0 +1,20 @@ +@import 'colors'; + +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; +} diff --git a/WebInterface/src/style/partials/_btn.scss b/WebInterface/src/style/partials/_btn.scss new file mode 100644 index 0000000..cf5ee33 --- /dev/null +++ b/WebInterface/src/style/partials/_btn.scss @@ -0,0 +1,75 @@ +@import 'colors'; + +.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; + } +} diff --git a/WebInterface/src/style/partials/_colors.scss b/WebInterface/src/style/partials/_colors.scss new file mode 100644 index 0000000..4683325 --- /dev/null +++ b/WebInterface/src/style/partials/_colors.scss @@ -0,0 +1,18 @@ +$primary: #212121; +$primary-disabled: #21212161; +$primary-light: #484848; +$primary-dark: #000000; +$primary-text: #ffffff; +$primary-text-disabled: #ffffff61; +$primary-warning-text: #ef5350; +$secondary: #546e7a; +$secondary-disabled: #546e7a61; +$secondary-half-dark: #3e5864; +$secondary-dark: #29434e; +$secondary-dark-transparent: #29434e61; +$secondary-light: #819ca9; +$secondary-light-transparent: #819ca961; +$secondary-text: #ffffff; +$secondary-text-disabled: #ffffff61; + +$online-green: #339933; diff --git a/WebInterface/src/style/partials/_game.scss b/WebInterface/src/style/partials/_game.scss new file mode 100644 index 0000000..74b566b --- /dev/null +++ b/WebInterface/src/style/partials/_game.scss @@ -0,0 +1,13 @@ +@import './colors'; + +.game-window { + width: calc(100% - 2rem); + height: 100%; + display: flex; + flex-direction: column; + background-color: $secondary-light; + margin: 1rem; + margin-bottom: 2rem; + border-style: none; + border-radius: 8px; +} diff --git a/WebInterface/src/style/partials/backdrop/_base.scss b/WebInterface/src/style/partials/backdrop/_base.scss new file mode 100644 index 0000000..1b7a924 --- /dev/null +++ b/WebInterface/src/style/partials/backdrop/_base.scss @@ -0,0 +1,58 @@ +@import '../colors'; + +.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; + } + } + } +} diff --git a/WebInterface/src/style/partials/backdrop/_menu.scss b/WebInterface/src/style/partials/backdrop/_menu.scss new file mode 100644 index 0000000..26833d5 --- /dev/null +++ b/WebInterface/src/style/partials/backdrop/_menu.scss @@ -0,0 +1,43 @@ +@import '../colors'; + +.backdrop { + .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; + } + } + } +} diff --git a/WebInterface/src/style/partials/front-layer/_base.scss b/WebInterface/src/style/partials/front-layer/_base.scss new file mode 100644 index 0000000..6a2aa9a --- /dev/null +++ b/WebInterface/src/style/partials/front-layer/_base.scss @@ -0,0 +1,23 @@ +.front-layer { + @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; +} diff --git a/WebInterface/src/style/partials/front-layer/_copyright.scss b/WebInterface/src/style/partials/front-layer/_copyright.scss new file mode 100644 index 0000000..31ac614 --- /dev/null +++ b/WebInterface/src/style/partials/front-layer/_copyright.scss @@ -0,0 +1,10 @@ +.front-layer{ + .copyright-container { + box-sizing: border-box; + position: absolute; + width: 100%; + margin: 4px; + bottom: 0; + text-align: center; + } +} diff --git a/WebInterface/src/style/partials/front-layer/_notifications.scss b/WebInterface/src/style/partials/front-layer/_notifications.scss new file mode 100644 index 0000000..d8e8159 --- /dev/null +++ b/WebInterface/src/style/partials/front-layer/_notifications.scss @@ -0,0 +1,84 @@ +@import '../colors'; + +.front-layer { + .banner { + 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; + } + + .notification-badge { + height: 1rem; + min-width: 1rem; + font-weight: bold; + color: $secondary-text; + font-size: 1rem; + padding: 0.5rem; + margin: 0.5rem 0 0.5rem 1rem; + text-align: center; + line-height: 1rem; + background-color: $secondary; + border: none; + border-radius: 50%; + + &.hidden { + display: none; + } + } + + .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; + } + } + } +} diff --git a/WebInterface/src/style/partials/front-layer/_server-listing.scss b/WebInterface/src/style/partials/front-layer/_server-listing.scss new file mode 100644 index 0000000..7e67178 --- /dev/null +++ b/WebInterface/src/style/partials/front-layer/_server-listing.scss @@ -0,0 +1,121 @@ +@import '../colors'; + +.front-layer { + .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; + } + + .right-aligned-items { + margin-left: auto; + white-space: nowrap; + display: flex; + align-items: center; + + .player-count-dot { + background-color: $online-green; + border-radius: 50%; + min-width: 1rem; + min-height: 1rem; + width: 1rem; + height: 1rem; + margin-right: 0.25rem; + } + + .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; + } + + .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; + } + + .btn { + @media (max-width: 450px) { + letter-spacing: 0; + } + } + } + } +} diff --git a/WebInterface/src/style/partials/game/_chat.scss b/WebInterface/src/style/partials/game/_chat.scss new file mode 100644 index 0000000..89b63b3 --- /dev/null +++ b/WebInterface/src/style/partials/game/_chat.scss @@ -0,0 +1,28 @@ +@import '../colors'; +@import '../btn'; + +.chat { + flex-grow: 1; + display: flex; + flex-direction: column; + + .messages { + flex-grow: 1; + background-color: white; + margin: 0.5rem; + } + + .input-message { + display: flex; + margin: 0.5rem; + + input { + font-size: 2rem; + flex-grow: 1; + } + + .btn { + margin-left: 1rem; + } + } +} diff --git a/WebInterface/src/style/partials/modal/_base.scss b/WebInterface/src/style/partials/modal/_base.scss new file mode 100644 index 0000000..006c241 --- /dev/null +++ b/WebInterface/src/style/partials/modal/_base.scss @@ -0,0 +1,35 @@ +@import '../colors'; + +.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: $primary; + 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 { + max-width: 85vw; + margin: 1rem; + text-align: center; + } + + .modal-body { + margin: 0.25rem; + } +} diff --git a/WebInterface/src/style/partials/modal/_login.scss b/WebInterface/src/style/partials/modal/_login.scss new file mode 100644 index 0000000..71adf61 --- /dev/null +++ b/WebInterface/src/style/partials/modal/_login.scss @@ -0,0 +1,55 @@ +.modal { + .modal-title { + white-space: nowrap; + overflow: hidden; + } + + .modal-body { + display: grid; + grid-template-columns: 10em 1fr; + grid-template-rows: 1fr 1fr 1fr; + grid-row-gap: 0.5rem; + + &.frst-warning { + grid-template-rows: 1fr 1rem 1fr 1fr; + } + + &.scnd-warning { + grid-template-rows: 1fr 1fr 1rem 1fr; + } + + div { + display: contents; + font-size: 1.25rem; + + label { + margin-right: 2rem; + grid-column: 1 / 2; + line-height: 1.25em; + } + + input { + grid-column: 2 / 3; + border-color: none; + } + + span { + margin-top: -0.5rem; + grid-column: 1 / 3; + color: $primary-warning-text; + background-color: $primary; + font-size: 0.9rem; + line-height: 1.2rem; + padding: 0.25rem; + + &.hidden { + display: none; + } + } + + button { + grid-column: 1 / 3; + } + } + } +} diff --git a/WebInterface/src/style/play.scss b/WebInterface/src/style/play.scss new file mode 100644 index 0000000..7286f74 --- /dev/null +++ b/WebInterface/src/style/play.scss @@ -0,0 +1,17 @@ +@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/copyright'; +@import 'partials/modal/base'; +@import 'partials/modal/login'; +@import 'partials/game'; +@import 'partials/game/chat'; + +remove_if_redirected { + width: 100vw; + height: 100vh; + text-align: center; +} -- cgit v1.2.3-70-g09d2