Overflow merit names on view character page.

Add a 'home' link to the character sheets
CofD view character page parity with edit character page.
2021-01-23 15:41:09 +00:00 · 2021-01-23 15:26:30 +00:00 · 2021-01-23 15:13:56 +00:00 · 2021-01-23 15:02:01 +00:00 · 2021-01-23 14:52:02 +00:00 · 2021-01-23 14:45:51 +00:00
6 changed files with 299 additions and 126 deletions
--- a/src/frontend/scripts/characters/edit.ts
+++ b/src/frontend/scripts/characters/edit.ts
@ -87,7 +87,7 @@ import * as api from "../api";
            console.log("got a response back", resp);
        }

-        const inputs = document.querySelectorAll("#basicInfo input");
+        const inputs = document.querySelectorAll("#basics input");

        inputs.forEach(input => {
            console.log('got an input', input);
--- a/src/frontend/templates/base.html.tera
+++ b/src/frontend/templates/base.html.tera
@ -2,6 +2,7 @@
 <html>
    <head>
        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Tera Demo</title>
    </head>
    <body>
--- a/src/frontend/templates/characters/edit_character.html.tera
+++ b/src/frontend/templates/characters/edit_character.html.tera
@ -7,28 +7,57 @@
         font-family: Liberation Sans, Arial;
     }

-     #attributes {
-         padding: 4px;
-         border-collapse: collapse;
+     #basics .flex-container {
+         display: flex;
+         flex-flow: row wrap;
+     }
+
+     .basics-row {
+         display: block;
+     }
+
+     .basics-entry {
+         display: flex;
+         border: 1px solid gray;
+         margin-left: -1px;
+         margin-top: -1px;
+     }
+
+     .basics-entry label {
+         display: inline;
+         width: 5em;
+         text-align: right;
+         vertical-align: text-bottom;
+         padding: 8px;
+         margin: 0;
+     }
+
+     .basics-entry input {
+         display: inline;
+         padding: 8px;
+         border: none;
+         background-color: lightgray;
+         margin: 0;
+     }
+
+     #attributes .flex-container {
+         display: flex;
+         flex-flow: row wrap;
     }

     #attributes .attributes-section {
         border: 1px solid gray;
-         border-collapse: collapse;
-         display: table-cell;
+         margin-left: -1px;
+         margin-top: -1px;
     }

     .attribute {
-         margin: 0;
-         padding: 0;
         display: flex;
     }

     .attribute label {
-         display: inline-block;
-         float: left;
-         clear: left;
         width: 10em;
+         display: inline;
         text-align: right;
         vertical-align: text-bottom;
         padding: 8px;
@ -37,8 +66,7 @@

     .attribute input {
         max-width: 4em;
-         display: inline-block;
-         float: left;
+         display: inline;
         padding: 8px;
         border: none;
         background-color: lightgray;
@ -46,26 +74,25 @@
     }

     #skills {
-         padding: 4px;
-         border-collapse: collapse;
+
+     }
+
+     #skills .flex-container {
+         display: flex;
+         flex-flow: row wrap;
     }

     #skills .skills-section {
         border: 1px solid gray;
