Merge pull request #9 from dniccum/feature/responsive-layout

Feature/responsive layout

.gitignore

@@ -8,4 +8,5 @@ phpunit.xml
 .phpunit.result.cache
 .DS_Store
 Thumbs.db
-yarn.lock
+yarn.lock
+/dist/js/tool.js.map

README.md

@@ -16,6 +16,7 @@ This is a tool for Laravel's Nova administrator panel that allows you to create
     * Allows for nested directories
 * Syntax highlighting for code blocks (via [highlight.js](https://highlightjs.org/))
 * Replaces local links within the body content to work within the Nova environment.
+* Supports [Laravel Nova Responsive Theme](https://novapackages.com/packages/gregoriohc/laravel-nova-theme-responsive)
 
 ## Installation
 

package.json

@@ -11,10 +11,15 @@
     },
     "devDependencies": {
         "cross-env": "^5.0.0",
-        "laravel-mix": "^1.0"
+        "laravel-mix": "^4.0",
+        "laravel-mix-purgecss": "^4.2.0",
+        "sass": "^1.23.1",
+        "sass-loader": "^7.3.1",
+        "vue-template-compiler": "^2.6.10"
     },
     "dependencies": {
         "highlight.js": "^9.14.2",
+        "tailwindcss": "^1.1.3",
         "vue": "^2.5.0"
     }
 }

resources/js/components/Page.vue

@@ -2,8 +2,8 @@
     <div>
         <heading class="mb-6">{{ title }}</heading>
 
-        <div class="flex flex-row">
-            <card class="w-4/5 bg-white p-6 mr-2" style="min-height: 300px">
+        <div class="flex doc-flex-col md:doc-flex-row">
+            <card class="doc-order-3 md:doc-order-first doc-w-full md:doc-w-3/5 lg:doc-w-2/3 xl:doc-w-8/12 bg-white p-6 md:doc-mr-3" style="min-height: 300px">
                 <div class="documentation-content" v-html="content"></div>
             </card>
             <sidebar :content="sidebar"></sidebar>
@@ -39,10 +39,7 @@
             }, 500)
         },
         methods: {
-            // content() {
-            //     // return Vue.compile(this.content);
-            //     return this.content
-            // }
+            //
         }
     }
 </script>

resources/js/components/Sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-    <card class="w-1/5 bg-white p-6 self-start" style="min-height: 300px">
+    <card class="doc-order-first md:doc-order-3 doc-w-full md:doc-w-2/5 lg:doc-w-4/12 xl:doc-w-4/12 bg-white p-6 self-start mb-3 md:doc-mb-0">
         <h3 class="mb-2">Contents</h3>
         <ul>
             <li class="mb-2" v-for="item of content">

resources/js/tool.js

@@ -1,3 +1,5 @@
+import Page from './components/Page';
+
 const routes = [{
     path: '/documentation/home',
     redirect: '/documentation'
@@ -8,7 +10,7 @@ Nova.config.pages.map((page) => {
     let route = {
         name: `documentation/${page.pageRoute}`,
         path: `/documentation/${page.pageRoute}`,
-        component: require('./components/Page'),
+        component: Page,
         props: {
             file: page.file,
             title: page.title,

resources/sass/tool.scss

@@ -1,4 +1,26 @@
 // Nova Tool CSS
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@responsive {
+  .doc-w-2\/5 {
+    width: 40%;
+  }
+  .doc-w-3\/5 {
+    width: 60%;
+  }
+  .doc-w-4\/5 {
+    width: 80%;
+  }
+  .doc-mr-2 {
+    margin-right: 0.5rem;
+  }
+  .doc-mr-3 {
+    margin-right: 0.75rem;
+  }
+}
+
 .documentation-content {
 
   p,

tailwind.config.js

@@ -0,0 +1,13 @@
+// tailwind.config.js
+module.exports = {
+    theme: {},
+    variants: {},
+    plugins: [],
+    corePlugins: [
+        'width',
+        'order',
+        'flexDirection',
+        'margin',
+    ],
+    prefix: 'doc-',
+};

webpack.mix.js

@@ -1,5 +1,16 @@
 let mix = require('laravel-mix')
+const tailwindcss = require('tailwindcss')
+require('laravel-mix-purgecss');
 
 mix.setPublicPath('dist')
-   .js('resources/js/tool.js', 'js')
-   .sass('resources/sass/tool.scss', 'css')
+    .js('resources/js/tool.js', 'js')
+    .sass('resources/sass/tool.scss', 'css')
+    .options({
+        processCssUrls: false,
+        postCss: [ tailwindcss('./tailwind.config.js'), ],
+    })
+    .purgeCss();
+
+if (!mix.inProduction()) {
+    mix.sourceMaps();
+}