natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

feat: ⚗️ ripple effect

This commit is contained in:
ThatOneCalculator 2022-08-16 00:00:36 -07:00
parent 42df051512
commit 053f1c0ac4
2 changed files with 50 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
packages/client/src/pages/timeline.vue
View File

@ -1,42 +1,43 @@
<template>
<MkStickyContainer>
<template #header
><MkPageHeader
v-model:tab="src"
:actions="headerActions"
:tabs="headerTabs"
:display-my-avatar="true"
/></template>
<MkSpacer :content-max="800">
<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
<XTutorial
v-if="$store.reactiveState.tutorial.value != -1"
class="tutorial _block"
/>
<XPostForm
v-if="$store.reactiveState.showFixedPostForm.value"
class="post-form _block"
fixed
/>
<MkStickyContainer>
<template #header>
<MkPageHeader
v-model:tab="src"
:actions="headerActions"
:tabs="headerTabs"
:display-my-avatar="true"
/>
</template>
<MkSpacer :content-max="800">
<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
<XTutorial
v-if="$store.reactiveState.tutorial.value != -1"
class="tutorial _block"
/>
<XPostForm
v-if="$store.reactiveState.showFixedPostForm.value"
class="post-form _block"
fixed
/>
<div v-if="queue > 0" class="new">
<button class="_buttonPrimary" @click="top()">
{{ i18n.ts.newNoteRecived }}
</button>
</div>
<div class="tl _block">
<XTimeline
ref="tl"
:key="src"
class="tl"
:src="src"
:sound="true"
@queue="queueUpdated"
/>
</div>
<div v-if="queue > 0" class="new">
<button class="_buttonPrimary" @click="top()">
{{ i18n.ts.newNoteRecived }}
</button>
</div>
</MkSpacer>
</MkStickyContainer>
<div class="tl _block">
<XTimeline
ref="tl"
:key="src"
class="tl"
:src="src"
:sound="true"
@queue="queueUpdated"
/>
</div>
</div>
</MkSpacer>
</MkStickyContainer>
</template>
<script lang="ts" setup>
@ -72,7 +73,6 @@ const DESKTOP_THRESHOLD = 1100;
const MOBILE_THRESHOLD = 500;
// デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
const isMobile = ref(
deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD
);
@ -297,6 +297,7 @@ if (isMobile.value) {
/* reset values */
xDown = null;
yDown = null;
return;
}
}
</script>

12
packages/client/src/ui/universal.vue
View File

@ -304,8 +304,20 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
height: 64px;
border-radius: 8px;
background: var(--panel);
background-position: center;
transition: background 0.6s;
color: var(--fg);
&:hover {
background: var(--panelHover) radial-gradient(circle, transparent 1%, var(--panelHover) 1%) center/15000%;
}
&:active {
background-color: var(--accentedBg);
background-size: 100%;
transition: background 0s;
}
&:not(:last-child) {
margin-right: 12px;
}