From 7227d02ab6a6ba343643ec399bc0bcdff92d395b Mon Sep 17 00:00:00 2001 From: Joshua Wise <58231753+JoshuaWWise@users.noreply.github.com> Date: Wed, 21 Aug 2024 08:03:08 -0400 Subject: [PATCH] Updated format for grid layout Replaced Table layout with grid layout --- The Worst Days/WorstDays.html | 1743 ++++++++++++++++-------------- The Worst Days/WorstDays_CSS.css | 246 ++++- 2 files changed, 1147 insertions(+), 842 deletions(-) diff --git a/The Worst Days/WorstDays.html b/The Worst Days/WorstDays.html index 9a7b0a1dd2a..4bdf94cfb7c 100644 --- a/The Worst Days/WorstDays.html +++ b/The Worst Days/WorstDays.html @@ -1,5 +1,5 @@  - +
@@ -10,948 +10,1017 @@
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ +
+
+ +
+ + +
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+ + +
+ +
+
+ +
+
+
+
- - - - - - - - - - - - -
- - -
-
- - - -
- +
+
+
+
Traits and Facets
+
+
+ +
+
Cunning
+ +
+ D
-
- +
+ + +
+
Bargain*
+ +
+ +D
+ +
+ +
+
Deceive
+ +
+ +D +
+
+ +
+
Forge
+ +
+ +D +
+ +
+ +
+
Perceive
+ +
+ +D +
+ +
-
-
-
- - - -
- + +
+
Perform
+ +
+ +D +
+ +
+ + +
+
Sneak
+ +
+ +D +
+ +
+
+ +
+
+
Intelligence
+ +
+ D
-
- +
+ +
+
Debate*
+ +
+ +D +
+ +
+ +
+
First Aid
+ +
+ +D +
+ +
+ +
+
General Knowledge
+ +
+ +D +
+ +
+ +
+
Navigate
+ +
+ +D +
+ +
+ +
+
Remember
+ +
+ +D +
+ +
+ +
+
Solve Puzzle
+ +
+ +D +
+ +
+ +
+
Survival
+ +
+ +D +
+ +
+
+ +
+
+
Physical
+ +
+ D +
+
+ +
+
Climb
+ +
+ +D +
+ +
+ +
+
Feat of Agility
+ +
+ +D +
+ +
+ +
+
Feat of Strength
+ +
+ +D +
+ +
+ +
+
Endurance
+ +
+ +D +
+ +
+ +
+
Intimidate*
+ +
+ +D +
+ +
+ +
+
React
+ +
+ +D +
+ +
+ +
+
Rumble
+ +
+ +D +
+ +
+ +
+
Shoot
+ +
+ +D +
+ +
+
+ +
+
+
Social
+ +
+ D +
+
+ +
+
Charm*
+ +
+ +D +
+ +
+ +
+
Comfort
+ +
+ +D +
+ +
+ +
+
Etiquette
+ +
+ +D +
+ +
+ +
+
Find the Party
+ +
+ +D +
+ +
+ +
+
Insight
+ +
+ +D +
+ +
+ +
+
Network
+ +
+ +D
+
-
- - - - - - - - - -
- - - - -
Traits & Facets
- - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Cunning
 - -
- D -
-
Bargain*
 -
- +D -
-
Deceive
 +D
Forge
 +D
Perceive
 +D
Perform
 +D
Sneak
 +D
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Intelligence
 -
- D -
-
Debate*
 -
+D
-
First Aid
 -
+D
-
General Knowledge
 -
+D
-
Navigate
 -
+D
-
Remember
 -
+D
-
Solve Puzzle
 -
+D
-
Survival
 -
+D
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Physical
 -
- D -
-
Climb
 -
+D
-
Feat of Agility
 -
+D
-
Feat of Strength
 -
+D
-
Endurance
 -
+D
-
Intimidate*
 -
+D
-
React
 -
+D
-
Rumble
 -
+D
-
Shoot
 -
+D
-
- 		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Social
 -
- D -
-
Charm*
 -
+D
-
Comfort
 -
+D
-
Etiquette
 -
+D
-
Find the Party
 -
+D
-
Insight
 -
+D
-
Network
 -
+D
-
-

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tech
 -
- D -
-
Computers
 -
+D
-
Craft
 -
+D
-
Dazzle*
 -
+D
-
Electronics
 -
+D
-
Improvise
 -
+D
-
Intuit Tech
 -
+D
-
Mechanics
 -
+D
-
-

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Will
 -