-         border-collapse: collapse;
-         display: table-cell;
+         margin-top: -1px;
+         margin-left: -1px;
     }

     .skill {
-         margin: 0;
-         padding: 0;
         display: flex;
     }

     .skill label {
-         display: inline-block;
-         float: left;
-         clear: left;
         width: 10em;
         text-align: right;
         vertical-align: text-bottom;
@ -75,8 +102,6 @@

     .skill input {
         max-width: 4em;
-         display: inline-block;
-         float: left;
         padding: 8px;
         border: none;
         background-color: lightgray;
@ -140,73 +165,93 @@
    {# Webpack Templating for API script #}
    <%= htmlWebpackPlugin.tags.bodyTags %>

-    <h1>Core Sheet</h1>
    <div>
-        <div id="basicInfo">
+        <div id="basics">
            <h1>
-                <label for="characterName">Name:</label>
+                <label for="characterName">Name</label>
                <input type="text" id="characterName" name="characterName" value="{{name}}" />
            </h1>
+
+            <div class="links">
+                <a href="/">Home</a> |
+                <a href="/characters/{{username}}/{{id}}">Save Changes</a> |
+                <a href="/characters/{{username}}/{{id}}/delete">Delete Character</a>
+            </div>
+
+            <h2>Basics</h2>
            <div>System: {{data_type}}</div>

-            <div>
-                <label for="gender">Gender:</label>
-                <input type="text" id="gender" name="gender" value="{{sheet.gender}}" />
-            </div>
+            <div class="flex-container">
+                <div class="basics-row">
+                    <div class="basics-entry">
+                        <label for="gender">Gender:</label>
+                        <input type="text" id="gender" name="gender" value="{{sheet.gender}}" />
+                    </div>

-            <div>
-                <label for="age">Age:</label>
-                <input type="number" id="age" name="age" min="0" value="{{sheet.age}}" />
-            </div>
+                    <div class="basics-entry">
+                        <label for="age">Age:</label>
+                        <input type="number" id="age" name="age" min="0" value="{{sheet.age}}" />
+                    </div>
+                </div>

-            <div>
-                <label for="concept">Concept:</label>
-                <input type="text" id="concept" name="concept" value="{{sheet.concept}}" />
-            </div>
+                <div class="basics-row">
+                    <div class="basics-entry">
+                        <label for="concept">Concept:</label>
+                        <input type="text" id="concept" name="concept" value="{{sheet.concept}}" />
+                    </div>

-            <div>
-                <label for="chronicle">Chronicle:</label>
-                <input type="text" id="chronicle" name="chronicle" value="{{sheet.chronicle}}" />
+                    <div class="basics-entry">
+                        <label for="chronicle">Chronicle:</label>
+                        <input type="text" id="chronicle" name="chronicle" value="{{sheet.chronicle}}" />
+                    </div>
+                </div>
            </div>
        </div>

        <div id="attributes">
-            <div class="attributes-section" id="mentalAttributes">
-                {{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
-                {{ macros::attribute(name="Wits", value=sheet.wits) }}
-                {{ macros::attribute(name="Resolve", value=sheet.resolve) }}
-            </div>
+            <h2>Attributes</h2>
+            <div class="flex-container">
+                <div class="attributes-section" id="mentalAttributes">
+                    {{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
+                    {{ macros::attribute(name="Wits", value=sheet.wits) }}
+                    {{ macros::attribute(name="Resolve", value=sheet.resolve) }}
+                </div>

-            <div class="attributes-section" id="physicalAttributes">
-                {{ macros::attribute(name="Strength", value=sheet.strength) }}
-                {{ macros::attribute(name="Dexterity", value=sheet.dexterity) }}
-                {{ macros::attribute(name="Stamina", value=sheet.stamina) }}
-            </div>
+                <div class="attributes-section" id="physicalAttributes">
+                    {{ macros::attribute(name="Strength", value=sheet.strength) }}
+                    {{ macros::attribute(name="Dexterity", value=sheet.dexterity) }}
+                    {{ macros::attribute(name="Stamina", value=sheet.stamina) }}
+                </div>

-            <div class="attributes-section" id="socicalAttributes">
-                {{ macros::attribute(name="Presence", value=sheet.presence) }}
-                {{ macros::attribute(name="Manipulation", value=sheet.manipulation) }}
-                {{ macros::attribute(name="Composure", value=sheet.composure) }}
+                <div class="attributes-section" id="socicalAttributes">
+                    {{ macros::attribute(name="Presence", value=sheet.presence) }}
+                    {{ macros::attribute(name="Manipulation", value=sheet.manipulation) }}
+                    {{ macros::attribute(name="Composure", value=sheet.composure) }}
+                </div>
            </div>
        </div>

        <div id="skills">
-            <div class="skills-section" id="mentalSkills">
-                {% for skill_name, skill in sheet.mentalSkills %}
-                    {{ macros::skill(name=skill_name, value=skill.dots) }}
-                {% endfor %}
-            </div>
+            <h2>Skills</h2>

-            <div class="skills-section" id="physicalSkills">
-                {% for skill_name, skill in sheet.physicalSkills %}
-                    {{ macros::skill(name=skill_name, value=skill.dots) }}
-                {% endfor %}
-            </div>
+            <div class="flex-container">
+                <div class="skills-section" id="mentalSkills">
+                    {% for skill_name, skill in sheet.mentalSkills %}
+                        {{ macros::skill(name=skill_name, value=skill.dots) }}
+                    {% endfor %}
+                </div>

-            <div class="skills-section" id="socialSkills">
-                {% for skill_name, skill in sheet.socialSkills %}
-                    {{ macros::skill(name=skill_name, value=skill.dots) }}
-                {% endfor %}
+                <div class="skills-section" id="physicalSkills">
+                    {% for skill_name, skill in sheet.physicalSkills %}
+                        {{ macros::skill(name=skill_name, value=skill.dots) }}
+                    {% endfor %}
+                </div>
+
+                <div class="skills-section" id="socialSkills">
+                    {% for skill_name, skill in sheet.socialSkills %}
+                        {{ macros::skill(name=skill_name, value=skill.dots) }}
+                    {% endfor %}
+                </div>
            </div>
        </div>

--- a/src/frontend/templates/characters/view_character.html.tera
+++ b/src/frontend/templates/characters/view_character.html.tera
@ -8,40 +8,67 @@
         font-family: Liberation Sans, Arial;
     }

-     #attributes {
-         padding: 4px;
-         border-collapse: collapse;
-     }
-
-     #attributes .attributes-section {
-         border: 1px solid gray;
-         border-collapse: collapse;
-         display: table-cell;
-     }
-
-     .attribute {
-         margin: 0;
-         padding: 0;
+     #basics .flex-container {
         display: flex;
+         flex-flow: row wrap;
     }

-     .attribute label {
-         display: inline-block;
-         float: left;
-         clear: left;
-         width: 10em;
+     .basics-row {
+         display: block;
+     }
+
+     .basics-entry {
+         display: flex;
+         border: 1px solid gray;
+         margin-left: -1px;
+         margin-top: -1px;
+     }
+
+     .basics-entry label {
+         display: inline;
+         width: 5em;
         text-align: right;
         vertical-align: text-bottom;
         padding: 8px;
         margin: 0;
     }

-     .attribute div.value {
-         min-width: 1.5em;
-         max-width: 4em;
-         text-align: center;
-         display: inline-block;
-         float: left;
+     .basics-entry span {
+         width: 15em;
+         overflow: hidden;
+         padding: 8px;
+         border: none;
+         background-color: lightgray;
+         margin: 0;
+     }
+
+     #attributes .flex-container {
+         display: flex;
+         flex-flow: row wrap;
+     }
+
+     #attributes .attributes-section {
+         border: 1px solid gray;
+         margin-left: -1px;
+         margin-top: -1px;
+     }
+
+     .attribute {
+         display: flex;
+     }
+
+     .attribute label {
+         width: 10em;
+         display: inline;
+         text-align: right;
+         vertical-align: text-bottom;
+         padding: 8px;
+         margin: 0;
+     }
+
+     .attribute span {
+         width: 2em;
+         overflow: hidden;
         padding: 8px;
         border: none;
         background-color: lightgray;
@ -49,26 +76,25 @@
     }

     #skills {
-         padding: 4px;
-         border-collapse: collapse;
+
+     }
+
+     #skills .flex-container {
+         display: flex;
+         flex-flow: row wrap;
     }

     #skills .skills-section {
         border: 1px solid gray;
-         border-collapse: collapse;
-         display: table-cell;
+         margin-top: -1px;
+         margin-left: -1px;
     }

     .skill {
-         margin: 0;
-         padding: 0;
         display: flex;
     }

     .skill label {
-         display: inline-block;
-         float: left;
-         clear: left;
         width: 10em;
         text-align: right;
         vertical-align: text-bottom;
@ -76,32 +102,115 @@
         margin: 0;
     }

-     .skill div.value {
-         min-width: 1.5em;
-         max-width: 4em;
-         display: inline-block;
-         text-align: center;
-         float: left;
+     .skill span {
+         width: 2em;
+         overflow: hidden;
         padding: 8px;
         border: none;
         background-color: lightgray;
         margin: 0;
     }
+
+     #merits {
+         padding: 4px;
+     }
+
+     #merit-list {
+         display: inline-flex;
+         flex-direction: column;
+     }
+
+     .merit {
+         /* margin: 0;
+            padding: 0; */
+         display: flex;
+         border: 1px solid gray;
+         margin-top: -1px;
+     }
+
+     .merit span {
+         width: 3em;
+         text-align: left;
+         padding: 8px;
+         margin: 0;
+     }
+
+     .merit .merit-name {
+         width: 10em;
+         white-space: nowrap;
+         overflow: auto;
+         padding: 0;
+         margin: 8px;
+         border: none;
+         border: 0px solid gray;
+         border-bottom-width: 1px;
+     }
+
+     .merit .merit-dots {
+         max-width: 4em;
+         padding: 8px;
+         border: none;
+         background-color: lightgray;
+         margin: 0;
+     }
+
+     .merit .remove-merit {
+         max-width: 4em;
+         padding: 0;
+         padding: 3px;
+         padding-left: 6px;
+         padding-right:6px;
+         margin: 3px;
+         background-color: lightgray;
+     }
    </style>

