App Layout: Update Tabler dependency, revamp layout

package.json

@@ -25,7 +25,7 @@
     "lodash": "^4.17.11",
     "popper.js": "^1.12",
     "selectize": "^0.12.6",
-    "tabler-ui": "0.0.32",
+    "tabler": "1.0.0-alpha.4",
     "trumbowyg": "^2.18.0",
     "vee-validate": "^2.1.4",
     "vue": "^2.5.2"

resources/assets/sass/_app.scss → resources/assets/css/app.css

@@ -1,115 +1,104 @@
-.header .nav-tabs .nav-item, .sidebar .nav-tabs .nav-item {
-  width: 100%;
-  display: block;
-}
-
-.nav-tabs .nav-link.active + .nav-child {
-  display: block;
-}
-
-.nav-child {
-  display: none;
-}
-
-.sidebar {
-  background-color: #ffffff;
-}
-
-.sidebar.fixed {
-  display: none;
-}
-
-.sidebar .nav-tabs .nav-link {
-  border-bottom: 1px solid rgba(0, 40, 100, 0.12);
-}
-
-a[data-toggle="collapse"] {
-  position: relative;
-}
-
-.sidebar .dropdown-toggle::after {
-  display: block;
-  position: absolute;
-  top: 50%;
-  right: 20px;
-  transform: translateY(-50%);
-}
-
-.sidebar .dropdown-toggle::after {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  margin-left: .255em;
-  vertical-align: .255em;
-  content: "";
-  border-top: .3em solid;
-  border-right: .3em solid transparent;
-  border-bottom: 0;
-  border-left: .3em solid transparent;
-}
-
-.action-container {
-  position: absolute;
-  right: 20px;
-}
-
-.card-options a.dropdown-item:active {
-  color: #fff;
-}
-
-.card-options a.dropdown-item:not(.btn) {
-  margin-left: 0;
-}
-
-textarea {
-  font-family: monospace;
-}
-
-th.sortable {
-  cursor: pointer;
-}
-
-th.sortable.sorted-by.asc::after, th.sortable.sorted-by.desc::after {
-  position: absolute;
-  content: "";
-  width: 0;
-  height: 0;
-  border-style: solid;
-  margin-top: 8px;
-  margin-left: 4px;
-}
-
-th.sortable.sorted-by.asc::after {
-  border-width: 0 5px 5px 5px;
-  border-color: transparent transparent #6e7687 transparent;
-}
-
-th.sortable.sorted-by.desc::after {
-  border-width: 5px 5px 0 5px;
-  border-color: #6e7687 transparent transparent transparent;
-}
-
-.header-brand-img {
-  height: 3.5rem;
-  line-height: 3.5rem;
-}
-
-.flex-grow {
-  flex:1;
-}
-
-@media (min-width: 992px) {
-  .fixed {
-    flex: 0 0 200px;
-    min-height: 100vh;
-  }
-  .col .fluid {
-    min-height: 100vh;
-  }
-  .sidebar.fixed {
-    display: block;
-  }
-  .header .header-brand {
-    display: none;
-  }
-}
+/* General site layout. */
+.nav-tabs .nav-item, .sidebar .nav-tabs .nav-item {
+  display: inline-block;
+}
+body > section#app {
+  padding: 1em;
+}
+@media (min-width: 992px) {
+  @supports(display: grid){
+    body {
+      display: grid;
+      grid-template-areas:
+        "header  header"
+        "nav     app"
+        "nothing app"
+        "footer  footer";
+      grid-template-columns: 25% 75%;
+    }
+    body > header {
+      grid-area: header;
+    }
+    body > nav {
+      grid-area: nav;
+    }
+    body > section#app {
+      grid-area: app;
+    }
+    body > footer {
+      grid-area: footer;
+    }
+    .nav-tabs .nav-item, .sidebar .nav-tabs .nav-item {
+      width: 100%;
+      display: block;
+    }
+  }
+}
+
+/* Fix for tabler inconsistencies. */
+.dropdown-menu .dropdown-item {
+  justify-content: center;
+  font-weight: 400 !important;
+}
+
+.nav-tabs .nav-link.active + .nav-child {
+  display: block;
+}
+
+.nav-child {
+  display: none;
+}
+
+a[data-toggle="collapse"] {
+  position: relative;
+}
+
+.action-container {
+  position: absolute;
+  right: 20px;
+}
+
+.card-options a.dropdown-item:active {
+  color: #fff;
+}
+
+.card-options a.dropdown-item:not(.btn) {
+  margin-left: 0;
+}
+
+textarea {
+  font-family: monospace;
+}
+
+th.sortable {
+  cursor: pointer;
+}
+
+th.sortable.sorted-by.asc::after, th.sortable.sorted-by.desc::after {
+  position: absolute;
+  content: "";
+  width: 0;
+  height: 0;
+  border-style: solid;
+  margin-top: 8px;
+  margin-left: 4px;
+}
+
+th.sortable.sorted-by.asc::after {
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent #6e7687 transparent;
+}
+
+th.sortable.sorted-by.desc::after {
+  border-width: 5px 5px 0 5px;
+  border-color: #6e7687 transparent transparent transparent;
+}
+
+.header-brand-img {
+  height: 3.5rem;
+  line-height: 3.5rem;
+}
+
+.flex-grow {
+  flex:1;
+}

resources/assets/js/bootstrap.js

