Browse Source

tweak vertical aligns in quest log list to look more centered.

main
Gisle Aune 4 years ago
parent
commit
35b5a5e3df
  1. 8
      svelte-ui/src/components/QLListItem.svelte

8
svelte-ui/src/components/QLListItem.svelte

@ -12,6 +12,7 @@
let selected: boolean; let selected: boolean;
let completed: boolean; let completed: boolean;
let deadline: boolean;
function handleClick() { function handleClick() {
selectionStore.change("hash", project.id); selectionStore.change("hash", project.id);
@ -19,10 +20,11 @@
$: selected = $selectionStore.hash === project.id; $: selected = $selectionStore.hash === project.id;
$: completed = !project.active; $: completed = !project.active;
$: deadline = !!project.endTime;
</script> </script>
<StatusColor affects="project" entry={project} selected={selected}> <StatusColor affects="project" entry={project} selected={selected}>
<div class="ql-list-item" on:click={handleClick} class:selected>
<div class="ql-list-item" on:click={handleClick} class:selected class:deadline={deadline}>
<div class="icon sccfg" class:completed> <div class="icon sccfg" class:completed>
<Icon block name={project.icon} /> <Icon block name={project.icon} />
</div> </div>
@ -52,6 +54,7 @@
color: #777; color: #777;
padding: 0.2em; padding: 0.2em;
padding-top: 0.3em;
padding-bottom: 0.05em; padding-bottom: 0.05em;
cursor: pointer; cursor: pointer;
@ -66,6 +69,9 @@
div.ql-list-item:hover { div.ql-list-item:hover {
color: #ccc; color: #ccc;
} }
div.ql-list-item.deadline {
padding-top: 0.275em;
}
div.icon { div.icon {

Loading…
Cancel
Save