Some design updates (#70)

* Auth page styles improved

* styles updated

* upd bundles

public/dist/editor.bundle.js

@@ -1,4 +1,4 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{104:function(t,e,n){"use strict";n.r(e),n.d(e,"default",function(){return w});n(12),n(69);var r=n(73),o=n.n(r),i=n(74),a=n.n(i),s=n(75),c=n.n(s),u=n(76),l=n.n(u),f=n(77),d=n.n(f),p=n(78),h=n.n(p),v=n(79),g=n.n(v),y=n(80),m=n.n(y),b=n(81),k=n.n(b);function x(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var w=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t);var r={tools:{header:{class:a.a,inlineToolbar:["link","marker","inlineCode"],config:{placeholder:n.headerPlaceholder||""}},image:{class:c.a,inlineToolbar:!0,config:{types:"image/*, video/mp4",endpoints:{byFile:"/api/transport/image",byUrl:"/api/transport/fetch"},additionalRequestData:{map:JSON.stringify({path:"file:url",size:"file:size",mimetype:"file:mime"})}}},code:{class:l.a,shortcut:"CMD+SHIFT+D"},list:{class:d.a,inlineToolbar:!0},delimiter:h.a,table:{class:g.a,inlineToolbar:!0},inlineCode:{class:m.a,shortcut:"CMD+SHIFT+C"},marker:{class:k.a,shortcut:"CMD+SHIFT+M"}},data:{blocks:[{type:"header",data:{text:"",level:2}}]}};this.editor=new o.a(Object.assign(r,e))}var e,n,r;return e=t,(n=[{key:"save",value:function(){return this.editor.saver.save()}}])&&x(e.prototype,n),r&&x(e,r),t}()},59:function(t,e,n){var r=n(60),o=n(17);t.exports=function(t){return r(o(t))}},60:function(t,e,n){var r=n(11);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},61:function(t,e,n){var r=n(31)("keys"),o=n(20);t.exports=function(t){return r[t]||(r[t]=o(t))}},62:function(t,e,n){var r=n(17);t.exports=function(t){return Object(r(t))}},63:function(t,e,n){var r=n(65),o=n(64);t.exports=Object.keys||function(t){return r(t,o)}},64:function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},65:function(t,e,n){var r=n(18),o=n(59),i=n(66)(!1),a=n(61)("IE_PROTO");t.exports=function(t,e){var n,s=o(t),c=0,u=[];for(n in s)n!=a&&r(s,n)&&u.push(n);for(;e.length>c;)r(s,n=e[c++])&&(~i(u,n)||u.push(n));return u}},66:function(t,e,n){var r=n(59),o=n(16),i=n(67);t.exports=function(t){return function(e,n,a){var s,c=r(e),u=o(c.length),l=i(a,u);if(t&&n!=n){for(;u>l;)if((s=c[l++])!=s)return!0}else for(;u>l;l++)if((t||l in c)&&c[l]===n)return t||l||0;return!t&&-1}}},67:function(t,e,n){var r=n(21),o=Math.max,i=Math.min;t.exports=function(t,e){return(t=r(t))<0?o(t+e,0):i(t,e)}},69:function(t,e,n){var r=n(9);r(r.S+r.F,"Object",{assign:n(70)})},70:function(t,e,n){"use strict";var r=n(63),o=n(71),i=n(72),a=n(62),s=n(60),c=Object.assign;t.exports=!c||n(13)(function(){var t={},e={},n=Symbol(),r="abcdefghijklmnopqrst";return t[n]=7,r.split("").forEach(function(t){e[t]=t}),7!=c({},t)[n]||Object.keys(c({},e)).join("")!=r})?function(t,e){for(var n=a(t),c=arguments.length,u=1,l=o.f,f=i.f;c>u;)for(var d,p=s(arguments[u++]),h=l?r(p).concat(l(p)):r(p),v=h.length,g=0;v>g;)f.call(p,d=h[g++])&&(n[d]=p[d]);return n}:c},71:function(t,e){e.f=Object.getOwnPropertySymbols},72:function(t,e){e.f={}.propertyIsEnumerable},73:function(t,e,n){
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{104:function(t,e,n){"use strict";n.r(e),n.d(e,"default",function(){return w});n(12),n(69);var r=n(73),o=n.n(r),i=n(74),a=n.n(i),s=n(75),c=n.n(s),u=n(76),l=n.n(u),f=n(77),d=n.n(f),p=n(78),h=n.n(p),v=n(79),g=n.n(v),y=n(80),m=n.n(y),b=n(81),k=n.n(b);function x(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var w=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t);var r={tools:{header:{class:a.a,inlineToolbar:["marker","inlineCode"],config:{placeholder:n.headerPlaceholder||""}},image:{class:c.a,inlineToolbar:!0,config:{types:"image/*, video/mp4",endpoints:{byFile:"/api/transport/image",byUrl:"/api/transport/fetch"},additionalRequestData:{map:JSON.stringify({path:"file:url",size:"file:size",mimetype:"file:mime"})}}},code:{class:l.a,shortcut:"CMD+SHIFT+D"},list:{class:d.a,inlineToolbar:!0},delimiter:h.a,table:{class:g.a,inlineToolbar:!0},inlineCode:{class:m.a,shortcut:"CMD+SHIFT+C"},marker:{class:k.a,shortcut:"CMD+SHIFT+M"}},data:{blocks:[{type:"header",data:{text:"",level:2}}]}};this.editor=new o.a(Object.assign(r,e))}var e,n,r;return e=t,(n=[{key:"save",value:function(){return this.editor.saver.save()}}])&&x(e.prototype,n),r&&x(e,r),t}()},59:function(t,e,n){var r=n(60),o=n(17);t.exports=function(t){return r(o(t))}},60:function(t,e,n){var r=n(11);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},61:function(t,e,n){var r=n(31)("keys"),o=n(20);t.exports=function(t){return r[t]||(r[t]=o(t))}},62:function(t,e,n){var r=n(17);t.exports=function(t){return Object(r(t))}},63:function(t,e,n){var r=n(65),o=n(64);t.exports=Object.keys||function(t){return r(t,o)}},64:function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},65:function(t,e,n){var r=n(18),o=n(59),i=n(66)(!1),a=n(61)("IE_PROTO");t.exports=function(t,e){var n,s=o(t),c=0,u=[];for(n in s)n!=a&&r(s,n)&&u.push(n);for(;e.length>c;)r(s,n=e[c++])&&(~i(u,n)||u.push(n));return u}},66:function(t,e,n){var r=n(59),o=n(16),i=n(67);t.exports=function(t){return function(e,n,a){var s,c=r(e),u=o(c.length),l=i(a,u);if(t&&n!=n){for(;u>l;)if((s=c[l++])!=s)return!0}else for(;u>l;l++)if((t||l in c)&&c[l]===n)return t||l||0;return!t&&-1}}},67:function(t,e,n){var r=n(21),o=Math.max,i=Math.min;t.exports=function(t,e){return(t=r(t))<0?o(t+e,0):i(t,e)}},69:function(t,e,n){var r=n(9);r(r.S+r.F,"Object",{assign:n(70)})},70:function(t,e,n){"use strict";var r=n(63),o=n(71),i=n(72),a=n(62),s=n(60),c=Object.assign;t.exports=!c||n(13)(function(){var t={},e={},n=Symbol(),r="abcdefghijklmnopqrst";return t[n]=7,r.split("").forEach(function(t){e[t]=t}),7!=c({},t)[n]||Object.keys(c({},e)).join("")!=r})?function(t,e){for(var n=a(t),c=arguments.length,u=1,l=o.f,f=i.f;c>u;)for(var d,p=s(arguments[u++]),h=l?r(p).concat(l(p)):r(p),v=h.length,g=0;v>g;)f.call(p,d=h[g++])&&(n[d]=p[d]);return n}:c},71:function(t,e){e.f=Object.getOwnPropertySymbols},72:function(t,e){e.f={}.propertyIsEnumerable},73:function(t,e,n){
 /*!
  * Editor.js
  * 

src/frontend/js/classes/editor.js

@@ -32,7 +32,7 @@ export default class Editor {
       tools: {
         header: {
           class: Header,
-          inlineToolbar: ['link', 'marker', 'inlineCode'],
+          inlineToolbar: ['marker', 'inlineCode'],
           config: {
             placeholder: options.headerPlaceholder || ''
           }

src/frontend/js/modules/page.js

@@ -30,7 +30,7 @@ export default class Writing {
     const { default: CodeStyler } = await import(/* webpackChunkName: "code-styling" */ './../classes/codeStyler');
 
     return new CodeStyler({
-      selector: '.block-code'
+      selector: '.block-code__content'
     });
   };
 }

