Skip to content

Commit 54f3a7b

Browse files
vlad-stohniivlad-stohnii
committed
+
1 parent 005e663 commit 54f3a7b

File tree

2 files changed

+102
-54
lines changed

2 files changed

+102
-54
lines changed

‎src/ui/components/RightAside.astro

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
---
22
import AsideArticle from "./AsidePosts.astro";
33
import AsideSponsors from "./AsideSponsors.astro";
4-
import CarbonCard from "./CarbonCard.astro";
54
import SmallProgressBar from "./SmallProgressBar.astro";
65
import progress from "../../data/progress";
76
import Toasts from "./Toasts.astro";
87
---
98

109
<div class="aside-right">
1110
<div class="aside-right__content">
12-
<div class="progress-wrap">
13-
<SmallProgressBar progress={progress} />
14-
</div>
15-
<AsideArticle />
16-
<AsideSponsors />
11+
<div class="progress-wrap">
12+
<SmallProgressBar progress={progress} />
13+
</div>
14+
<AsideArticle />
15+
<AsideSponsors />
1716
</div>
18-
<!-- <CarbonCard /> -->
19-
<Toasts />
17+
<Toasts />
2018
</div>
2119
<style>
2220
.aside-right {
@@ -29,7 +27,11 @@ import Toasts from "./Toasts.astro";
2927
justify-content: space-between;
3028
height: calc(100vh - 104px);
3129
z-index: 99;
32-
position: relative;
30+
position: relative;
31+
}
32+
33+
html.dark .aside-right__content {
34+
background-color: #111;
3335
}
3436

3537
.aside-right__content {
@@ -38,11 +40,14 @@ import Toasts from "./Toasts.astro";
3840
flex-direction: column;
3941
align-items: center;
4042
justify-content: space-between;
43+
position: relative;
44+
z-index: 10000;
45+
background-color: #fff;
4146
}
4247

4348
.progress-wrap {
44-
width: 100%;
45-
margin-bottom: 4px;
49+
width: 100%;
50+
margin-bottom: 4px;
4651
}
4752

