More styling

weeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

packages/client/src/components/form/link.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="ffcbddfc linkBoxed" :class="{ inline, naked }">
+	<div class="ffcbddfc linkBoxed" :class="{ inline, naked, wrap }">
 		<span v-if="!to" class="main">
 			<span class="icon"><slot name="icon"></slot></span>
 			<span class="text"><slot></slot></span>
@@ -42,6 +42,7 @@ const props = defineProps<{
 	behavior?: null | "window" | "browser" | "modalWindow";
 	inline?: boolean;
 	naked?: boolean;
+	wrap?: boolean;
 }>();
 </script>
 
@@ -117,5 +118,22 @@ const props = defineProps<{
 			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>

packages/client/src/components/global/MkPageHeader.vue

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

packages/client/src/pages/welcome.entrance.a.vue

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

packages/client/src/style.scss

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

packages/client/src/ui/visitor.vue

@@ -1,10 +1,10 @@
 <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">
-		<XKanban
-			mini
-			v-if="!isDesktop && mainRouter.currentRoute.value.name !== 'index'"
-		/>
 		<RouterView />
 		<footer class="powered-by" v-if="mainRouter.currentRoute.value.name !== 'index'">
 			<MkA to="/">
@@ -30,7 +30,7 @@ provide("router", mainRouter);
 
 const DESKTOP_THRESHOLD = 1100;
 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;
 };
 
@@ -44,6 +44,9 @@ os.api("meta").then((res) => {
 #calckey_app {
 	display: flex;
 	min-height: 100vh;
+	@media (max-width: 1099px) {
+		flex-direction: column;
+	}
 }
 #maincontent {
 	display: flex;

packages/client/src/ui/visitor/kanban.vue

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