Skip to content

Commit

Permalink
feat: bigger tap area, footer text links (#742)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bdrtsky
bdrtsky committed Dec 26, 2022
1 parent aed892f commit d682fcf
Show file tree
Hide file tree
Showing 8 changed files with 186 additions and 103 deletions.
1 change: 1 addition & 0 deletions assets/css/main.css
View file
Expand Up @@ -57,6 +57,7 @@ body {
background: $dt('color.white');
color: $dt('color.gray.700');
font-family: $dt('font.sans');
min-width: $dt('size.xs');

@dark {
background: $dt('color.black');
Expand Down
160 changes: 108 additions & 52 deletions components/app/AppFooter.vue
View file
Expand Up @@ -2,6 +2,7 @@
const docus = useDocus()
const socialIcons = ref(null)
const icons = computed(() => docus.value.footer?.iconLinks || [])
const textLinks = computed(() => docus.value.footer?.textLinks || [])
const socialIconsCount = computed(() => Object.entries(docus.value.socials).filter(([_, v]) => v).length)
const nbSocialIcons = computed(() => (socialIcons.value ? socialIconsCount.value : 0))
</script>
Expand All @@ -10,20 +11,42 @@ const nbSocialIcons = computed(() => (socialIcons.value ? socialIconsCount.value
<footer>
<Container padded class="footer-container">
<!-- Left -->
<a v-if="docus.footer?.credits" :href="docus.footer.credits.href" rel="noopener" target="_blank" class="left">
<Component :is="docus.footer.credits.icon" v-if="docus.footer.credits.icon" class="left-icon" />
<p>{{ docus.footer.credits.text }}</p>
</a>
<div class="left">
<a v-if="docus.footer?.credits" :href="docus.footer.credits.href" rel="noopener" target="_blank">
<Component :is="docus.footer.credits.icon" v-if="docus.footer.credits.icon" class="left-icon" />
<p>{{ docus.footer.credits.text }}</p>
</a>
</div>
<!-- Center -->
<div class="center">
<a v-for="icon in icons.slice(0, 6 - nbSocialIcons)" :key="icon.label" rel="noopener" :aria-label="icon.label"
:href="icon.href" target="_blank">
<!-- TODO: inner app links with NuxtLink -->
<a
v-for="link in textLinks"
:key="link.href"
class="text-link"
:aria-label="link.text"
:href="link.href"
:target="link.target || '_self'"
>
{{ link.text }}
</a>
</div>
<div class="right">
<a
v-for="icon in icons.slice(0, 6 - nbSocialIcons)"
:key="icon.label"
class="icon-link"
rel="noopener"
:aria-label="icon.label"
:href="icon.href"
target="_blank"
>
<Icon :name="icon.icon || icon.component" />
</a>
<AppSocialIcons ref="socialIcons" />
</div>
</Container>
</footer>
</template>
Expand All @@ -40,44 +63,6 @@ css({
borderTopColor: '{color.gray.900}'
},
':deep(.icon)': {
width: '{space.4}',
height: '{space.4}'
},
a: {
color: '{color.gray.500}',
'@dark': {
color: '{color.gray.400}'
},
'&:hover': {
color: '{color.gray.700}',
'@dark': {
color: '{color.gray.200}',
}
},
},
'.left': {
display: 'flex',
alignItems: 'center',
p: {
fontSize: '{fontSize.xs}',
fontWeight: '{fontWeight.bold}'
},
'&-icon': {
width: '{space.4}',
fill: 'currentcolor',
marginRight: '{space.2}',
}
},
'.center': {
display: 'flex',
alignItems: 'center',
gap: '{space.4}'
},
'.footer-container': {
display: 'grid',
gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
Expand All @@ -87,24 +72,95 @@ css({
justifyItems: 'legacy',
},
':deep(.icon)': {
width: '{space.4}',
height: '{space.4}'
},
a: {
color: '{color.gray.500}',
'@dark': {
color: '{color.gray.400}'
},
'&:hover': {
color: '{color.gray.700}',
'@dark': {
color: '{color.gray.200}',
}
},
},
'.left': {
gridColumn: 'span 12 / span 12',
display: 'flex',
py: '{space.4}',
order: 1,
'@sm': {
gridColumn: 'span 4 / span 4'
}
gridColumn: 'span 3 / span 3',
order: 0,
},
a: {
display: 'flex',
alignItems: 'center',
},
p: {
fontSize: '{text.xs.fontSize}',
lineHeight: '{text.xs.lineHeight}',
fontWeight: '{fontWeight.medium}'
},
'&-icon': {
flexShrink: 0,
width: '{space.4}',
height: '{space.4}',
fill: 'currentcolor',
marginRight: '{space.2}',
},
},
'.center': {
gridColumn: 'span 12 / span 12',
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
'@sm': {
gridColumn: 'span 6 / span 6',
flexDirection: 'row',
justifyContent: 'center',
},
'.text-link': {
padding: '{space.2}',
fontSize: '{text.sm.fontSize}',
lineHeight: '{text.sm.lineHeight}',
fontWeight: '{fontWeight.medium}'
}
},
'.right': {
gridColumn: 'span 12 / span 12',
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
// marginLeft: 'calc(0px - {space.4})',
'@sm': {
gridColumn: 'span 4 / span 4'
gridColumn: 'span 3 / span 3',
marginRight: 'calc(0px - {space.4})',
},
a: {
display: 'flex'
'.icon-link': {
display: 'flex',
padding: '{space.4}'
}
},
}
},
}
})
</style>
11 changes: 5 additions & 6 deletions components/app/AppHeader.vue
View file
Expand Up @@ -70,34 +70,33 @@ css({
display: 'grid',
height: '100%',
gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
gap: '2rem'
gap: '{space.2}'
},
'.section': {
display: 'flex',
alignItems: 'center',
flex: 'none',
'&.left': {
gridColumn: 'span 2 / span 2'
gridColumn: 'span 4 / span 4'
},
'&.center': {
gridColumn: 'span 8 / span 8',
gridColumn: 'span 4 / span 4',
justifyContent: 'center',
flex: '1'
},
'&.right': {
display: 'flex',
gridColumn: 'span 2 / span 2',
gridColumn: 'span 4 / span 4',
justifyContent: 'flex-end',
alignItems: 'center',
flex: 'none',
gap: '{space.4}',
marginRight: 'calc(0px - {space.4})',
'.social-icons': {
display: 'none',
'@md': {
display: 'flex',
alignItems: 'center',
gap: '{space.4}'
}
}
}
Expand Down
91 changes: 47 additions & 44 deletions components/app/AppSearch.vue
View file
Expand Up @@ -6,15 +6,14 @@ const onClick = () => element.value.querySelector('button').click()

<template>
<div class="doc-search" @click="onClick">
<button
type="button"
aria-label="Search"
>
<Icon name="heroicons-outline:search" />
<span>Search</span>
<span>
<kbd>⌘</kbd>
<kbd>K</kbd>
<button type="button" aria-label="Search">
<span class="content">
<Icon name="heroicons-outline:search" />
<span>Search</span>
<span>
<kbd>⌘</kbd>
<kbd>K</kbd>
</span>
</span>
</button>
</div>
Expand All @@ -29,45 +28,49 @@ css({
}
},
button: {
borderRadius: '{radii.md}',
display: 'flex',
alignItems: 'center',
color: '{color.gray.500}',
borderStyle: 'solid',
borderWidth: '1px',
borderColor: '{color.gray.100}',
fontSize: '{fontSize.xs}',
gap: '{space.2}',
padding: '{space.rem.375}',
'@dark': {
color: '{color.gray.400}',
borderColor: '{color.gray.900}',
},
'&:hover': {
color: '{color.gray.700}',
borderColor: '{color.gray.400}',
padding: '{space.2} {space.4}',
'.content': {
borderRadius: '{radii.md}',
display: 'flex',
alignItems: 'center',
color: '{color.gray.500}',
borderStyle: 'solid',
borderWidth: '1px',
borderColor: '{color.gray.100}',
fontSize: '{fontSize.xs}',
gap: '{space.2}',
padding: '{space.rem.375}',
'@dark': {
color: '{color.gray.200}',
borderColor: '{color.gray.700}',
color: '{color.gray.400}',
borderColor: '{color.gray.900}',
},
'&:hover': {
color: '{color.gray.700}',
borderColor: '{color.gray.400}',
'@dark': {
color: '{color.gray.200}',
borderColor: '{color.gray.700}',
}
},
span: {
'&:first-child': {
display: 'block',
fontSize: '{fontSize.xs}',
fontWeight: '{fontWeight.medium}',
},
'&:nth-child(2)': {
flex: 'none',
display: 'none',
fontSize: '{fontSize.xs}',
fontWeight: '{fontWeight.semibold}',
'@sm': {
display: 'block'
}
}
}
}
},
span: {
'&:first-child': {
display: 'block',
fontSize: '{fontSize.xs}',
fontWeight: '{fontWeight.medium}',
},
'&:nth-child(2)': {
flex: 'none',
display: 'none',
fontSize: '{fontSize.xs}',
fontWeight: '{fontWeight.semibold}',
'@sm': {
display: 'block'
}
}
}
}
})
</style>
1 change: 1 addition & 0 deletions components/app/AppSocialIcons.vue
View file
Expand Up @@ -41,6 +41,7 @@ css({
a: {
display: 'flex',
color: '{color.gray.500}',
padding: '{space.4}',
'@dark': {
color: '{color.gray.400}'
Expand Down
1 change: 1 addition & 0 deletions components/app/ThemeSelect.vue
View file
Expand Up @@ -23,6 +23,7 @@ const onClick = () => {
css({
button: {
display: 'flex',
padding: '{space.4}',
color: '{color.gray.500}',
'@dark': {
Expand Down

1 comment on commit d682fcf

@vercel
Copy link

@vercel vercel bot commented on d682fcf Dec 26, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

docus – ./

docus-theme.vercel.app
docus-nuxtlabs.vercel.app
www.docus.dev
docus-git-dev-nuxtlabs.vercel.app
docus.dev

Please sign in to comment.