4853
@media screen and (max-width: 1024px) {

‎src/ui/components/Toasts.astro

Lines changed: 86 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,19 @@
11
---
2-
32
const toasts = [
4-
// {
5-
// icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>`,
6-
// title: "Two",
7-
// description: "One",
8-
// href: ""
9-
// },
10-
// {
11-
// icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>`,
12-
// title: "Three",
13-
// description: "One",
14-
// href: ""
15-
// },
163
{
174
icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>`,
185
title: "One Dollar Stats",
196
description: "$1 per mo web analytics",
20-
href: "https://onedollarstats.com/"
7+
href: "https://driz.link/onedollarstats",
218
},
229
];
2310
---
24-
<div data-toasts class="toasts-wrap animated_bottom" transition:persist="toasts">
11+
12+
<div
13+
data-toasts
14+
class="toasts-wrap animated_bottom"
15+
transition:persist="toasts"
16+
>
2517
<div class="by-drizzle">Product by Drizzle</div>
2618
{
2719
toasts.map((toast, index) => (
@@ -30,12 +22,14 @@ const toasts = [
3022
target="_blank"
3123
rel="noreferrer nofollow"
3224
data-toast={index}
25+
data-toast-name={toast.title}
3326
style={`transform: translateY(${(toasts.length - index - 1) * 100}%) scale(${1 - (toasts.length - index - 1) * 0.06});`}
3427
class="toast"
3528
>
3629
<div class="toast-content">
3730
<div class="toast-icon">
3831
<Fragment set:html={toast.icon} />
32+
<div class="toast-indicator" />
3933
</div>
4034
<div class="toast-text">
4135
<span class="toast-title">{toast.title}</span>
@@ -51,7 +45,7 @@ const toasts = [
5145
display: flex;
5246
flex-direction: column;
5347
position: absolute;
54-
z-index: 1000;
48+
z-index: 2;
5549
bottom: 0;
5650
left: 0;
5751
right: 0;
@@ -88,9 +82,9 @@ const toasts = [
8882
align-items: center;
8983
width: 100%;
9084
/* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px; */
91-
background: #FBFBFC;
85+
background: #fbfbfc;
9286
border-radius: 8px;
93-
border: 1px solid #E0E1E3;
87+
border: 1px solid #e0e1e3;
9488
}
9589

9690
.toast-text {
@@ -109,7 +103,6 @@ const toasts = [
109103
.toast-description {
110104
font-size: 12px;
111105
line-height: normal;
112-
113106
}
114107

115108
.toast:not(:last-child) .toast-content {
@@ -118,11 +111,11 @@ const toasts = [
118111

119112
@keyframes bottom {
120113
0% {
121-
transform: translateY(20%);
114+
transform: translateY(100%);
122115
opacity: 0;
123116
}
124117
75% {
125-
transform: translateY(-10%);
118+
transform: translateY(-15%);
126119
opacity: 0.75;
127120
}
128121
100% {
@@ -145,63 +138,112 @@ const toasts = [
145138
}
146139

147140
.toast-icon {
141+
position: relative;
148142
width: 32px;
149143
height: 32px;
150144
border-radius: 50%;
151145
background-color: #f0f0f0;
152146
padding: 6px;
153147
margin: 8px;
154148
aspect-ratio: 1;
155-
border: 1px solid #E0E1E3;
149+
border: 1px solid #e0e1e3;
150+
}
151+
152+
.toast-indicator {
153+
position: absolute;
154+
width: 8px;
155+
height: 8px;
156+
bottom: 0px;
157+
right: 0px;
158+
border-radius: 100%;
159+
background: #ef4444;
156160
}
157161

158162
html.dark .by-drizzle {
159163
background: #111;
160164
border: 1px solid #292929;
165+
color: #909090;
161166
}
162167

163168
.by-drizzle {
164169
text-transform: uppercase;
165-
font-size: 12px;
166-
bottom: 0;
170+
font-size: 10px;
171+
bottom: -24px;
167172
position: absolute;
168173
transition: bottom 0.2s;
169174
margin-bottom: 8px;
170175
left: 50%;
171-
border: 1px solid #E0E1E3;
176+
color: #909090;
177+
border: 1px solid #e0e1e3;
172178
white-space: pre;
173179
z-index: -1;
174180
transform: translateX(-50%);
175-
background-color: #FBFBFC;
181+
background-color: #fbfbfc;
176182
padding: 0 8px;
177183
border-bottom-left-radius: 8px;
178184
border-bottom-right-radius: 8px;
179185
}
180-
181-
.toasts-wrap:has(.toast:hover) .by-drizzle{
182-
bottom: -26px;
183-
}
184186
</style>
185187
<style is:global>
186-
.toast-icon svg {
187-
width: 100%;
188-
height: 100%;
189-
}
188+
.toast-icon svg {
189+
width: 100%;
190+
height: 100%;
191+
}
190192
</style>
193+
<script is:inline>
194+
const toasts = document.querySelectorAll("[data-toast]");
195+
const localStorageItems = localStorage.getItem("toasts");
196+
const storedToasts = localStorageItems ? JSON.parse(localStorageItems) : [];
197+
toasts.forEach((toast) => {
198+
const toastName = toast.dataset.toastName;
199+
const toastIndicator = toast.querySelector(".toast-indicator");
200+
if (storedToasts.includes(toastName) && toastIndicator) {
201+
toastIndicator.style.display = "none";
202+
}
203+
});
204+
</script>
191205
<script>
192-
document.addEventListener("DOMContentLoaded", (e) => {
193-
const toasts = document.querySelectorAll("[data-toast]");
206+
const initToasts = () => {
207+
const toasts = document.querySelectorAll(
208+
"[data-toast]",
209+
) as NodeListOf<HTMLElement>;
210+
const localStorageItems = localStorage.getItem("toasts");
211+
const storedToasts = localStorageItems ? JSON.parse(localStorageItems) : [];
212+
194213
toasts.forEach((toast, index) => {
195-
setTimeout(() => {
196-
toast.setAttribute(
197-
"style",
198-
`transform: translateY(calc(${(toasts.length - index - 1) * 100}% - ${(toasts.length - index - 1) * 12}px)) scale(${1 - (toasts.length - index - 1) * 0.06});`
199-
);
200-
}, 100 * toasts.length - index * 100);
214+
const toastName = toast.dataset.toastName;
215+
const toastIndicator = toast.querySelector(
216+
".toast-indicator",
217+
) as HTMLElement;
218+
if (storedToasts.includes(toastName) && toastIndicator) {
219+
toastIndicator.style.display = "none";
220+
}
221+
222+
toast.addEventListener("mouseenter", () => {
223+
if (!storedToasts.includes(toastName)) {
224+
storedToasts.push(toastName);
225+
localStorage.setItem("toasts", JSON.stringify(storedToasts));
226+
}
227+
if (toastIndicator) {
228+
toastIndicator.style.display = "none";
229+
}
230+
});
231+
232+
setTimeout(
233+
() => {
234+
toast.setAttribute(
235+
"style",
236+
`transform: translateY(calc(${(toasts.length - index - 1) * 100}% - ${(toasts.length - index - 1) * 12}px)) scale(${1 - (toasts.length - index - 1) * 0.06});`,
237+
);
238+
},
239+
100 * toasts.length - index * 100,
240+
);
241+
201242
if (index !== toasts.length - 1) {
202243
toast.classList.add("animated_fadeout");
203244
}
204245
});
246+
205247
const toastsWrap = document.querySelector("[data-toasts]");
206248
if (toastsWrap) {
207249
setTimeout(() => {
@@ -211,5 +253,6 @@ const toasts = [
211253
toastsWrap.classList.add("toasts-wrap-fade");
212254
}, 3000);
213255
}
214-
});
256+
};
257+
document.addEventListener("astro:page-load", initToasts);
215258
</script>

0 commit comments

Comments
 (0)