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

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

@ -16,7 +16,10 @@ export default defineComponent({
return h(
"div",
{
class: ["pxhvhrfw", { chips: this.style === "chips" }],
class: ["pxhvhrfw",
{ chips: this.style === "chips" },
{ underline: this.style === "underline" }
],
role: "tablist",
},
options.map((option) =>
@ -85,7 +88,7 @@ export default defineComponent({
}
}
&.chips {
&.chips, &.underline {
padding: 12px 32px;
font-size: 0.85em;
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 {
font-size: 80%;