mirror of
https://github.com/lennart-k/rustical.git
synced 2025-12-13 12:22:16 +00:00
frontend: Add some iconography
This commit is contained in:
@@ -93,6 +93,12 @@ header {
|
||||
&.active {
|
||||
background: color-mix(in srgb, var(--background-darker), var(--dilute-color) 15%);
|
||||
}
|
||||
|
||||
svg.icon {
|
||||
width: 1.3em;
|
||||
vertical-align: bottom;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -308,3 +314,9 @@ input[type="password"] {
|
||||
color: var(--text-on-background-color);
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
svg.icon {
|
||||
stroke-width: 2px;
|
||||
color: var(--text-on-background-color);
|
||||
stroke: var(--text-on-background-color);
|
||||
}
|
||||
|
||||
8
crates/frontend/public/templates/icons/calendar.svg
Normal file
8
crates/frontend/public/templates/icons/calendar.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<!-- Adapted from https://iconoir.com/ -->
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon">
|
||||
<path d="M15 4V2M15 4V6M15 4H10.5M3 10V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V10H3Z" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M3 10V6C3 4.89543 3.89543 4 5 4H7" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M7 2V6" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M21 10V6C21 4.89543 20.1046 4 19 4H18.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
8
crates/frontend/public/templates/icons/group.svg
Normal file
8
crates/frontend/public/templates/icons/group.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<!-- Adapted from https://iconoir.com/ -->
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon">
|
||||
<path d="M1 20V19C1 15.134 4.13401 12 8 12V12C11.866 12 15 15.134 15 19V20" stroke-linecap="round"></path>
|
||||
<path d="M13 14V14C13 11.2386 15.2386 9 18 9V9C20.7614 9 23 11.2386 23 14V14.5" stroke-linecap="round"></path>
|
||||
<path d="M8 12C10.2091 12 12 10.2091 12 8C12 5.79086 10.2091 4 8 4C5.79086 4 4 5.79086 4 8C4 10.2091 5.79086 12 8 12Z" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M18 9C19.6569 9 21 7.65685 21 6C21 4.34315 19.6569 3 18 3C16.3431 3 15 4.34315 15 6C15 7.65685 16.3431 9 18 9Z" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
6
crates/frontend/public/templates/icons/user.svg
Normal file
6
crates/frontend/public/templates/icons/user.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<!-- Adapted from https://iconoir.com/ -->
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon">
|
||||
<path d="M5 20V19C5 15.134 8.13401 12 12 12V12C15.866 12 19 15.134 19 19V20" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<path d="M12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12Z" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
@@ -7,9 +7,9 @@
|
||||
{% endblock %}
|
||||
{% block header_center %}
|
||||
<nav class="header-center">
|
||||
<a href="/frontend/user/{{ user.id }}" {% if S::name() == "profile" %}class="active"{% endif %}>Profile</a>
|
||||
<a href="/frontend/user/{{ user.id }}/calendar" {% if S::name() == "calendars" %}class="active"{% endif %}>Calendars</a>
|
||||
<a href="/frontend/user/{{ user.id }}/addressbook" {% if S::name() == "addressbooks" %}class="active"{% endif %}>Addressbooks</a>
|
||||
<a href="/frontend/user/{{ user.id }}" {% if S::name() == "profile" %}class="active"{% endif %}>{% include "icons/user.svg" %}Profile</a>
|
||||
<a href="/frontend/user/{{ user.id }}/calendar" {% if S::name() == "calendars" %}class="active"{% endif %}>{% include "icons/calendar.svg" %}Calendars</a>
|
||||
<a href="/frontend/user/{{ user.id }}/addressbook" {% if S::name() == "addressbooks" %}class="active"{% endif %}>{% include "icons/group.svg" %}Addressbooks</a>
|
||||
</nav>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user