src/frontend/styles/components/aside.pcss

@@ -1,8 +1,16 @@
 .docs-aside {
-  font-size: 15px;
+  position: sticky;
-  color: var(--color-text-second);
+  top: var(--layout-padding-vertical);
+  font-size: 14px;
+  letter-spacing: 0.01em;
+  overflow-y: scroll;
+  max-height: 100vh;
+  //padding-right: 50px;
 
   @media (--mobile) {
+    position: static;
+    overflow: visible;
+    max-height: none;
     font-size: 13px;
     display: none;
     margin-top: 20px;
@@ -13,7 +21,12 @@
   }
 
   a {
+    color: inherit;
     text-decoration: none;
+
+    &:hover {
+      color: var(--color-link-active);
+    }
   }
 
   &__section {
@@ -28,8 +41,10 @@
     }
 
     &-title {
-      margin-bottom: 15px;
+      display: inline-block;
-      color: var(--color-link-active);
+      margin-bottom: 10px;
+      font-size: 1.18em;
+      font-weight: 600;
 
       @media (--mobile) {
         margin-bottom: 10px;
@@ -38,6 +53,7 @@
 
     &-list {
       padding-left: 0;
+      margin: 0;
       list-style: none;
 
       a {

src/frontend/styles/components/auth.pcss

@@ -0,0 +1,33 @@
+.auth-form {
+  font-size: 15px;
+  text-align: center;
+  margin-top: 30vh;
+
+  h1 {
+    @media (--mobile){
+      font-size: 20px;
+    }
+  }
+
+  p {
+    margin: 40px 0 20px;
+  }
+
+  input[type="password"] {
+    padding: 9px;
+    font-size: 15px;
+    outline: none;
+    border-radius: 3px;
+    -webkit-appearance: none;
+    border: 1px solid var(--color-line-gray);
+  }
+
+  input[type="submit"]{
+    @apply --button;
+    @apply --button-primary;
+    font-size: 15px;
+    padding: 10px 20px;
+    line-height: inherit;
+    vertical-align: top;
+  }
+}

src/frontend/styles/components/page.pcss

@@ -1,6 +1,7 @@
 .page {
-  font-size: 16px;
+  font-size: 15px;
   line-height: 1.6;
+  letter-spacing: 0.005em;
 
   &__header {
     display: flex;
@@ -48,10 +49,11 @@
   }
 
   &__title {
-    font-size: 26px;
+    @apply --font-serif;
-    font-weight: 700;
+    font-size: 35px;
-    letter-spacing: -0.04px;
+    font-weight: 900;
-    margin-bottom: -0.2em;
+    letter-spacing: -0.04em;
+    margin-bottom: -0.1em;
   }
 
   .cdx-marker {
@@ -59,6 +61,18 @@
     padding: 3px 0;
   }
 
+  .inline-code {
+    display: inline-block;
+    background: rgba(251,241,241,0.78);
+    color: #C44545;
+    padding: 0.1em 0.5em;
+    border-radius: 2px;
+    margin: 0 2px;
+    font-family: Menlo, Monaco, Consolas, Courier New, monospace;
+    font-size: 0.84em;
+    line-height: 1.4em;
+  }
+
   &__content {
     a {
       text-decoration: none;
@@ -75,21 +89,74 @@
 
 }
 
+/**
+ * Paragraph
+ * ==================
+ */
+.block-paragraph {
+  .inline-code {
+    -webkit-font-smoothing: initial;
+    -moz-osx-font-smoothing: initial;
+  }
+}
+
 /**
  * Header
  * ==================
  */
 .block-header {
-  margin: 1.5em 0 0.5em;
+  @apply --font-serif;
+  margin: 2.1em 0 0.5em;
 
   &--2 {
     font-size: 22px;
-    font-weight: 500;
+    font-weight: 600;
   }
 
   &--3 {
     font-size: 18px;
-    font-weight: 500;
+    font-weight: 600;
+  }
+
+  & + p {
+    margin-top: 0.5em;
+  }
+
+  a {
+    text-decoration: none !important;
+    border: 0;
+    color: inherit !important;
+  }
+
+  &--anchor {
+    cursor: pointer;
+
+    &::before {
+      position: absolute;
+      content: '';
+      margin-left: -30px;
+      width: 14px;
+      height: 19px;
+      margin-top: 0.35em;
+      background-image: url("data:image/svg+xml,%3Csvg width='14' height='19' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%237B7E89' fill-rule='nonzero'%3E%3Cpath d='M8.58 11.997L2.283 5.701a1.762 1.762 0 0 1 0-2.49l.933-.935a1.762 1.762 0 0 1 2.49 0l6.298 6.297a3.508 3.508 0 0 0-.901-3.39L6.952 1.031a3.522 3.522 0 0 0-4.982 0l-.933.933a3.522 3.522 0 0 0 0 4.982l4.151 4.151c.92.92 2.218 1.208 3.392.9z'/%3E%3Cpath d='M12.958 11.628l-4.151-4.15a3.507 3.507 0 0 0-3.391-.899l6.296 6.296a1.76 1.76 0 0 1 0 2.49l-.933.936a1.764 1.764 0 0 1-2.49 0l-6.296-6.298a3.507 3.507 0 0 0 .899 3.39l4.151 4.15a3.522 3.522 0 0 0 4.982 0l.933-.935a3.52 3.52 0 0 0 0-4.98z'/%3E%3C/g%3E%3C/svg%3E");
+      opacity: 0;
+      transform: translateX(5px);
+      will-change: opacity, transform;
+      transition: all 100ms ease;
+
+      @media (--mobile){
+        display: none !important;
+      }
+    }
+
+    &:hover {
+      color: #4c4c58;
+    }
+
+    &:hover::before{
+      opacity: 1;
+      transform: none;
+    }
   }
 }
 
@@ -98,12 +165,48 @@
  * ==================
  */
 .block-code {
-  padding: 20px !important;
+  background: var(--color-bg-light);
+  border: 1px solid #f1f1f4;
   border-radius: 5px;
-  font-size: 13px;
+  font-family: var(--font-mono);
-  //border: 1px solid var(--color-line-gray);
-  font-family: Menlo,Monaco,Consolas,Courier New,monospace;
   line-height: 1.7em;
+  font-size: 13px;
+
+  &__content {
+    white-space: pre;
+    word-wrap: normal;
+    overflow-x: auto;
+    background: transparent !important;
+    padding: 15px !important;
+    color: #41314e !important;
+  }
+
+  .hljs-name,
+  .hljs-section{
+    color: #359f3f;
+  }
+
+  .hljs-tag {
+    color: #718c77;
+  }
+
+  .hljs-attr,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-id,
+  .hljs-selector-pseudo,
+  .hljs-title {
+    color: #904eb3;
+  }
+
+  .hljs-emphasis,
+  .hljs-quote,
+  .hljs-string,
+  .hljs-strong,
+  .hljs-template-variable,
+  .hljs-variable {
+    color: #c21f04;
+  }
 }
 
 /**
@@ -111,6 +214,8 @@
  * ==================
  */
 .block-list {
+  margin: 20px 0;
+
   li {
     margin: 10px 0;
   }
@@ -149,7 +254,7 @@
 
    &--with-background {
      padding: 15px;
-     background: var(--color-line-gray);
+     background: var(--color-bg-light);
 
      img, video {
        max-width: 60%;

src/frontend/styles/components/writing.pcss

@@ -25,7 +25,8 @@
   }
 
   select {
-    max-width: 100px
+    max-width: 100px;
+    vertical-align: bottom;
   }
 }
 
@@ -47,9 +48,30 @@
 }
 
 .writing-editor {
+  font-size: 15px;
+  line-height: 1.6;
+  letter-spacing: 0.005em;
+
   @media (--desktop) {
     margin: 0 -100px;
   }
+
+  .ce-code__textarea {
+    color: #41314e;
+    line-height: 1.6em;
+    font-size: 12px;
+    background: var(--color-bg-light);
+    border: 1px solid #f1f1f4;
+    box-shadow: none;
+  }
+
+  .ce-paragraph a {
+    color: inherit;
+  }
+
+  .ce-header {
+    @apply --font-serif;
+  }
 }
 
 .codex-editor__redactor .ce-block:first-of-type .ce-header {

src/frontend/styles/main.pcss

@@ -6,6 +6,7 @@
 @import './components/writing.pcss';
 @import './components/page.pcss';
 @import './components/landing.pcss';
+@import './components/auth.pcss';
 
 body {
   font-family: system-ui, Helvetica, Arial, Verdana;

src/frontend/styles/vars.pcss

@@ -1,16 +1,17 @@
 :root {
-  --color-text-main: #1D202B;
+  --color-text-main: #313649;
-  --color-text-second: #7B7E89;
+  --color-text-second: #5d6068;
   --color-line-gray: #E8E8EB;
-  --color-link-active: #388AE5;
+  --color-link-active: #2071cc;
-  --color-button-danger: #ff1629;
+  --color-button-danger: #ff5159;
+  --color-bg-light: #f8f7fa;
 
   /**
    * Site layout sizes
    */
-  --layout-padding-horisontal: 40px;
+  --layout-padding-horisontal: 30px;
-  --layout-padding-vertical: 40px;
+  --layout-padding-vertical: 30px;
-  --layout-width-aside: 200px;
+  --layout-width-aside: 300px;
   --layout-width-main-col: 650px;
 
   @media (--mobile) {
@@ -18,6 +19,13 @@
     --layout-padding-vertical: 15px;
   }
 
+  --font-mono: Menlo,Monaco,Consolas,Courier New,monospace;
+
+  --font-serif {
+    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans", Geneva, Arial, sans-serif;
+    letter-spacing: -0.03em;
+  }
+
   --button {
     display: inline-block;
     padding: 9px 15px;
@@ -30,6 +38,8 @@
     text-decoration: none;
     cursor: pointer;
     white-space: nowrap;
+    -webkit-appearance: none;
+    border: 0;
 
     svg {
       margin: 0 0.3em 0 -0.05em;

src/models/page.js

@@ -1,5 +1,5 @@
+const urlify = require('../utils/urlify');
 const { pages: pagesDb } = require('../utils/database/index');
-const translateString = require('../utils/translation');
 
 /**
  * @typedef {Object} PageData
@@ -116,14 +116,7 @@ class Page {
    * @return {string}
    */
   transformTitleToUri() {
-    return translateString(this.title
+    return urlify(this.title);
-      .replace(/ /g, ' ')
-      .replace(/[^a-zA-Z0-9А-Яа-яЁё ]/g, ' ')
-      .replace(/  +/g, ' ')
-      .trim()
-      .toLowerCase()
-      .split(' ')
-      .join('-'));
   }
 
   /**

src/routes/auth.js

@@ -16,7 +16,6 @@ const parseForm = express.urlencoded({ extended: false });
 router.get('/auth', csrfProtection, function (req, res) {
   res.render('auth', {
     title: 'Login page',
-    header: 'Enter password',
     csrfToken: req.csrfToken()
   });
 });

src/routes/middlewares/token.js

@@ -16,6 +16,7 @@ module.exports = async function verifyToken(req, res, next) {
   if (!userDoc) {
     res.locals.isAuthorized = false;
     next();
+    return;
   }
 
   jwt.verify(token, userDoc.passHash + config.secret, (err, decodedToken) => {

src/utils/twig.js

@@ -3,6 +3,7 @@
  */
 const twig = require('twig');
 const fs = require('fs');
+const urlify = require('./urlify');
 
 module.exports = (function () {
   'use strict';
@@ -17,4 +18,15 @@ module.exports = (function () {
   twig.extendFunction('svg', function (filename) {
     return fs.readFileSync(`${__dirname}/../frontend/svg/${filename}.svg`, 'utf-8');
   });
+
+  /**
+   * Convert text to URL-like string
+   * Example: "What is <mark>clean data</mark>" -> "what-is-clean-data"
+   *
+   * @param {string} string - source string with HTML
+   * @returns {string} alias-like string
+   */
+  twig.extendFilter('urlify', function (string) {
+    return urlify(string);
+  });
 }());

src/utils/urlify.js

@@ -0,0 +1,33 @@
+const translateString = require('./translation');
+
+/**
+ * Convert text to URL-like string
+ * Example: "What is <mark>clean data</mark>" -> "what-is-clean-data"
+ *
+ * @param {string} string - source string with HTML
+ * @returns {string} alias-like string
+ */
+module.exports = function urlify(string) {
+  // strip tags
+  string = string.replace(/(<([^>]+)>)/ig, '');
+
+  // remove nbsp
+  string = string.replace(/&nbsp;/g, ' ');
+
+  // remove all symbols except chars
+  string = string.replace(/[^a-zA-Z0-9А-Яа-яЁё ]/g, ' ');
+
+  // remove whitespaces
+  string = string.replace(/  +/g, ' ').trim();
+
+  // lowercase
+  string = string.toLowerCase();
+
+  // join words with hyphens
+  string = string.split(' ').join('-');
+
+  // translate
+  string = translateString(string);
+
+  return string;
+};

src/views/auth.twig

@@ -1,11 +1,16 @@
 {% extends 'layout.twig' %}
 
 {% block body %}
-  <h1>{{header}}</h1>
+  <form class="auth-form" method="post" action="/auth">
-  <form method="post" action="/auth">
+    <h1>
+      ┬┴┬┴┤ ͜ʖ ͡°) ├┬┴┬┴
+    </h1>
+    <p>
+      Enter a password to access pages editing
+    </p>
     <input type="hidden" name="_csrf" value={{csrfToken}}>
     <input type="password" name="password" placeholder="Password">
-    <input type="submit" value="login">
+    <input type="submit" value="Login">
   </form>
 {% endblock %}
 

src/views/pages/blocks/code.twig

@@ -1,2 +1,4 @@
-<pre class="block-code">{{ code|escape }}</pre>
+<div class="block-code">
+  <div class="block-code__content">{{ code|escape }}</div>
+</div>
 

src/views/pages/blocks/header.twig

@@ -1,3 +1,7 @@
-<h{{ level }} class="block-header block-header--{{ level }}">
+<a name="{{ text | urlify  }}" style="display: inline-block; position: absolute; margin-top: -20px;"></a>
-  {{ text }}
+<h{{ level }} class="block-header block-header--{{ level }} block-header--anchor">
+  <a href="#{{ text | urlify  }}">
+    {{ text }}
+  </a>
 </h{{ level }}>
+

src/views/pages/form.twig

@@ -25,8 +25,12 @@
             {% for _page in pagesAvailable %}
               {% if _page._id != currentPageId %}
                 <option value="{{ _page._id }}" {{ page is not empty and page._parent == _page._id ? 'selected' : ''}}>
-                {{ _page.title }}
+                  {% if _page._parent != "0" %}
-              </option>
+                    &nbsp;
+                    &nbsp;
+                  {% endif %}
+                  {{ _page.title }}
+                </option>
               {% endif %}
             {% endfor %}
           </select>