Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 03:26:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Dont use raw SVGs for icons

Browse source
This commit is contained in:
Michał Gdula 2023-04-20 16:15:51 +00:00
parent f5a31a8149
commit 9a18b84c4f
15 changed files with 87 additions and 207 deletions
Download patch file Download diff file Expand all files Collapse all files

14
onlylegs/static/js/notifications.js
View file

@ -1,12 +1,6 @@
function addNotification(notificationText, notificationLevel) {
const notificationContainer = document.querySelector('.notifications');
// Set the different icons for the different notification levels
const successIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg>';
const criticalIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"></path></svg>';
const warningIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>';
const infoIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>';
// 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 = '<i class="ph ph-check-circle"></i>';
} else if (notificationLevel === 2) {
notification.classList.add('critical');
iconElement.innerHTML = criticalIcon;
iconElement.innerHTML = '<i class="ph ph-warning"></i>';
} else if (notificationLevel === 3) {
notification.classList.add('warning');
iconElement.innerHTML = warningIcon;
iconElement.innerHTML = '<i class="ph ph-siren"></i>';
} else {
notification.classList.add('info');
iconElement.innerHTML = infoIcon;
iconElement.innerHTML = '<i class="ph ph-info"></i>';
}
// Create text element and append to notification

3
onlylegs/static/sass/components/buttons/block.sass
View file

@ -149,6 +149,9 @@
opacity: 0
cursor: pointer
i
font-size: 1.2rem
.status
width: 100%
white-space: nowrap

10
onlylegs/static/sass/components/buttons/info-button.sass
View file

@ -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

9
onlylegs/static/sass/components/buttons/pill.sass
View file

@ -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

10
onlylegs/static/sass/components/buttons/top-of-page.sass
View file

@ -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

22
onlylegs/static/sass/components/image-view/info-tab.sass
View file

@ -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

24
onlylegs/static/sass/components/navigation.sass
View file

@ -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

5
onlylegs/static/sass/components/notification.sass
View file

@ -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