More styling

weeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
This commit is contained in:
freeplay 2023-07-05 23:33:44 -04:00
parent f4730f43f2
commit 0bc4a6b758
6 changed files with 92 additions and 24 deletions

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="ffcbddfc linkBoxed" :class="{ inline, naked }"> <div class="ffcbddfc linkBoxed" :class="{ inline, naked, wrap }">
<span v-if="!to" class="main"> <span v-if="!to" class="main">
<span class="icon"><slot name="icon"></slot></span> <span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span> <span class="text"><slot></slot></span>
@ -42,6 +42,7 @@ const props = defineProps<{
behavior?: null | "window" | "browser" | "modalWindow"; behavior?: null | "window" | "browser" | "modalWindow";
inline?: boolean; inline?: boolean;
naked?: boolean; naked?: boolean;
wrap?: boolean;
}>(); }>();
</script> </script>
@ -117,5 +118,22 @@ const props = defineProps<{
color: inherit; color: inherit;
} }
} }
&.wrap {
> .main {
flex-wrap: wrap;
align-content: flex-start;
height: 100%;
> .text {
padding-left: 0 !important;
width: 1px;
flex-grow: 1;
}
> .right {
width: 100%;
white-space: unset;
}
}
}
} }
</style> </style>

View file

@ -184,7 +184,7 @@ const props = withDefaults(
to?: string; to?: string;
}>(), }>(),
{ {
displayHomeButton: !$i, displayHomeButton: !$i && window.innerWidth >= 1100,
} }
); );

View file

@ -199,7 +199,7 @@ definePageMetadata(
icon: "ph-compass ph-bold ph-lg", icon: "ph-compass ph-bold ph-lg",
})) }))
); );
provide("shouldOmitHeaderTitle", true); // provide("shouldOmitHeaderTitle", true);
let swiperRef = null; let swiperRef = null;

View file

