frontend: Fix layout of calendar component chips

This commit is contained in:
Lennart
2025-07-18 19:53:45 +02:00
parent 994864c6ef
commit c490c413ec
2 changed files with 20 additions and 19 deletions

View File

@@ -224,15 +224,15 @@ ul.collection-list {
min-height: 80px; min-height: 80px;
height: fit-content; height: fit-content;
grid-template-areas: grid-template-areas:
". . color-chip" ". color-chip"
"title comps color-chip" "title color-chip"
"description description color-chip" "description color-chip"
"subscription-url subscription-url color-chip" "subscription-url color-chip"
"metadata metadata color-chip" "metadata color-chip"
"actions actions color-chip" "actions color-chip"
". . color-chip"; ". color-chip";
grid-template-rows: 12px auto auto auto auto auto 12px; grid-template-rows: 12px auto auto auto auto auto 12px;
grid-template-columns: min-content auto 80px; grid-template-columns: auto 80px;
row-gap: 4px; row-gap: 4px;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
@@ -260,7 +260,7 @@ ul.collection-list {
} }
.comps { .comps {
grid-area: comps; display: inline;
span { span {
margin: 0 2px; margin: 0 2px;
@@ -293,6 +293,7 @@ ul.collection-list {
} }
.actions { .actions {
pointer-events: all;
grid-area: actions; grid-area: actions;
width: fit-content; width: fit-content;
display: flex; display: flex;

View File

@@ -8,12 +8,12 @@
<span class="title"> <span class="title">
{%- if calendar.principal != user.id -%}{{ calendar.principal }}/{%- endif -%} {%- if calendar.principal != user.id -%}{{ calendar.principal }}/{%- endif -%}
{{ calendar.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }} {{ calendar.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}
<div class="comps">
{% for comp in calendar.components %}
<span>{{ comp }}</span>
{% endfor %}
</div>
</span> </span>
<div class="comps">
{% for comp in calendar.components %}
<span>{{ comp }}</span>
{% endfor %}
</div>
<span class="description"> <span class="description">
{% if let Some(description) = calendar.description %}{{ description }}{% endif %} {% if let Some(description) = calendar.description %}{{ description }}{% endif %}
</span> </span>
@@ -49,12 +49,12 @@
<span class="title"> <span class="title">
{%- if calendar.principal != user.id -%}{{ calendar.principal }}/{%- endif -%} {%- if calendar.principal != user.id -%}{{ calendar.principal }}/{%- endif -%}
{{ calendar.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }} {{ calendar.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}
<div class="comps">
{% for comp in calendar.components %}
<span>{{ comp }}</span>
{% endfor %}
</div>
</span> </span>
<div class="comps">
{% for comp in calendar.components %}
<span>{{ comp }}</span>
{% endfor %}
</div>
<span class="description"> <span class="description">
{% if let Some(description) = calendar.description %}{{ description }}{% endif %} {% if let Some(description) = calendar.description %}{{ description }}{% endif %}
</span> </span>