feat: remove external css resources

client/components/admin/admin-navigation.vue

@@ -76,8 +76,10 @@
                     :label='$t("navigation.icon")'
                     prepend-icon='casino'
                     v-model='current.icon'
+                    hide-details
                   )
-                  v-select(
+                  .caption.pt-2.pl-5 Refer to the #[a(href='https://material.io/tools/icons/?style=baseline', target='_blank') Material Design Icons Reference] for the list of all possible values.
+                  v-select.mt-4(
                     outline
                     :label='$t("navigation.targetType")'
                     prepend-icon='near_me'

client/components/editor/editor-markdown.vue

@@ -51,14 +51,14 @@
         span Horizontal Bar
     .editor-markdown-main
       .editor-markdown-sidebar
-        //- v-tooltip(right)
-        //-   v-btn(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0
-        //-     v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') image
-        //-   span Insert Media
         v-tooltip(right, color='primary')
           v-btn(icon, slot='activator', dark).mx-0
-            v-icon image
-          span Insert Media
+            v-icon link
+          span Insert Link
+        v-tooltip(right)
+          v-btn(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0
+            v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') image
+          span Insert Image
         v-tooltip(right, color='primary')
           v-btn(icon, slot='activator', dark).mx-0
             v-icon insert_drive_file
@@ -75,15 +75,15 @@
           v-btn(icon, slot='activator', dark).mx-0
             v-icon functions
           span Insert Math Expression
-        v-tooltip(right, color='primary')
-          v-btn(icon, slot='activator', dark).mx-0
-            v-icon link
-          span Insert Link
-        v-spacer
         v-tooltip(right, color='primary')
           v-btn(icon, slot='activator', dark).mx-0
             v-icon border_outer
           span Table Helper
+        v-spacer
+        v-tooltip(right, color='primary')
+          v-btn(icon, slot='activator', dark, @click='toggleFullscreen').mx-0
+            v-icon crop_free
+          span Fullscreen Editor
         v-tooltip(right, color='primary')
           v-btn(icon, slot='activator', dark).mx-0
             v-icon help
@@ -124,10 +124,7 @@ import 'codemirror/addon/selection/active-line.js'
 import 'codemirror/addon/display/fullscreen.js'
 import 'codemirror/addon/display/fullscreen.css'
 import 'codemirror/addon/selection/mark-selection.js'
-import 'codemirror/addon/scroll/annotatescrollbar.js'
-import 'codemirror/addon/search/matchesonscrollbar.js'
 import 'codemirror/addon/search/searchcursor.js'
-import 'codemirror/addon/search/match-highlighter.js'
 
 // Markdown-it
 import MarkdownIt from 'markdown-it'
@@ -296,6 +293,9 @@ export default {
     }, 500),
     toggleAround (before, after) {
 
+    },
+    toggleFullscreen () {
+      this.cm.setOption('fullScreen', true)
     }
   }
 }

client/components/editor/editor-modal-media.vue

@@ -2,25 +2,97 @@
   v-card.editor-modal-media.animated.fadeInLeft(flat, tile)
     v-container.pa-3(grid-list-lg, fluid)
       v-layout(row, wrap)
-        v-flex(xs3)
+        v-flex(xs9)
           v-card.radius-7.animated.fadeInLeft.wait-p1s(light)
             v-card-text
