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

Merge pull request 'Change detailed note tabs design' (#10164) from Freeplay/calckey:notes into develop 

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10164
This commit is contained in:
Kainoa Kanter 2023-05-20 16:36:15 +00:00
parent 38d323962a e57fbbb335
commit 3146749a30
2 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/MkNoteDetailed.vue
View File

@ -33,7 +33,7 @@
detailedView detailedView
></MkNote> ></MkNote>
<MkTab v-model="tab" :style="'chips'" @update:modelValue="loadTab"> <MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab">
<option value="replies"> <option value="replies">
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i> <i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<template v-if="appearNote.repliesCount > 0"> <template v-if="appearNote.repliesCount > 0">

23
packages/client/src/components/MkTab.vue
View File

@ -16,7 +16,10 @@ export default defineComponent({
return h( return h(
"div", "div",
{ {
class: ["pxhvhrfw", { chips: this.style === "chips" }], class: ["pxhvhrfw",
{ chips: this.style === "chips" },
{ underline: this.style === "underline" }
],
role: "tablist", role: "tablist",
}, },
options.map((option) => options.map((option) =>
@ -85,7 +88,7 @@ export default defineComponent({
} }
} }
&.chips { &.chips, &.underline {
padding: 12px 32px; padding: 12px 32px;
font-size: 0.85em; font-size: 0.85em;
overflow-x: auto; overflow-x: auto;
@ -118,6 +121,22 @@ export default defineComponent({
} }
} }
&.underline {
padding-block: 0 !important;
margin-bottom: -1px;
button {
background: none !important;
border-radius: 0 !important;
padding-block: 10px !important;
border-bottom: 2px solid transparent;
&[aria-selected="true"] {
background: none !important;
font-weight: 700;
border-bottom-color: var(--accent);
}
}
}
&.max-width_500px { &.max-width_500px {
font-size: 80%; font-size: 80%;