Init Blog pages and styles

assets/scss/_bulma.scss

@@ -1,3 +1,7 @@
+@import '~bulma/sass/utilities/initial-variables';
+@import '~bulma/sass/utilities/functions';
+
+
 $primary: #4bacff;
 $danger: #dc5222;
 

assets/scss/_variables.scss

@@ -0,0 +1,8 @@
+$dark-grey: #505763;
+$blue: #4bacff;
+$primary: $blue;
+
+
+$color-black: #000000;
+$color-white: #ffffff;
+$color-grey: #dddddd;

assets/scss/editor/_editor.scss

@@ -0,0 +1,260 @@
+.blog-editor-container {
+  font-size: 20px;
+  color: #414141;
+  line-height: 1.5;
+
+  * {
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .button {
+    font-weight: bold;
+    display: inline-flex;
+    background: transparent;
+    border: 0;
+    color: $color-black;
+    padding: 0.2rem 0.5rem;
+    margin-right: 0.2rem;
+    border-radius: 3px;
+    cursor: pointer;
+    background-color: rgba($color-black, 0.1);
+
+    &:hover {
+      background-color: rgba($color-black, 0.15);
+    }
+  }
+
+  .message {
+    background-color: rgba($color-black, 0.05);
+    color: rgba($color-black, 0.7);
+    padding: 1rem;
+    border-radius: 6px;
+    margin-bottom: 1.5rem;
+    font-style: italic;
+  }
+}
+
+.editor {
+  position: relative;
+
+  &.editor-squished {
+    max-width: 800px;
+    margin: 0 auto 5rem auto;
+  }
+
+  *.is-empty:nth-child(1)::before,
+  *.is-empty:nth-child(2)::before,
+  *.is-empty:nth-child(3)::before {
+    content: attr(data-empty-text);
+    float: left;
+    color: #aaa;
+    pointer-events: none;
+    height: 0;
+    font-style: italic;
+  }
+
+  &__content {
+    word-wrap: break-word;
+
+    * {
+      caret-color: currentColor;
+    }
+
+    h1 {
+      font-size: 50px;
+      font-weight: bold;
+    }
+
+    h2 {
+      font-size: 1.5em;
+      // font-weight: bold;
+      color: rgba(0,0,0,.54);
+    }
+
+    h3 {
+      font-size: 1.17em;
+      font-weight: bold;
+    }
+
+    hr {
+      background-color: black;
+    }
+
+    pre {
+      padding: 0.7rem 1rem;
+      border-radius: 5px;
+      background: $color-black;
+      color: $color-white;
+      font-size: 1.1rem;
+      overflow-x: auto;
+
+      code {
+        display: block;
+      }
+    }
+
+    p code {
+      display: inline-block;
+      padding: 0 0.4rem;
+      border-radius: 5px;
+      font-size: 1.1rem;
+      font-weight: bold;
+      background: rgba($color-black, 0.1);
+      color: rgba($color-black, 0.8);
+    }
+
+    p {
+      min-height: 30px;
+      font-size: 21px;
+      line-height: 1.58;
+      letter-spacing: -.003em;
+    }
+
+    ul {
+      list-style: disc;
+    }
+
+    ul,
+    ol {
+      padding-left: 1rem;
+    }
+
+    li > p,
+    li > ol,
+    li > ul {
+      margin: 0;
+    }
+
+    a {
+      color: inherit;
+    }
+
+    blockquote {
+      border-left: 3px solid rgba($color-black, 0.1);
+      color: rgba($color-black, 0.8);
+      padding-left: 0.8rem;
+      font-style: italic;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    img {
+      max-width: 100%;
+      border-radius: 3px;
+    }
+
+    table {
+      border-collapse: collapse;
+      table-layout: fixed;
+      width: 100%;
+      margin: 0;
+      overflow: hidden;
+
+      td, th {
+        min-width: 1em;
+        border: 2px solid $color-grey;
+        padding: 3px 5px;
+        vertical-align: top;
+        box-sizing: border-box;
+        position: relative;
+        > * {
+          margin-bottom: 0;
+        }
+      }
+
+      th {
+        font-weight: bold;
+        text-align: left;
+      }
+
+      .selectedCell:after {
+        z-index: 2;
+        position: absolute;
+        content: "";
+        left: 0; right: 0; top: 0; bottom: 0;
+        background: rgba(200, 200, 255, 0.4);
+        pointer-events: none;
+      }
+
+      .column-resize-handle {
+        position: absolute;
+        right: -2px; top: 0; bottom: 0;
+        width: 4px;
+        z-index: 20;
+        background-color: #adf;
+        pointer-events: none;
+      }
+    }
+
+    .tableWrapper {
+      margin: 1em 0;
+      overflow-x: auto;
+    }
+
+    .resize-cursor {
+      cursor: ew-resize;
+      cursor: col-resize;
+    }
+  }
+
+  pre {
+    &::before {
+      content: attr(data-language);
+      text-transform: uppercase;
+      display: block;
+      text-align: right;
+      font-weight: bold;
+      font-size: 0.6rem;
+    }
+    code {
+      .hljs-comment,
+      .hljs-quote {
+        color: #999999;
+      }
+      .hljs-variable,
+      .hljs-template-variable,
+      .hljs-attribute,
+      .hljs-tag,
+      .hljs-name,
+      .hljs-regexp,
+      .hljs-link,
+      .hljs-name,
+      .hljs-selector-id,
+      .hljs-selector-class {
+        color: #f2777a;
+      }
+      .hljs-number,
+      .hljs-meta,
+      .hljs-built_in,
+      .hljs-builtin-name,
+      .hljs-literal,
+      .hljs-type,
+      .hljs-params {
+        color: #f99157;
+      }
+      .hljs-string,
+      .hljs-symbol,
+      .hljs-bullet {
+        color: #99cc99;
+      }
+      .hljs-title,
+      .hljs-section {
+        color: #ffcc66;
+      }
+      .hljs-keyword,
+      .hljs-selector-tag {
+        color: #6699cc;
+      }
+      .hljs-emphasis {
+        font-style: italic;
+      }
+      .hljs-strong {
+        font-weight: 700;
+      }
+    }
+  }
+}

assets/scss/editor/_index.scss

@@ -0,0 +1,3 @@
+@import "./editor";
+@import "./menu_bar";
+@import './menu_bubble';

assets/scss/editor/_menu_bar.scss

@@ -0,0 +1,44 @@
+
+.menubar {
+
+  border-radius: 5px;
+  margin-bottom: 1rem;
+  background-color: $color-black;
+  padding: 10px;
+  transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s;
+
+  &.is-hidden {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &.is-focused {
+    visibility: visible;
+    opacity: 1;
+    transition: visibility 0.2s, opacity 0.2s;
+  }
+
+  &__button {
+    font-weight: bold;
+    display: inline-flex;
+    background: transparent;
+    border: 0;
+    color: $color-white;
+    padding: 0.2rem 0.5rem;
+    margin-right: 0.2rem;
+    border-radius: 3px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: rgba($color-black, 0.05);
+    }
+
+    &.is-active {
+      background-color: rgba($color-black, 0.1);
+    }
+  }
+
+  span#{&}__button {
+    font-size: 13.3333px;
+  }
+}

assets/scss/editor/_menu_bubble.scss

@@ -0,0 +1,53 @@
+.menububble {
+  position: absolute;
+  display: flex;
+  z-index: 20;
+  background: $color-black;
+  border-radius: 5px;
+  padding: 0.3rem;
+  margin-bottom: 0.5rem;
+  transform: translateX(-50%);
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s, visibility 0.2s;
+
+  &.is-active {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &__button {
+    display: inline-flex;
+    background: transparent;
+    border: 0;
+    color: $color-white;
+    padding: 0.2rem 0.5rem;
+    margin-right: 0.2rem;
+    border-radius: 3px;
+    cursor: pointer;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:hover {
+      background-color: rgba($color-white, 0.1);
+    }
+
+    &.is-active {
+      background-color: rgba($color-white, 0.2);
+    }
+  }
+
+  &__form {
+    display: flex;
+    align-items: center;
+  }
+
+  &__input {
+    font: inherit;
+    border: none;
+    background: transparent;
+    color: $color-white;
+  }
+}

assets/scss/main.scss

@@ -1,3 +1,5 @@
+@import "./variables";
 @import "./bulma";
 @import "./spacing";
-@import "./instructor_header";
+@import "./instructor_header";
+@import "./editor/index";

components/shared/Navbar.vue

@@ -28,7 +28,7 @@
         <nuxt-link to="#" class="navbar-item">
           Courses
         </nuxt-link>
-        <nuxt-link to="#" class="navbar-item">
+        <nuxt-link to="/blogs" class="navbar-item">
           Blogs
         </nuxt-link>
         <nuxt-link to="#" class="navbar-item">

pages/blogs.vue

@@ -0,0 +1,249 @@
+<template>
+  <div>
+    <div class="main-content">
+      <div class="container">
+        <div class="columns is-mobile">
+          <!-- posts -->
+          <div class="column is-8">
+            <!-- blog -->
+            <div class="section">
+              <div class="post">
+                <div @click="() => {}" class="post-header clickable">
+                  <h4 class="title is-4">Some Blog Title</h4>
+                  <h5 class="subtitle is-5">Some Blog Subtitle</h5>
+                </div>
+                <div class="post-content">
+                  by Filip Jerga, Jul 1
+                </div>
+              </div>
+            </div>
+            <div class="section">
+              <div class="post">
+                <div @click="() => {}" class="post-header clickable">
+                  <h4 class="title is-4">Some Blog Title</h4>
+                  <h5 class="subtitle is-5">Some Blog Subtitle</h5>
+                </div>
+                <div class="post-content">
+                  by Filip Jerga, Jul 1
+                </div>
+              </div>
+            </div>
+            <!-- end of blog -->
+            <!-- pagination -->
+            <div class="section">
+            </div>
+            <!-- end of pagination -->
+          </div>
+          <!-- side bar -->
+          <div class="column is-4 is-narrow">
+            <!-- featured -->
+            <div class="section">
+              <div class="sidebar">
+                <div class="sidebar-header">
+                  <h4 class="title is-4">Featured Posts</h4>
+                </div>
+                <div class="sidebar-list">
+                  <!-- Featured Blogs -->
+                  <p>
+                    <nuxt-link :to="``">Some favorite blog</nuxt-link>
+                  </p>
+                  <!-- Featured Blogs -->
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- end of side bar -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+}
+</script>
+<style scoped>
+.post-content {
+  font-style: italic;
+}
+.pagination-content {
+  display: flex;
+  justify-content: flex-end;
+}
+.clickable {
+  cursor: pointer;
+}
+#root {
+    flex: 1 0 auto;
+}
+*:focus {
+    outline: none;
+}
+a {
+    transition: all .35s;
+    color: #000;
+}
+.button:focus {
+    border-color: #d74436;
+    box-shadow: 0 0 0 0;
+}
+.input, .textarea, .input[type] {
+    font-size: 1.1rem;
+}
+.input:focus, .textarea:focus, .input[type]:focus {
+    border: 2px solid #d74436;
+}
+/* this is used when inline-styled content
+   overlaps text backgrounds in a really ugly way */
+.buffer {
+    padding-bottom: 1.1rem;
+}
+/* navigation */
+.nav {
+    background-color: #0d0c0d;
+}
+.nav-left {
+    padding-left: 2rem;
+}
+.nav-right, .nav-center {
+    padding-right: 2rem;
+}
+a.nav-item.is-tab {
+    font-weight: 700;
+    font-size: 13px;
+    text-transform: uppercase;
+    color: #fff;
+    padding: 0.4rem;
+}
+a.nav-item:hover {
+    color: #d74436;
+}
+a.nav-item.is-tab:hover {
+    border-bottom: 4px solid #d74436;
+}
+/* main content */
+.main-content {
+    padding: 4rem 0 2rem 0;
+    min-height: 800px
+}
+.main-content .container {
+    padding: 0 2rem 2rem 2rem;
+}
+/* section */
+.section {
+    padding: 0 0 2rem 0;
+}
+.section-header {
+    padding-bottom: 3rem;
+}
+.section-header .title {
+    text-transform: uppercase;
+    color: #4a4a4a;
+    font-size: 1.3rem;
+}
+.section-header a {
+    color: #d74436;
+    font-weight: 700;
+}
+.section-header a:hover {
+    color: #e50076;
+}
+/* sidebar */
+.sidebar-header {
+    border-color: #d74436;
+    padding-bottom: 1rem;
+    border-bottom: 4px solid #d74436;
+}
+.sidebar-header .title, .sidebar-header-single .title {
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: 1.3rem;
+}
+.sidebar-list p, .sidebar-list-single p {
+    font-size: 1.1rem;
+    font-weight: 300;
+    padding-bottom: 0.8rem;
+}
+.sidebar-list a {
+    color: #4a4a4a;
+}
+.sidebar-list, .post-content, .sidebar-list-single {
+    padding-top: 1.4rem;
+}
+.sidebar-list-nav {
+    padding-top: 1rem;
+}
+.sidebar-list-nav .is-tab {
+    padding-right: 1rem;
+}
+.sidebar-footer-single {
+    padding-top: 2rem;
+}
+.sidebar-footer-single a {
+    color: #000;
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: 1.1rem;
+    border-right: 4px solid #d74436;
+    padding-right: 1rem;
+}
+.sidebar-footer-single a:hover {
+    color: #363636;
+}
+/* post */
+.post-header, .sidebar-header-single {
+    border-color: #d74436;
+    padding-left: 1rem;
+    border-left: 4px solid #d74436;
+}
+.post-header .title {
+    font-weight: 700;
+    font-size: 1.8rem;
+    color: rgba(0,0,0,.84)!important;
+    fill: rgba(0,0,0,.84)!important;
+}
+.post-header .subtitle, .sidebar-header-single .subtitle {
+    font-size: 1.1rem;
+}
+.post-content p, .post-single-content p {
+    margin-bottom: 0.8rem;
+}
+.post-content, .post-single-content {
+    font-size: 1.1rem;
+    font-weight: 300;
+}
+/* override */
+.post-single-content form p:nth-child(even) {
+    border-right: 0;
+}
+.post-single-content form label {
+    text-transform: uppercase;
+    color: #4a4a4a;
+    padding-bottom: 0.2rem;
+}
+.post-single-content form .input[type] {
+    padding-top: 0.2rem;
+}
+.post-single-content p:nth-child(even) {
+    border-right: 4px solid #d74436;
+    padding-right: 1rem;
+}
+.post-content a {
+    color: #d74436;
+}
+.card-content-form form {
+    padding-top: 1.5rem;
+}
+.post-footer {
+    padding: 1.5rem 0 0 0;
+}
+/* pagination */
+.pagination-content {
+    border-right: 4px solid #d74436;
+    padding-right: 1rem;
+}
+.pagination-link.is-current {
+    background-color: #d74436;
+    border-color: #d74436;
+}
+</style>

