arthur/website-documentation
1
0
Fork 0
mirror of https://github.com/DiscordFactory/website-documentation.git synced 2026-01-14 09:24:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

📱 Responsive phone

Browse Source
This commit is contained in:
Freeze455
2021-10-06 19:48:58 +02:00
parent b5caf828b5
commit 3f603f6f9e
4 changed files with 20 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/Documentation.vue
View File

@@ -1,6 +1,6 @@
<!-- This example requires Tailwind CSS v2.0+ -->
<template>
<div class="z-40 top-0 left-0 w-full min-h-screen flex bg-gray-100">
<div class="z-40 top-0 left-0 w-full min-h-screen md:flex bg-gray-100">
<TransitionRoot as="template" :show="sidebarOpen">
<Dialog
as="div"
@@ -24,7 +24,7 @@
leave="transition ease-in-out duration-300 transform"
leave-from="translate-x-0"
leave-to="-translate-x-full">
<div class="relative flex-1 flex flex-col max-w-xs w-full bg-white">
<div class="relative flex-1 flex flex-col max-w-xs w-full bg-white overflow-x-hidden overflow-y-scroll">
<TransitionChild
as="template"
enter="ease-in-out duration-300"
@@ -33,7 +33,7 @@
leave="ease-in-out duration-300"
leave-from="opacity-100"
leave-to="opacity-0">
<div class="absolute top-0 right-0 -mr-12 pt-2">
<div class="absolute top-0 right-0 md:-mr-12 pt-2">
<button
type="button"
class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
@@ -44,13 +44,7 @@
</div>
</TransitionChild>
<div class="flex-1 h-0 pt-5 pb-4 ">
<div class="flex-shrink-0 flex items-center px-4">
<img
class="h-8 w-auto"
src="https://tailwindui.com/img/logos/workflow-logo-indigo-600-mark-gray-800-text.svg"
alt="Workflow" />
</div>
<nav class="mt-5 px-2 space-y-2">
<nav class="mt-12 sm:mt-5 px-2 space-y-2">
<template v-for="item in documentation">
<div v-if="item.isMenu">
<p>{{ item.label }}</p>
@@ -72,23 +66,6 @@
</template>
</nav>
</div>
<div class="flex-shrink-0 flex border-t border-gray-200 p-4">
<a href="#" class="flex-shrink-0 group block">
<div class="flex items-center">
<div>
<img class="inline-block h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="ml-3">
<p class="text-base font-medium text-gray-700 group-hover:text-gray-900">
Tom Cook
</p>
<p class="text-sm font-medium text-gray-500 group-hover:text-gray-700">
View profile
</p>
</div>
</div>
</a>
</div>
</div>
</TransitionChild>
<div class="flex-shrink-0 w-14">
@@ -129,7 +106,7 @@
</div>
</div>
</div>
<div class="px-96 mx-auto flex flex-col flex-1 bg-gray-100 dark:bg-gray-800 dark:text-gray-600">
<div class="md:px-96 mx-auto flex flex-col flex-1 bg-gray-100 dark:bg-gray-800 dark:text-gray-600">
<div class="md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3">
<button type="button" class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" @click="sidebarOpen = true">
<span class="sr-only">Open sidebar</span>

14
src/components/Markdown.vue
View File

@@ -65,7 +65,7 @@ h6 {
}
pre {
@apply bg-[#263238] rounded-md leading-7 px-3 py-2;
@apply bg-[#263238] overflow-x-scroll rounded-md leading-7 px-3 py-2;
code {
@apply text-[14px] text-[#bfbfbf];
&.language {
@@ -135,13 +135,13 @@ h6 {
}
}
.warning {
@apply rounded-md bg-yellow-50 dark:bg-yellow-500 border border-yellow-400 dark:border-yellow-900 w-1/2 flex flex-col p-4 my-5 relative;
@apply rounded-md bg-yellow-50 dark:bg-yellow-500 border border-yellow-400 dark:border-yellow-900 md:w-1/2 flex flex-col p-4 my-5 relative;
&::before {
content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> </svg>');
@apply absolute transform left-0 translate-x-3 block h-6 w-6;
}
p {
@apply pl-8 text-sm font-medium text-yellow-800 dark:text-yellow-900 flex items-center;
@apply pl-8 text-sm font-medium text-yellow-800 dark:text-yellow-900 sm:flex items-center;
& > code {
@apply bg-yellow-100 dark:opacity-50 py-0.5 px-1 mx-1 rounded-md;
}
@@ -160,20 +160,20 @@ h6 {
}
}
.error {
@apply rounded-md bg-red-50 dark:bg-red-600 border border-red-400 dark:border-red-900 w-1/2 flex p-4 my-5 relative;
@apply rounded-md bg-red-50 dark:bg-red-600 border border-red-400 dark:border-red-900 md:w-1/2 flex p-4 my-5 relative;
&::before {
content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" /></svg>');
@apply absolute transform left-0 translate-x-3 block h-6 w-6;
}
p {
@apply pl-8 text-sm font-medium text-red-800 dark:text-red-900 flex items-center;
@apply pl-8 text-sm font-medium text-red-800 dark:text-red-900 sm:flex items-center;
& > code {
@apply bg-red-100 dark:opacity-50 py-0.5 px-1 mx-1 rounded-md;
}
}
}
.success {
@apply rounded-md bg-green-50 dark:bg-green-500 border border-green-400 dark:border-green-900 w-1/2 flex p-4 my-5 relative;
@apply rounded-md bg-green-50 dark:bg-green-500 border border-green-400 dark:border-green-900 md:w-1/2 flex p-4 my-5 relative;
&::before {
content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>');
@apply absolute transform left-0 translate-x-3 block h-6 w-6;
@@ -186,7 +186,7 @@ h6 {
}
}
.info {
@apply rounded-md bg-blue-50 dark:bg-blue-500 border border-blue-400 dark:border-blue-900 w-1/2 flex flex-col p-4 my-5 relative;
@apply rounded-md bg-blue-50 dark:bg-blue-500 border border-blue-400 dark:border-blue-900 md:w-1/2 flex flex-col p-4 my-5 relative;
&::before {
content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>');
@apply absolute transform left-0 translate-x-3 block h-6 w-6;

4
src/templates/layouts/Base.vue
View File

@@ -1,10 +1,10 @@
<template>
<Navbar />
<main class="pt-[64px] bg-white dark:bg-gray-800 transition duration-300 min-h-screen pb-10">
<main class="pt-[64px] overflow-x-hidden bg-white dark:bg-gray-800 transition duration-300 min-h-screen pb-10">
<RouterView />
<button
@click.prevent="toggle()"
class="fixed z-50 bottom-5 left-5 w-10 h-10 border-2 rounded focus:outline-none"
class="fixed z-50 bottom-5 right-5 sm:right-0 sm:left-5 w-10 h-10 border-2 rounded focus:outline-none"
:class="isDark() ? 'bg-gray-800 border-white' : 'bg-white border-gray-800'">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<svg v-if="isDark()" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">

8
src/templates/modules/documentation/base/Getting-started.vue
View File

@@ -24,11 +24,15 @@ onMounted(async () => {
<style lang="scss">
.getting-started {
.markdown-viewer {
display: block !important;
& > p:nth-child(2), & > p:last-child, & > p:nth-last-child(3) {
@apply flex md:flex-wrap md:space-x-2 overflow-x-scroll;
}
& > img {
@apply w-1/3;
@apply md:w-1/3;
}
& > p {
@apply flex space-x-2;
@apply md:flex-wrap md:space-x-2 overflow-x-scroll;
code {
@apply bg-red-500;
}