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

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

@ -304,8 +304,20 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
height: 64px; height: 64px;
border-radius: 8px; border-radius: 8px;
background: var(--panel); background: var(--panel);
background-position: center;
transition: background 0.6s;
color: var(--fg); 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) { &:not(:last-child) {
margin-right: 12px; margin-right: 12px;
} }