-              file-pond(
+              v-toolbar.radius-7(color='teal lighten-5', dense, flat)
+                .body-2.teal--text Images
+                v-spacer
+                v-btn(outline, small, color='teal')
+                  v-icon(left) keyboard_backspace
+                  span Parent Folder
+                v-btn(outline, small, color='teal')
+                  v-icon(left) add
+                  span New Folder
+              v-list.mt-3(dense, two-line)
+                template(v-for='(item, idx) of [1,2,3,4,5,6,7,8,9,10]')
+                  v-list-tile(@click='')
+                    v-list-tile-avatar
+                      v-avatar.radius-7(color='teal', tile)
+                        v-icon(dark) image
+                    v-list-tile-content
+                      v-list-tile-title Image {{item}}
+                      v-list-tile-sub-title 1024x768, 10 KBs
+                    v-list-tile-action
+                      .caption.pr-3 2019-04-07
+                    v-list-tile-action
+                      v-chip(label, small) JPG
+                  v-divider(v-if='idx < 10 - 1')
+              .d-flex.mt-3
+                v-toolbar.radius-7(flat, color='grey lighten-4', dense)
+                  .body-2 / universe
+                  v-spacer
+                  .body-1.grey--text.text--darken-1 10 files
+                v-btn.ml-3(color='teal', dark, @click='insert')
+                  v-icon(left) save_alt
+                  span Insert
+
+        v-flex(xs3)
+          v-card.radius-7.animated.fadeInRight.wait-p3s(light)
+            v-card-text
+              v-toolbar.radius-7(color='teal lighten-5', dense, flat)
+                v-icon.mr-3(color='teal') cloud_upload
+                .body-2.teal--text Upload Images
+              file-pond.mt-3(
                 name='mediaUpload'
                 ref='pond'
-                label-idle='Drop files here...'
+                label-idle='Browse or Drop files here...'
                 allow-multiple='true'
                 accepted-file-types='image/jpeg, image/png'
                 :files='files'
               )
-        v-flex(xs9)
-          v-card.radius-7.animated.fadeInLeft.wait-p3s(light)
-            v-card-text Beep boop
+            v-divider
+            v-card-actions.pa-3
+              .caption.grey--text.text-darken-2 Max 20 files, 5 MB each
+              v-spacer
+              v-btn(color='teal', dark) Upload
+
+          v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(light)
+            v-card-text.pb-0
+              v-toolbar.radius-7(color='teal lighten-5', dense, flat)
+                v-icon.mr-3(color='teal') cloud_download
+                .body-2.teal--text Fetch Remote Image
+              v-text-field.mt-3(
+                v-model='remoteImageUrl'
+                outline
+                single-line
+                background-color='grey lighten-2'
+                placeholder='https://example.com/image.jpg'
+              )
+            v-divider
+            v-card-actions.pa-3
+              .caption.grey--text.text-darken-2 Max 5 MB
+              v-spacer
+              v-btn(color='teal', dark) Fetch
+
+          v-card.mt-3.radius-7.animated.fadeInRight.wait-p4s(light)
+            v-card-text.pb-0
+              v-toolbar.radius-7(color='teal lighten-5', dense, flat)
+                v-icon.mr-3(color='teal') format_align_left
+                .body-2.teal--text Alignment
+              v-select.mt-3(
+                v-model='imageAlignment'
+                :items='imageAlignments'
+                outline
+                single-line
+                background-color='grey lighten-2'
+                placeholder='None'
+              )
 </template>
 
 <script>
 // import _ from 'lodash'
-// import { sync } from 'vuex-pathify'
+import { sync } from 'vuex-pathify'
 import vueFilePond from 'vue-filepond'
 import 'filepond/dist/filepond.min.css'
 
@@ -42,16 +114,28 @@ export default {
   },
   data() {
     return {
-      files: []
+      files: [],
+      remoteImageUrl: '',
+      imageAlignments: [
+        { text: 'None', value: '' },
+        { text: 'Centered', value: 'center' },
+        { text: 'Right', value: 'right' },
+        { text: 'Absolute Top Right', value: 'abstopright' }
+      ],
+      imageAlignment: ''
     }
   },
   computed: {
     isShown: {
       get() { return this.value },
       set(val) { this.$emit('input', val) }
-    }
+    },
+    activeModal: sync('editor/activeModal')
   },
   methods: {
+    insert () {
+      this.activeModal = ''
+    }
   }
 }
 </script>

