From c64244ea1f08361915d1cb111ee6344e7f3e9e4e Mon Sep 17 00:00:00 2001
From: viandox <43315863+js-all@users.noreply.github.com>
Date: Sun, 25 Apr 2021 23:05:31 +0200
Subject: [PATCH] Fixes #108 add room editor (#112)
---
front/css/room_editor.css | 135 ++++++++++++++++++++++++++++++++++++++
front/room_editor.html | 81 +++++++++++++++++++++++
2 files changed, 216 insertions(+)
create mode 100644 front/css/room_editor.css
create mode 100644 front/room_editor.html
diff --git a/front/css/room_editor.css b/front/css/room_editor.css
new file mode 100644
index 0000000..3880e64
--- /dev/null
+++ b/front/css/room_editor.css
@@ -0,0 +1,135 @@
+.room_editor_wrapper {
+ background-color: rgba(0,0,0,0.2);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top:0;
+ left: 0;
+}
+
+.room_editor_popup {
+ background-color: var(--bg3);
+ border-radius: 7px;
+ padding: 10px 15px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ color: white;
+ box-shadow: 0 0 10px rgba(0,0,0,0.2);
+}
+
+.room_editor_content_wrapper > *, .room_editor_popup > *:not(.room_editor_content_wrapper) {
+ --margin: 15px;
+ margin-top: var(--margin);
+ margin-bottom: var(--margin);
+}
+
+.room_editor_tabs {
+ display: flex;
+ width: 100%;
+}
+
+.room_editor_tabs > * {
+ flex-grow: 1;
+ text-align: center;
+ cursor: pointer;
+ padding-bottom: 8px;
+}
+
+.room_editor_selected_tab {
+ border-bottom: solid white 2px;
+}
+
+.room_editor_content_wrapper {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+}
+
+.room_editor_title {
+ width: 100%;
+ text-align: center;
+ font-size: smaller;
+}
+
+.room_editor_label {
+ color: rgb(189, 189, 189);
+ font-size: 0.8em;
+ margin-bottom: 0;
+}
+
+.room_editor_input {
+ margin-top: 3px;
+ outline: 0;
+ border: none;
+ border-radius: 4px;
+ padding: 5px;
+ font-size: 0.9em;
+ color: rgb(173, 173, 173);
+ background-color: var(--bg2);
+ transition: 0.1s;
+ width: 30vw;
+ min-width: 400px;
+}
+
+.room_editor_input:focus {
+ color: white;
+}
+
+textarea.room_editor_input {
+ resize: vertical;
+}
+
+.room_editor_submit_wrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ margin-bottom: 5px;
+}
+
+.room_editor_button {
+ border: none;
+ transition: 0.1s;
+ border-radius: 4px;
+ color: white;
+ padding: 8px 12px;
+ cursor: pointer;
+ font-size: 0.9em;
+}
+
+.room_editor_button:hover {
+ filter: brightness(0.8);
+}
+
+.room_editor_submit {
+ background-color: var(--accent);
+}
+
+.room_editor_cancel {
+ background-color: rgb(145, 145, 145);
+}
+
+.room_editor_start {
+ cursor: pointer;
+ transition: 0.1s all;
+ width: 45px;
+ height: 45px;
+ background-color: var(--accent);
+ border-radius: var(--border-radius);
+}
+
+.room_editor_start:hover {
+ filter: brightness(0.9);
+}
+
+.room_editor_plus {
+ clip-path: polygon(52.5% 0, 47.5% 0, 47.5% 47.5%, 0 47.5%, 0 52.5%, 47.5% 52.5%, 47.5% 100%, 52.5% 100%, 52.5% 52.5%, 100% 52.5%, 100% 47.5%, 52.5% 47.5%);
+ background-color: white;
+ width: 45px;
+ height: 45px;
+ transform: scale(0.8);
+}
\ No newline at end of file
diff --git a/front/room_editor.html b/front/room_editor.html
new file mode 100644
index 0000000..c326383
--- /dev/null
+++ b/front/room_editor.html
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+
+
+
+
+
+
+