Minor frontend improvements, feature to create calendar

This commit is contained in:
Lennart
2025-06-08 21:46:20 +02:00
parent bbe9113f5c
commit 573781310a
8 changed files with 165 additions and 10 deletions

View File

@@ -159,14 +159,14 @@ table {
display: grid;
min-height: 80px;
grid-template-areas:
". color-chip"
"title color-chip"
"description color-chip"
"subscription-url color-chip"
"restore color-chip"
". color-chip";
". . color-chip"
"title comps color-chip"
"description . color-chip"
"subscription-url . color-chip"
"restore . color-chip"
". . color-chip";
grid-template-rows: 12px auto auto auto 12px;
grid-template-columns: auto 80px;
grid-template-columns: min-content auto 80px;
color: inherit;
text-decoration: none;
padding-left: 12px;
@@ -180,14 +180,31 @@ table {
.title {
font-weight: bold;
grid-area: title;
margin-right: 12px;
white-space: nowrap;
}
.comps {
grid-area: comps;
span {
margin: 0 2px;
background: var(--primary-color);
color: var(--text-on-primary-color);
font-size: .8em;
padding: 3px 8px;
border-radius: 12px;
}
}
.description {
grid-area: description;
white-space: nowrap;
}
.subscription-url {
grid-area: subscription-url;
white-space: nowrap;
}
.color-chip {

View File

@@ -64,6 +64,11 @@
<li class="collection-list-item" style="--color: {{ color }}">
<a href="/frontend/user/{{ calendar.principal }}/calendar/{{ calendar.id }}">
<span class="title">{{ calendar.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}</span>
<div class="comps">
{% for comp in calendar.components %}
<span>{{ comp }}</span>
{% endfor %}
</div>
<span class="description">
{% if let Some(description) = calendar.description %}{{ description }}{% endif %}
</span>
@@ -85,6 +90,11 @@
<li class="collection-list-item" style="--color: {{ color }}">
<a href="/frontend/user/{{ calendar.principal }}/calendar/{{ calendar.id}}">
<span class="title">{{ calendar.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}</span>
<div class="comps">
{% for comp in calendar.components %}
<span>{{ comp }}</span>
{% endfor %}
</div>
<span class="description">
{% if let Some(description) = calendar.description %}{{ description }}{% endif %}
</span>
@@ -97,6 +107,49 @@
{% endfor %}
</ul>
{% endif %}
<h3>Create calendar</h3>
<form action="/frontend/user/{{ user.id }}/calendar" method="POST">
<label>
href
<input type="text" name="id" />
</label>
<br>
<label>
Displayname
<input type="text" name="displayname" />
</label>
<br>
<label>
Description
<input type="text" name="description" />
</label>
<br>
<label>
Color
<input type="color" name="color" />
</label>
<br>
<label>
Subscription URL
<input type="text" name="subscription_url" />
</label>
<br>
<label>
Support VEVENT
<input type="checkbox" name="comp_event" checked />
</label>
<label>
Support VTODO
<input type="checkbox" name="comp_todo" checked />
</label>
<label>
Support VJOURNAL
<input type="checkbox" name="comp_journal" />
</label>
<br>
<button type="submit">Create</button>
</form>
</section>
<section>