Make view page responsive. Add mobile device viewport meta.
This commit is contained in:
parent
42ebfa4a54
commit
dc354e5217
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Core Sheet</h1>
|
||||
|
|
@ -102,6 +177,7 @@
|
|||
<h1>Name: <input type="text" value="{{name}}" /></h1>
|
||||
<p>System: {{data_type}}</p>
|
||||
<div id="attributes">
|
||||
<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 +196,11 @@
|
|||
{{ macros::attribute(name="Composure", value=sheet.composure) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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) }}
|
||||
|
|
@ -141,6 +220,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a href="/characters/{{username}}/{{id}}/edit">Edit Character</a>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
{% 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 %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue