HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

More styling

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/client/src/components/form/link.vue
View file

@ -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>

2
packages/client/src/components/global/MkPageHeader.vue
View file

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

2
packages/client/src/pages/welcome.entrance.a.vue
View file

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

2
packages/client/src/style.scss
View file

@ -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;

15
packages/client/src/ui/visitor.vue
View file

@ -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;

75
packages/client/src/ui/visitor/kanban.vue
View file

@ -161,18 +161,44 @@
</div>
</FormSection>
<FormSection>
<div class="_formLinksGrid">
<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
<div class="_formLinksGridFlex">
<FormLink wrap>
{{ i18n.ts.timelines }}
<template #suffix>{{
`${ i18n.ts._timelines.home },` +
(meta.disableLocalTimeline ? '' : ` ${ i18n.ts._timelines.local },`) +
(meta.disableLocalTimeline ? '' : ` ${ i18n.ts._timelines.social },`) +
(meta.disableRecommendedTimeline ? '' : ` ${ i18n.ts._timelines.recommended },`) +
(meta.disableGlobalTimeline ? '' : ` ${ i18n.ts._timelines.global }`)
}}</template>
</FormLink>
<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>