@ -536,6 +536,7 @@ hr {
grid-gap: 12px; grid-gap: 12px;
> button { > button {
width: 100% !important; width: 100% !important;
height: 100% !important;
} }
} }
@ -546,6 +547,7 @@ hr {
> ._button, > .linkBoxed { > ._button, > .linkBoxed {
flex-basis: 34%; flex-basis: 34%;
flex-grow: 1; flex-grow: 1;
width: 0;
min-width: max-content !important; min-width: max-content !important;
max-width: 100% !important; max-width: 100% !important;
margin: 0 !important; margin: 0 !important;

View file

@ -1,10 +1,10 @@
<template> <template>
<XKanban sticky v-if="isDesktop" /> <XKanban
v-if="!isDesktop && mainRouter.currentRoute.value.name !== 'index'"
mini
/>
<XKanban sticky v-else-if="isDesktop" />
<main id="maincontent"> <main id="maincontent">
<XKanban
mini
v-if="!isDesktop && mainRouter.currentRoute.value.name !== 'index'"
/>
<RouterView /> <RouterView />
<footer class="powered-by" v-if="mainRouter.currentRoute.value.name !== 'index'"> <footer class="powered-by" v-if="mainRouter.currentRoute.value.name !== 'index'">
<MkA to="/"> <MkA to="/">
@ -30,7 +30,7 @@ provide("router", mainRouter);
const DESKTOP_THRESHOLD = 1100; const DESKTOP_THRESHOLD = 1100;
let isDesktop = $ref(window.innerWidth >= DESKTOP_THRESHOLD); let isDesktop = $ref(window.innerWidth >= DESKTOP_THRESHOLD);
matchMedia(`(min-width: ${DESKTOP_THRESHOLD - 1}px)`).onchange = (mql) => { matchMedia(`(min-width: ${DESKTOP_THRESHOLD}px)`).onchange = (mql) => {
isDesktop = mql.matches; isDesktop = mql.matches;
}; };
@ -44,6 +44,9 @@ os.api("meta").then((res) => {
#calckey_app { #calckey_app {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
@media (max-width: 1099px) {
flex-direction: column;
}
} }
#maincontent { #maincontent {
display: flex; display: flex;

View file

@ -161,18 +161,44 @@
</div> </div>
</FormSection> </FormSection>
<FormSection> <FormSection>
<div class="_formLinksGrid"> <div class="_formLinksGridFlex">
<MkKeyValue :text="i18n.t('_cw.chars', { count: meta.maxNoteTextLength })"> <FormLink wrap>
<template #key> {{ i18n.ts.timelines }}
{{ i18n.ts.characterLimit }} <template #suffix>{{
</template> `${ i18n.ts._timelines.home },` +
</MkKeyValue> (meta.disableLocalTimeline ? '' : ` ${ i18n.ts._timelines.local },`) +
<MkKeyValue :text="meta.features.searchFilters ? i18n.ts.yes : i18n.ts.no"> (meta.disableLocalTimeline ? '' : ` ${ i18n.ts._timelines.social },`) +
<template #key> (meta.disableRecommendedTimeline ? '' : ` ${ i18n.ts._timelines.recommended },`) +
{{ i18n.ts.advancedSearch }} (meta.disableGlobalTimeline ? '' : ` ${ i18n.ts._timelines.global }`)
</template> }}</template>
</MkKeyValue> </FormLink>
<MkKeyValue <FormLink wrap>
{{ i18n.ts.characterLimit }}
<template #suffix>{{
i18n.t('_cw.chars', { count: meta.maxNoteTextLength })
}}</template>
</FormLink>
<FormLink wrap>
{{ i18n.ts.advancedSearch }}
<template #suffix>{{
meta.features.searchFilters ? i18n.ts.yes : i18n.ts.no
}}</template>
</FormLink>
<FormLink wrap>
{{ i18n.ts.driveCapacityPerLocalAccount }}
<template #suffix>{{
meta.driveCapacityPerLocalUserMb + 'MB'
}}</template>
</FormLink>
<FormLink wrap>
{{ i18n.ts.pushNotification }}
<template #suffix>{{
meta.features.serviceWorker ? i18n.ts.yes : i18n.ts.no
}}</template>
</FormLink>
<!-- <MkKeyValue
:text="`${ i18n.ts._timelines.home },` + :text="`${ i18n.ts._timelines.home },` +
(meta.disableLocalTimeline ? '' : ` ${ i18n.ts._timelines.local },`) + (meta.disableLocalTimeline ? '' : ` ${ i18n.ts._timelines.local },`) +
(meta.disableLocalTimeline ? '' : ` ${ i18n.ts._timelines.social },`) + (meta.disableLocalTimeline ? '' : ` ${ i18n.ts._timelines.social },`) +
@ -183,11 +209,26 @@
{{ i18n.ts.timelines }} {{ i18n.ts.timelines }}
</template> </template>
</MkKeyValue> </MkKeyValue>
<MkKeyValue :text="i18n.t('_cw.chars', { count: meta.maxNoteTextLength })">
<template #key>
{{ i18n.ts.characterLimit }}
</template>
</MkKeyValue>
<MkKeyValue :text="meta.features.searchFilters ? i18n.ts.yes : i18n.ts.no">
<template #key>
{{ i18n.ts.advancedSearch }}
</template>
</MkKeyValue>
<MkKeyValue :text="meta.driveCapacityPerLocalUserMb + 'MB'"> <MkKeyValue :text="meta.driveCapacityPerLocalUserMb + 'MB'">
<template #key> <template #key>
{{ i18n.ts.driveCapacityPerLocalAccount }} {{ i18n.ts.driveCapacityPerLocalAccount }}
</template> </template>
</MkKeyValue> </MkKeyValue>
<MkKeyValue :text="meta.features.serviceWorker ? i18n.ts.yes : i18n.ts.no">
<template #key>
{{ i18n.ts.pushNotification }}
</template>
</MkKeyValue> -->
</div> </div>
</FormSection> </FormSection>
</footer> </footer>
@ -212,7 +253,7 @@ import MkKeyValue from "@/components/MkKeyValue.vue";
import MkMention from "@/components/MkMention.vue"; import MkMention from "@/components/MkMention.vue";
import { deviceKind } from "@/scripts/device-kind"; import { deviceKind } from "@/scripts/device-kind";
defineProps<{ const props = defineProps<{
sticky?: boolean; sticky?: boolean;
mini?: boolean; mini?: boolean;
}>(); }>();
@ -228,7 +269,7 @@ os.api("meta", { detail: true }).then((res) => {
meta = res; meta = res;
isLong = meta.description && meta.description.length > 500; isLong = meta.description && meta.description.length > 500;
wallpaper = wallpaper =
meta.backgroundImageUrl ? `url(${meta.backgroundImageUrl})` meta.backgroundImageUrl && props.sticky ? `url(${meta.backgroundImageUrl})`
: meta.themeColor ?? accentColor; : meta.themeColor ?? accentColor;
// wallpaper = meta.backgroundImageUrl ? null : meta.themeColor ?? accentColor; // wallpaper = meta.backgroundImageUrl ? null : meta.themeColor ?? accentColor;
}); });
@ -269,7 +310,6 @@ function showMenu(ev) {
<style lang="scss" scoped> <style lang="scss" scoped>
.mini-header { .mini-header {
padding: 0 12px; padding: 0 12px;
background: var(--panel);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1em; gap: 1em;
@ -277,6 +317,7 @@ function showMenu(ev) {
img { img {
height: 40px; height: 40px;
min-width: 40px; min-width: 40px;
object-fit: contain;
} }
h1 { h1 {
margin: 0; margin: 0;
@ -359,6 +400,7 @@ function showMenu(ev) {
background: var(--bg); background: var(--bg);
border-radius: var(--radius) var(--radius) 0 0; border-radius: var(--radius) var(--radius) 0 0;
padding: 0 var(--margin); padding: 0 var(--margin);
padding-bottom: var(--margin);
text-align: center; text-align: center;
flex-grow: 1; flex-grow: 1;
margin-top: 80px; margin-top: 80px;
@ -453,4 +495,7 @@ section {
grid-template-columns: repeat(2, minmax(150px, 1fr)); grid-template-columns: repeat(2, minmax(150px, 1fr));
text-align: initial; text-align: initial;
} }
._formLinksGridFlex {
text-align: initial;
}
</style> </style>