Merge pull request #3 from Dual-Ice/week3

Week3

package.json

@@ -64,6 +64,7 @@
     "signale": "^1.4.0",
     "vue": "^2.6.7",
     "vue-carousel": "^0.18.0",
-    "vue-router": "^3.0.2"
+    "vue-router": "^3.0.2",
+    "vuelidate": "^0.7.5"
   }
 }

src/admin/App.vue

@@ -1,3 +1,130 @@
 <template lang="pug">
-  h1 Welcome to the Vue App
-</template>
+  .root-container
+    header.header-container
+      Header
+    nav.nav-container
+      Navigation
+    main.content-container
+      router-view
+
+</template>
+<script>
+import Header from "./components/Header"
+import Navigation from "./components/Navigation"
+import About from "./components/About/About"
+import Works from "./components/Works/Works"
+import Reviews from "./components/Reviews/Reviews"
+
+export default {
+  components: {
+    Header,
+    Navigation,
+    About,
+    Works,
+    Reviews
+  }  
+}
+</script>
+<style lang="postcss">
+@import "normalize.css";
+@import "../styles/mixins.pcss";
+@import "../styles/layout/base.pcss";
+@import "../styles/layout/fonts.pcss";
+
+  .divider {
+    margin: 0;
+    background-color: #1f232d;
+    opacity: 0.15;
+  }
+
+  .admin-wrapper {
+    display: flex;
+
+    .maincontent {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+  }
+
+  .container {
+    max-width: 1080px;
+    /* width: 90%; */
+  }
+
+  .root-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    color: $admin-font;
+  }
+
+  .header-container {
+    padding: 17px 0;
+    background-image: linear-gradient(to right, #3e3e59 0%, #454573 100%);
+  }
+
+  .page-title {
+    font-size: 21px;
+    font-weight: 700;
+    margin-bottom: 60px;
+
+    @include tablets {
+      margin-bottom: 50px;
+    }
+
+    @include phonesLg {
+      font-size: 18px;
+      margin-bottom: 40px;
+    }
+  }
+
+  .nav-container {
+    background: $white;
+  }
+
+  .content-container {
+    background: url("../images/bg/bg-admin.jpg") center center /cover no-repeat;
+    flex: 1;
+    padding-top: 60px;
+  }
+
+  .form__btn {
+    color: $white;
+    font-weight: 700;
+    text-transform: uppercase;
+    padding: 20px 40px;
+    background-image: linear-gradient(to right, #006aed 0%, #3f35cb 100%);
+    border-radius: 30px;
+
+    @include phonesLg {
+      font-size: 14px;
+    }
+
+    &--big {
+      padding: 20px 35px;
+      border-radius: 35px;
+    }
+
+    &--plain {
+      text-transform: initial;
+      background: transparent;
+      color: #383bcf;
+      margin-right: 10px;
+      padding: 20px 30px;
+    }
+  }
+    
+  .card {
+    box-shadow: 4px 3px 20px rgba(0, 0, 0, 0.07);
+    background-color: $white;
+  }
+
+  .blocked {
+    opacity: 0.5;
+    filter: grayscale(100%);
+    pointer-events: none;
+    user-select: none;
+  }
+</style>

src/admin/components/About/About.vue

@@ -0,0 +1,161 @@
+<template lang="pug">
+  .about
+    .about__header
+      .container.about__header-container
+        h1.page-title.about__title Блок «Обо мне»
+        .about__header-btn
+          AddBtn(
+            text="Добавить группу"
+            size="small"
+            type='button'
+            @click="showAddSkillGroup = true")
+    .about__content
+      .container.about__content-container
+        ul.skill-group__list
+          li.skill-group__item(v-if="showAddSkillGroup")
+            SkillGroup(:value="emptySkillGroup")
+          li(
+            v-for="skillGroup in skillGroups"
+            :key="skillGroup.id"
+          ).skill-group__item
+            SkillGroup(
+              :value="skillGroup"
+            )
+</template>
+<script>
+import AddBtn from "../AddBtn"
+import SkillGroup from "./SkillGroup"
+export default {
+  components: {
+    AddBtn,
+    SkillGroup
+  },
+
+  data () {
+    return {
+      skillGroups: [
+        {
+          "id": 1,
+          "title": "Frontend",
+          "skills": [
+            {
+              "id": 1,
+              "title": "HTML5",
+              "percent": 100
+            },
+            {
+              "id": 2,
+              "title": "CSS3",
+              "percent": 50
+            },
+            {
+              "id": 3,
+              "title": "JavaScript",
+              "percent": 25
+            },
+            {
+              "id": 4,
+              "title": "VueJs",
+              "percent": 30
+            }
+          ]
+        },
+        {
+          "id": 2,
+          "title": "Workflow",
+          "skills": [
+            {
+              "id": 1,
+              "title": "GIT",
+              "percent": 45
+            },
+            {
+              "id": 2,
+              "title": "Terminal",
+              "percent": 60
+            },
+            {
+              "id": 3,
+              "title": "Gulp",
+              "percent": 30
+            },
+            {
+              "id": 4,
+              "title": "Webpack",
+              "percent": 75
+            }
+          ]
+        }
+      ],
+      emptySkillGroup: {
+        id: '',
+        title: '',
+        skills: []
+      },
+      showAddSkillGroup: false
+    }
+  }
+  
+}
+</script>
+<style lang="postcss" scoped>
+  @import "../../../styles/mixins.pcss";
+
+  .about__header {
+    margin-bottom: 60px;
+
+    @include phonesLg {
+      margin-bottom: 40px;
+    }
+  }
+
+  .about__header-container {
+    display: flex;
+
+    @include phonesLg {
+      flex-direction: column;
+    }
+  }
+
+  .about__title {
+    margin-right: 60px;
+    margin-bottom: 0;
+
+    @include phonesLg {
+      margin-right: 0;
+      margin-bottom: 30px;
+    }
+  }
+
+  .about__header-btn {
+    display: flex;
+  }
+
+  .about__content-container {
+    @include phonesLg {
+      width: 100%;
+    }
+  }
+
+  .skill-group__list {
+    display: flex;
+    margin-left: -30px;
+    flex-wrap: wrap;
+  }
+
+  .skill-group__item {
+    width: calc(100% / 2 - 30px);
+    margin-left: 30px;
+    margin-bottom: 30px;
+    display: flex;
+
+    @include phonesLg {
+      width: 100%;
+      margin-bottom: 10px;
+            
+      &:last-child {
+        margin-bottom: 25px;
+      }
+    }
+  }
+</style>