slaguru666/roll20-character-sheets-tester
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove script text/template tag from debug version

Browse Source
This commit is contained in:
cshtsui
2017-12-30 11:59:27 -05:00
parent 3f4e390743
commit 3628bf2130
9 changed files with 4512 additions and 1786 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Basic_Roleplaying/Basic_Roleplaying.html
+1782 -1786
View File
File diff suppressed because it is too large Load Diff
Basic_Roleplaying/assets/app.css
+1
View File
File diff suppressed because one or more lines are too long
Basic_Roleplaying/assets/base.css
+1
View File
File diff suppressed because one or more lines are too long
Basic_Roleplaying/grid.css
+97
View File
@@ -0,0 +1,97 @@
.descriptive {
background-color:lightcyan;
grid-area: ds;
}
.characteristics {
background-color:lightyellow;
grid-area: ch;
}
.hp {
background-color:lightpink;
grid-area: hp;
}
.sheet-skills-col1 {
grid-area:skcol1;
}
.sheet-skills-col2 {
grid-area:skcol2;
}
/* Flexboxing to allow the column to be split into 2 different columns */
.sheet-skills-col3 {
grid-area:skcol3;
display:flex;
flex-flow:row wrap;
}
.sheet-sub-col {
width:100%;
}
/* Small breakpoint */
.fundamental-parent {
background-color:lightgreen;
display:grid;
grid-gap: 0.25rem;
grid-template-areas:
"ds"
"ch"
"hp";
}
.sheet-skills-layout{
display:grid;
grid-template-areas:
"skcol1"
"skcol2"
"skcol3";
margin:1rem 0 0 0;
}
.sheet-rating-roll > span {
display:inline-block;
font-size:11px;
margin: 0 0 0 -0.25rem;
}
/* Medium breakpoint */
@media(min-width:480px) {
.fundamental-parent {
background-color:lightgreen;
display:grid;
grid-gap: 0.25rem;
grid-template-areas:
"ds ds ds"
"ch ch hp";
grid-template-columns:repeat(3, 1fr);
}
.sheet-skills-layout {
grid-template-areas:
"skcol1 skcol2"
"skcol3 skcol3";
}
/* Simulates dividing this column into 2 horizontal columns */
.sheet-skills-col3 {
flex-flow:row nowrap;
}
/* TODO: Optionally prepare a small/medium threshold breakpoint to remove
the % sign until long skill name ellipsis disappears.
.sheet-rating-roll > span {
display:none;
}
*/
}
/* Large breakpoint */
@media(min-width:720px) {
.fundamental-parent {
display:grid;
grid-template-columns: 3fr 2fr 1fr;
grid-gap: 0.25rem;
grid-template-areas: "ds ch hp";
}
.sheet-skills-layout {
grid-template-columns: repeat(3, 1fr);
grid-template-areas: "skcol1 skcol2 skcol3";
}
/* stack the subcols in the large breakpoint */
.sheet-skills-col3 {
flex-flow:row wrap;
}
}
Basic_Roleplaying/grid.html
+127
View File
@@ -0,0 +1,127 @@
<html>
<head>
<title>CSS Grid</title>
<link href="assets/base.css" rel="stylesheet" type="text/css">
<link href="assets/app.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="grid.css" />
<link rel="stylesheet" href="skillellipsis.css" />
<link href="https://fonts.googleapis.com/css?family=Patrick+Hand|Contrail+One|Shadows+Into+Light|Candal&amp;subset=latin,latin-ext"
rel="stylesheet" type="text/css">
</head>
<body class="ui-dialog">
<main class="charsheet sheet-brp">
<section class="fundamental-parent">
<div class="descriptive">
<p>Name, age, gender, description, etc.</p>
</div>
<div class="characteristics">
<p>STR, CON, SIZ, INT, POW, DEX, APP</p>
</div>
<div class="hp">
<p>HP Tally box</p>
</div>
</section>
<section class="gridparent">
<div class="col1">
<div class="skill-item">
<label class="truncate">
<input id="skill1" type="checkbox" /> Technical Skill (varies)
</label>
<div class="skill-controls">
<span>
<input type="number" value="188" />%</span>
<button type="roll"></button>
</div>
</div>
<div class="skill-item">
<label class="truncate">
<input id="skill2" type="checkbox" /> Fine Manipulation (5%)
</label>
<div class="skill-controls">
<span>
<input type="number" value="188" />%</span>
<button type="roll"></button>
</div>
</div>
<div class="skill-item">
<label class="truncate">
<input id="skill3" type="checkbox" /> Spot (25%)
</label>
<div class="skill-controls">
<span>
<input type="number" value="188" />%</span>
<button type="roll"></button>
</div>
</div>
</div>
<div class="col2">
<div class="skill-item">
<label class="truncate">
<input id="skill1" type="checkbox" /> Technical Skill (varies)
</label>
<div class="skill-controls">
<span>
<input type="number" value="188" />%</span>
<button type="roll"></button>
</div>
</div>
<div class="skill-item">
<label class="truncate">
<input id="skill2" type="checkbox" /> Fine Manipulation (5%)
</label>
<div class="skill-controls">
<span>
<input type="number" value="188" />%</span>
<button type="roll"></button>
</div>
</div>
<div class="skill-item">
<label class="truncate">
<input id="skill3" type="checkbox" /> Spot (25%)
</label>
<div class="skill-controls">
<span>
<input type="number" value="188" />%</span>
<button type="roll"></button>
</div>
</div>
</div>
<div class="col3">
<div class="skill-item">
<label class="truncate">
<input id="skill1" type="checkbox" /> Technical Skill (varies)
</label>
<div class="skill-controls">
<span>
<input type="number" value="188" />%</span>
<button type="roll"></button>
</div>
</div>
<div class="skill-item">
<label class="truncate">
<input id="skill2" type="checkbox" /> Fine Manipulation (5%)
</label>
<div class="skill-controls">
<span>
<input type="number" value="188" />%</span>
<button type="roll"></button>
</div>
</div>
<div class="skill-item">
<label class="truncate">
<input id="skill3" type="checkbox" /> Spot (25%)
</label>
<div class="skill-controls">
<span>
<input type="number" value="188" />%</span>
<button type="roll"></button>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
Basic_Roleplaying/layout.html
+161
View File
@@ -0,0 +1,161 @@
<html>
<head>
<title>CSS Grid</title>
<link href="assets/base.css" rel="stylesheet" type="text/css">
<link href="assets/app.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="grid.css" />
<link rel="stylesheet" href="skillellipsis.css" />
<link href="https://fonts.googleapis.com/css?family=Patrick+Hand|Contrail+One|Shadows+Into+Light|Candal&amp;subset=latin,latin-ext"
rel="stylesheet" type="text/css">
</head>
<body class="ui-dialog">
<main class="charsheet sheet-brp">
<section class="fundamental-parent">
<div class="descriptive">
<p>Name, age, gender, description, etc.</p>
</div>
<div class="characteristics">
<p>STR, CON, SIZ, INT, POW, DEX, APP</p>
</div>
<div class="hp">
<p>HP Tally box</p>
</div>
</section>
<section class="sheet-skills-layout">
<div class="sheet-skills-col1">
<div class="sheet-skill-item">
<label class="sheet-ovf-label">
<input id="skill1" type="checkbox" />Technical Skill (varies)
</label>
<div class="sheet-rating-roll">
<input type="number" value="188" />
<span>%</span>
<button type="roll"></button>
</div>
</div>
<div class="sheet-skill-item">
<label class="sheet-ovf-label">
<input id="skill2" type="checkbox" />Fine Manipulation (5%)
</label>
<div class="sheet-rating-roll">
<input type="number" value="188" />
<span>%</span>
<button type="roll"></button>
</div>
</div>
<div class="sheet-skill-item">
<label class="sheet-ovf-label">
<input id="skill3" type="checkbox" />Spot (25%)
</label>
<div class="sheet-rating-roll">
<input type="number" value="188" />
<span>%</span>
<button type="roll"></button>
</div>
</div>
</div>
<div class="sheet-skills-col2">
<div class="sheet-skill-item">
<label class="sheet-ovf-label">
<input id="skill1" type="checkbox" />Technical Skill (varies)
</label>
<div class="sheet-rating-roll">
<input type="number" value="188" />
<span>%</span>
<button type="roll"></button>
</div>
</div>
<div class="sheet-skill-item">
<label class="sheet-ovf-label">
<input id="skill2" type="checkbox" />Fine Manipulation (5%)
</label>
<div class="sheet-rating-roll">
<input type="number" value="188" />
<span>%</span>
<button type="roll"></button>
</div>
</div>
<div class="sheet-skill-item">
<label class="sheet-ovf-label">
<input id="skill3" type="checkbox" />Spot (25%)
</label>
<div class="sheet-rating-roll">
<input type="number" value="188" />
<span>%</span>
<button type="roll"></button>
</div>
</div>
</div>
<div class="sheet-skills-col3">
<div class="sheet-sub-col">
<div class="sheet-skill-item">
<label class="sheet-ovf-label">
<input id="skill1" type="checkbox" />Technical Skill (varies)
</label>
<div class="sheet-rating-roll">
<input type="number" value="188" />
<span>%</span>
<button type="roll"></button>
</div>
</div>
<div class="sheet-skill-item">
<label class="sheet-ovf-label">
<input id="skill2" type="checkbox" />Fine Manipulation (5%)
</label>
<div class="sheet-rating-roll">
<input type="number" value="188" />
<span>%</span>
<button type="roll"></button>
</div>
</div>
<div class="sheet-skill-item">
<label class="sheet-ovf-label">
<input id="skill3" type="checkbox" />Spot (25%)
</label>
<div class="sheet-rating-roll">
<input type="number" value="188" />
<span>%</span>
<button type="roll"></button>
</div>
</div>
</div>
<div class="sheet-sub-col">
<div class="sheet-skill-item">
<label class="sheet-ovf-label">
<input id="skill1" type="checkbox" />Technical Skill (varies)
</label>
<div class="sheet-rating-roll">
<input type="number" value="188" />
<span>%</span>
<button type="roll"></button>
</div>
</div>
<div class="sheet-skill-item">
<label class="sheet-ovf-label">
<input id="skill2" type="checkbox" />Fine Manipulation (5%)
</label>
<div class="sheet-rating-roll">
<input type="number" value="188" />
<span>%</span>
<button type="roll"></button>
</div>
</div>
<div class="sheet-skill-item">
<label class="sheet-ovf-label">
<input id="skill3" type="checkbox" />Spot (25%)
</label>
<div class="sheet-rating-roll">
<input type="number" value="188" />
<span>%</span>
<button type="roll"></button>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
Basic_Roleplaying/mock.html
+2246
View File
File diff suppressed because it is too large Load Diff
Basic_Roleplaying/skillellipsis.css
+50
View File
@@ -0,0 +1,50 @@
/* Eventually override with background-image inspired by BGB cover */
.sheet-brp {
background-color:whitesmoke;
}
.sheet-skill-item {
margin:0 0 0.2rem 0;
width:100%;
}
.sheet-rating-roll {
display:inline-block;
width:4.5rem;
}
.charsheet .sheet-rating-roll input[type="number"] {
background-color:transparent;
border:none;
border-bottom:1px solid darkgrey;
border-radius:0;
box-shadow:none;
line-height:1rem;
padding:0.1rem 0;
width:1.75rem;
-moz-appearance:textfield;
}
.charsheet .sheet-rating-roll button[type="roll"] {
height:1.6rem;
}
/* .truncate */
.sheet-ovf-label {
display:inline-block;
font-size:16px;
line-height: 0.9rem;
overflow:hidden;
text-overflow:ellipsis;
vertical-align:middle;
white-space:nowrap;
width:calc(100% - 5rem);
}
.sheet-ovf-label input[type="checkbox"] {
margin:-0.25rem 0.2rem 0 0.25rem;
}
.debug, .debug * {
outline: 1px dashed darkred;
}
Basic_Roleplaying/skillellipsis.html
+47
View File
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<title>Skill Ellipsis Flex Layout</title>
<link href="assets/base.css" rel="stylesheet" type="text/css">
<link href="assets/app.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Patrick+Hand|Contrail+One|Shadows+Into+Light|Candal&amp;subset=latin,latin-ext"
rel="stylesheet" type="text/css">
<link rel="stylesheet" href="skillellipsis.css" />
</head>
<body class="ui-dialog">
<main class="charsheet sheet-brp">
<div class="skill-row">
<div class="skill-item">
<label class="truncate">
<input id="skill1" type="checkbox" />
Technical Skill (varies)
</label>
<div class="skill-controls">
<span><input type="number" value="188"/>%</span>
<button type="roll"></button>
</div>
</div>
<div class="skill-item">
<label class="truncate">
<input id="skill2" type="checkbox" />
Fine Manipulation (5%)
</label>
<div class="skill-controls">
<span><input type="number" value="188"/>%</span>
<button type="roll"></button>
</div>
</div>
<div class="skill-item">
<label class="truncate">
<input id="skill3" type="checkbox" />
Spot (25%)
</label>
<div class="skill-controls">
<span><input type="number" value="188"/>%</span>
<button type="roll"></button>
</div>
</div>
</div>
</main>
</body>
</html>