- D -
-
Create
 -
+D
-
Inspire
 -
+D
-
Pressure*
 -
+D
-
Resist Fear
 -
+D
-
Resist Influence
 -
+D
-
Resist Temptation
 -
+D
-
-
- - - - - - - - - - - - - - - - -
Quirks
Archetype QuirkBackground Quirk
- - - -
Purchased QuirksPurchased Quirks
- -
- -
- -
- -
- -
- -
- 		- -
- -
- -
- -
- -
- -
-
- - - - -
- -
- -
- 		- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
Fortune
-
- - - - - - - - - - - - - - -
-
Fortune Points
-
- -
-
Misfortune Points
-
- -
-
-
Peace of Mind
-
- - - - - - - - - - - - - - - - - -
-
Current / Permanent
-
- / -
- -
-
Recovery Points
-
- -
-
-
Wounds
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
Minor
-
- -
- - -
-
Moderate
-
- -
- - -
-
Severe
-
- -
- - -
-
Debilitating
-
- -
- - -
-
Dying
-
- -
- - -
-
-
Hard No's/Yes's
-
- -
-
Hot Take
-
- -
-
+
+ +
+
+
Tech
+ +
+ D +
+
+ +
+
Computers
+ +
+ +D +
+ +
+ +
+
Craft
+ +
+ +D +
+ +
+ +
+
Dazzle*
+ +
+ +D +
+ +
+ +
+
Electronics
+ +
+ +D +
+ +
+ +
+
Improvise
+ +
+ +D +
+ +
+ +
+
Intuit Tech
+ +
+ +D +
+ +
+ +
+
Mechanics
+ +
+ +D +
+ +
+
+ +
+
+
Will
+ +
+ D +
+
+ +
+
Create
+ +
+ +D +
+ +
+ +
+
Inspire
+ +
+ +D +
+ +
+ +
+
Pressure*
+ +
+ +D +
+ +
+ +
+
Resist Fear
+ +
+ +D +
+ +
+ +
+
Resist Influence
+ +
+ +D +
+ +
+ +
+
Resist Temptation
+ +
+ +D +
+ +
+
+ + +
+
Quirks
+ +
Archetype Quirk
+
Background Quirk
+
+ +
+
+ +
+ + +
Purchased Quirks
+
Purchased Quirks
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ +
+ + + +
+
+
Fortune
+
+
Fortune Points
+ +
Misfortune Points
+ + +
+
Peace of Mind
+
+
Current / Permanent
+ / +
+ +
Recovery Points
+ +
+
Wounds
+
+
+
Minor
+
+ +
+ +
+
+ +
+
+
+
+ + +
+
+
+
Moderate
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+
+
+
Severe
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+
+
+
Debilitating
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+
+
+
Dying
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+
+
+
Hard No's/Yes's
+
+ +
+
Hot Take
+
+ +
+
+
+ +

Journal/Notes

-
+

Character Survey

