Printer card chips
This commit is contained in:
@@ -18,11 +18,17 @@
|
||||
<!-- exceptions / list: one line per thing, each linking to itself -->
|
||||
<ul v-else class="dc-rows">
|
||||
<li v-for="(row, index) in visibleRows(card)" :key="index" class="dc-row">
|
||||
<router-link v-if="row.link" :to="row.link" class="dc-row-title">
|
||||
<router-link v-if="row.link" :to="row.link" class="dc-row-title"
|
||||
:title="row.titletip || undefined">
|
||||
{{ row.title }}
|
||||
</router-link>
|
||||
<span v-else class="dc-row-title dc-row-nolink">{{ row.title }}</span>
|
||||
<span v-else class="dc-row-title dc-row-nolink"
|
||||
:title="row.titletip || undefined">{{ row.title }}</span>
|
||||
<span v-if="row.detail" class="dc-row-detail">{{ row.detail }}</span>
|
||||
<span v-for="(chip, c) in row.chips" :key="c" class="dc-chip"
|
||||
:class="'dc-chip-' + (chip.level || 'low')" :title="chip.title">
|
||||
{{ chip.text }}
|
||||
</span>
|
||||
<span v-if="row.meta.length" class="dc-row-meta">
|
||||
{{ row.meta.map((m) => m.text).join(' / ') }}
|
||||
</span>
|
||||
@@ -204,6 +210,21 @@ defineExpose({ load })
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
/* One chip per depleted supply. Bordered rather than filled: a row of solid
|
||||
red pills reads as an emergency even when a cartridge is merely low. */
|
||||
.dc-chip {
|
||||
flex: none;
|
||||
padding: 0.05rem 0.4rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
cursor: help;
|
||||
}
|
||||
.dc-chip-critical { border-color: var(--danger); color: var(--danger); }
|
||||
.dc-chip-low { border-color: var(--warning); }
|
||||
|
||||
.dc-more {
|
||||
display: block;
|
||||
margin: 0.5rem 0 0;
|
||||
|
||||
Reference in New Issue
Block a user