limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-21 17:37: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>
._button_modern {
width: 100%;
font-weight: 700;
z-index: 5;
&.showLess {
position: sticky;
bottom: calc(var(--stickyBottom) - 1em);
margin: 20px 0;
}
> 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);
transition:
background 0.2s,
color 0.2s;
> span {
font-weight: 500;
&::before {
@ -84,42 +98,6 @@ defineExpose({
background: var(--cwFg) !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 {

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

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