nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-05-20 10:34:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

templates: Use SVG icons for apps page and shortcuts

Browse Source 
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
This commit is contained in:
Sunil Mohan Adapa 2019-05-06 16:09:50 -07:00 committed by James Valleroy
parent a931bf3fc5
commit b6325073c5
No known key found for this signature in database
GPG Key ID: 77C0C75E7B650808
3 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plinth/templates/cards.html
View File

@ -42,7 +42,7 @@
{% if 'fa-' in item.icon %} {% if 'fa-' in item.icon %}
<span class="fa {{ item.icon }}"></span> <span class="fa {{ item.icon }}"></span>
{% else %} {% else %}
<img src="{% static 'theme/icons/' %}{{ item.icon }}.png"/> <img src="{% static 'theme/icons/' %}{{ item.icon }}.svg"/>
{% endif %} {% endif %}
</div> </div>
<div class="card-description">{{ item.short_description}}</div> <div class="card-description">{{ item.short_description}}</div>
@ -68,7 +68,7 @@
{% if 'fa-' in item.icon %} {% if 'fa-' in item.icon %}
<span class="fa {{ item.icon }}"></span> <span class="fa {{ item.icon }}"></span>
{% else %} {% else %}
<img src="{% static 'theme/icons/' %}{{ item.icon }}.png"/> <img src="{% static 'theme/icons/' %}{{ item.icon }}.svg"/>
{% endif %} {% endif %}
</div> </div>
<div class="card-description">{{ item.short_description}}</div> <div class="card-description">{{ item.short_description}}</div>

2
plinth/templates/index.html
View File

@ -83,7 +83,7 @@
{% if "custom" in shortcut.icon %} {% if "custom" in shortcut.icon %}
<img src="{{ shortcut.icon }}"/> <img src="{{ shortcut.icon }}"/>
{% else %} {% else %}
<img src="{% static 'theme/icons/' %}{{ shortcut.icon }}.png"/> <img src="{% static 'theme/icons/' %}{{ shortcut.icon }}.svg"/>
{% endif %} {% endif %}
</div> </div>
<div class="card-description"> <div class="card-description">

15
static/themes/default/css/plinth.css
View File

@ -290,12 +290,12 @@ footer {
/* Enabled app icons */ /* Enabled app icons */
.apps-page .card-list-primary .card-icon img { .apps-page .card-list-primary .card-icon img {
transition: filter 0.3s; transition: filter 0.3s;
filter: contrast(0.2) sepia(1) hue-rotate(171deg) contrast(2); filter: contrast(0.2) sepia(1) hue-rotate(171deg) contrast(2);
} }
.apps-page .card-list-primary .card:hover .card-icon img { .apps-page .card-list-primary .card:hover .card-icon img {
filter: none; filter: none;
} }
/* Disabled app icons */ /* Disabled app icons */
@ -378,7 +378,7 @@ a.menu_link_active {
/* Enable apps - green glow */ /* Enable apps - green glow */
.card-list-primary .card-icon { .card-list-primary .card-icon {
background: radial-gradient(farthest-side at bottom,#eefff0, white); background: radial-gradient(farthest-side at bottom, #eefff0, white);
background-position: 50% 100%; background-position: 50% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 150% 25%; background-size: 150% 25%;
@ -386,12 +386,17 @@ a.menu_link_active {
/* Disabled apps - grey glow */ /* Disabled apps - grey glow */
.card-list-secondary .card-icon { .card-list-secondary .card-icon {
background: radial-gradient(farthest-side at bottom,#f0f0f0, white); background: radial-gradient(farthest-side at bottom, #f0f0f0, white);
background-position: 50% 100%; background-position: 50% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 150% 25%; background-size: 150% 25%;
} }
.card-icon img {
width: 128px;
height: 128px;
}
.card-icon span { .card-icon span {
width: 100px; width: 100px;
height: 100px; height: 100px;