Skip to content

Commit

Permalink
refactor: some content components (#652)
Browse files Browse the repository at this point in the history 
Co-authored-by: Yaël GUILLOUX <[email protected]>
  • Loading branch information
@bdrtsky @Tahul
bdrtsky and Tahul authored Nov 10, 2022
1 parent dce80f3 commit 496b138
Show file tree
Hide file tree
Showing 9 changed files with 263 additions and 176 deletions.
21 changes: 16 additions & 5 deletions components/content/Alert.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,22 @@ defineProps({
</script>

<template>
<div class="alert mt-4 mb-4 rounded-xl px-4 py-3 text-sm leading-relaxed" :class="[type]">
<div class="flex items-start">
<div class="alert-content flex-grow">
<ContentSlot :use="$slots.default" unwrap="p" />
</div>
<div class="alert" :class="[type]">
<div class="alert-content">
<ContentSlot :use="$slots.default" unwrap="p" />
</div>
</div>
</template>

<style scoped lang="ts">
css({
'.alert': {
my: '{space.4}',
borderRadius: '{radii.xl}',
px: '{space.4}',
py: '{space.3}',
fontSize: '{text.sm.fontSize}',
lineHeight: '{text.sm.lineHeight}',
}
})
</style>
17 changes: 16 additions & 1 deletion components/content/Badge.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,22 @@ defineProps({
</script>

<template>
<span :class="[type]" class="inline-flex items-center px-3 py-1 text-base leading-5 tracking-tight rounded-full badge">
<span :class="[type]" class="badge">
<ContentSlot :use="$slots.default" unwrap="p" />
</span>
</template>

<style scoped lang="ts">
css({
'.badge': {
display: 'inline-flex',
alignItems: 'center',
px: '{space.3}',
py: '{space.1}',
fontSize: '{text.base.fontSize}',
lineHeight: '{text.base.lineHeight}',
letterSpacing: '{letterSpacings.tight}',
borderRadius: '{radii.full}'
}
})
</style>
27 changes: 24 additions & 3 deletions components/content/Callout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ const toggle = () => {
</script>

<template>
<div class="relative px-4 mt-4 mb-4 text-sm leading-relaxed callout rounded-xl" :class="[type]">
<span class="flex items-center justify-between" @click="toggle">
<div class="callout" :class="[type]">
<span class="preview" @click="toggle">
<ContentSlot :use="$slots.summary" />
<Icon
name="heroicons-outline:chevron-right"
Expand All @@ -39,8 +39,29 @@ const toggle = () => {
/>
</span>

<div v-show="isOpen" class="-mt-4">
<div v-show="isOpen" class="content">
<ContentSlot :use="$slots.content" />
</div>
</div>
</template>

<style scoped lang="ts">
css({
'.callout': {
position: 'relative',
px: '{space.4}',
my: '{space.4}',
fontSize: '{text.sm.fontSize}',
lineHeight: '{text.sm.lineHeight}',
borderRadius: '{radii.xl}',
'.preview': {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
},
'.content': {
marginTop: 'calc(0px - {space.4})'
}
}
})
</style>
30 changes: 26 additions & 4 deletions components/content/Sandbox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ onMounted(() => {
</script>

<template>
<div class="sandbox my-4 min-h-[500px] w-full">
<div class="sandbox">
<TabsHeader v-if="!src" ref="tabs" :active-tab-index="activeTabIndex" :tabs="providersTabs" @update:active-tab-index="updateTab">
<template #footer>
<div class="absolute top-1/2 right-0 -translate-y-1/2 transform px-4">
Expand All @@ -76,20 +76,42 @@ onMounted(() => {
:src="url"
title="Sandbox editor"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
class="h-full min-h-[700px] w-full overflow-hidden"
/>

<span v-else class="flex-1 text-white">Loading Sandbox...</span>
<span v-else>Loading Sandbox...</span>
</div>
</template>

<style lang="postcss" scoped>
.sandbox {
@apply overflow-hidden rounded-lg bg-white text-3xl dark:bg-gray-900;
iframe {
@apply h-64 w-full overflow-hidden rounded-lg rounded-tl-none rounded-tr-none;
height: 700px;
}
}
</style>

<style scoped lang="ts">
css({
'.sandbox': {
'--sandbox-height': '700px',
my: '{space.4}',
background: '{docus.surface.background.base}',
width: '100%',
height: 'var(--sandbox-height)',
overflow: 'hidden',
borderRadius: '{radii.xl}',
fontSize: '{text.3xl.fontSize}',
lineHeight: '{text.3xl.lineHeight}',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
iframe: {
width: '100%',
height: '100%',
overflow: 'hidden'
}
}
})
</style>
70 changes: 49 additions & 21 deletions components/content/TabsHeader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,7 @@ const updateHighlightUnderlinePosition = (activeTab) => {
}
highlightUnderline.value.style.left = `${activeTab.offsetLeft}px`
highlightUnderline.value.style.top = `${activeTab.offsetTop}px`
highlightUnderline.value.style.width = `${activeTab.clientWidth}px`
highlightUnderline.value.style.height = `${activeTab.clientHeight}px`
highlightUnderline.value.style.transform = 'scale(1)'
highlightUnderline.value.style.opacity = 1
}
const updateTabs = ($event, i) => {
Expand All @@ -55,37 +51,69 @@ watch(
</script>

<template>
<div class="tabs-header relative bg-gray-800 text-white">
<div v-if="tabs" ref="tabsRef" class="relative z-0 px-2">
<div class="tabs-header">
<div v-if="tabs" ref="tabsRef" class="tabs">
<button
v-for="({ label }, i) in tabs"
:key="`${i}${label}`"
class="xs:py-3 xs:my-0 relative my-2 rounded-lg px-2 py-1.5 font-mono text-sm tracking-tight focus:outline-none"
:class="[activeTabIndex === i ? 'text-white' : 'text-gray-200 hover:text-white']"
:class="[activeTabIndex === i ? 'active' : 'not-active']"
@click="updateTabs($event, i)"
>
{{ label }}
</button>
<span
ref="highlightUnderline"
class="highlight-underline xs:py-1.5 absolute -z-[1]"
:style="{
transform: `scale(0)`,
opacity: 0,
}"
class="highlight-underline"
>
<span class="flex h-full w-full rounded-lg bg-gray-700 dark:bg-gray-900" />
<span class="flex h-full w-full bg-gray-700 dark:bg-gray-900" />
</span>
</div>

<slot name="footer" />
</div>
</template>

<style lang="postcss" scoped>
.highlight-underline {
/* bottom: -2px; */
/* height: 2px; */
transition: left 150ms, top 150ms, width 150ms, height 150ms, transform 100ms, opacity 100ms;
}
</style>
<style scoped lang="ts">
css({
".tabs-header": {
// relative bg-gray-800 text-white
position: 'relative',
background: '{colors.gray.800}',
color: '{colors.white}',
'.tabs': {
//relative z-0 px-2
position: 'relative',
zIndex: 0,
px: '{space.2}',
button: {
py: '{space.3}',
px: '{space.4}',
position: 'relative',
fontFamily: '{font.mono}',
fontSize: '{text.sm.fontSize}',
lineHeight: '{text.sm.lineHeight}',
letterSpacing: '{letterSpacings.tight}',
userSelect: 'none',
transition: 'color 100ms, background 100ms',
'&.not-active': {
color: '{colors.gray.400}',
'&:hover': {
color: '{colors.gray.200}',
background: '{colors.gray.700}'
},
},
'&.active': {
color: '{colors.gray.100}'
}
},
'.highlight-underline': {
position: 'absolute',
zIndex: -1,
top: 0,
height: '100%',
transition: 'left 150ms, width 150ms'
}
}
}
})
</style>
94 changes: 56 additions & 38 deletions components/content/VideoPlayer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,10 @@ const src = computed(() => props.src || props.sources?.[0]?.src || false)
</script>

<template>
<div class="relative inline-block my-4 overflow-hidden bg-black bg-opacity-25 rounded-lg video-player" :class="{ loaded }">
<NuxtImg v-if="provider ? provider.poster : poster" image-classes="video absolute top-0 left-0 h-full w-full object-fit" :src="(provider ? provider.poster : poster as any)" />
<div class="video-player" :class="{ loaded }">
<NuxtImg v-if="provider ? provider.poster : poster" :src="(provider ? provider.poster : poster as any)" />

<div v-if="loaded" class="absolute top-0 left-0 w-full h-full video">
<div v-if="loaded" class="loaded">
<!-- Remote -->
<video v-if="!provider" :poster="poster" controls autoplay>
<source v-if="src" :src="src">
Expand All @@ -52,47 +52,65 @@ const src = computed(() => props.src || props.sources?.[0]?.src || false)
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="true"
:autoplay="autoplay"
class="w-full h-full"
:src="provider.src"
/>
</div>

<div v-if="!loaded" class="absolute top-0 left-0 w-full h-full cursor-pointer overlay" @click="loaded = true">
<button class="play" />
<div v-if="!loaded" class="play-button" @click="loaded = true">
<button />
</div>
</div>
</template>

<style scoped lang="postcss">
.video-player {
&:after {
position: absolute;
content: ' ';
display: block;
}
.play {
width: 68px;
height: 48px;
position: absolute;
cursor: pointer;
transform: translate3d(-50%, -50%, 0);
top: 50%;
left: 50%;
z-index: 1;
background-color: transparent;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
filter: grayscale(100%);
transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
border: none;
}
&:hover .play {
filter: none;
<style scoped lang="ts">
css({
'.video-player': {
position: 'relative',
display: 'inline-block',
my: '{space.4}',
overflow: 'hidden',
background: '{colors.gray.900}',
borderRadius: '{radii.lg}',
'.loaded': {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
},
video: {
width: '100%'
},
iframe: {
width: '100%',
height: '100%',
},
'.play-button': {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
cursor: 'pointer',
button: {
position: 'absolute',
transform: 'translate3d(-50%, -50%, 0)',
top: '50%',
left: '50%',
zIndex: 1,
width: '{space.24}',
height: '{space.24}',
filter: 'grayscale(100%)',
transition: 'filter 0.1s cubic-bezier(0, 0, 0.2, 1)',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundColor: 'transparent',
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>')`
},
'&:hover button': {
filter: 'none'
}
}
}
}
video {
@apply w-full;
}
</style>
})
</style>
Loading

1 comment on commit 496b138

@vercel
Copy link

@vercel vercel bot commented on 496b138 Nov 10, 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 – ./

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

Please sign in to comment.