Updated visual display of cohorts

This commit is contained in:
Carlos Fernandez 2023-04-26 04:59:46 -04:00 committed by megastruktur
parent 1022afb5cd
commit 0027a77114
4 changed files with 73 additions and 35 deletions

View file

@ -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;
}
}
}

View file

@ -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

View file

@ -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")}}