Make view page responsive. Add mobile device viewport meta.
This commit is contained in:
parent
42ebfa4a54
commit
dc354e5217
|
@ -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>
|
||||||
|
|
|
@ -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,6 +177,7 @@
|
||||||
<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="flex-container">
|
||||||
<div class="attributes-section" id="mentalAttributes">
|
<div class="attributes-section" id="mentalAttributes">
|
||||||
{{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
|
{{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
|
||||||
{{ macros::attribute(name="Wits", value=sheet.wits) }}
|
{{ macros::attribute(name="Wits", value=sheet.wits) }}
|
||||||
|
@ -120,8 +196,11 @@
|
||||||
{{ 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">
|
||||||
|
<h2>Skills</h2>
|
||||||
|
<div class="flex-container">
|
||||||
<div class="skills-section" id="mentalSkills">
|
<div class="skills-section" id="mentalSkills">
|
||||||
{% for skill_name, skill in sheet.mentalSkills %}
|
{% for skill_name, skill in sheet.mentalSkills %}
|
||||||
{{ macros::skill(name=skill_name, value=skill.dots) }}
|
{{ macros::skill(name=skill_name, value=skill.dots) }}
|
||||||
|
@ -141,6 +220,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<a href="/characters/{{username}}/{{id}}/edit">Edit Character</a>
|
<a href="/characters/{{username}}/{{id}}/edit">Edit Character</a>
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
Loading…
Reference in New Issue