-    <h1>Core Sheet</h1>
    <div>
-        <h1>Character {{name}}</h1>
-        <h3>User: {{username}}</h3>
-        <p>System: {{data_type}}</h3>
-    </div>
+        <div id="basics">
+            <h1>
+                <span id="characterName" name="characterName">{{name}}</span>
+            </h1>

-    <div>
-        <h1>Core Sheet</h1>
-        <div>
-            <h1>Name: <input type="text" value="{{name}}" /></h1>
-            <p>System: {{data_type}}</p>
-            <div id="attributes">
+            <div class="links">
+                <a href="/">Home</a> |
+                <a href="/characters/{{username}}/{{id}}/edit">Edit Character</a> |
+                <a href="/characters/{{username}}/{{id}}/delete">Delete Character</a>
+            </div>
+
+            <h2>Basics</h2>
+            <div>System: {{data_type}}</div>
+
+            <div class="flex-container">
+                <div class="basics-row">
+                    <div class="basics-entry">
+                        <label for="gender">Gender:</label>
+                        <span id="gender" name="gender">{{sheet.gender}}</span>
+                    </div>
+
+                    <div class="basics-entry">
+                        <label for="age">Age:</label>
+                        <span id="age" name="age">{{sheet.age}}</span>
+                    </div>
+                </div>
+
+                <div class="basics-row">
+                    <div class="basics-entry">
+                        <label for="concept">Concept:</label>
+                        <span id="concept" name="concept">{{sheet.concept}}</span>
+                    </div>
+
+                    <div class="basics-entry">
+                        <label for="chronicle">Chronicle:</label>
+                        <span id="chronicle" name="chronicle">{{sheet.chronicle}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <div id="attributes">
+            <h2>Attributes</h2>
+            <div class="flex-container">
                <div class="attributes-section" id="mentalAttributes">
                    {{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
                    {{ macros::attribute(name="Wits", value=sheet.wits) }}
@ -120,8 +229,11 @@
                    {{ macros::attribute(name="Composure", value=sheet.composure) }}
                </div>
            </div>
+        </div>

-            <div id="skills">
+        <div id="skills">
+            <h2>Skills</h2>
+            <div class="flex-container">
                <div class="skills-section" id="mentalSkills">
                    {% for skill_name, skill in sheet.mentalSkills %}
                        {{ macros::skill(name=skill_name, value=skill.dots) }}
@ -142,7 +254,13 @@
            </div>
        </div>

-        <div>
-            <a href="/characters/{{username}}/{{id}}/edit">Edit Character</a>
+        <div id="merits">
+            <h2>Merits</h2>
+            <div id="merit-list">
+                {% for merit in sheet.merits %}
+                    {{ macros::merit(name=merit.name, value=merit.dots) }}
+                {% endfor %}
+            </div>
        </div>
+    </div>
 {% endblock content %}
--- a/src/frontend/templates/characters/view_character_macros.html.tera
+++ b/src/frontend/templates/characters/view_character_macros.html.tera
@ -1,13 +1,20 @@
 {% macro attribute(name, value) %}
    <div class="attribute">
        <label for="{{name}}">{{name}}:</label>
-        <div class="value" id="{{name}}">{{value}}</div>
+        <span class="value" id="{{name}}">{{value}}</span>
    </div>
 {% endmacro attribute %}

 {% macro skill(name, value) %}
    <div class="skill">
        <label for="{{name}}">{{name}}:</label>
-        <div class="value" id="{{name}}">{{value}}</div>
+        <span class="value" id="{{name}}">{{value}}</span>
    </div>
 {% endmacro skill %}
+
+{% macro merit(name, value) %}
+<div class="merit">
+    <span class="merit-name">{{name}}</span>
+    <span class="merit-dots">{{value}}</span> <span>Dots</span>
+</div>
+{% endmacro merit %}
--- a/src/routes/characters/edit.rs
+++ b/src/routes/characters/edit.rs
@ -10,6 +10,7 @@ use strum::IntoEnumIterator;
 struct EditCharacterContext<'a> {
    pub name: &'a str,
    pub username: &'a str,
+    pub id: i32,
    pub data_type: &'a CharacterDataType,
    pub sheet: Box<DynCharacterData>,
    pub state: FormStateContext<'a>,
@ -26,6 +27,7 @@ fn edit_character_template(user: &User, character: Character) -> Result<Template
    let context = EditCharacterContext {
        name: &character.character_name,
        username: &user.username,
+        id: character.id,
        data_type: &character.data_type,
        sheet: character.dyn_deserialize()?,
        state: FormStateContext {
Author	SHA1	Message	Date
projectmoon	43e6c04ecd	Overflow merit names on view character page.	2021-01-23 15:41:09 +00:00
projectmoon	e5ec81464c	Add a 'home' link to the character sheets	2021-01-23 15:26:30 +00:00
projectmoon	a8a37104a6	CofD view character page parity with edit character page.	2021-01-23 15:13:56 +00:00
projectmoon	dc354e5217	Make view page responsive. Add mobile device viewport meta.	2021-01-23 15:02:01 +00:00
projectmoon	42ebfa4a54	Make skill list flexible.	2021-01-23 14:52:02 +00:00
projectmoon	ab58f0b971	Make attributes flexible.	2021-01-23 14:45:51 +00:00
projectmoon	9e5dea8f57	Make basic info look better.	2021-01-23 14:38:36 +00:00