admin/mtg_commander_life_tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: Decks page.

Browse Source
This commit is contained in:
Teddy Middleton-Smith
2026-02-16 19:30:31 +00:00
parent 1cd9b7c976
commit 5661632540
75 changed files with 11850 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
static/css/components/button.css
View File

@@ -17,8 +17,8 @@
.button-primary {
background: var(--colour-accent);
color: var(--colour-primary);
border: 2px solid var(--colour-primary);
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.button-primary:hover {
@@ -28,7 +28,7 @@
.button-light {
background: white;
color: var(--colour-primary);
color: var(--primary-color);
}
.button-light:hover {

2
static/css/components/form.css
View File

@@ -2,5 +2,5 @@
select {
border: 1px solid var(--colour-accent);
background-color: var(--colour-page-background-1);
background-color: var(--background-color-1);
}

18
static/css/components/overlay.css
View File

@@ -8,7 +8,7 @@
position: fixed;
width: 100px;
/* height: 50%; */
background: var(--colour-page-background);
background: var(--background-color);
justify-content: right;
align-items: right;
align-self: right;
@@ -73,11 +73,11 @@
border-bottom-right-radius: 12px;
}
#overlayHamburger > :hover {
color: var(--colour-page-background);
background-color: var(--colour-primary);
color: var(--background-color);
background-color: var(--primary-color);
}
#overlayHamburger .container {
background-color: var(--colour-page-background);
background-color: var(--tcg-accent-purple);
display: flex;
flex-wrap: wrap;
align-items: center;
@@ -93,8 +93,8 @@
height: fit-content;
}
#overlayHamburger .container:hover {
color: var(--colour-page-background);
background-color: var(--colour-primary);
color: var(--background-color);
background-color: var(--primary-color);
}
#overlayHamburger > .container {
/*
@@ -105,13 +105,13 @@
#overlayHamburger .container a {
width: 100%;
padding: 4.5px 0;
color: var(--colour-text);
color: var(--tcg-text-primary);
text-decoration: none;
line-height: initial;
}
#overlayHamburger .container a:hover {
color: var(--colour-page-background);
background-color: var(--colour-primary);
color: var(--background-color);
background-color: var(--primary-color);
}
@media screen and (max-width: 400px) {

4
static/css/components/table.css
View File

@@ -28,7 +28,7 @@ th.is_collapsed, td.is_collapsed {
display: table-cell !important;
}
td.dirty {
background-color: var(--colour-primary);
background-color: var(--primary-color);
}
td:not(.dirty) {
background-color: transparent;
@@ -48,7 +48,7 @@ table button {
}
table button.active {
background-color: var(--colour-page-background);
background-color: var(--background-color);
}
tr.delete, tr.delete > td {

17
static/css/layouts/footer.css
View File

@@ -1 +1,16 @@
/* In sections */
/* In sections */
.tcg.footer {
display: flex;
}
.tcg.footer > .container {
/* display: flex; */
}
.footer-content {
display: flex;
margin: 0 auto;
}
.footer-section {
/* display: flex; */
margin: auto auto;
}

6
static/css/layouts/header.css
View File

@@ -31,7 +31,7 @@
color: var(--colour-text-link-visited);
}
.topnav a:hover {
background-color: var(--colour-page-background);
background-color: var(--background-color);
color: var(--colour-text)
}
.topnav > .container {
@@ -149,10 +149,10 @@
#formFilters button {
padding: 0.5vh 0.75vh;
background-color: var(--colour-accent);
color: var(--colour-primary);
color: var(--primary-color);
font-weight: bold;
border-radius: 0.75vh;
border: 2px solid var(--colour-primary);
border: 2px solid var(--primary-color);
}
#formFilters button.is_collapsed {

87
static/css/layouts/table-main.css
View File

