Merge pull request #8 from mjczone/develop

Styling updates to docs to deal with overflow

docs/components/docs-header.vue

@@ -1,14 +1,19 @@
 <script>
-const { ref, defineComponent } = Vue;
+const { ref, defineComponent, computed } = Vue;
 export default defineComponent({
   name: "DocsHeaderToolbar",
   props: ["title", "repositoryUrl", "version"],
   emits: ["toggleLeftDrawer"],
   setup(props, ctx) {
+    const baseUrl = computed(() => {
+      const x = window.location.origin + window.location.pathname;
+      return x.replace(/\/+$/, "");
+    });
     function toggleLeftDrawer() {
       ctx.emit("toggleLeftDrawer");
     }
     return {
+      baseUrl,
       toggleLeftDrawer,
     };
   },
@@ -25,7 +30,7 @@ export default defineComponent({
             unelevated
             :ripple="false"
             no-caps
-            href="/"
+            :href="`${baseUrl}/`"
             class="btn--no-hover q-px-md q-py-md page-title"
             :label="title"
           >

docs/components/docs-layout.vue

@@ -12,7 +12,7 @@
       v-model:selected-item="selectedPath"
     ></docs-drawer>
     <q-page-container>
-      <q-page v-if="displayComponent">
+      <q-page v-if="displayComponent" :style-fn="qPageStyleFn">
         <component
           :is="displayComponent"
           :config="$store.state.config"
@@ -162,7 +162,14 @@ export default defineComponent({
       { immediate: true }
     );
 
+    function qPageStyleFn(offset, height) {
+      // console.log("qPageStyleFn", offset, height);
+      // return { minHeight: offset + "px" };
+      return {};
+    }
+
     return {
+      qPageStyleFn,
       displayComponent,
       data,
       leftDrawerOpen,

docs/content/usage/extension-methods/table-methods.md

@@ -45,6 +45,6 @@ bool dropped = await db.DropTableIfExistsAsync("app", "app_employees", ...);
 // RENAME: Rename a database table
 bool renamed = await db.RenameTableIfExistsAsync("app", "app_employees", /* new name */ "app_staff", ...);
 
-// TRUNCATE: Drop a database table
+// TRUNCATE: Truncate a database table
 bool truncated = await db.TruncateTableIfExistsAsync("app", "app_employees", ...);
 ```

docs/docs.css

@@ -549,6 +549,7 @@ p > code {
     .q-page {
       padding-left: 20px;
       padding-right: 20px;
+      padding-bottom: 10px;
 
       .content-page {
         > div > .q-img {

docs/main.js

@@ -134,25 +134,6 @@ async function boot() {
   ]);
 }
 
-// from: https://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value
-// example: People.sort(dynamicSort("Name"));
-function dynamicSort(property) {
-  var sortOrder = 1;
-  if (property[0] === "-") {
-    sortOrder = -1;
-    property = property.substr(1);
-  }
-  return function (a, b) {
-    /*
-     * next line works with strings and numbers,
-     * and you may want to customize it to your needs
-     */
-    var result =
-      a[property] < b[property] ? -1 : a[property] > b[property] ? 1 : 0;
-    return result * sortOrder;
-  };
-}
-
 /**
  * Create a DOM element from an HTML string with a single root element
  */