web: improve styling on model info

This commit is contained in:
Jens Langhammer 2021-02-16 23:19:01 +01:00
parent 4cfcc48b23
commit 06870b4f64
1 changed files with 34 additions and 6 deletions

View File

@ -35,12 +35,40 @@ export class EventInfo extends LitElement {
if (context === null) { if (context === null) {
return html`<span>-</span>`; return html`<span>-</span>`;
} }
return html`<ul class="pf-c-list"> return html`<dl class="pf-c-description-list pf-m-horizontal">
<li>${gettext("UID")}: ${context.pk as string}</li> <div class="pf-c-description-list__group">
<li>${gettext("Name")}: ${context.name as string}</li> <dt class="pf-c-description-list__term">
<li>${gettext("App")}: ${context.app as string}</li> <span class="pf-c-description-list__text">${gettext("UID")}</span>
<li>${gettext("Model Name")}: ${context.model_name as string}</li> </dt>
</ul>`; <dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">${context.pk as string}</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${gettext("Name")}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">${context.name as string}</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${gettext("App")}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">${context.app as string}</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${gettext("Model Name")}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">${context.model_name as string}</div>
</dd>
</div>
</dl>`;
} }
defaultResponse(): TemplateResult { defaultResponse(): TemplateResult {