HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

fix: 🥚 animation

Browse source
This commit is contained in:
ThatOneCalculator 2023-07-25 23:44:41 -07:00
parent 90f58075ba
commit 4968d1ecb3
No known key found for this signature in database
GPG key ID: 8703CACD01000000
1 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
packages/client/src/pages/about.vue
View file

@ -34,11 +34,7 @@
<div class="content"> <div class="content">
<img <img
ref="instanceIcon" ref="instanceIcon"
:src=" :src="iconSrc"
$instance.iconUrl ||
$instance.faviconUrl ||
'/favicon.ico'
"
aria-label="none" aria-label="none"
class="icon" class="icon"
:class="instanceIconAnimation" :class="instanceIconAnimation"
@ -211,8 +207,9 @@ withDefaults(
let stats = $ref(null); let stats = $ref(null);
let instanceIcon = $ref<HTMLImageElement>(); let instanceIcon = $ref<HTMLImageElement>();
let instanceIconAnimation = "none";
let iconClicks = 0; let iconClicks = 0;
let iconSrc = ref(instance.iconUrl || instance.faviconUrl || "/favicon.ico");
let instanceIconAnimation = ref("");
let tabs = ["overview", "emojis", "charts"]; let tabs = ["overview", "emojis", "charts"];
let tab = $ref(tabs[0]); let tab = $ref(tabs[0]);
watch($$(tab), () => syncSlide(tabs.indexOf(tab))); watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
@ -274,15 +271,26 @@ function easterEgg() {
defaultStore.set("woozyMode", defaultStore.state.woozyMode); defaultStore.set("woozyMode", defaultStore.state.woozyMode);
if (instanceIcon) { if (instanceIcon) {
if (iconClicks % 6 === 0) { if (iconClicks % 6 === 0) {
instanceIcon.src = iconSrc.value =
instance.iconUrl || instance.faviconUrl || "/favicon.ico"; instance.iconUrl || instance.faviconUrl || "/favicon.ico";
} else { } else {
instanceIcon.src = "/static-assets/woozy.png"; iconSrc.value = "/static-assets/woozy.png";
} }
instanceIcon.src = iconSrc.value;
} }
} }
} }
watch(iconSrc, (newValue, oldValue) => {
if (newValue !== oldValue) {
instanceIconAnimation.value = "spin";
setTimeout(() => {
instanceIconAnimation.value = "";
}, 1000);
}
});
let swiperRef = null; let swiperRef = null;
function setSwiperRef(swiper) { function setSwiperRef(swiper) {
@ -314,7 +322,10 @@ function syncSlide(index) {
display: block; display: block;
margin: 16px auto 0 auto; margin: 16px auto 0 auto;
height: 64px; height: 64px;
transition: spinY 1s; }
> .spin {
animation: spinY 1s linear infinite;
} }
> .name { > .name {