@@ -18,7 +18,7 @@ try {
 window['require'] = function(modules, callback) {
     var modulesToRequire = modules.forEach(function(module) {
         switch(module) {
-            case 'circle-progress': return require('../../../node_modules/tabler-ui/dist/assets/js/vendors/circle-progress.min.js');
+            //case 'circle-progress': return require('../../../node_modules/tabler-ui/dist/assets/js/vendors/circle-progress.min.js');
             case 'jquery': return require('jquery');
         }
     })
@@ -64,4 +64,4 @@ if (token) {
 //     key: process.env.MIX_PUSHER_APP_KEY,
 //     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
 //     encrypted: true
-// });
+// });

resources/assets/js/components/SingleResourceComponent.vue

@@ -5,7 +5,7 @@
                 <h3 class="card-title"><span v-if="prettyResourceName">{{ prettyResourceName | beautify }}</span><span v-else>{{ resourceName | beautify }}</span></h3>
                 <div class="card-options">
                     <div class="dropdown card-options-dropdown">
-                        <button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="fe fe-more-vertical"></i></button>
+                        <button type="button" class="btn btn-secondary btn-option dropdown-toggle" data-toggle="dropdown"><i class="fe fe-more-vertical"></i></button>
                         <div class="dropdown-menu dropdown-menu-dark dropdown-menu-right">
                             <a class="dropdown-item" v-bind:href="`/${pathPrefix}/${resourceName}/${resourceId}/`">
                                 <i class="fe fe-eye mr-3"></i>View

resources/assets/js/components/TableComponent.vue

@@ -26,16 +26,14 @@
                                     <td v-for="fieldType, fieldKey in resourceFields" v-html="highlight(resource[fieldKey])">{{ resource[`${fieldKey}`] }}</td>
                                     <td class="text-right">
                                         <a class="btn btn-secondary btn-sm btn-action" v-bind:href="`/${pathPrefix}/${resourceName}/${resource.route_key}/`">View</a>
-                                        <div class="dropdown">
-                                            <button type="button" class="btn btn-secondary btn-sm btn-dropdown-action dropdown-toggle" data-toggle="dropdown">Action</button>
+                                        <button type="button" class="btn btn-secondary btn-sm btn-dropdown-action dropdown-toggle" data-toggle="dropdown">Action</button>
                                             <div class="dropdown-menu dropdown-menu-dark">
-                                                <a class="dropdown-item" v-bind:href="`/${pathPrefix}/${resourceName}/${resource.route_key}/edit/`">
-                                                    <i class="fe fe-edit mr-3"></i>Edit
-                                                </a>
-                                                <button class="btn dropdown-item" @click.stop="handleAction('Delete', resource.route_key)">
-                                                    <i class="fe fe-delete mr-3"></i>Delete
-                                                </button>
-                                            </div>
+                                            <a class="dropdown-item" v-bind:href="`/${pathPrefix}/${resourceName}/${resource.route_key}/edit/`">
+                                                <i class="fe fe-edit mr-3"></i>Edit
+                                            </a>
+                                            <button class="btn dropdown-item" @click.stop="handleAction('Delete', resource.route_key)">
+                                                <i class="fe fe-delete mr-3"></i>Delete
+                                            </button>
                                         </div>
                                     </td>
                                 </tr>
@@ -210,4 +208,4 @@
             }
         }
     }
-</script>
+</script>

resources/views/layouts/app.blade.php

@@ -18,36 +18,31 @@
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
         <link rel="stylesheet" href="{{ asset(mix('assets/css/tabler.css', 'vendor/otter')) }}">
-        <link rel="stylesheet" href="{{ asset(mix((\Poowf\Otter\Otter::$useDarkTheme) ? 'assets/css/app-dark.css' : 'assets/css/app.css', 'vendor/otter')) }}">
+        <link rel="stylesheet" href="{{ asset(mix('assets/css/app.css', 'vendor/otter')) }}">
         <link rel="stylesheet" href="{{ asset(mix('assets/css/trumbowyg.css', 'vendor/otter')) }}" type="text/css">
 
         <style>
         </style>
         @yield("head")
     </head>
-    <body class="">
-        <div class="page container-fluid">
-            <div id="app" class="page-main row h-100">
-                @include("otter::partials/sidebar")
-
-                <!-- center content -->
-                <div class="col fluid d-flex flex-column px-0">
-                    @include("otter::partials/header")
-                    <!-- main content -->
-                    <div class="flex-grow">
-                        @yield("content")
-                    </div>
-
-                    @include("otter::partials/footer")
-                </div>
-            </div>
-
-            <script src="{{ asset(mix('assets/js/manifest.js', 'vendor/otter')) }}"></script>
-            <script src="{{ asset(mix('assets/js/vendor.js', 'vendor/otter')) }}"></script>
-            <script src="{{ asset(mix('assets/js/bootstrap.js', 'vendor/otter')) }}"></script>
-            <script src="{{ asset(mix('assets/js/app.js', 'vendor/otter')) }}"></script>
-            <script src="{{ asset(mix('assets/js/core.js', 'vendor/otter')) }}"></script>
-            @yield("scripts")
-        </div>
+    <body class="{{ (\Poowf\Otter\Otter::$useDarkTheme) ? 'theme-dark' : 'theme-dark-auto' }}">
+        <header>
+            @include("otter::partials/header")
+        </header>
+        <nav>
+            @include("otter::partials/nav")
+        </nav>
+        <section id="app">
+            @yield("content")
+        </section>
+        <footer>
+            @include("otter::partials/footer")
+        </footer>
+        <script src="{{ asset(mix('assets/js/manifest.js', 'vendor/otter')) }}"></script>
+        <script src="{{ asset(mix('assets/js/vendor.js', 'vendor/otter')) }}"></script>
+        <script src="{{ asset(mix('assets/js/bootstrap.js', 'vendor/otter')) }}"></script>
+        <script src="{{ asset(mix('assets/js/app.js', 'vendor/otter')) }}"></script>
+        <script src="{{ asset(mix('assets/js/tabler.min.js', 'vendor/otter')) }}"></script>
+        @yield("scripts")
     </body>
-</html>
+</html>