All Pages - columns system UI

CHANGELOG.md

@@ -2,6 +2,13 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## Unreleased
+### Added
+- Configuration Wizard: Added Public Access option
+
+### Fixed
+- UI: Scrollbar is no longer always shown in code blocks
+
 ## [v1.0.0-beta.10] - 2017-04-08
 ### Added
 - Installation: Wiki.js can now install via local tarball

client/scss/app.scss

@@ -13,6 +13,7 @@ $primary: 'indigo';
 
 @import 'components/alert';
 @import 'components/button';
+@import 'components/collapsable-nav';
 @import 'components/footer';
 @import 'components/form';
 @import 'components/grid';

client/scss/components/collapsable-nav.scss

+.has-collapsable-nav {
+  background-color: mc('blue-grey', '50');
+}
+
+.collapsable-nav {
+  width: 300px;
+  background-color: mc($primary, '500');
+  color: #FFF;
+  min-height: 80vh;
+  transition: all .6s ease;
+
+  &.has-children {
+    width: 50px;
+
+    li {
+      display: none;
+    }
+  }
+
+  li {
+    display: flex;
+    border-top: 1px solid mc($primary, '700');
+
+    &.is-active {
+      display: flex;
+      height: 50px;
+      width: 300px;
+      min-width: 80vh;
+      @include prefix(transform, rotate(90deg) translate(0, -50px));
+      transform-origin: 0 0;
+
+      a {
+        height: 50px;
+      }
+
+    }
+
+  }
+
+  a {
+    display: flex;
+    height: 40px;
+    width: 100%;
+    align-items: center;
+    padding: 0 15px;
+    color: #FFF;
+    cursor: pointer;
+    transition: all .4s ease;
+    background-color: rgba(0,0,0,0);
+
+    i {
+      font-size: 14px;
+      margin-right: 10px;
+    }
+
+    &:hover {
+      background-color: rgba(0,0,0,.1);
+      text-decoration: none;
+    }
+
+  }
+
+}
+
+.collapsable-nav-sub {
+  width: 300px;
+  background-color: mc('blue-grey', '800');
+  border-left: 1px solid mc('blue-grey', '900');
+  color: #FFF;
+  min-height: 80vh;
+
+  li {
+    display: flex;
+    border-top: 1px solid mc('blue-grey', '900');
+  }
+
+  a {
+    display: flex;
+    height: 40px;
+    width: 100%;
+    align-items: center;
+    padding: 0 15px;
+    color: #FFF;
+    cursor: pointer;
+    transition: all .4s ease;
+    background-color: rgba(0,0,0,0);
+
+    i {
+      font-size: 14px;
+      margin-right: 10px;
+    }
+
+    &:hover {
+      background-color: rgba(0,0,0,.1);
+      text-decoration: none;
+    }
+
+  }
+
+}

client/scss/components/sidebar.scss

@@ -83,4 +83,37 @@
 
 	}
 
+  &.is-collapsed {
+    width: 50px;
+
+    aside {
+      .sidebar-label {
+        margin-right: 1px;
+      }
+
+      .sidebar-menu li a {
+        padding: 10px 0;
+        justify-content: center;
+
+        i {
+          margin: 0;
+          font-size: 20px;
+          transition: color .6s ease;
+        }
+
+        span {
+          display: none;
+        }
+
+        &:hover {
+          i {
+            color: #FFF;
+          }
+        }
+      }
+
+    }
+
+  }
+
 }

controllers/pages.js

@@ -71,7 +71,7 @@ router.get('/create/*', (req, res, next) => {
     return res.render('error-forbidden')
   }
 
-  if (_.some(['create', 'edit', 'account', 'source', 'history', 'mk'], (e) => { return _.startsWith(req.path, '/create/' + e) })) {
+  if (_.some(['create', 'edit', 'account', 'source', 'history', 'mk', 'all'], (e) => { return _.startsWith(req.path, '/create/' + e) })) {
     return res.render('error', {
       message: 'You cannot create a document with this name as it is reserved by the system.',
       error: {}
@@ -131,6 +131,25 @@ router.put('/create/*', (req, res, next) => {
 })
 
 // ==========================================
+// LIST ALL PAGES
+// ==========================================
+
+/**
+ * View list view of all pages
+ */
+router.get('/all', (req, res, next) => {
+  entries.getFromTree('/').then((pageData) => {
+    res.render('pages/all', { pageData })
+    return true
+  }).catch((err) => {
+    res.render('error', {
+      message: err.message,
+      error: {}
+    })
+  })
+})
+
+// ==========================================
 // VIEW MODE
 // ==========================================
 

libs/entries.js

@@ -405,5 +405,15 @@ module.exports = {
     return fs.readFileAsync(path.join(ROOTPATH, 'client/content/create.md'), 'utf8').then((contents) => {
       return _.replace(contents, new RegExp('{TITLE}', 'g'), formattedTitle)
     })
+  },
+
+  /**
+   * Get all entries from base path
+   *
+   * @param {String} basePath Path to list from
+   * @return {Promise<Array>} List of entries
+   */
+  getFromTree (basePath) {
+    return Promise.resolve([])
   }
 }

views/pages/all.pug

+extends ../layout.pug
+
+block rootNavRight
+  i.nav-item#notifload
+
+block content
+
+  #page-type-all
+    .container.is-fluid.has-collapsable-nav
+      .columns.is-gapless
+
+        .column.is-narrow.is-hidden-touch.sidebar.is-collapsed
+
+          aside
+            .sidebar-label
+              span NAV
+            ul.sidebar-menu
+              li
+                a(href='/')
+                  i.icon-home
+                  span Home
+              if !isGuest
+                li
+                  a(href='/admin')
+                    i.icon-head
+                    span Account
+              else
+                li
+                  a(href='/login')
+                    i.icon-unlock
+                    span Login
+
+        .column.is-narrow
+          ul.collapsable-nav.has-children
+            li: a
+              i.icon-file
+              span Page 1
+            li: a
+              i.icon-file
+              span Page 2
+            li: a
+              i.icon-file
+              span Page 3
+            li.is-active: a
+              i.icon-folder2
+              span Page 4
+            li: a
+              i.icon-file
+              span Page 5
+        .column.is-narrow
+          ul.collapsable-nav-sub
+            li: a
+              i.icon-file
+              span Page 1
+            li: a
+              i.icon-file
+              span Page 2
+            li: a
+              i.icon-file
+              span Page 3
+            li: a
+              i.icon-file
+              span Page 4
+            li: a
+              i.icon-file
+              span Page 5
+

views/pages/view.pug

@@ -42,6 +42,10 @@ block content
                 a(href='/')
                   i.icon-home
                   span Home
+              li
+                a(href='/all')
+                  i.icon-paper
+                  span All Pages
               if pageData.parent
                 li
                   a(href='/' + pageData.parent.path)