projectmoon
/
tenebrous-sheets
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make view page responsive. Add mobile device viewport meta.

This commit is contained in:
projectmoon 2021-01-23 15:02:01 +00:00
parent 42ebfa4a54
commit dc354e5217
3 changed files with 151 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/frontend/templates/base.html.tera
View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tera Demo</title> <title>Tera Demo</title>
</head> </head>
<body> <body>

216
src/frontend/templates/characters/view_character.html.tera
View File

@ -8,40 +8,66 @@
font-family: Liberation Sans, Arial; font-family: Liberation Sans, Arial;
} }
#attributes { #basics .flex-container {
padding: 4px;
border-collapse: collapse;
}
#attributes .attributes-section {
border: 1px solid gray;
border-collapse: collapse;
display: table-cell;
}
.attribute {
margin: 0;
padding: 0;
display: flex; display: flex;
flex-flow: row wrap;
} }
.attribute label { .basics-row {
display: inline-block; display: block;
float: left; }
clear: left;
width: 10em; .basics-entry {
display: flex;
border: 1px solid gray;
margin-left: -1px;
margin-top: -1px;
}
.basics-entry label {
display: inline;
width: 5em;
text-align: right; text-align: right;
vertical-align: text-bottom; vertical-align: text-bottom;
padding: 8px; padding: 8px;
margin: 0; margin: 0;
} }
.attribute div.value { .basics-entry input {
min-width: 1.5em; display: inline;
max-width: 4em; padding: 8px;
text-align: center; border: none;
display: inline-block; background-color: lightgray;
float: left; 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; padding: 8px;
border: none; border: none;
background-color: lightgray; background-color: lightgray;
@ -49,26 +75,25 @@
} }
#skills { #skills {
padding: 4px;
border-collapse: collapse; }
#skills .flex-container {
display: flex;
flex-flow: row wrap;
} }
#skills .skills-section { #skills .skills-section {
border: 1px solid gray; border: 1px solid gray;
border-collapse: collapse; margin-top: -1px;
display: table-cell; margin-left: -1px;
} }
.skill { .skill {
margin: 0;
padding: 0;
display: flex; display: flex;
} }
.skill label { .skill label {
display: inline-block;
float: left;
clear: left;
width: 10em; width: 10em;
text-align: right; text-align: right;
vertical-align: text-bottom; vertical-align: text-bottom;
@ -76,17 +101,67 @@
margin: 0; margin: 0;
} }
.skill div.value { .skill span {
min-width: 1.5em; width: 2em;
max-width: 4em; overflow: hidden;
display: inline-block;
text-align: center;
float: left;
padding: 8px; padding: 8px;
border: none; border: none;
background-color: lightgray; background-color: lightgray;
margin: 0; 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;
}
</style> </style>
<h1>Core Sheet</h1> <h1>Core Sheet</h1>
@ -102,42 +177,47 @@
<h1>Name: <input type="text" value="{{name}}" /></h1> <h1>Name: <input type="text" value="{{name}}" /></h1>
<p>System: {{data_type}}</p> <p>System: {{data_type}}</p>
<div id="attributes"> <div id="attributes">
<div class="attributes-section" id="mentalAttributes"> <div class="flex-container">
{{ macros::attribute(name="Intelligence", value=sheet.intelligence) }} <div class="attributes-section" id="mentalAttributes">
{{ macros::attribute(name="Wits", value=sheet.wits) }} {{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
{{ macros::attribute(name="Resolve", value=sheet.resolve) }} {{ macros::attribute(name="Wits", value=sheet.wits) }}
</div> {{ macros::attribute(name="Resolve", value=sheet.resolve) }}
</div>
<div class="attributes-section" id="physicalAttributes"> <div class="attributes-section" id="physicalAttributes">
{{ macros::attribute(name="Strength", value=sheet.strength) }} {{ macros::attribute(name="Strength", value=sheet.strength) }}
{{ macros::attribute(name="Dexterity", value=sheet.dexterity) }} {{ macros::attribute(name="Dexterity", value=sheet.dexterity) }}
{{ macros::attribute(name="Stamina", value=sheet.stamina) }} {{ macros::attribute(name="Stamina", value=sheet.stamina) }}
</div> </div>
<div class="attributes-section" id="socicalAttributes"> <div class="attributes-section" id="socicalAttributes">
{{ macros::attribute(name="Presence", value=sheet.presence) }} {{ macros::attribute(name="Presence", value=sheet.presence) }}
{{ macros::attribute(name="Manipulation", value=sheet.manipulation) }} {{ macros::attribute(name="Manipulation", value=sheet.manipulation) }}
{{ macros::attribute(name="Composure", value=sheet.composure) }} {{ macros::attribute(name="Composure", value=sheet.composure) }}
</div>
</div> </div>
</div> </div>
<div id="skills"> <div id="skills">
<div class="skills-section" id="mentalSkills"> <h2>Skills</h2>
{% for skill_name, skill in sheet.mentalSkills %} <div class="flex-container">
{{ macros::skill(name=skill_name, value=skill.dots) }} <div class="skills-section" id="mentalSkills">
{% endfor %} {% for skill_name, skill in sheet.mentalSkills %}
</div> {{ macros::skill(name=skill_name, value=skill.dots) }}
{% endfor %}
</div>
<div class="skills-section" id="physicalSkills"> <div class="skills-section" id="physicalSkills">
{% for skill_name, skill in sheet.physicalSkills %} {% for skill_name, skill in sheet.physicalSkills %}
{{ macros::skill(name=skill_name, value=skill.dots) }} {{ macros::skill(name=skill_name, value=skill.dots) }}
{% endfor %} {% endfor %}
</div> </div>
<div class="skills-section" id="socialSkills"> <div class="skills-section" id="socialSkills">
{% for skill_name, skill in sheet.socialSkills %} {% for skill_name, skill in sheet.socialSkills %}
{{ macros::skill(name=skill_name, value=skill.dots) }} {{ macros::skill(name=skill_name, value=skill.dots) }}
{% endfor %} {% endfor %}
</div>
</div> </div>
</div> </div>
</div> </div>

4
src/frontend/templates/characters/view_character_macros.html.tera
View File

@ -1,13 +1,13 @@
{% macro attribute(name, value) %} {% macro attribute(name, value) %}
<div class="attribute"> <div class="attribute">
<label for="{{name}}">{{name}}:</label> <label for="{{name}}">{{name}}:</label>
<div class="value" id="{{name}}">{{value}}</div> <span class="value" id="{{name}}">{{value}}</span>
</div> </div>
{% endmacro attribute %} {% endmacro attribute %}
{% macro skill(name, value) %} {% macro skill(name, value) %}
<div class="skill"> <div class="skill">
<label for="{{name}}">{{name}}:</label> <label for="{{name}}">{{name}}:</label>
<div class="value" id="{{name}}">{{value}}</div> <span class="value" id="{{name}}">{{value}}</span>
</div> </div>
{% endmacro skill %} {% endmacro skill %}