client/components/login.vue

@@ -376,10 +376,6 @@ export default {
       display: flex;
     }
 
-    h1 {
-      font-family: 'Varela Round' !important;
-    }
-
     .social-login-btn {
       display: inline-flex;
       justify-content: center;

client/components/register.vue

@@ -297,10 +297,6 @@ export default {
       display: flex;
     }
 
-    h1 {
-      font-family: 'Varela Round' !important;
-    }
-
     .v-text-field.centered input {
       text-align: center;
     }

client/scss/app.scss

@@ -1,6 +1,7 @@
 @import "global";
 
 @import "base/base";
+@import "base/fonts";
 @import "base/icons";
 @import "base/animation";
 

client/scss/base/fonts.scss

@@ -0,0 +1,79 @@
+@font-face {
+  font-family: 'Roboto';
+  src: url('/fonts/Roboto-MediumItalic.woff2') format('woff2'),
+      url('/fonts/Roboto-MediumItalic.woff') format('woff');
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/fonts/Roboto-Italic.woff2') format('woff2'),
+      url('/fonts/Roboto-Italic.woff') format('woff');
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/fonts/Roboto-Bold.woff2') format('woff2'),
+      url('/fonts/Roboto-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('/fonts/SourceSansPro-Bold.woff2') format('woff2'),
+      url('/fonts/SourceSansPro-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/fonts/Roboto-Regular.woff2') format('woff2'),
+      url('/fonts/Roboto-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/fonts/Roboto-BoldItalic.woff2') format('woff2'),
+      url('/fonts/Roboto-BoldItalic.woff') format('woff');
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('/fonts/SourceSansPro-BoldItalic.woff2') format('woff2'),
+      url('/fonts/SourceSansPro-BoldItalic.woff') format('woff');
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('/fonts/SourceSansPro-Regular.woff2') format('woff2'),
+      url('/fonts/SourceSansPro-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('/fonts/Roboto-Medium.woff2') format('woff2'),
+      url('/fonts/Roboto-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('/fonts/SourceSansPro-Italic.woff2') format('woff2'),
+      url('/fonts/SourceSansPro-Italic.woff') format('woff');
+  font-weight: normal;
+  font-style: italic;
+}

client/scss/base/icons.scss

@@ -1,3 +1,38 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'),
+    local('MaterialIcons-Regular'),
+    url(/fonts/MaterialIcons-Regular.woff2) format('woff2'),
+    url(/fonts/MaterialIcons-Regular.woff) format('woff');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-flex;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
+
 .icons {
   display: inline-block;
   color: mc('grey', '800');

client/static/fonts/stylesheet.css

@@ -0,0 +1,80 @@
+@font-face {
+    font-family: 'Roboto';
+    src: url('Roboto-MediumItalic.woff2') format('woff2'),
+        url('Roboto-MediumItalic.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Roboto';
+    src: url('Roboto-Italic.woff2') format('woff2'),
+        url('Roboto-Italic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Roboto';
+    src: url('Roboto-Bold.woff2') format('woff2'),
+        url('Roboto-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    src: url('SourceSansPro-Bold.woff2') format('woff2'),
+        url('SourceSansPro-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Roboto';
+    src: url('Roboto-Regular.woff2') format('woff2'),
+        url('Roboto-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Roboto';
+    src: url('Roboto-BoldItalic.woff2') format('woff2'),
+        url('Roboto-BoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    src: url('SourceSansPro-BoldItalic.woff2') format('woff2'),
+        url('SourceSansPro-BoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    src: url('SourceSansPro-Regular.woff2') format('woff2'),
+        url('SourceSansPro-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Roboto';
+    src: url('Roboto-Medium.woff2') format('woff2'),
+        url('Roboto-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Source Sans Pro';
+    src: url('SourceSansPro-Italic.woff2') format('woff2'),
+        url('SourceSansPro-Italic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+}
+