OpenSource/Sharkey
OpenSource/Sharkey
1
0
Fork 0
mirror of https://activitypub.software/TransFem-org/Sharkey.git synced 2024-12-13 21:40:45 +01:00
Code Issues Projects Releases Packages Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2022-12-28 18:22:46 +09:00
parent 229d185354
commit 6e6d9f3029
2 changed files with 27 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/frontend/src/components/MkButton.vue
View file

@ -2,7 +2,7 @@
<button
v-if="!link"
ref="el" class="bghgjjyj _button"
:class="{ inline, primary, gradate, danger, rounded, full }"
:class="{ inline, primary, gradate, danger, rounded, full, small }"
:type="type"
@click="emit('click', $event)"
@mousedown="onMousedown"
@ -14,7 +14,7 @@
</button>
<MkA
v-else class="bghgjjyj _button"
:class="{ inline, primary, gradate, danger, rounded, full }"
:class="{ inline, primary, gradate, danger, rounded, full, small }"
:to="to"
@mousedown="onMousedown"
>
@ -40,6 +40,7 @@ const props = defineProps<{
wait?: boolean;
danger?: boolean;
full?: boolean;
small?: boolean;
}>();
const emit = defineEmits<{
@ -125,6 +126,11 @@ function onMousedown(evt: MouseEvent): void {
background: var(--buttonHoverBg);
}
&.small {
font-size: 90%;
padding: 6px 12px;
}
&.full {
width: 100%;
}

33
packages/frontend/src/components/MkUrlPreview.vue
View file

@ -10,7 +10,6 @@
<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
<button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="isMobile? playerEnabled = true : openPlayer()"><i class="ti ti-player-play"></i></button>
</div>
<article>
<header>
@ -24,10 +23,18 @@
</article>
</component>
</transition>
<div v-if="tweetId" class="expandTweet">
<a @click="tweetExpanded = true">
<div v-if="tweetId" class="action">
<MkButton :small="true" inline @click="tweetExpanded = true">
<i class="ti ti-brand-twitter"></i> {{ i18n.ts.expandTweet }}
</a>
</MkButton>
</div>
<div v-if="!playerEnabled && player.url" class="action">
<MkButton :small="true" inline @click="playerEnabled = true">
<i class="ti ti-player-play"></i> {{ i18n.ts.enablePlayer }}
</MkButton>
<MkButton v-if="!isMobile" :small="true" inline @click="openPlayer()">
<i class="ti ti-picture-in-picture"></i> {{ i18n.ts.openInWindow }}
</MkButton>
</div>
</div>
</template>
@ -38,6 +45,7 @@ import { url as local, lang } from '@/config';
import { i18n } from '@/i18n';
import * as os from '@/os';
import { deviceKind } from '@/scripts/device-kind';
import MkButton from '@/components/MkButton.vue';
const props = withDefaults(defineProps<{
url: string;
@ -181,16 +189,6 @@ onUnmounted(() => {
justify-content: center;
align-items: center;
> button {
font-size: 3.5em;
opacity: 0.7;
&:hover {
font-size: 4em;
opacity: 0.9;
}
}
& + article {
left: 100px;
width: calc(100% - 100px);
@ -249,6 +247,13 @@ onUnmounted(() => {
}
}
}
> .action {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 6px;
}
}
@container (max-width: 400px) {