Feat: Multiplayer sessions added using CRUD database.

static/css/layouts/footer.css

@@ -0,0 +1 @@
+/* In sections */

static/css/layouts/header.css

@@ -0,0 +1,198 @@
+
+
+/* Navigation */
+.topnav {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1;
+    flex-direction: row;
+    font-weight: bold;
+    font-size: 1vh;
+    max-height: 7vh;
+    height: 7vh;
+    align-items: flex-start;
+    background: var(--colour-text-background);
+    justify-content: center; /* space-between */
+    align-items: center;
+}
+.topnav a,
+.topnav label,
+.topnav p,
+.topnav h1 {
+    float: left;
+    display: flex;
+    text-align: center;
+    text-decoration: none;
+    width: 100%;
+    max-height: 7vh;
+    justify-content: center;
+}
+.topnav h1 {
+    color: var(--colour-text-link-visited);
+}
+.topnav a:hover {
+    background-color: var(--colour-page-background);
+    color: var(--colour-text)
+}
+.topnav > .container {
+    width: 30vw;
+    min-width: 30vw;
+    max-width: 30vw;
+    height: 100%;
+    align-items: center;
+    align-self: center;
+    display: flex;
+}
+.topnav .container.logo {
+    cursor: pointer;
+}
+.topnav .container .logo {
+    /* min-width: 35vh; */
+    max-width: 30vw;
+    width: 30vw;
+    /* min-height: 6vh; */
+    max-height: 6vh;
+    margin: 0.5vh;
+    margin-right: auto;
+}
+.topnav .container.company-name {
+    min-width: 30vw;
+    max-width: 30vw;
+}
+.company-name {
+    font-size: 1.6rem;
+}
+.nav-links {
+    display: flex;
+    gap: 0 2rem;
+    display: flex;
+    flex-wrap: wrap;
+    max-width: calc(1vw * 100 - 1vh * 35);
+    align-items: center;
+    margin: 0 0.5vw;
+}
+.nav-links a {
+    text-decoration: none;
+    color: var(--colour-text);
+    font-weight: normal;
+    align-content: center;
+    font-size: 1.2rem;
+    width: fit-content;
+    padding: 0.5vh 0.5vw;
+    border-radius: 0.5vh;
+}
+.nav-links a.button {
+    color: var(--colour-text-background);
+    margin: 0 auto;
+    font-weight: bold;
+}
+
+
+/* Page Filters */
+#formFilters {
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+  
+}
+#formFilters * {
+    font-size: 1rem;
+}
+
+#formFilters .container {
+}
+#formFilters .container-input {
+    max-width: fit-content;
+    padding: 0 0.5vh;
+}
+#formFilters .container-input:has(.dirty) {
+    background-color: var(--colour-accent);
+} 
+
+#formFilters .container-input input {
+    width: 10vh;
+    max-width: 10vh;
+    height: 20px;
+}
+/*
+#formFilters .container-input input {
+    height: 1.7vh;
+}
+#formFilters .container-input select {
+    height: 2vh;
+}
+*/
+
+#formFilters .container-input.filter.active_only {
+    width: 8vh;
+}
+#formFilters .container-input.filter.active_only input {
+    display: none;
+}
+#formFilters .container-input.filter.active_only svg.active_only {
+    height: 25px;
+    fill: var(--colour-text-background);
+    background-color: var(--colour-accent);
+    /* border: 1px solid var(--colour-accent);
+    border-radius: 0.5vh; */
+    width: 25px;
+}
+#formFilters .container-input.filter.active_only svg.active_only.is_checked {
+    fill: var(--colour-accent);
+    background-color: var(--colour-text-background);
+}
+#formFilters .container-input.filter.is_not_empty {
+    width: 12vh;
+}
+
+/*
+#formFilters button {
+    padding: 0.5vh 0.75vh;
+    background-color: var(--colour-accent);
+    color: var(--colour-primary);
+    font-weight: bold;
+    border-radius: 0.75vh;
+    border: 2px solid var(--colour-primary);
+}
+
+#formFilters button.is_collapsed {
+    display: block;
+    opacity: 0;
+}
+*/
+
+form.filter button.save, form.filter button.button-cancel {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+form.filter button.save, form.filter button.button-cancel {
+    margin-top: 0;
+    margin-bottom: 1px;
+}
+
+/*
+@media screen and (max-width: 400px) {
+    .topnav h1 {
+        font-size: 16px;
+    }
+}
+*/
+
+@media screen and (max-width: 980px) {
+    /*
+    .hero h1 {
+        font-size: 2.5rem;
+    }
+    */
+    .nav-links,
+    .nav-links.tcg {
+        display: none;
+    }
+    .topnav {
+        justify-content: flex-start;
+        align-items: start;
+    }
+    .topnav.tcg {
+        padding-right: 30vw;
+    }
+}

static/css/layouts/table-main.css

@@ -0,0 +1,153 @@
+
+#formFilters {
+    padding: 0.5vh 1vw;
+    margin-top: 1vh;
+}
+
+table.table-main {
+    overflow-x: auto;
+    padding: 1vh 1vw;
+    max-width: 88vw; /* min(calc(1vh * 80), calc(1vw * 90)); */
+    width: min-content;
+    align-items: normal;
+    justify-content: normal;
+}
+
+table.table-main * {
+    padding: 0.25vh 0.5vh;
+}
+
+table.table-main thead {
+    max-height: 4vh;
+    overflow-y: visible;
+    background-color: var(--colour-text-background);
+}
+
+table.table-main tbody {
+    max-height: 75vh;
+    overflow-y: auto;
+    min-width: fit-content;
+    max-width: fit-content;
+    overflow-x: visible;
+}
+table.table-main tbody.is_collapsed {
+    display: block;
+}
+table.table-main:has(tbody > div) tbody {
+}
+table.table-main tbody > div {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    justify-content: center;
+    justify-items: center;
+    justify-self: center;
+    align-content: center;
+    align-items: center;
+    align-self: center;
+    position: relative;
+    display: block;
+    width: 100%; /* min(calc(90vh), calc(70vw)); */
+}
+
+table.table-main select, 
+table.table-main input:not([type="checkbox"]), 
+table.table-main textarea, 
+table.table-main div {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    border: 1px solid var(--colour-accent);
+    border-radius: 0.5vh;
+    text-align: center;
+    background-color: var(--colour-text-background);
+    font-size: 16px;
+}
+
+table.table-main thead tr th, 
+table.table-main tbody tr td {
+    max-width: 20vh;
+    min-width: 20vh;
+    padding: 0 0.5vh;
+}
+table.table-main tbody tr td {
+    height: 3vh;
+    /* padding-top: 0.5vh; */
+}
+table.table-main thead tr th.notes, 
+table.table-main tbody tr td.notes {
+    max-width: fit-content;
+}
+table.table-main tbody tr td:has(.dirty) {
+    background-color: var(--colour-primary);
+}
+table.table-main tbody tr td:has(.dirty) table tr:not(:has(.dirty)) {
+    background-color: var(--colour-text-background);
+}
+table.table-main tbody tr:not(:last-of-type) td {
+    padding-bottom: 0.25vh;
+}
+table.table-main tbody tr td.ddl-preview div {
+    cursor: pointer;
+}
+table.table-main tbody tr td.ddl-preview div,
+table.table-main tbody tr td.ddl-preview select {
+    padding-left: 2vh;
+    padding-right: 2vh;
+}
+table.table-main thead tr th.active, 
+table.table-main tbody tr td.active {
+    max-width: 6vh;
+    min-width: 6vh;
+}
+table.table-main thead tr th.active svg.active.add {
+    fill: var(--colour-primary);
+    background-color: var(--colour-accent);
+    border: 2px solid var(--colour-accent);
+    padding: 0;
+    border-radius: 1vh;
+}
+table.table-main tbody tr td.active svg.active.add {
+    fill: var(--colour-primary);
+}
+table.table-main tbody tr td.active svg.active.delete {
+    fill: var(--colour-error);
+}
+table.table-main tbody tr td.display_order, 
+table.table-main thead tr th.display_order {
+    max-width: 5vh;
+    min-width: 5vh;
+}
+
+#container-template-elements {
+    display: none;
+}
+
+
+@media screen and (max-width: 850px) {
+}
+@media screen and (max-width: 400px) {
+    #formFilters input[type="text"],
+    #formFilters select {
+        width: 15vh;
+        /* height: 3vh; */
+    }
+    .topnav .container.company-name {
+        margin: 0 auto;
+        min-width: 40vw;
+        max-width: 64vw;
+    }
+    .company-name {
+        font-size: 1.2rem;
+    }
+    table.table-main {
+        max-height: 61vh;
+    }
+    table.table-main thead {
+        font-size: 0.8rem;
+    }
+    table.table-main tbody {
+        max-height: 53vh;
+    }
+}