Merge pull request #46 from VanishMax/develop

Release before architecture changes
Innopoints · Sep 3, 2019 · 1b1dd6a · 1b1dd6a
2 parents bcd9547 + def343a
commit 1b1dd6a
Show file tree

Hide file tree

Showing 250 changed files with 12,958 additions and 80 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -44,6 +44,10 @@ module.exports = {
     "vue/require-v-for-key": ["error"],
     "vue/singleline-html-element-content-newline": "off",
     "indent": "off",
-    "no-console": ["warn"]
+    "vue/html-self-closing": ["warn", {
+      "html": { "void": "always" }
+    }],
+    "no-console": ["warn"],
+    "comma-dangle": ["warn", "always-multiline"]
   }
 }
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,8 @@ node_modules
 npm-debug.log
 .nuxt
 .idea
+.vscode
 .DS_Store
 dist
 package-lock.json
+webpack.config.js
diff --git a/README.md b/README.md
@@ -4,5 +4,27 @@ The application is based on the Nuxt.js template structure
 with some additions. ESLint will help you follow codestyle
 guidelines.
 
+### Installation
+
+To install dependencies:
+```
+npm install
+```
+
+Run on development:
+```
+npm run dev
+```
+
+Check projects with linter:
+```
+npm run lint
+```
+
+Run optimized production build:
+```
+npm start
+```
+
 ### License
 This project is licensed under the terms of the [MIT license](https://github.com/VanishMax/innopoints-frontend/blob/master/LICENSE)
diff --git a/components/README.md b/components/README.md
diff --git a/components/footer.vue b/components/footer.vue
@@ -0,0 +1,82 @@
+<template>
+  <footer>
+    <div class="to-top">
+      <Button
+        @click="scrollToTop"
+        img="/images/icons/arrow-up.svg"
+        label="back to top"
+        filled
+      />
+    </div>
+    <div class="container space-between">
+      <div class="left space-between">
+        <div>
+          <nuxt-link to="/" class="title-container">
+            <Logo class="logo" />
+            <span class="title">Innopoints</span>
+          </nuxt-link>
+          <div class="socials space-between">
+            <a href="https://vk.com/innopolisu" target="_blank">
+              <img src="/images/footer/vk.svg" />
+            </a>
+            <a href="https://www.facebook.com/InnopolisU" target="_blank">
+              <img src="/images/footer/facebook.svg" />
+            </a>
+            <a href="https://twitter.com/@InnopolisU" target="_blank">
+              <img src="/images/footer/twitter.svg" />
+            </a>
+            <a href="https://www.instagram.com/innopolisu/" target="_blank">
+              <img src="/images/footer/instagram.svg" />
+            </a>
+            <a href="https://www.youtube.com/user/InnopolisU" target="_blank">
+              <img src="/images/footer/youtube.svg" />
+            </a>
+          </div>
+        </div>
+        <span class="credits white">
+          with credits to <br />
+          <a href="https://isometriclove.com" target="_blank">Isometriclove</a>
+          and <a href="https://humaaans.com" target="_blank">Humaaans</a>
+        </span>
+      </div>
+
+      <div class="right">
+        <img src="/images/footer/pointer.svg" class="pointer" />
+        <nav>
+          <div class="search shadow-1">
+            search
+            <Search />
+          </div>
+          <ul>
+            <li>
+              <nuxt-link to="/projects" class="white">browse the projects</nuxt-link>
+            </li>
+            <li>
+              <nuxt-link to="/store" class="white">see the InnoStore</nuxt-link>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script>
+  import Button from './ui/button';
+  import Logo from '../static/images/innou-icon.svg';
+  import Search from '../static/images/icons/search.svg';
+
+  export default {
+    name: "Footer",
+    components: {
+      Button,
+      Logo,
+      Search,
+    },
+    methods: {
+      scrollToTop: () => {
+        window.scrollTo({top: 0, behavior: 'smooth'});
+      },
+    },
+  };
+</script>
diff --git a/components/header.vue b/components/header.vue
@@ -0,0 +1,60 @@
+<template>
+  <header class="top-level padded">
+    <nuxt-link to="/" class="logo">
+      <img src="/images/innou-icon.svg" alt="Go to the home page" />
+      <span class="hide-tb">Innopoints</span>
+    </nuxt-link>
+    <div class="actions">
+      <Button
+        v-if="isAuth && isProfile"
+        @click="signOut"
+        label="sign out"
+        outline
+      />
+      <Button
+        v-else-if="isAuth"
+        link
+        href="/profile"
+        img="/images/icons/user.svg"
+        label="profile"
+        outline
+      />
+      <Button
+        v-else
+        @click="toggleAuth"
+        label="sign in"
+        outline
+      />
+    </div>
+  </header>
+</template>
+
+<script>
+  import {mapState, mapActions} from 'vuex';
+  import Button from './ui/button';
+
+  export default {
+    name: "Header",
+    components: { Button },
+    computed: {
+      ...mapState({
+        isAuth: state => state.user.isAuth,
+      }),
+      isProfile() {
+        return this.$route.name === 'profile';
+      },
+    },
+    methods: {
+      resolution: (e) => {
+        e.preventDefault();
+        alert(`You current browser screen resolution.
+        Width: ${window.innerWidth}px, height: ${window.innerHeight}px`);
+      },
+      ...mapActions({toggleAuth: 'user/toggleAuth'}),
+      signOut() {
+        this.toggleAuth();
+        this.$router.push('/');
+      },
+    },
+  };
+</script>
diff --git a/components/home/contacts.vue b/components/home/contacts.vue
@@ -0,0 +1,37 @@
+<template>
+  <section class="contacts">
+    <header>
+      <h2>Any questions?</h2>
+      <div class="subtitle">Don’t hesitate to contact us!</div>
+    </header>
+    <div>
+      <Card>
+        <a href="mailto:[email protected]" class="mr-2">
+          <img class="icon" src="/images/home/mail-us.svg" />
+        </a>
+        <div>
+          <p style="padding-top: 1em;">[email protected]</p>
+          <a class="btn" href="mailto:[email protected]">send us an email</a>
+        </div>
+      </Card>
+      <Card>
+        <a href="tel:+7 (843) 203-92-53">
+          <img class="icon" src="/images/home/call-us.svg" />
+        </a>
+        <p style="padding: 0 1em;">
+          +7 (843) 203-92-53 <br />
+          (ext. 176)
+        </p>
+      </Card>
+    </div>
+  </section>
+</template>
+
+<script>
+  import Card from '../ui/card';
+
+  export default {
+    name: "LandingContacts",
+    components: { Card },
+  };
+</script>
diff --git a/components/home/header.vue b/components/home/header.vue
@@ -0,0 +1,54 @@
+<template>
+  <header class="container">
+    <img @click="resolution" src="/images/innou-logo.svg" class="logo" />
+    <Button
+      v-if="isAuth && isProfile"
+      @click="signOut"
+      label="sign out"
+      outline
+    />
+    <Button
+      v-else-if="isAuth"
+      link
+      href="/profile"
+      img="/images/icons/user.svg"
+      label="profile"
+      outline
+    />
+    <Button
+      v-else
+      @click="toggleAuth"
+      label="sign in"
+      outline
+    />
+  </header>
+</template>
+
+<script>
+  import {mapState, mapActions} from 'vuex';
+  import Button from '../ui/button';
+
+  export default {
+    name: "LandingHeader",
+    components: { Button },
+    computed: {
+      ...mapState({
+        isAuth: state => state.user.isAuth,
+      }),
+      isProfile() {
+        return this.$route.name === 'profile';
+      },
+    },
+    methods: {
+      resolution: () => {
+        alert(`You current browser screen resolution.
+        Width: ${window.innerWidth}px, height: ${window.innerHeight}px`);
+      },
+      ...mapActions({toggleAuth: 'user/toggleAuth'}),
+      signOut() {
+        this.toggleAuth();
+        this.$router.push('/');
+      },
+    },
+  };
+</script>
diff --git a/components/home/how-to-card.vue b/components/home/how-to-card.vue
@@ -0,0 +1,27 @@
+<template>
+  <Card>
+    <!--eslint-disable-next-line-->
+    <component :is="svg" class="icon" />
+    <span class="title">{{ title }}</span>
+    <span class="subtitle">{{ subtitle }}</span>
+  </Card>
+</template>
+
+<script>
+  import Card from '../ui/card';
+
+  export default {
+    components: { Card },
+    props: {
+      img: String,
+      title: String,
+      subtitle: String,
+    },
+    computed: {
+      svg() {
+        if(this.img) return () => import('../../static' + this.img);
+        return '';
+      },
+    },
+  };
+</script>
diff --git a/components/home/option-step.vue b/components/home/option-step.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="container">
+    <img :src="img" class="picture" />
+    <div class="description">
+      <span class="title">{{ title }}</span>
+      <span class="subtitle">{{ subtitle }}</span>
+      <Button
+        v-if="buttonLink"
+        :label="buttonText"
+        :away="external"
+        :href="buttonLink"
+        :img="external ? '/images/icons/external-link.svg' : ''"
+        link
+        filled
+      />
+      <strong v-else>{{ buttonText }}</strong>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Button from '../ui/button';
+
+  export default {
+    components: { Button },
+    props: {
+      img: String,
+      title: String,
+      subtitle: String,
+      buttonLink: {
+        type: String,
+        default: '#',
+      },
+      buttonText: String,
+      external: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+  };
+</script>
diff --git a/components/home/tagline.vue b/components/home/tagline.vue
@@ -0,0 +1,34 @@
+<template>
+  <section class="container tagline">
+    <img src="/images/home/voxel-city.png" class="picture desktop" />
+    <img src="/images/home/innopoint-logo.svg" class="picture mobile" />
+    <div>
+      <h1>Innopoints</h1>
+      <div class="motto">Motivating the great beginnings</div>
+      <nav>
+        <Button
+          link
+          href="/projects"
+          label="get innopoints"
+          filled
+        />
+
+        <Button
+          link
+          href="/store"
+          label="see the InnoStore"
+          outline
+        />
+      </nav>
+    </div>
+  </section>
+</template>
+
+<script>
+  import Button from '../ui/button';
+
+  export default {
+    name: "LandingTagline",
+    components: { Button },
+  };
+</script>