feat: introduce dynamic SVG icon functionality
Implemented a new template filter in Flask to dynamically render SVG icons, allowing for cleaner HTML templates and easier icon management. Added `coffee` and `envelope` SVG icons to the project's asset directory. This change not only streamlines the incorporation of new icons but also enhances the maintainability of the codebase by centralizing icon resources and reducing HTML clutter. Modified existing HTML templates to use this new dynamic icon rendering method, replacing hard-coded SVG and img tag icon implementations with the newly created template filter. This update significantly improves the way icons are handled throughout the application, providing a more scalable and efficient approach to managing and displaying graphical elements.
This commit is contained in:
parent
d3e4502cb2
commit
e77fc521bf
GPG key ID:
ECBCC9082395383F
|
|
@ -119,6 +119,10 @@ h5 {
|
|||
color: #604c2e;
|
||||
}
|
||||
|
||||
.bs-icon.bs-icon-primary svg {
|
||||
fill: var(--bs-primary-bg-subtle);
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
@media (max-width: 768px) {
|
||||
.navbar .container {
|
||||
|
|
|
|||
1
assets/dist/icons/coffee.svg
vendored
Normal file
1
assets/dist/icons/coffee.svg
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M80,56V24a8,8,0,0,1,16,0V56a8,8,0,0,1-16,0Zm40,8a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,120,64Zm32,0a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,152,64Zm96,56v8a40,40,0,0,1-37.51,39.91,96.59,96.59,0,0,1-27,40.09H208a8,8,0,0,1,0,16H32a8,8,0,0,1,0-16H56.54A96.3,96.3,0,0,1,24,136V88a8,8,0,0,1,8-8H208A40,40,0,0,1,248,120ZM200,96H40v40a80.27,80.27,0,0,0,45.12,72h69.76A80.27,80.27,0,0,0,200,136Zm32,24a24,24,0,0,0-16-22.62V136a95.78,95.78,0,0,1-1.2,15A24,24,0,0,0,232,128Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 600 B |
1
assets/dist/icons/envelope.svg
vendored
Normal file
1
assets/dist/icons/envelope.svg
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 360 B |
7
main.py
7
main.py
|
|
@ -81,6 +81,13 @@ if os.environ.get("PRIVATECOFFEE_DEV"):
|
|||
app.development_mode = True
|
||||
|
||||
|
||||
def icon(icon_name):
|
||||
file = send_from_directory("assets", f"dist/icons/{icon_name}.svg")
|
||||
file_content = file.response.file.read().decode("utf-8")
|
||||
return file_content
|
||||
|
||||
app.add_template_filter(icon)
|
||||
|
||||
if __name__ == "__main__":
|
||||
parser = ArgumentParser(description="Run the private.coffee web server.")
|
||||
parser.add_argument("--port", type=int, default=9810)
|
||||
|
|
|
|||
|
|
@ -75,21 +75,7 @@
|
|||
<div class="fw-bold d-flex align-items-center mb-2">
|
||||
<span
|
||||
class="bs-icon-sm bs-icon-circle bs-icon-primary d-flex justify-content-center align-items-center bs-icon me-2"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
class="bi bi-bezier"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"
|
||||
></path>
|
||||
<path
|
||||
d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"
|
||||
></path></svg></span
|
||||
>{{ "coffee" | icon | safe }}</span
|
||||
><span>Private.coffee</span>
|
||||
</div>
|
||||
<p class="text-muted">
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
<div class="card shadow-sm">
|
||||
<div class="card-body px-4 py-5 px-md-5">
|
||||
<div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;">
|
||||
{% if service.icon %}<img src="/assets/dist/icons/{{ service.icon }}.svg" alt="{{ service.name }}" style="max-width: 3rem;">{% endif %}
|
||||
{% if service.icon %}{{ service.icon | icon | safe }}{% endif %}
|
||||
</div>
|
||||
<h5 class="fw-bold card-title">{{ service.name }}</h5>
|
||||
<p class="text-muted card-text mb-4">{{ service.long_description }}</p>
|
||||
|
|
@ -91,9 +91,7 @@
|
|||
<div class="col-md-4 col-xl-4 d-flex justify-content-center justify-content-xl-start">
|
||||
<div class="d-flex flex-wrap flex-md-column justify-content-md-start align-items-md-start h-100">
|
||||
<div class="d-flex align-items-center p-3">
|
||||
<div class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-envelope">
|
||||
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"></path>
|
||||
</svg></div>
|
||||
<div class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md">{{ "envelope" | icon | safe }}</div>
|
||||
<div class="px-2">
|
||||
<h6 class="fw-bold mb-0">Email</h6>
|
||||
<p class="text-muted mb-0">support@private.coffee</p>
|
||||
|
|
@ -106,9 +104,7 @@
|
|||
<div class="col-md-4 col-xl-4 d-flex justify-content-center justify-content-xl-start">
|
||||
<div class="d-flex flex-wrap flex-md-column justify-content-md-start align-items-md-start h-100">
|
||||
<div class="d-flex align-items-center p-3">
|
||||
<div class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-envelope">
|
||||
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"></path>
|
||||
</svg></div>
|
||||
<div class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md">{{ "matrix-logo" | icon | safe }}</div>
|
||||
<div class="px-2">
|
||||
<h6 class="fw-bold mb-0">Matrix</h6>
|
||||
<p class="text-muted mb-0"><a href="https://matrix.pcof.fi/#/#private.coffee:private.coffee">#private.coffee:private.coffee</a></p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue