projectmoon
/
tenebrous-sheets
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make merits table look nicer.

This commit is contained in:
projectmoon 2021-01-23 10:21:53 +00:00
parent 59f35d0366
commit f9ef83cb21
3 changed files with 55 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/frontend/scripts/characters/edit.ts
View File

@ -144,6 +144,7 @@ import * as api from "../api";
const removeButton = document.createElement('button');
removeButton.innerText = "X";
removeButton.setAttribute('data-event-type', 'remove-merit');
removeButton.classList.add('remove-merit');
const dots = document.createElement('span');
dots.innerText = 'Dots';

53
src/frontend/templates/characters/edit_character.html.tera
View File

@ -82,6 +82,59 @@
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>
{# Webpack Templating for API script #}

2
src/frontend/templates/characters/edit_character_macros.html.tera
View File

@ -16,6 +16,6 @@
<div class="merit">
<input type="text" class="merit-name" value="{{name}}" />
<input type="number" class="merit-dots" min="0" value="{{value}}" /> <span>Dots</span>
<button data-event-type="remove-merit">X</button>
<button class="remove-merit" data-event-type="remove-merit">X</button>
</div>
{% endmacro merit %}