Updated visual display of cohorts
This commit is contained in:
parent
1022afb5cd
commit
0027a77114
4 changed files with 73 additions and 35 deletions
|
@ -193,18 +193,33 @@ nav{
|
|||
.cohort-block-wrapper {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.label-stripe {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.item-control {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.cohort-body {
|
||||
img {
|
||||
border: 2px solid $almost_black;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
> div {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.cohort-block-harm {
|
||||
|
||||
justify-content: space-around;
|
||||
|
||||
input[type="radio"] {
|
||||
|
@ -218,9 +233,16 @@ nav{
|
|||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
flex: 1 0 0;
|
||||
border: 2px solid $almost_black;
|
||||
border-top: none;
|
||||
padding: 5px;
|
||||
border-left: none;
|
||||
padding: 0 5px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -27,71 +27,61 @@
|
|||
*/
|
||||
@font-face {
|
||||
font-family: "Kirsty";
|
||||
src: url("assets/fonts/Kirsty/Kirsty.ttf") format("truetype");
|
||||
/* Safari, Android, iOS */
|
||||
src: url("assets/fonts/Kirsty/Kirsty.ttf") format("truetype"); /* Safari, Android, iOS */
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Kirsty";
|
||||
src: url("assets/fonts/Kirsty/KirstyBold.ttf") format("truetype");
|
||||
/* Safari, Android, iOS */
|
||||
src: url("assets/fonts/Kirsty/KirstyBold.ttf") format("truetype"); /* Safari, Android, iOS */
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Kirsty";
|
||||
src: url("assets/fonts/Kirsty/KirstyBoldItalic.ttf") format("truetype");
|
||||
/* Safari, Android, iOS */
|
||||
src: url("assets/fonts/Kirsty/KirstyBoldItalic.ttf") format("truetype"); /* Safari, Android, iOS */
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Kirsty";
|
||||
src: url("assets/fonts/Kirsty/KirstyItalic.ttf") format("truetype");
|
||||
/* Safari, Android, iOS */
|
||||
src: url("assets/fonts/Kirsty/KirstyItalic.ttf") format("truetype"); /* Safari, Android, iOS */
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Crimson Text";
|
||||
src: url("assets/fonts/CrimsonText/CrimsonText-Regular.ttf") format("truetype");
|
||||
/* Safari, Android, iOS */
|
||||
src: url("assets/fonts/CrimsonText/CrimsonText-Regular.ttf") format("truetype"); /* Safari, Android, iOS */
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Crimson Text";
|
||||
src: url("assets/fonts/CrimsonText/CrimsonText-Bold.ttf") format("truetype");
|
||||
/* Safari, Android, iOS */
|
||||
src: url("assets/fonts/CrimsonText/CrimsonText-Bold.ttf") format("truetype"); /* Safari, Android, iOS */
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Crimson Text";
|
||||
src: url("assets/fonts/CrimsonText/CrimsonText-BoldItalic.ttf") format("truetype");
|
||||
/* Safari, Android, iOS */
|
||||
src: url("assets/fonts/CrimsonText/CrimsonText-BoldItalic.ttf") format("truetype"); /* Safari, Android, iOS */
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Crimson Text";
|
||||
src: url("assets/fonts/CrimsonText/CrimsonText-Italic.ttf") format("truetype");
|
||||
/* Safari, Android, iOS */
|
||||
src: url("assets/fonts/CrimsonText/CrimsonText-Italic.ttf") format("truetype"); /* Safari, Android, iOS */
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Crimson Text";
|
||||
src: url("assets/fonts/CrimsonText/CrimsonText-SemiBold.ttf") format("truetype");
|
||||
/* Safari, Android, iOS */
|
||||
src: url("assets/fonts/CrimsonText/CrimsonText-SemiBold.ttf") format("truetype"); /* Safari, Android, iOS */
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Crimson Text";
|
||||
src: url("assets/fonts/CrimsonText/CrimsonText-SemiBoldItalic.ttf") format("truetype");
|
||||
/* Safari, Android, iOS */
|
||||
src: url("assets/fonts/CrimsonText/CrimsonText-SemiBoldItalic.ttf") format("truetype"); /* Safari, Android, iOS */
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
@ -847,7 +837,20 @@
|
|||
width: 400px;
|
||||
}
|
||||
.blades-in-the-dark.crew.sheet .cohorts .label-stripe {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.blades-in-the-dark.crew.sheet .cohorts .item-control {
|
||||
flex-grow: 0;
|
||||
}
|
||||
.blades-in-the-dark.crew.sheet .cohorts .cohort-body img {
|
||||
border: 2px solid #191813;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-top: none;
|
||||
}
|
||||
.blades-in-the-dark.crew.sheet .cohorts .cohort-body > div {
|
||||
margin-bottom: 10px;
|
||||
|
@ -864,9 +867,15 @@
|
|||
background-color: #191813;
|
||||
}
|
||||
.blades-in-the-dark.crew.sheet .cohorts .cohort-block-harm label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1 0 0;
|
||||
border: 2px solid #191813;
|
||||
border-top: none;
|
||||
padding: 5px;
|
||||
border-left: none;
|
||||
padding: 0 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.blades-in-the-dark.crew.sheet .class-name {
|
||||
width: 512px;
|
||||
|
@ -1624,8 +1633,6 @@
|
|||
border-radius: 6px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
font-family: var(--font-primary);
|
||||
font-weight: normal;
|
||||
}
|
||||
.items-to-add .tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -2,19 +2,28 @@
|
|||
|
||||
<div class="cohort-block">
|
||||
<div class="label-stripe">
|
||||
<div class="item-sheet-open">{{#if (eq system.cohort "Gang")}}Gang of {{#each system.gang_type as |gang_type key|}}{{gang_type}} {{/each}}{{/if}}{{#if (eq system.cohort "Expert")}}{{system.cohort}} {{system.expert_type}}{{/if}} (click to edit)</div>
|
||||
<div class="item-sheet-open">
|
||||
{{#if (eq system.cohort "Gang")}}
|
||||
Gang of {{#each system.gang_type as |gang_type key|}}{{gang_type}} {{/each}}
|
||||
{{else if (eq system.cohort "Expert")}}
|
||||
{{system.cohort}} {{system.expert_type}}
|
||||
{{/if}}
|
||||
<i class="fas fa-fw fa-edit"></i>
|
||||
</div>
|
||||
<div>Q:{{system.quality}} S:{{system.scale}}</div>
|
||||
<a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
|
||||
</div>
|
||||
<div class="cohort-body">
|
||||
|
||||
<div class="cohort-block-harm flex-horizontal">
|
||||
{{#each system.harm_list as |harm harm_key|}}
|
||||
{{#multiboxes ../system.harm}}
|
||||
<input id="harm-{{harm_key}}-{{../_id}}" type="radio" name="harm.{{../_id}}" data-item="{{../_id}}" value="{{harm_key}}">
|
||||
<label for="harm-{{harm_key}}-{{../_id}}">{{localize harm.label}}</label>
|
||||
{{/multiboxes}}
|
||||
{{/each}}
|
||||
<div class="flex-horizontal">
|
||||
<img src="{{img}}"/>
|
||||
<div class="cohort-block-harm flex-horizontal">
|
||||
{{#each system.harm_list as |harm harm_key|}}
|
||||
{{#multiboxes ../system.harm}}
|
||||
<input id="harm-{{harm_key}}-{{../_id}}" type="radio" name="harm.{{../_id}}" data-item="{{../_id}}" value="{{harm_key}}">
|
||||
<label for="harm-{{harm_key}}-{{../_id}}">{{localize harm.label}}</label>
|
||||
{{/multiboxes}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if (eq system.cohort "Gang")}}
|
||||
|
|
Reference in a new issue