arthur/website-documentation
1
0
Fork 0
mirror of https://github.com/DiscordFactory/website-documentation.git synced 2026-01-24 22:10:26 +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>