pages/instructor/blog/editor.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <Header
+      title="Write your Blogs"
+      exitLink="/instructor/blogs"
+    />
+    <div class="blog-editor-container">
+      <div class="container">
+        Editor
+        <!-- Editor Component here! -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Header from '~/components/shared/Header'
+export default {
+  layout: 'instructor',
+  components: {
+    Header
+  }
+}
+</script>
+<style lang="scss">
+  .blog-editor-container {
+    padding-top: 60px;
+  }
+</style>

pages/instructor/blogs/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <Header
+      title="Manage your Blogs"
+      exitLink="/"
+    />
+    <div class="instructor-blogs">
+      <div class="container">
+        <div class="section">
+          <div class="header-block">
+            <h2>Your Stories</h2>
+            <div class="title-menu">
+              <button @click="$router.push('/instructor/blog/editor')" class="button">Write a story</button>
+            </div>
+          </div>
+          <div class="tabs">
+            <ul>
+              <li><a>Drafts</a></li>
+              <li><a>Published</a></li>
+            </ul>
+          </div>
+          <div class="blogs-container">
+            <template>
+              <div>
+                <div class="blog-card">
+                  <h2>Some Title</h2>
+                  <div class="blog-card-footer">
+                    <span>
+                      Last Edited 17th December, 2018
+                    </span>
+                    <!-- Dropdown with menu here -->
+                  </div>
+                </div>
+                <div class="blog-card">
+                  <h2>Some Title</h2>
+                  <div class="blog-card-footer">
+                    <span>
+                      Last Edited 17th December, 2018
+                    </span>
+                    <!-- Dropdown with menu here -->
+                  </div>
+                </div>
+              </div>
+              <!-- In case of no drafts blogs  -->
+              <!-- <div class="blog-error">
+                No Drafts :(
+              </div> -->
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Header from '~/components/shared/Header'
+export default {
+  layout: 'instructor',
+  components: {Header}
+}
+</script>
+
+<style scoped lang="scss">
+  .blog-error {
+    font-size: 35px;
+  }
+  .blog-card {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 20px 0;
+    > h2 {
+      font-size: 30px;
+      font-weight: bold;
+    }
+    &-footer {
+      color: rgba(0, 0, 0, 0.54);
+    }
+    &.featured {
+      border-left: 5px solid #3cc314;
+      padding-left: 10px;
+      transition: border ease-out 0.2s;
+    }
+  }
+  .header-block {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    > h2 {
+      font-size: 40px;
+      font-weight: bold;
+    }
+    .title-menu {
+      margin-left: auto;
+    }
+  }
+</style>

pages/instructor/index.vue

@@ -12,7 +12,7 @@
           </div>
         </div>
         <!-- Go to /instructor/blogs -->
-        <div class="box" @click="() => {}">
+        <div class="box" @click="() => $router.push('/instructor/blogs')">
           <div>
             Blogs
           </div>