mirror of
https://github.com/FoggedLens/deflock.git
synced 2026-07-23 20:21:04 +02:00
Social media links (#129)
* fix line break rendering of store page collection descriptions * first pass test * little tweaks * reorder items, try again to fix store desc line breaks * maybe fix footer items getting cut off * third times a charm * so close.. I think this is it. * final-new-2-latest-v2... treat natural string length as min size * okay, starting over, new approach to footer section wrapping.. * stop footer sections bunching when there IS room * I hate webdev * whitespace and sizing and offsets, oh my! * smoooooth resize * move store link to resources
This commit is contained in:
stopflock
+85
-35
@@ -3,12 +3,13 @@ import { RouterView, useRouter } from 'vue-router'
|
||||
import { computed, ref, watch, onMounted } from 'vue'
|
||||
import { useTheme } from 'vuetify';
|
||||
import DiscordWarningDialog from '@/components/DiscordWarningDialog.vue';
|
||||
import OfficialSocials from '@/components/layout/OfficialSocials.vue';
|
||||
import { useDiscordIntercept } from '@/composables/useDiscordIntercept';
|
||||
|
||||
const theme = useTheme();
|
||||
const router = useRouter();
|
||||
const isDark = computed(() => theme.name.value === 'dark');
|
||||
const isInIframe = computed(() => window.self !== window.top);
|
||||
|
||||
const { showDialog, discordUrl, interceptDiscordLinks } = useDiscordIntercept();
|
||||
|
||||
function toggleTheme() {
|
||||
@@ -37,24 +38,27 @@ const items = [
|
||||
{ title: 'Home', icon: 'mdi-home', to: '/' },
|
||||
{ title: 'Map', icon: 'mdi-map', href: 'https://maps.deflock.org' },
|
||||
{ title: 'Learn', icon: 'mdi-school', to: '/what-is-an-alpr' },
|
||||
{ title: 'Store', icon: 'mdi-shopping', to: '/store' },
|
||||
{ title: 'Donate', icon: 'mdi-cash-multiple', to: '/donate' },
|
||||
|
||||
]
|
||||
|
||||
const contributeItems = [
|
||||
{ title: 'Submit Cameras', icon: 'mdi-map-marker-plus', to: '/report' },
|
||||
const resourceItems = [
|
||||
{ title: 'Store', icon: 'mdi-shopping', to: '/store', isNew: true },
|
||||
{ title: 'FAQ', icon: 'mdi-help-circle', to: '/what-is-an-alpr' },
|
||||
{ title: 'Public Records', icon: 'mdi-file-document', to: '/foia' },
|
||||
{ title: 'City Council', icon: 'mdi-account-voice', to: '/council' },
|
||||
{ title: 'Support Us', icon: 'mdi-cash-multiple', to: '/donate' },
|
||||
]
|
||||
|
||||
const metaItems = [
|
||||
{ title: 'Discord', customIcon: '/icon-discord.svg', customIconDark: '/icon-discord-white.svg', customIconGrey: '/icon-discord-grey.svg', href: 'https://discord.gg/aV7v4R3sKT'},
|
||||
const getInvolvedItems = [
|
||||
{ title: 'Submit Cameras', icon: 'mdi-map-marker-plus', to: '/report' },
|
||||
{ title: 'Local Groups', icon: 'mdi-account-group', to: '/groups' },
|
||||
{ title: 'Contact', icon: 'mdi-email-outline', to: '/contact' },
|
||||
{ title: 'GitHub', icon: 'mdi-github', href: 'https://github.com/frillweeman/deflock'},
|
||||
];
|
||||
|
||||
const drawer = ref(false)
|
||||
|
||||
|
||||
watch(() => theme.global.name.value, (newTheme) => {
|
||||
const root = document.documentElement;
|
||||
if (newTheme === 'dark') {
|
||||
@@ -105,12 +109,22 @@ watch(() => theme.global.name.value, (newTheme) => {
|
||||
:prepend-icon="item.icon"
|
||||
>
|
||||
{{ item.title }}
|
||||
<v-chip
|
||||
v-if="item.isNew"
|
||||
size="x-small"
|
||||
color="rgb(18, 151, 195)"
|
||||
class="ml-2 font-weight-bold"
|
||||
label
|
||||
>
|
||||
New!
|
||||
</v-chip>
|
||||
</v-btn>
|
||||
|
||||
</div>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<!-- Contribute section -->
|
||||
<!-- Resources section -->
|
||||
<div class="d-flex align-center">
|
||||
<v-menu offset-y>
|
||||
<template v-slot:activator="{ props }">
|
||||
@@ -120,12 +134,12 @@ watch(() => theme.global.name.value, (newTheme) => {
|
||||
append-icon="mdi-chevron-down"
|
||||
class="mx-1"
|
||||
>
|
||||
Contribute
|
||||
Resources
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="item in contributeItems"
|
||||
v-for="item in resourceItems"
|
||||
:key="item.title"
|
||||
:to="item.to"
|
||||
link
|
||||
@@ -133,12 +147,24 @@ watch(() => theme.global.name.value, (newTheme) => {
|
||||
<template v-slot:prepend>
|
||||
<v-icon>{{ item.icon }}</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
||||
<v-list-item-title>
|
||||
{{ item.title }}
|
||||
<v-chip
|
||||
v-if="item.isNew"
|
||||
size="x-small"
|
||||
color="rgb(18, 151, 195)"
|
||||
class="ml-2 font-weight-bold"
|
||||
label
|
||||
>
|
||||
New!
|
||||
</v-chip>
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<!-- Get Involved section -->
|
||||
|
||||
<v-menu offset-y>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
@@ -152,7 +178,7 @@ watch(() => theme.global.name.value, (newTheme) => {
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="item in metaItems"
|
||||
v-for="item in getInvolvedItems"
|
||||
:key="item.title"
|
||||
:to="item.to"
|
||||
:href="item.href"
|
||||
@@ -160,23 +186,31 @@ watch(() => theme.global.name.value, (newTheme) => {
|
||||
link
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-icon v-if="item.icon">{{ item.icon }}</v-icon>
|
||||
<v-img
|
||||
v-else-if="item.customIcon"
|
||||
class="mr-8"
|
||||
contain
|
||||
width="24"
|
||||
height="24"
|
||||
:src="isDark ? item.customIconDark : item.customIconGrey"
|
||||
/>
|
||||
<v-icon>{{ item.icon }}</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<!-- Official Socials section -->
|
||||
<v-menu offset-y>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
variant="text"
|
||||
v-bind="props"
|
||||
append-icon="mdi-chevron-down"
|
||||
class="mx-1"
|
||||
>
|
||||
Official Socials
|
||||
</v-btn>
|
||||
</template>
|
||||
<OfficialSocials />
|
||||
</v-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<v-spacer class="d-md-none" />
|
||||
|
||||
<v-btn icon @click="toggleTheme" aria-label="Toggle Theme">
|
||||
@@ -203,15 +237,25 @@ watch(() => theme.global.name.value, (newTheme) => {
|
||||
>
|
||||
<v-icon start>{{ item.icon }}</v-icon>
|
||||
{{ item.title }}
|
||||
<v-chip
|
||||
v-if="item.isNew"
|
||||
size="x-small"
|
||||
color="rgb(18, 151, 195)"
|
||||
class="ml-2 font-weight-bold"
|
||||
label
|
||||
>
|
||||
New!
|
||||
</v-chip>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
|
||||
|
||||
<v-divider class="my-2" aria-hidden="true" role="presentation" />
|
||||
|
||||
<v-list-subheader class="px-4">Contribute</v-list-subheader>
|
||||
<v-list nav aria-label="Contribute Links">
|
||||
<v-list-subheader class="px-4">Resources</v-list-subheader>
|
||||
<v-list nav aria-label="Resource Links">
|
||||
<v-list-item
|
||||
v-for="item in contributeItems"
|
||||
v-for="item in resourceItems"
|
||||
:key="item.title"
|
||||
link
|
||||
:to="item.to"
|
||||
@@ -219,15 +263,24 @@ watch(() => theme.global.name.value, (newTheme) => {
|
||||
>
|
||||
<v-icon v-if="item.icon" start>{{ item.icon }}</v-icon>
|
||||
<span style="vertical-align: middle;">{{ item.title }}</span>
|
||||
<v-chip
|
||||
v-if="item.isNew"
|
||||
size="x-small"
|
||||
color="rgb(18, 151, 195)"
|
||||
class="ml-2 font-weight-bold"
|
||||
label
|
||||
>
|
||||
New!
|
||||
</v-chip>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
|
||||
<v-divider class="my-2" aria-hidden="true" role="presentation" />
|
||||
|
||||
<v-list-subheader class="px-4">Get Involved</v-list-subheader>
|
||||
<v-list nav aria-label="Meta Links">
|
||||
<v-list nav aria-label="Get Involved Links">
|
||||
<v-list-item
|
||||
v-for="item in metaItems"
|
||||
v-for="item in getInvolvedItems"
|
||||
:key="item.title"
|
||||
link
|
||||
:to="item.to"
|
||||
@@ -236,19 +289,16 @@ watch(() => theme.global.name.value, (newTheme) => {
|
||||
role="option"
|
||||
>
|
||||
<v-icon v-if="item.icon" start>{{ item.icon }}</v-icon>
|
||||
<v-img
|
||||
v-else-if="item.customIcon"
|
||||
class="mr-2 custom-icon"
|
||||
contain
|
||||
width="24"
|
||||
height="24"
|
||||
:src="isDark ? item.customIconDark : item.customIcon"
|
||||
style="vertical-align: middle;"
|
||||
/>
|
||||
<span style="vertical-align: middle;">{{ item.title }}</span>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
|
||||
<v-divider class="my-2" aria-hidden="true" role="presentation" />
|
||||
|
||||
<v-list-subheader class="px-4">Official Socials</v-list-subheader>
|
||||
<OfficialSocials />
|
||||
</v-navigation-drawer>
|
||||
|
||||
</template>
|
||||
|
||||
<v-main>
|
||||
|
||||
@@ -1,60 +1,90 @@
|
||||
<template>
|
||||
<v-footer>
|
||||
<v-container>
|
||||
<v-container fluid>
|
||||
|
||||
<v-row align-items="center" justify="center">
|
||||
|
||||
<v-col cols="12" class="mt-4">
|
||||
<v-img height="30" contain src="/deflock-logo-grey.svg" />
|
||||
</v-col>
|
||||
|
||||
<!-- Internal Links -->
|
||||
<v-col cols="7" sm="3">
|
||||
<v-list-subheader class="mx-4 font-weight-black text-subtitle-1" :class="isDark ? 'text-grey-lighten-5' : 'text-black'" id="footer-info-heading">Info</v-list-subheader>
|
||||
<v-list density="compact" aria-labelledby="footer-info-heading" role="list">
|
||||
<v-list-item role="listitem"
|
||||
v-for="link in internalLinks"
|
||||
:key="link.title"
|
||||
link
|
||||
:to="link.to"
|
||||
slim
|
||||
:aria-label="link.alt"
|
||||
>
|
||||
<v-list-item-title class="d-flex align-center">
|
||||
<v-icon class="custom-icon" start :icon="link.icon" :alt="link.alt" />
|
||||
{{ link.title }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<!-- Link sections: CSS grid with auto-fit/minmax so columns reflow
|
||||
to a new row dynamically based on available width, rather than
|
||||
snapping to a fixed breakpoint that can leave text truncated
|
||||
(e.g. "Terms of Se…") right before it reorders. -->
|
||||
<v-col cols="12">
|
||||
<div class="footer-links-grid">
|
||||
|
||||
<!-- Info -->
|
||||
<div>
|
||||
<v-list-subheader class="mx-2 font-weight-black text-subtitle-1" :class="isDark ? 'text-grey-lighten-5' : 'text-black'" id="footer-info-heading">Info</v-list-subheader>
|
||||
<v-list density="compact" aria-labelledby="footer-info-heading" role="list">
|
||||
<v-list-item role="listitem"
|
||||
v-for="link in internalLinks"
|
||||
:key="link.title"
|
||||
link
|
||||
:to="link.to"
|
||||
slim
|
||||
:aria-label="link.alt"
|
||||
>
|
||||
<v-list-item-title class="d-flex align-center">
|
||||
<v-icon class="custom-icon" start :icon="link.icon" :alt="link.alt" />
|
||||
{{ link.title }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</div>
|
||||
|
||||
<!-- Contact Us -->
|
||||
<div>
|
||||
<v-list-subheader class="mx-2 font-weight-black text-subtitle-1" :class="isDark ? 'text-grey-lighten-5' : 'text-black'" id="footer-contact-heading">Contact Us</v-list-subheader>
|
||||
<v-list density="compact" aria-labelledby="footer-contact-heading" role="list">
|
||||
<v-list-item role="listitem"
|
||||
v-for="link in contactLinks"
|
||||
:key="link.title"
|
||||
link
|
||||
:to="link.to"
|
||||
slim
|
||||
:aria-label="link.alt"
|
||||
>
|
||||
<v-list-item-title class="d-flex align-center">
|
||||
<v-icon class="custom-icon" start :icon="link.icon" :alt="link.alt" />
|
||||
{{ link.title }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</div>
|
||||
|
||||
<!-- Get Involved -->
|
||||
<div>
|
||||
<v-list-subheader class="mx-2 font-weight-black text-subtitle-1" :class="isDark ? 'text-grey-lighten-5' : 'text-black'" id="footer-involved-heading">Get Involved</v-list-subheader>
|
||||
<v-list density="compact" aria-labelledby="footer-involved-heading" role="list">
|
||||
<v-list-item
|
||||
v-for="link in getInvolvedLinks"
|
||||
:key="link.title"
|
||||
link
|
||||
slim
|
||||
:href="link.href"
|
||||
:to="link.to"
|
||||
:target="link.href ? '_blank' : undefined"
|
||||
role="listitem"
|
||||
>
|
||||
<v-list-item-title class="d-flex align-center justify-start">
|
||||
<v-icon start class="custom-icon" :icon="link.icon"></v-icon>
|
||||
{{ link.title }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<!-- External Links -->
|
||||
<v-col cols="5" sm="3">
|
||||
<v-list-subheader class="mx-4 font-weight-black text-subtitle-1" :class="isDark ? 'text-grey-lighten-5' : 'text-black'" id="footer-involved-heading">Get Involved</v-list-subheader>
|
||||
<v-list density="compact" aria-labelledby="footer-involved-heading" role="list">
|
||||
<v-list-item
|
||||
v-for="link in externalLinks"
|
||||
:key="link.title"
|
||||
link
|
||||
slim
|
||||
:href="link.href"
|
||||
:to="link.to"
|
||||
:target="link.href ? '_blank' : undefined"
|
||||
role="listitem"
|
||||
>
|
||||
<v-list-item-title class="d-flex align-center justify-start">
|
||||
<v-icon start v-if="link.icon" class="custom-icon" :icon="link.icon"></v-icon>
|
||||
<img v-else-if="link.customIcon" class="mr-2 custom-icon" width="24" height="24" :src="isDark ? link.customIconDark : link.customIcon" :alt="link.alt" />
|
||||
{{ link.title }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-col>
|
||||
|
||||
<!-- Copyright -->
|
||||
<v-col
|
||||
class="text-center d-flex align-center justify-center text-grey-darken-1"
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<div class="copyright" :class="isDark ? 'text-grey-lighten-5' : 'text-black'">
|
||||
<p>© {{ currentYear }} DeFlock. All Rights Reserved</p>
|
||||
@@ -78,14 +108,17 @@ const internalLinks = [
|
||||
{ title: 'About', to: '/about', icon: 'mdi-information', alt: 'About' },
|
||||
{ title: 'Privacy Policy', to: '/privacy', icon: 'mdi-shield-lock', alt: 'Privacy Policy' },
|
||||
{ title: 'Terms of Service', to: '/terms', icon: 'mdi-file-document', alt: 'Terms of Service' },
|
||||
{ title: 'Press', to: '/press', icon: 'mdi-newspaper', alt: 'Press' },
|
||||
];
|
||||
|
||||
const externalLinks = [
|
||||
{ title: 'Discord', href: 'https://discord.gg/aV7v4R3sKT', customIcon: '/icon-discord.svg', customIconDark: '/icon-discord-white.svg', alt: 'Discord Logo' },
|
||||
{ title: 'Support Us', to: '/donate', icon: 'mdi-cash-multiple', alt: 'Support Us' },
|
||||
{ title: 'GitHub', href: 'https://github.com/FoggedLens/deflock', icon: 'mdi-github', alt: 'GitHub Logo' },
|
||||
const contactLinks = [
|
||||
{ title: 'Press', to: '/press', icon: 'mdi-newspaper', alt: 'Press' },
|
||||
{ title: 'Contact', to: '/contact', icon: 'mdi-email', alt: 'Contact' },
|
||||
];
|
||||
|
||||
const getInvolvedLinks = [
|
||||
{ title: 'Local Groups', to: '/groups', icon: 'mdi-account-group' },
|
||||
{ title: 'GitHub', href: 'https://github.com/FoggedLens/deflock', icon: 'mdi-github' },
|
||||
{ title: 'Submit Cameras', to: '/report', icon: 'mdi-map-marker-plus' },
|
||||
]
|
||||
</script>
|
||||
|
||||
@@ -97,4 +130,46 @@ const externalLinks = [
|
||||
font-size: 0.85rem;
|
||||
line-height: 0.5rem;
|
||||
}
|
||||
|
||||
/* Plain flexbox + wrap, rather than CSS grid's auto-fit/minmax: grid's
|
||||
auto-fit track-counting algorithm doesn't properly support intrinsic
|
||||
sizes (max-content) as a track minimum, which is why that approach
|
||||
either clipped text, wrapped it mid-word, or collapsed to one column
|
||||
depending on the minimum used. Flexbox with flex-wrap naturally sizes
|
||||
each item to its content and only wraps an item to the next line once
|
||||
it genuinely doesn't fit — no guessed pixel thresholds required.
|
||||
|
||||
Columns are NOT stretched (flex-grow: 0) — each stays sized to its own
|
||||
content. Letting them grow to fill space (a prior revision) made wider
|
||||
columns pad out with empty space to the right of their left-aligned
|
||||
text, which visually dragged the whole row's "center of mass" left of
|
||||
the row's true center — an effect that got worse the more room there
|
||||
was to stretch into, i.e. on wider screens.
|
||||
|
||||
Instead, `justify-content: space-evenly` distributes the *gaps* — both
|
||||
between columns and on the outer edges — based on the container's
|
||||
actual width. That gap recalculates continuously as the viewport
|
||||
resizes, so spacing scales smoothly with no fixed max-width/threshold
|
||||
needed and no snapping between layout states. */
|
||||
.footer-links-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
row-gap: 24px;
|
||||
}
|
||||
|
||||
.footer-links-grid > div {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
/* Keep each link label on a single line so a column reflows to its own
|
||||
row instead of wrapping mid-word when space is tight. */
|
||||
.footer-links-grid :deep(.v-list-item-title) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<v-sheet class="official-socials" color="surface">
|
||||
|
||||
<p class="official-socials-disclaimer text-caption px-4 pt-2 pb-2 mb-0">
|
||||
These are DeFlock National's official social media links. Partner groups are
|
||||
listed at <router-link to="/groups">deflock.org/groups</router-link>. Other
|
||||
websites and social media accounts using the name are unaffiliated.
|
||||
</p>
|
||||
<v-list density="compact" aria-label="Official Social Media Links" role="list">
|
||||
<v-list-item
|
||||
v-for="social in socials"
|
||||
:key="social.title"
|
||||
:href="social.href"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
link
|
||||
slim
|
||||
role="listitem"
|
||||
:aria-label="social.title"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<svg
|
||||
class="official-social-icon mr-4"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
height="20"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path :d="social.path" fill="currentColor" />
|
||||
</svg>
|
||||
</template>
|
||||
<v-list-item-title>{{ social.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-sheet>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
const socials = [
|
||||
{
|
||||
title: 'Discord',
|
||||
href: 'https://discord.gg/aV7v4R3sKT',
|
||||
path: 'M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z',
|
||||
},
|
||||
{
|
||||
title: 'X (Twitter)',
|
||||
href: 'https://x.com/therealdeflock',
|
||||
path: 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z',
|
||||
},
|
||||
{
|
||||
title: 'Bluesky',
|
||||
href: 'https://bsky.app/profile/deflock.org',
|
||||
path: 'M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026',
|
||||
},
|
||||
{
|
||||
title: 'TikTok',
|
||||
href: 'https://www.tiktok.com/@therealdeflock',
|
||||
path: 'M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z',
|
||||
},
|
||||
{
|
||||
title: 'Reddit',
|
||||
href: 'https://www.reddit.com/user/therealDeFlock',
|
||||
path: 'M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z',
|
||||
},
|
||||
{
|
||||
title: 'Instagram',
|
||||
href: 'https://www.instagram.com/deflock.me',
|
||||
path: 'M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.official-socials-disclaimer {
|
||||
max-width: 320px;
|
||||
opacity: var(--v-medium-emphasis-opacity, 0.7);
|
||||
line-height: 1.4;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
.official-social-icon {
|
||||
display: inline-block;
|
||||
flex: none;
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
@@ -56,11 +56,12 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row v-if="collectionDescription" justify="center" class="mb-6">
|
||||
<v-col cols="12" md="8" lg="6" class="text-center">
|
||||
<p class="text-body-2 text-medium-emphasis">{{ collectionDescription }}</p>
|
||||
<v-row v-if="collectionDescription" justify="center" class="mb-6">
|
||||
<v-col cols="12" md="8" lg="6" class="text-center collection-description-col">
|
||||
<div class="text-body-2 text-medium-emphasis" v-html="collectionDescription" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
<!-- Skeleton while Shopify SDK initialises -->
|
||||
@@ -599,7 +600,7 @@ async function fetchCollectionDescription(id: string): Promise<void> {
|
||||
query: `
|
||||
query CollectionDescription($id: ID!) {
|
||||
collection(id: $id) {
|
||||
description
|
||||
descriptionHtml
|
||||
}
|
||||
}
|
||||
`,
|
||||
@@ -611,7 +612,8 @@ async function fetchCollectionDescription(id: string): Promise<void> {
|
||||
return;
|
||||
}
|
||||
const json = await response.json();
|
||||
collectionDescription.value = json?.data?.collection?.description ?? '';
|
||||
collectionDescription.value = json?.data?.collection?.descriptionHtml ?? '';
|
||||
|
||||
} catch {
|
||||
collectionDescription.value = '';
|
||||
}
|
||||
@@ -763,3 +765,16 @@ onMounted(() => {
|
||||
fetchCollectionDescription(collectionId.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Shopify's descriptionHtml comes back as raw <p>/<br>/etc. markup; reset
|
||||
the default browser paragraph margins so multi-paragraph descriptions
|
||||
don't end up with oversized gaps inside this centered column. */
|
||||
.collection-description-col :deep(p) {
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
.collection-description-col :deep(p:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user