@@ -4,38 +4,39 @@
margin-top: 1vh;
}
table.table-main {
.table-main {
overflow-x: auto;
padding: 1vh 1vw;
max-width: 88vw; /* min(calc(1vh * 80), calc(1vw * 90)); */
padding: 0; /*1vh 1vw;*/
max-width: 80vw; /* min(calc(1vh * 80), calc(1vw * 90)); */
width: min-content;
align-items: normal;
justify-content: normal;
margin: 0 auto;
}
table.table-main * {
.table-main * {
padding: 0.25vh 0.5vh;
}
table.table-main thead {
.table-main thead {
max-height: 4vh;
overflow-y: visible;
background-color: var(--colour-text-background);
background-color: var(--background-color);
}
table.table-main tbody {
.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 {
.table-main tbody.is_collapsed {
display: block;
}
table.table-main:has(tbody > div) tbody {
.table-main:has(tbody > div) tbody {
}
table.table-main tbody > div {
.table-main tbody > div {
margin-left: auto;
margin-right: auto;
text-align: center;
@@ -50,72 +51,72 @@ table.table-main tbody > div {
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 {
.table-main select,
.table-main input:not([type="checkbox"]),
.table-main textarea,
.table-main div {
box-sizing: border-box;
width: 100%;
max-width: 100%;
height: 100%;
border: 1px solid var(--colour-accent);
border: 1px solid var(--border-color);
border-radius: 0.5vh;
text-align: center;
background-color: var(--colour-text-background);
background-color: var(--background-color);
font-size: 16px;
}
table.table-main thead tr th,
table.table-main tbody tr td {
.table-main thead tr th,
.table-main tbody tr td {
max-width: 20vh;
min-width: 20vh;
padding: 0 0.5vh;
}
table.table-main tbody tr td {
.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 {
.table-main thead tr th.notes,
.table-main tbody tr td.notes {
max-width: fit-content;
}
table.table-main tbody tr td:has(.dirty) {
background-color: var(--colour-primary);
.table-main tbody tr td:has(.dirty) {
background-color: var(--primary-color);
}
table.table-main tbody tr td:has(.dirty) table tr:not(:has(.dirty)) {
.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 {
.table-main tbody tr:not(:last-of-type) td {
padding-bottom: 0.25vh;
}
table.table-main tbody tr td.ddl-preview div {
.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 {
.table-main tbody tr td.ddl-preview div,
.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 {
.table-main thead tr th.active,
.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);
.table-main thead tr th.active svg.active.add {
fill: var(--primary-color);
background-color: var(--background-color);
border: 2px solid var(--border-color);
padding: 0;
border-radius: 1vh;
}
table.table-main tbody tr td.active svg.active.add {
fill: var(--colour-primary);
.table-main tbody tr td.active svg.active.add {
fill: var(--primary-color);
}
table.table-main tbody tr td.active svg.active.delete {
fill: var(--colour-error);
.table-main tbody tr td.active svg.active.delete {
fill: var(--tcg-accent-red);
}
table.table-main tbody tr td.display_order,
table.table-main thead tr th.display_order {
.table-main tbody tr td.display_order,
.table-main thead tr th.display_order {
max-width: 5vh;
min-width: 5vh;
}
@@ -141,13 +142,13 @@ table.table-main thead tr th.display_order {
.company-name {
font-size: 1.2rem;
}
table.table-main {
.table-main {
max-height: 61vh;
}
table.table-main thead {
.table-main thead {
font-size: 0.8rem;
}
table.table-main tbody {
.table-main tbody {
max-height: 53vh;
}
}

15
static/css/main.css
View File

@@ -38,14 +38,13 @@ html {
}
body {
background-color: var(--colour-page-background);
color: var(--colour-text);
background-color: var(--background-color);
color: var(--text-color);
font-family: var(--font-family-base);
font-family: Arial;
padding: 0;
margin: 0;
border: 0;
background: linear-gradient(to bottom right, var(--colour-page-background-1), var(--colour-page-background-2)); /* var(--c_purple); */
height: 100vh;
/* max-height: 100vh;
overflow-y: clip; */
@@ -53,6 +52,7 @@ body {
* {
margin: 0;
color: var(--text-color);
}
script, link {
@@ -88,7 +88,7 @@ script, link {
width: 100%;
align-self: center;
font-size: 1rem;
color: var(--colour-text);
color: var(--text-color);
}
#pageBody > * > * {
align-self: center;
@@ -104,7 +104,6 @@ script, link {
/* Add a card effect for articles */
.card {
background-color: var(--colour-text-background);
padding: 1vh 2.5vw;
margin: 1vh 1vw;
display: flex;
@@ -182,7 +181,7 @@ script, link {
.container-input > input,
.container-input > textarea {
border: 2px solid var(--colour-accent);
border: 2px solid var(--border-color);
border-radius: 0.5vh;
padding: 1vh 1vw;
}
@@ -205,10 +204,10 @@ li {
:not(input,textarea,select,button).dirty {
background-color: var(--colour-accent);
background-color: var(--border-color);
}
input.dirty, textarea.dirty, select.dirty {
border-color: var(--colour-primary);
border-color: var(--primary-color);
}
.is-collapsed {

12
static/css/pages/tcg/base.css
View File

@@ -24,6 +24,9 @@ body.tcg-theme {
}
/* Top Nav TCG Style */
#buttonHamburger {
display: none;
}
.topnav.tcg {
background: var(--tcg-bg-secondary);
border-bottom: 2px solid var(--tcg-border-color);
@@ -88,7 +91,8 @@ body.tcg-theme {
.footer.tcg h3 {
font-family: 'Cinzel', serif;
color: var(--tcg-accent-gold);
margin-bottom: 1rem;
/* margin-bottom: 1vh; */
margin-top: 0;
}
.footer.tcg a {
@@ -174,9 +178,10 @@ body.tcg-theme {
font-family: 'Cinzel', serif;
font-size: 1.5rem;
color: var(--tcg-accent-gold);
margin-bottom: 1.5rem;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 1.5rem auto 0;
text-align: center;
}
/* TCG Form Elements */
@@ -244,6 +249,9 @@ body.tcg-theme {
.nav-links.tcg {
display: none;
}
#buttonHamburger {
display: block;
}
.topnav.tcg {
padding-right: 30vw;
}

38
static/css/pages/tcg/decks.css Normal file
View File

@@ -0,0 +1,38 @@
.tcg-card {
margin-top: 1vh;
margin-bottom: 0;
}
table.table-main tbody {
max-height: 30vh;
overflow-y: auto;
}
table.statistics {
margin-top: 0;
}
table.statistics thead {
background-color: var(--background-color);
}
table.statistics tbody {
max-height: 30vh;
overflow-y: auto;
}
table.statistics thead tr th.deck,
table.statistics tbody tr td.deck_id {
min-width: 20vh;
max-width: 20vh;
}
table.statistics thead tr th.name,
table.statistics tbody tr td.name {
min-width: 40vh;
max-width: 40vh;
}
table.statistics thead tr th.value,
table.statistics tbody tr td.value {
min-width: 10vh;
max-width: 10vh;
}

42
static/css/pages/tcg/game.css
View File

@@ -147,6 +147,9 @@
}
/* Game Section */
#gameSection {
margin: 0 auto;
}
#gameSection .row.round {
display: flex;
align-items: center;
@@ -347,13 +350,16 @@
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.life-controls {
.life-gain-controls,
.life-loss-controls {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 1vh;
}
.life-btn {
.life-gain-btn,
.life-loss-btn {
background: var(--tcg-bg-card);
border: 2px solid var(--tcg-border-color);
color: var(--tcg-text-primary);
@@ -370,17 +376,31 @@
justify-content: center;
}
.life-btn:hover {
border-color: var(--tcg-accent-purple);
background: var(--tcg-accent-purple);
.life-gain-btn:hover,
.life-loss-btn:hover {
border-color: green; /*var(--tcg-accent-purple);*/
background: green; /*var(--tcg-accent-purple);*/
color: var(--tcg-bg-primary);
transform: scale(1.1);
}
.life-btn:active {
.life-loss-btn:hover {
border-color: red;
background: red;
}
.life-gain-btn:active,
.life-loss-btn:active {
transform: scale(0.95);
}
.life-total label {
color: var(--tcg-text-primary);
width: 100%;
margin-bottom: 1vh;
display: inline-block;
}
/* Commander Damage Section */
.commander-damage-section {
border-top: 1px solid var(--tcg-border-color);
@@ -420,6 +440,7 @@
.damage-source {
font-size: 1rem;
color: var(--tcg-text-secondary);
padding-right: 1vh;
}
.damage-controls {
@@ -478,8 +499,10 @@
.damage-log.container table tbody tr td.received_from_commander_player_id {
width: 20vw;
}
.damage-log.container table thead tr th.health_change,
.damage-log.container table tbody tr td.health_change {
.damage-log.container table thead tr th.life_gain,
.damage-log.container table tbody tr td.life_gain,
.damage-log.container table thead tr th.life_loss,
.damage-log.container table tbody tr td.life_loss {
width: 7vw;
}
.damage-log.container table thead tr th.commander-deaths,
@@ -583,7 +606,8 @@
font-size: 3rem;
}
.life-btn {
.life-gain-btn,
.life-loss-btn {
width: 50px;
height: 50px;
font-size: 1.5rem;

57
static/css/pages/tcg/games.css
View File

@@ -33,15 +33,18 @@
position: relative;
animation: tcg-fadeIn 0.8s ease-out 0.2s backwards;
margin: 2vh auto;
display: flex;
flex-wrap: wrap;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
margin-bottom: 1rem;
flex-wrap: wrap;
gap: 1rem;
width: 100%;
}
/* Filters Form */
@@ -88,8 +91,7 @@
overflow-x: auto;
}
.games-table {
width: 100%;
#tableMain.games-table {
border-collapse: collapse;
font-size: 1rem;
}
@@ -98,7 +100,6 @@
background: var(--tcg-bg-card);
border-bottom: 2px solid var(--tcg-accent-purple);
}
.games-table th {
font-family: 'Cinzel', serif;
font-size: 0.95rem;
@@ -107,18 +108,22 @@
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 1rem;
text-align: left;
}
.games-table thead tr {
height: 4vh;
}
#tableMain.games-table tbody {
max-height: 59vh;
}
.games-table tbody tr {
border-bottom: 1px solid var(--tcg-border-color);
transition: all 0.3s ease;
height: 4vh;
}
.games-table tbody tr:hover {
background: rgba(139, 92, 246, 0.1);
}
.games-table tbody tr.inactive {
opacity: 0.5;
}
@@ -132,7 +137,38 @@
color: white;
}
.game-id {
.games-table thead tr th.game_id,
.games-table tbody tr td.game_id {
min-width: 10vh;
max-width: 10vh;
}
.games-table thead tr th.is_commander,
.games-table tbody tr td.is_commander {
min-width: 12vh;
max-width: 12vh;
}
.games-table thead tr th.location_name,
.games-table tbody tr td.location_name {
min-width: 20vh;
max-width: 20vh;
}
.games-table thead tr th.start_on,
.games-table tbody tr td.start_on {
min-width: 14vh;
max-width: 14vh;
}
#tableMain.games-table thead tr th.active,
#tableMain.games-table tbody tr td.active {
min-width: 8vh;
max-width: 8vh;
}
.games-table thead tr th.navMtgGame,
.games-table tbody tr td.navMtgGame {
min-width: 13vh;
max-width: 13vh;
}
.game_id {
font-family: 'Cinzel', serif;
font-weight: 600;
color: var(--tcg-text-secondary);
@@ -223,7 +259,7 @@
/* Join Button */
.btn-join {
padding: 0.5rem 1.25rem;
padding: 0.5vh 1vw;
font-size: 0.9rem;
}
@@ -265,7 +301,7 @@
animation: tcg-fadeIn 0.3s ease-out;
}
.modal-overlay.hidden {
.modal-overlay.is_collapsed {
display: none;
}
@@ -338,7 +374,6 @@
}
.section-header {
flex-direction: column;
align-items: stretch;
}

4
static/css/pages/user/user.css
View File

@@ -22,6 +22,6 @@ label {
input.dirty,
textarea.dirty,
select.dirty {
border-color: var(--colour-primary);
background-color: var(--colour-page-background-2);
border-color: var(--primary-color);
background-color: var(--background-color-2);
}

2
static/css/sections/tcg.css
View File

@@ -14,7 +14,7 @@
/* Main Table */
#pageBody {
max-height: 77vh;
max-height: 82vh;
padding: 0 5vw;
margin: 0;
border: 0;

4
static/css/themes/dark.css
View File

@@ -1,4 +1,4 @@
/*
:root {
--background-color: #121212;
--text-color: #e0e0e0;
@@ -43,5 +43,5 @@
--card-bg: #1f1f1f;
--card-border: #333333;
--card-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.05);
*/
}
*/

4
static/css/themes/icons.css
View File

@@ -15,7 +15,7 @@
border-radius: 2vh;
}
.theme-switch:hover {
background-color: var(--colour-primary);
background-color: var(--primary-color);
}
.theme-switch img.theme-icon,
.theme-switch svg.theme-icon {
@@ -40,7 +40,7 @@ svg.theme-icon.light-mode-icon .background {
fill: var(--colour-secondary);
}
.theme-switch:hover svg.theme-icon.light-mode-icon .background {
fill: var(--colour-primary);
fill: var(--primary-color);
}
svg.theme-icon.light-mode-icon .sun {
fill: var(--colour-text);

8
static/css/themes/light.css
View File

@@ -6,10 +6,10 @@
--colour-error-accent: #fc8181;
--colour-error-highlight: #fff5f5;
--colour-error-title: #c53030;
--colour-page-background: #E0AAFF;
--colour-page-background-1: #F5ECFE;
--colour-page-background-2: #FAE0E2;
--colour-primary: #240046;
--background-color: #E0AAFF;
--background-color-1: #F5ECFE;
--background-color-2: #FAE0E2;
--primary-color: #240046;
--colour-secondary: #3C096C;
--colour-success: #38a169;
--colour-success-highlight: #f0fff4;