From dc354e52172a69d3dd47a52b024ba8e58e5d1821 Mon Sep 17 00:00:00 2001 From: projectmoon Date: Sat, 23 Jan 2021 15:02:01 +0000 Subject: [PATCH] Make view page responsive. Add mobile device viewport meta. --- src/frontend/templates/base.html.tera | 1 + .../characters/view_character.html.tera | 216 ++++++++++++------ .../view_character_macros.html.tera | 4 +- 3 files changed, 151 insertions(+), 70 deletions(-) diff --git a/src/frontend/templates/base.html.tera b/src/frontend/templates/base.html.tera index ef16c45..bd6adc7 100644 --- a/src/frontend/templates/base.html.tera +++ b/src/frontend/templates/base.html.tera @@ -2,6 +2,7 @@ + Tera Demo diff --git a/src/frontend/templates/characters/view_character.html.tera b/src/frontend/templates/characters/view_character.html.tera index 93ef9b6..3d64c55 100644 --- a/src/frontend/templates/characters/view_character.html.tera +++ b/src/frontend/templates/characters/view_character.html.tera @@ -8,40 +8,66 @@ 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 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; + 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 +75,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,17 +101,67 @@ 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: inline-flex; + border: 1px solid gray; + margin-top: -1px; + } + + .merit .merit-name { + width: 10em; + vertical-align: text-bottom; + 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 span { + width: 3em; + text-align: left; + vertical-align: text-bottom; + padding: 8px; + margin: 0; + } + + .merit .remove-merit { + max-width: 4em; + padding: 0; + padding: 3px; + padding-left: 6px; + padding-right:6px; + margin: 3px; + background-color: lightgray; + }

Core Sheet

@@ -102,42 +177,47 @@

Name:

System: {{data_type}}

-
- {{ macros::attribute(name="Intelligence", value=sheet.intelligence) }} - {{ macros::attribute(name="Wits", value=sheet.wits) }} - {{ macros::attribute(name="Resolve", value=sheet.resolve) }} -
+
+
+ {{ macros::attribute(name="Intelligence", value=sheet.intelligence) }} + {{ macros::attribute(name="Wits", value=sheet.wits) }} + {{ macros::attribute(name="Resolve", value=sheet.resolve) }} +
-
- {{ macros::attribute(name="Strength", value=sheet.strength) }} - {{ macros::attribute(name="Dexterity", value=sheet.dexterity) }} - {{ macros::attribute(name="Stamina", value=sheet.stamina) }} -
+
+ {{ macros::attribute(name="Strength", value=sheet.strength) }} + {{ macros::attribute(name="Dexterity", value=sheet.dexterity) }} + {{ macros::attribute(name="Stamina", value=sheet.stamina) }} +
-
- {{ macros::attribute(name="Presence", value=sheet.presence) }} - {{ macros::attribute(name="Manipulation", value=sheet.manipulation) }} - {{ macros::attribute(name="Composure", value=sheet.composure) }} +
+ {{ macros::attribute(name="Presence", value=sheet.presence) }} + {{ macros::attribute(name="Manipulation", value=sheet.manipulation) }} + {{ macros::attribute(name="Composure", value=sheet.composure) }} +
-
- {% for skill_name, skill in sheet.mentalSkills %} - {{ macros::skill(name=skill_name, value=skill.dots) }} - {% endfor %} -
+

Skills

+
+
+ {% for skill_name, skill in sheet.mentalSkills %} + {{ macros::skill(name=skill_name, value=skill.dots) }} + {% endfor %} +
-
- {% for skill_name, skill in sheet.physicalSkills %} - {{ macros::skill(name=skill_name, value=skill.dots) }} - {% endfor %} -
+
+ {% for skill_name, skill in sheet.physicalSkills %} + {{ macros::skill(name=skill_name, value=skill.dots) }} + {% endfor %} +
-
- {% for skill_name, skill in sheet.socialSkills %} - {{ macros::skill(name=skill_name, value=skill.dots) }} - {% endfor %} +
+ {% for skill_name, skill in sheet.socialSkills %} + {{ macros::skill(name=skill_name, value=skill.dots) }} + {% endfor %} +
diff --git a/src/frontend/templates/characters/view_character_macros.html.tera b/src/frontend/templates/characters/view_character_macros.html.tera index fdd3fce..5101aee 100644 --- a/src/frontend/templates/characters/view_character_macros.html.tera +++ b/src/frontend/templates/characters/view_character_macros.html.tera @@ -1,13 +1,13 @@ {% macro attribute(name, value) %}
-
{{value}}
+ {{value}}
{% endmacro attribute %} {% macro skill(name, value) %}
-
{{value}}
+ {{value}}
{% endmacro skill %}