diff --git a/lostplaces/lostplaces/settings.py b/lostplaces/lostplaces/settings.py index 43b5c7d..715a4fd 100644 --- a/lostplaces/lostplaces/settings.py +++ b/lostplaces/lostplaces/settings.py @@ -147,4 +147,6 @@ THUMBNAIL_ALIASES = { 'hero': {'size': (700, 700), 'crop': False}, 'large': {'size': (1920, 1920), 'crop': False}, }, -} \ No newline at end of file +} + +SVG_ICONS_SOURCE_FILE = os.path.join(BASE_DIR, 'lostplaces_app', 'static', 'icons', 'icons.icomoon.json') \ No newline at end of file diff --git a/lostplaces/lostplaces_app/static/icons/delete.svg b/lostplaces/lostplaces_app/static/icons/delete.svg new file mode 100644 index 0000000..31daf21 --- /dev/null +++ b/lostplaces/lostplaces_app/static/icons/delete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lostplaces/lostplaces_app/static/icons/icons.icomoon.json b/lostplaces/lostplaces_app/static/icons/icons.icomoon.json new file mode 100644 index 0000000..c6c9d6b --- /dev/null +++ b/lostplaces/lostplaces_app/static/icons/icons.icomoon.json @@ -0,0 +1,13 @@ +{ + "trash": { + "paths": [ + "m232.398438 154.703125c-5.523438 0-10 4.476563-10 10v189c0 5.519531 4.476562 10 10 10 5.523437 0 10-4.480469 10-10v-189c0-5.523437-4.476563-10-10-10zm0 0", + "m114.398438 154.703125c-5.523438 0-10 4.476563-10 10v189c0 5.519531 4.476562 10 10 10 5.523437 0 10-4.480469 10-10v-189c0-5.523437-4.476563-10-10-10zm0 0", + "m28.398438 127.121094v246.378906c0 14.5625 5.339843 28.238281 14.667968 38.050781 9.285156 9.839844 22.207032 15.425781 35.730469 15.449219h189.203125c13.527344-.023438 26.449219-5.609375 35.730469-15.449219 9.328125-9.8125 14.667969-23.488281 14.667969-38.050781v-246.378906c18.542968-4.921875 30.558593-22.835938 28.078124-41.863282-2.484374-19.023437-18.691406-33.253906-37.878906-33.257812h-51.199218v-12.5c.058593-10.511719-4.097657-20.605469-11.539063-28.03125-7.441406-7.421875-17.550781-11.5546875-28.0625-11.46875h-88.796875c-10.511719-.0859375-20.621094 4.046875-28.0625 11.46875-7.441406 7.425781-11.597656 17.519531-11.539062 28.03125v12.5h-51.199219c-19.1875.003906-35.394531 14.234375-37.878907 33.257812-2.480468 19.027344 9.535157 36.941407 28.078126 41.863282zm239.601562 279.878906h-189.203125c-17.097656 0-30.398437-14.6875-30.398437-33.5v-245.5h250v245.5c0 18.8125-13.300782 33.5-30.398438 33.5zm-158.601562-367.5c-.066407-5.207031 1.980468-10.21875 5.675781-13.894531 3.691406-3.675781 8.714843-5.695313 13.925781-5.605469h88.796875c5.210937-.089844 10.234375 1.929688 13.925781 5.605469 3.695313 3.671875 5.742188 8.6875 5.675782 13.894531v12.5h-128zm-71.199219 32.5h270.398437c9.941406 0 18 8.058594 18 18s-8.058594 18-18 18h-270.398437c-9.941407 0-18-8.058594-18-18s8.058593-18 18-18zm0 0", + "m173.398438 154.703125c-5.523438 0-10 4.476563-10 10v189c0 5.519531 4.476562 10 10 10 5.523437 0 10-4.480469 10-10v-189c0-5.523437-4.476563-10-10-10zm0 0" + ], + "height": "427pt", + "width": "427pt", + "viewBox": "-40 0 427 427.00131" + } +} \ No newline at end of file diff --git a/lostplaces/lostplaces_app/static/main.css b/lostplaces/lostplaces_app/static/main.css index 31ae191..c35f299 100644 --- a/lostplaces/lostplaces_app/static/main.css +++ b/lostplaces/lostplaces_app/static/main.css @@ -296,6 +296,8 @@ .RV-Iconized__Container { position: relative; } + .RV-Iconized__Container--small { + top: -.25em; } .RV-Iconized__Container--medium { top: -.5em; } .RV-Iconized__Container--large { @@ -312,12 +314,18 @@ right: 0; border: none; } -.RV-Iconized__Container--small .RV-Iconized__Icon { +.RV-Iconized__Container--extraSmall .RV-Iconized__Icon { width: 1em; height: 1em; position: relative; top: .125em; } +.RV-Iconized__Container--small .RV-Iconized__Icon { + width: 1.5em; + height: 1.5em; + position: relative; + top: .45em; } + .RV-Iconized__Container--medium .RV-Iconized__Icon { width: 2em; height: 2em; diff --git a/lostplaces/lostplaces_app/templates/place/place_detail.html b/lostplaces/lostplaces_app/templates/place/place_detail.html index 1d50416..5394e8c 100644 --- a/lostplaces/lostplaces_app/templates/place/place_detail.html +++ b/lostplaces/lostplaces_app/templates/place/place_detail.html @@ -1,10 +1,13 @@ {% extends 'global.html'%} + {% load static %} +{% load thumbnail %} +{% load svg_icon %} + {% block additional_head %} {% endblock additional_head %} -{% load thumbnail %} {% block title %}{{place.name}}{% endblock %} @@ -59,19 +62,9 @@ {{photo_album.label}} {% if user == photo_album.submitted_by or user == place.submitted_by %} - +
- - - - - - - + {% icon 'trash' className="RV-Iconized__Icon" %}
{% endif %} diff --git a/lostplaces/lostplaces_app/templates/svg_icon/icon.html b/lostplaces/lostplaces_app/templates/svg_icon/icon.html new file mode 100644 index 0000000..d80fbe6 --- /dev/null +++ b/lostplaces/lostplaces_app/templates/svg_icon/icon.html @@ -0,0 +1,5 @@ + + {% for path in paths %} + + {% endfor %} + diff --git a/lostplaces/lostplaces_app/templatetags/svg_icon.py b/lostplaces/lostplaces_app/templatetags/svg_icon.py new file mode 100644 index 0000000..7090b6c --- /dev/null +++ b/lostplaces/lostplaces_app/templatetags/svg_icon.py @@ -0,0 +1,30 @@ +import json +from importlib import import_module + +from django.core.cache import cache +from django.conf import settings +from django.template import Library, TemplateSyntaxError + +icons_json_path = getattr(settings, 'SVG_ICONS_SOURCE_FILE') +icons_json = json.load(open(icons_json_path)) + +register = Library() + +@register.inclusion_tag('svg_icon/icon.html') +def icon(name, **kwargs): + + icon_config = icons_json.get(name, None) + + if icon_config: + + width = kwargs.get('width', icon_config.get('width', 16)) + height = kwargs.get('height', icon_config.get('heigh', 16)) + viewBox = kwargs.get('viewBox', icon_config.get('viewBox', '0 0 1024 1024')) + + return { + 'width': kwargs.get('size', width), + 'height': kwargs.get('size', height), + 'className': kwargs.get('className'), + 'viewBox': viewBox, + 'paths': icon_config.get('paths', ['']) + }