From 9a18b84c4ffe883e6be1941de9dcb553b674000a Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Thu, 20 Apr 2023 16:15:51 +0000 Subject: [PATCH] Dont use raw SVGs for icons --- onlylegs/static/js/notifications.js | 14 ++-- .../static/sass/components/buttons/block.sass | 3 + .../sass/components/buttons/info-button.sass | 10 ++- .../static/sass/components/buttons/pill.sass | 9 +-- .../sass/components/buttons/top-of-page.sass | 10 ++- .../sass/components/image-view/info-tab.sass | 22 +++---- .../static/sass/components/navigation.sass | 24 ++----- .../static/sass/components/notification.sass | 5 +- onlylegs/templates/group.html | 25 ++----- onlylegs/templates/image.html | 65 +++++-------------- onlylegs/templates/index.html | 27 ++------ onlylegs/templates/layout.html | 57 +++++----------- onlylegs/templates/list.html | 4 +- onlylegs/templates/profile.html | 15 ++--- onlylegs/templates/settings.html | 4 +- 15 files changed, 87 insertions(+), 207 deletions(-) diff --git a/onlylegs/static/js/notifications.js b/onlylegs/static/js/notifications.js index 94309fa..a93e170 100644 --- a/onlylegs/static/js/notifications.js +++ b/onlylegs/static/js/notifications.js @@ -1,12 +1,6 @@ function addNotification(notificationText, notificationLevel) { const notificationContainer = document.querySelector('.notifications'); - // Set the different icons for the different notification levels - const successIcon = ''; - const criticalIcon = ''; - const warningIcon = ''; - const infoIcon = ''; - // Create notification element const notification = document.createElement('div'); notification.classList.add('sniffle__notification'); @@ -28,16 +22,16 @@ function addNotification(notificationText, notificationLevel) { // Set the icon based on the notification level, not pretty but it works :3 if (notificationLevel === 1) { notification.classList.add('success'); - iconElement.innerHTML = successIcon; + iconElement.innerHTML = ''; } else if (notificationLevel === 2) { notification.classList.add('critical'); - iconElement.innerHTML = criticalIcon; + iconElement.innerHTML = ''; } else if (notificationLevel === 3) { notification.classList.add('warning'); - iconElement.innerHTML = warningIcon; + iconElement.innerHTML = ''; } else { notification.classList.add('info'); - iconElement.innerHTML = infoIcon; + iconElement.innerHTML = ''; } // Create text element and append to notification diff --git a/onlylegs/static/sass/components/buttons/block.sass b/onlylegs/static/sass/components/buttons/block.sass index 0fee205..3891edd 100644 --- a/onlylegs/static/sass/components/buttons/block.sass +++ b/onlylegs/static/sass/components/buttons/block.sass @@ -149,6 +149,9 @@ opacity: 0 cursor: pointer + i + font-size: 1.2rem + .status width: 100% white-space: nowrap diff --git a/onlylegs/static/sass/components/buttons/info-button.sass b/onlylegs/static/sass/components/buttons/info-button.sass index 89e44ce..4805c59 100644 --- a/onlylegs/static/sass/components/buttons/info-button.sass +++ b/onlylegs/static/sass/components/buttons/info-button.sass @@ -23,15 +23,13 @@ cursor: pointer transition: all 0.2s cubic-bezier(.86, 0, .07, 1) + i + margin: 0.5rem + font-size: 1.25rem + &:hover color: RGB($info) - svg - margin: 0.5rem - - width: 1.25rem - height: 1.25rem - &.show right: 0.75rem opacity: 1 diff --git a/onlylegs/static/sass/components/buttons/pill.sass b/onlylegs/static/sass/components/buttons/pill.sass index 574476d..e9723f3 100644 --- a/onlylegs/static/sass/components/buttons/pill.sass +++ b/onlylegs/static/sass/components/buttons/pill.sass @@ -54,13 +54,14 @@ position: relative + text-decoration: none + border: none background-color: transparent color: RGB($fg-white) - svg - width: 1.25rem - height: 1.25rem + i + font-size: 1.25rem &:hover cursor: pointer @@ -74,7 +75,7 @@ background: RGB($critical) color: RGB($fg-white) - svg + i color: RGB($critical) &:hover diff --git a/onlylegs/static/sass/components/buttons/top-of-page.sass b/onlylegs/static/sass/components/buttons/top-of-page.sass index 05110d4..918356d 100644 --- a/onlylegs/static/sass/components/buttons/top-of-page.sass +++ b/onlylegs/static/sass/components/buttons/top-of-page.sass @@ -23,15 +23,13 @@ cursor: pointer transition: all 0.2s cubic-bezier(.86, 0, .07, 1) + i + margin: 0.5rem + font-size: 1.25rem + &:hover color: RGB($primary) - svg - margin: 0.5rem - - width: 1.25rem - height: 1.25rem - &.show right: 0.75rem opacity: 1 diff --git a/onlylegs/static/sass/components/image-view/info-tab.sass b/onlylegs/static/sass/components/image-view/info-tab.sass index 9a37f10..adcbdcb 100644 --- a/onlylegs/static/sass/components/image-view/info-tab.sass +++ b/onlylegs/static/sass/components/image-view/info-tab.sass @@ -50,10 +50,7 @@ .collapse-indicator margin: 0 padding: 0 - - width: 1.25rem - height: 1.25rem - + position: absolute top: 0.6rem right: 0.6rem @@ -67,8 +64,11 @@ transition: transform 0.15s cubic-bezier(.79, .14, .15, .86) cursor: pointer + > i + font-size: 1.1rem + color: RGB($primary) + .info-header - margin: 0 padding: 0.5rem width: 100% @@ -82,18 +82,12 @@ background-color: RGB($bg-200) border-radius: $rad - svg - margin: 0 - padding: 0 - - width: 1.25rem - height: 1.25rem - - fill: RGB($primary) + > i + font-size: 1.25rem + color: RGB($primary) h2 margin: 0 - padding: 0 font-size: 1.1rem font-weight: 500 diff --git a/onlylegs/static/sass/components/navigation.sass b/onlylegs/static/sass/components/navigation.sass index 5235e34..4cfe3a1 100644 --- a/onlylegs/static/sass/components/navigation.sass +++ b/onlylegs/static/sass/components/navigation.sass @@ -54,20 +54,14 @@ text-decoration: none - > svg - margin: 0 + > i padding: 0.5rem - - width: 2.5rem - height: 2.5rem + font-size: 1.3rem border-radius: $rad-inner color: RGB($fg-white) - - transition: color 0.2s ease-out, transform 0.2s ease-out .tool-tip - margin: 0 padding: 0.4rem 0.7rem display: block @@ -89,24 +83,20 @@ pointer-events: none - > svg - margin: 0 - font-size: 1rem - - width: 0.75rem - height: 0.75rem - + > i display: block position: absolute top: 50% left: -0.45rem transform: translateY(-50%) + + font-size: 0.75rem color: RGB($bg-100) &:hover - > svg + > i background: RGBA($fg-white, 0.1) span @@ -114,7 +104,7 @@ left: 3.9rem &.selected - > svg + > i color: RGB($primary) &::before diff --git a/onlylegs/static/sass/components/notification.sass b/onlylegs/static/sass/components/notification.sass index 294c695..3a468a2 100644 --- a/onlylegs/static/sass/components/notification.sass +++ b/onlylegs/static/sass/components/notification.sass @@ -108,9 +108,8 @@ background-color: RGB($bg-200) - svg - width: 1.25rem - height: 1.25rem + i + font-size: 1.25rem .sniffle__notification-text margin: 0 diff --git a/onlylegs/templates/group.html b/onlylegs/templates/group.html index c2cc311..fc3404e 100644 --- a/onlylegs/templates/group.html +++ b/onlylegs/templates/group.html @@ -230,18 +230,12 @@
- +
{% if current_user.id == group.author.id %}
- - + +
{% endif %}
@@ -254,18 +248,12 @@
- +
{% if current_user.id == group.author.id %}
- - + +
{% endif %}
@@ -278,7 +266,6 @@ {% for image in images %}
-

{{ image.created_at }}

{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %} diff --git a/onlylegs/templates/image.html b/onlylegs/templates/image.html index 0a397d9..4f984a3 100644 --- a/onlylegs/templates/image.html +++ b/onlylegs/templates/image.html @@ -103,54 +103,28 @@
- {% if next_url %} -
- - - -
- {% endif %} + {% if next_url %}
{% endif %}
- - - - - + + +
{% if current_user.id == image.author.id %}
- - -
- {% endif %} - {% if prev_url %} -
- - - + +
{% endif %} + {% if prev_url %}
{% endif %}
- +

Info

- +
@@ -190,26 +164,17 @@
{% if tag == 'Photographer' %} - -

Photographer

+

Photographer

{% elif tag == 'Camera' %} - -

Camera

+

Camera

{% elif tag == 'Software' %} - -

Software

+

Software

{% elif tag == 'File' %} - -

File

+

File

{% else %} - -

{{ tag }}

+

{{ tag }}

{% endif %} - +
diff --git a/onlylegs/templates/index.html b/onlylegs/templates/index.html index 36ae2d7..af9f0ab 100644 --- a/onlylegs/templates/index.html +++ b/onlylegs/templates/index.html @@ -15,29 +15,13 @@ {% if pages > 1 %}
- {% if pages > 4 %} - - - - {% endif %} - - - + {% if pages > 4 %}{% endif %} +
- - - {{ page }} / {{ pages }} - - + {{ page }} / {{ pages }}
- - - - {% if pages > 4 %} - - - - {% endif %} + + {% if pages > 4 %}{% endif %}
{% endif %} @@ -49,7 +33,6 @@ {% for image in images %}
-

{{ image.created_at }}

{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %} diff --git a/onlylegs/templates/layout.html b/onlylegs/templates/layout.html index a47d14b..429be9a 100644 --- a/onlylegs/templates/layout.html +++ b/onlylegs/templates/layout.html @@ -18,6 +18,9 @@ + + +
- - {% if request.path == "/" %} - - {% endif %} + + {% if request.path == "/" %}{% endif %}
@@ -71,28 +68,19 @@ - - - Home - - + + Home - - - Groups - - + + Groups {% if current_user.is_authenticated %} {% endif %} @@ -100,27 +88,18 @@ {% if current_user.is_authenticated %} - - - Profile - - + + Profile - - - Settings - - + + Settings {% else %} {% endif %}
@@ -134,7 +113,7 @@

May the world see your stuff 👀

diff --git a/onlylegs/templates/list.html b/onlylegs/templates/list.html index a66b609..6a11244 100644 --- a/onlylegs/templates/list.html +++ b/onlylegs/templates/list.html @@ -108,9 +108,7 @@ {% if current_user.is_authenticated %}
- +
{% endif %} diff --git a/onlylegs/templates/profile.html b/onlylegs/templates/profile.html index c85c81d..c20bae8 100644 --- a/onlylegs/templates/profile.html +++ b/onlylegs/templates/profile.html @@ -19,17 +19,11 @@
- - + +
- - - +
@@ -41,7 +35,6 @@ {% for image in images %}
-

{{ image.created_at }}

{{ image.alt }} @@ -51,7 +44,7 @@ {% else %}

*crickets chirping*

-

There are no images here yet, upload some!

+

There are no images here yet, oopsie!

{% endif %} {% endblock %} diff --git a/onlylegs/templates/settings.html b/onlylegs/templates/settings.html index 35b18aa..a8e08ac 100644 --- a/onlylegs/templates/settings.html +++ b/onlylegs/templates/settings.html @@ -8,9 +8,7 @@