+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- - + +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- - + +
+ +
+
- - + +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
+
- +
+ +
- -
+ diff --git a/The Worst Days/WorstDays_CSS.css b/The Worst Days/WorstDays_CSS.css index c3a56a5b005..5565216d28f 100644 --- a/The Worst Days/WorstDays_CSS.css +++ b/The Worst Days/WorstDays_CSS.css @@ -38,6 +38,7 @@ font-weight: bolder; font-size: x-large; border-radius: 5px 5px 0px 0px; + text-align: center; } .SheetHeader { @@ -70,10 +71,197 @@ vertical-align: top; } -.TopSection { - border: 1px black solid; +.grid-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + border: 1px solid black; + border-radius: 5px; + max-width: 1000px; + min-width: 700px; +} + +.MainGrid { + display: grid; + grid-template-columns: [LeftSection] 60% [RightSection]40%; + grid-template-rows: [TraitFacetRow] auto [QuirksRow] auto; + width: 100%; + max-width: 1000px; + min-width: 700px; +} + +.TraitsFacetsTable { + grid-row: TraitFacetRow; + grid-column: LeftSection; + display: grid; + grid-template-columns: [TraitsLeftColumn] 50% [TraitsRightColumn] 50%; + grid-template-rows: [TraitsTitleRow] auto [TraitsRow1] auto [TraitsMiddleRow] auto [TraitsBottomRow] auto; + width: 100%; + max-width: 600px; + min-width: 425px; + border: solid 1px black; border-radius: 5px; +} + +.TraitsTitle { + grid-row: TraitsTitleRow; + grid-column: TraitsLeftColumn / span 2; +} + +.RightInfoTable { + grid-row: TraitFacetRow / span 2; + width: 100%; +} + +.CunningTable { + grid-row: TraitsRow1; + grid-column: TraitsLeftColumn; + width: 100%; + margin-bottom: 10px; +} + +.IntelligenceTable { + grid-row: TraitsMiddleRow; + grid-column: TraitsLeftColumn; + width: 100%; + margin-bottom: 10px; +} + +.PhysicalTable { + grid-row: TraitsBottomRow; + grid-column: TraitsLeftColumn; + width: 100%; +} + +.SocialTable { + grid-row: TraitsRow1; + grid-column: TraitsRightColumn; + width: 100%; + margin-bottom: 10px; +} + +.TechTable { + grid-row: TraitsMiddleRow; + grid-column: TraitsRightColumn; width: 100%; + margin-bottom: 10px; +} + +.WilLTable { + grid-row: TraitsBottomRow; + grid-column: TraitsRightColumn; + width: 100%; +} + +.QuirksTable { + grid-row: QuirksRow; + grid-column: LeftSection; + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + border: 1px solid black; + border-radius: 5px; +} + +.QuirkTitle { + grid-column: 1 / span 2; +} + +.QuirkLabel { + font-weight: bold; + text-align: left; +} + +.QuirkDropdown input[type="text"] { + width: 100%; + font-size: 14px; + box-sizing: border-box; +} + +.QuirkNotes { + grid-column: 1 / span 2; +} + +.WoundTable { + display: grid; + grid-template-columns: 10% 80% 10%; /* Columns for checkboxes and dropdown */ + grid-template-rows: auto auto auto auto; /* Rows for title, checkboxes, labels, and text */ + align-items: center; + justify-items: center; /* Centers items horizontally within their columns */ + border-bottom: 1px solid; +} + +.WoundTitle { + grid-column: 1 / span 3; /* Spans across all columns */ + text-align: center; + font-weight: bold; + margin-bottom: 5px; +} + +.WoundACheck { + grid-column: 1; + grid-row: 2; +} + +.WoundMiddle { + grid-column: 2; + grid-row: 2 / span 2; /* Spans rows 2 and 3 */ + justify-self: stretch; /* Ensures the dropdown stretches to fill the column */ +} + +.WoundMCheck { + grid-column: 3; + grid-row: 2; +} + +.WoundALabel { + grid-column: 1; + grid-row: 3; + text-align: right; +} + +.WoundMLabel { + grid-column: 3; + grid-row: 3; + text-align: right; +} + +.WoundSelect { + grid-column: 1 / span 3; /* Spans across all columns */ + grid-row: 4; + text-align: center; + margin-top: 10px; +} + + +.inner-grid-container { + display: grid; + grid-template-columns: auto auto; +} + +.grid-item { + padding: 10px; +} + +.grid-item-label { + grid-column: 1 / span 1; +} + +.grid-item-button { + grid-column: 2 / span 1; +} + +.grid-row { + display: grid; + grid-template-columns: auto auto auto auto; + align-items: center; + gap: 10px; + margin-bottom: 10px; +} + +.TraitTextColumnRight { + width: 100%; + vertical-align: top; + margin-bottom: 20px; } .logo { @@ -82,17 +270,25 @@ } .mtLeftColumn { - width: 70%; + grid-column: 1 / span 2; border: 1px black solid; border-radius: 5px; } .mtRightColumn { - width: 30%; + grid-column: 3 / span 1; vertical-align: top; text-align: center; } +.tfLeftColumn { + grid-column: 1 / span1; +} + +tfRightColumn { + grid-column: 2/ span 1; +} + .widthEighty { width: 70%; } @@ -105,7 +301,6 @@ input { background-color: #fff1f1; } - .charsheet .sheet-character, .charsheet .sheet-journal, .charsheet .sheet-survey { @@ -170,3 +365,44 @@ input { background-color: white; } + +.facet-group { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2px; + margin-right: 5px; +} + + + +.Trait { + font-weight: bolder; + font-size: large; +} + +.Trait, .Facet { + flex: 1; + text-align: left; +} + + +.facet-group > button, +.facet-group > div { + flex-shrink: 0; + margin-left: 10px; + display: flex; + align-items: center; +} + +.AddButton { + background-color: lightblue; + font-size: x-small; + border-radius: 5px; + margin-left: 10px; + height: 90%; +} + +input { + background-color: #fff1f1; +}