limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-22 09:57:29 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Extend CW and 'Show more' buttons to post edges

Browse source
This commit is contained in:
Aylam 2023-11-03 20:42:23 +02:00 committed by Laura Hausmann
parent 00b8622612
commit cd82073953
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
2 changed files with 36 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
packages/client/src/components/MkCwButton.vue
View file

@ -61,14 +61,28 @@ defineExpose({
<style lang="scss" scoped> <style lang="scss" scoped>
._button_modern { ._button_modern {
width: 100%;
font-weight: 700; font-weight: 700;
z-index: 5; z-index: 5;
&.showLess {
position: sticky;
bottom: calc(var(--stickyBottom) - 1em);
margin: 20px 0;
}
> span { > span {
background: var(--cwBg) !important; display: inline-block;
padding: 0.5em 0;
font-size: 0.8em;
border-radius: 999px;
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
width: 100%;
background: var(--cwBg);
color: var(--cwFg); color: var(--cwFg);
transition: transition:
background 0.2s, background 0.2s,
color 0.2s; color 0.2s;
> span { > span {
font-weight: 500; font-weight: 500;
&::before { &::before {
@ -84,42 +98,6 @@ defineExpose({
background: var(--cwFg) !important; background: var(--cwFg) !important;
color: var(--cwBg) !important; color: var(--cwBg) !important;
} }
&.fade {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
> span {
display: inline-block;
background: var(--panel);
padding: 0.4em 3em;
font-size: 0.8em;
border-radius: 999px;
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
}
&:hover {
> span {
background: var(--panelHighlight);
}
}
}
&.showLess {
width: 100%;
position: sticky;
bottom: calc(var(--stickyBottom) - 1em);
padding: 20px;
> span {
display: inline-block;
background: var(--panel);
padding: 0.4em 3em;
font-size: 0.8em;
border-radius: 999px;
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
}
}
} }
._button_alternative { ._button_alternative {

69
packages/client/src/components/MkShowMoreButton.vue
View file

@ -2,7 +2,7 @@
<button <button
ref="el" ref="el"
class="_button" class="_button"
:class="[cwButton, { fade: modelValue, showLess: !modelValue }]" :class="['showMoreButton', { showLess: !modelValue }]"
@click.stop="toggle" @click.stop="toggle"
> >
<span>{{ modelValue ? i18n.ts.showMore : i18n.ts.showLess }}</span> <span>{{ modelValue ? i18n.ts.showMore : i18n.ts.showLess }}</span>
@ -10,8 +10,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { computed, ref } from "vue"; import { ref } from "vue";
import {defaultStore} from "@/store";
const props = defineProps<{ const props = defineProps<{
modelValue: boolean; modelValue: boolean;
@ -23,8 +22,6 @@ const emit = defineEmits<{
(ev: "update:modelValue", v: boolean): void; (ev: "update:modelValue", v: boolean): void;
}>(); }>();
const cwButton = computed (() => `_button_${defaultStore.state.cwStyle}`);
const toggle = () => { const toggle = () => {
emit("update:modelValue", !props.modelValue); emit("update:modelValue", !props.modelValue);
}; };
@ -38,68 +35,36 @@ defineExpose({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.fade {
.showMoreButton {
display: block; display: block;
width: 100%;
padding: 20px 0;
margin-bottom: -10px;
z-index: 5;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
> span {
display: inline-block;
background: var(--panel);
padding: 0.5em 0;
font-size: 0.8em;
border-radius: 999px;
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
width: 100%; width: 100%;
padding: 20px;
margin-bottom: -10px;
z-index: 5;
&._button_modern {
> span {
display: inline-block;
background: var(--panel);
padding: 0.4em 3em;
font-size: 0.8em;
border-radius: 999px;
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
}
}
&:not(._button_modern) {
> span {
display: inline-block;
background: var(--panel);
padding: 0.4em 1em;
font-size: 0.8em;
border-radius: 999px;
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
}
} }
&:hover { &:hover {
> span { > span {
background: var(--panelHighlight); background: var(--panelHighlight);
} }
} }
}
.showLess { &.showLess {
width: 100%; width: 100%;
position: sticky; position: sticky;
bottom: calc(var(--stickyBottom) - 1em); bottom: calc(var(--stickyBottom) - 1em);
padding: 20px;
z-index: 5;
&._button_modern {
> span {
display: inline-block;
background: var(--panel);
padding: 0.4em 3em;
font-size: 0.8em;
border-radius: 999px;
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
} }
} }
&:not(._button_modern) {
> span {
display: inline-block;
background: var(--panel);
padding: 6px 10px;
font-size: 0.8em;
border-radius: 999px;
box-shadow: 0 0 7px 7px var(--bg);
}
}
}
</style> </style>