Initialized Quasi project

benjaminvo · Dec 12, 2016 · a99e510 · a99e510
commit a99e510
Show file tree

Hide file tree

Showing 22 changed files with 753 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    ["es2015", { "modules": false }]
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
diff --git a/README.md b/README.md
@@ -0,0 +1,18 @@
+# wishes
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+```
+
+For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <link rel="shortcut icon" href="./src/assets/page-with-curl.png" />
+    <title>Quasi</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/dist/build.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "quasi",
+  "description": "Thesis project about academic motivation, IT University of Copenhagen",
+  "version": "1.0.0",
+  "author": "Andreas Rasmussen <[email protected]>",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+  },
+  "dependencies": {
+    "vue": "^2.1.0",
+    "vue-router": "^2.1.1",
+    "vuex": "^2.0.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.5.3",
+    "babel-core": "^6.0.0",
+    "babel-loader": "^6.0.0",
+    "babel-preset-es2015": "^6.0.0",
+    "cross-env": "^3.0.0",
+    "css-loader": "^0.25.0",
+    "file-loader": "^0.9.0",
+    "node-sass": "^3.13.0",
+    "sass-loader": "^4.0.2",
+    "style-loader": "^0.13.1",
+    "vue-loader": "^10.0.0",
+    "vue-template-compiler": "^2.1.0",
+    "webpack": "^2.1.0-beta.27",
+    "webpack-dev-server": "^2.1.0-beta.0"
+  }
+}
diff --git a/paths.js b/paths.js
@@ -0,0 +1,5 @@
+const path = require('path');
+
+module.exports = {
+  sourcePath: path.join(__dirname, 'src'),
+};
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="app">
+    <app-header />
+    <router-view />
+  </div>
+</template>
+
+<script>
+  import Header from 'components/Header'
+  export default {
+    components: { 'app-header': Header }
+  }
+</script>
+
+<style lang="scss">
+  @import './styles/reset';
+  @import './styles/global';
+  @import './styles/helpers';
+
+  .app {
+    min-height: 100%;
+    width: 100%;
+    background: lighten($color-brandLight, 4%);
+  }
+</style>
diff --git a/src/assets/page-with-curl.png b/src/assets/page-with-curl.png
diff --git a/src/components/GridBlock.vue b/src/components/GridBlock.vue
@@ -0,0 +1,60 @@
+<template>
+  <div
+    class="gridBlock gridBlock-columns"
+    :class="[
+      this.columns ? 'gridBlock-columns-' + this.columns : null,
+      {'gridBlock-noPadding': this.noPadding}
+    ]">
+    <slot />
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      columns: { type: String },
+      noPadding: { type: Boolean }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '~styles/vars';
+  @import '~styles/breakpoints';
+
+  .gridBlock {
+    display: flex;
+    flex-wrap: wrap;
+    padding: $scale-3-1 0;
+    margin: 0 auto;
+
+    &-noPadding { padding: 0; }
+
+    & > * { padding: $scale; }
+
+    // Content-widths
+    @include breakpoint( 'desktop' )         { width: $contentWidth-desktop; }
+    @include breakpoint( 'tablet' )          { width: $contentWidth-tablet; padding: $scale-2-1; }
+    @include breakpoint( 'widescreen' )      { width: $contentWidth-widescreen; }
+    @include breakpoint( 'extraWidescreen' ) { width: $contentWidth-extraWidescreen; }
+  }
+
+  // Grid
+  $cols: 2 3 4 5 6 8 12;
+  $spans: 0 1 2 3 4 5 6 7 8 9 10 11 12;
+  @each $col in $cols {                                                                             // Set num. columns with columns="X"
+    .gridBlock-columns-#{$col} > * {                                                                width: percentage(1/$col) !important;
+                                                             @include breakpoint( 'tablet' )      { width: 100% !important; }} // Default to 100% width on tablet and below
+    @each $span in $spans {
+      // Set num. of columns to span for direct children
+      .gridBlock-columns-#{$col} > *.span-#{$span}          { @include breakpoint( 'tabletAbove' ){ width: percentage(1/$col * $span) !important; }}
+      .gridBlock-columns-#{$col} > *.span-#{$span}-tablet   { @include breakpoint( 'tabletOnly' ) { width: percentage(1/$col * $span) !important; }}
+      .gridBlock-columns-#{$col} > *.span-#{$span}-mobile   { @include breakpoint( 'mobile' )     { width: percentage(1/$col * $span) !important; }}
+
+      // Set num. of columns to offset
+      .gridBlock-columns-#{$col} > *.offset-#{$span}        { @include breakpoint( 'tabletAbove' ){ margin-left: percentage(1/$col * $span) !important; }}
+      .gridBlock-columns-#{$col} > *.offset-#{$span}-tablet { @include breakpoint( 'tabletOnly' ) { margin-left: percentage(1/$col * $span) !important; }}
+      .gridBlock-columns-#{$col} > *.offset-#{$span}-mobile { @include breakpoint( 'mobile' )     { margin-left: percentage(1/$col * $span) !important; }}
+    }
+  }
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -0,0 +1,41 @@
+<template>
+  <grid-block columns="12" noPadding>
+    <ul class="header span-12">
+      <router-link :to="{ name: 'texts' }" tag="li" active-class="active" exact>Tekster</router-link>
+    </ul>
+  </grid-block>
+</template>
+
+<script>
+  import GridBlock from 'components/GridBlock'
+  export default {
+    components: { 'grid-block': GridBlock }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '~styles/vars';
+  .header {
+    width: 100%;
+    padding: 0;
+
+    li {
+      font-family: $fontFamily-headline;
+      display: inline-block;
+      color: $color-brandDark !important;
+      padding: $scale-1-2 $scale;
+      text-decoration: none !important;
+
+      &:hover {
+        cursor: pointer;
+        border-bottom: 3px solid $color-brandLight-darker-1;
+      }
+
+      &.active {
+        transition: all $animationSpeed $animationBezier;
+        border-bottom: 3px solid $color-brandDark;
+        font-weight: bold;
+      }
+    }
+  }
+</style>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import App from './App'
+
+import { store } from 'store/store'
+
+import VueRouter from 'vue-router'
+import { routes } from './routes'
+Vue.use(VueRouter)
+const router = new VueRouter({
+  routes,
+  mode: 'history' // Remember to set up the server to ALWAYS serve the index.html file when this history-mode is on (to avoid hashes in the url)
+})
+
+new Vue({
+  el: '#app',
+  store,
+  router,
+  render: h => h(App)
+})
diff --git a/src/routes.js b/src/routes.js
@@ -0,0 +1,7 @@
+import Texts from 'routes/texts'
+import Read from 'routes/read'
+
+export const routes = [
+  { path: '/', component: Texts, name: 'texts' },
+  { path: '/read/:textId', component: Read, name: 'read' }
+]
diff --git a/src/routes/read.vue b/src/routes/read.vue
@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+  export default {}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/routes/texts.vue b/src/routes/texts.vue
@@ -0,0 +1,14 @@
+<template>
+  <grid-block columns="12">
+    <h1 class="span-12">Dine tekster</h1>
+  </grid-block>
+</template>
+
+<script>
+  import GridBlock from 'components/GridBlock'
+  export default {
+    components: { 'grid-block': GridBlock }
+  }
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/store/store.js b/src/store/store.js
@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export const store = new Vuex.Store({
+  state: {}
+});
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
@@ -0,0 +1,14 @@
+@keyframes fadeIn {
+	0% 		{ opacity: 0; }
+	100% 	{ opacity: 1; }
+}
+
+@keyframes fadeOut {
+	0% 		{ opacity: 1; }
+	100% 	{ opacity: 0; }
+}
+
+@keyframes slideIn {
+	0% 		{ transform: translateX(-100vw); }
+	100% 	{ transform: translateX(0vw); }
+}
diff --git a/src/styles/breakpoints.scss b/src/styles/breakpoints.scss
@@ -0,0 +1,35 @@
+@mixin breakpoint($class, $value: false, $min: false) {
+
+  @if $class == 'mobileSmall' {
+    @media (max-width: 320px) { @content; }
+  } @else if $class == 'mobileMedium' {
+    @media (max-width: 400px) { @content; }
+  } @else if $class == 'mobile' {
+    @media (max-width: 480px) { @content; }
+  } @else if $class == 'tabletBelow' {
+    @media (max-width: 767px) { @content; }
+  } @else if $class == 'tabletOnly' {
+    @media (min-width: 481px) and (max-width: 768px) { @content; }
+  } @else if $class == 'tablet' {
+    @media (max-width: 768px) { @content; }
+  } @else if $class == 'tabletAbove' {
+    @media (min-width: 768px) { @content; }
+  } @else if $class == 'desktop' {
+    @media (max-width: 1024px) { @content; }
+  } @else if $class == 'widescreen' {
+    @media (min-width: 1025px) { @content; }
+  } @else if $class == 'extraWidescreen' {
+    @media (min-width: 1200px) { @content; }
+  } @else if $class == 'extremeWidescreen' {
+    @media (min-width: 1600px) { @content; }
+  } @else if $class == 'custom' {
+    @if $min == true {
+      @media (min-width: $value) { @content; }
+    } @else {
+      @media (max-width: $value) { @content; }
+    }
+  } @else {
+    @error 'That breakpoint isn\'t available...';
+  }
+
+}
diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -0,0 +1,60 @@
+@import '~styles/vars';
+@import '~styles/breakpoints';
+@import '~styles/helpers';
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $fontFamily-headline;
+  color: $color-brandDark;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-family: $fontFamily-logo;
+  letter-spacing: 1px;
+  line-height: 1.4; }
+
+h5,
+h6 {
+  font-family: $fontFamily-system;
+  font-weight: 600; }
+
+h1 {
+  font-size: $fontSize-title;
+  letter-spacing: 2px;
+  line-height: 1.2;
+
+  @include breakpoint( 'tablet' ) { font-size: $fontSize-xxlarge; }
+  @include breakpoint( 'mobileMedium' ) { font-size: $fontSize-xlarge; }}
+
+h2 {
+  font-size: $fontSize-xxlarge;
+  @include breakpoint( 'mobile' ) { font-size: $fontSize-xlarge; }}
+h3 { font-size: $fontSize-xlarge; }
+h4 { font-size: $fontSize-large; }
+h5 { font-size: $fontSize-base; }
+h6 { font-size: $fontSize-small; }
+
+p {
+  font-family: $fontFamily-body;
+  font-size: $fontSize-base;
+  line-height: 1.4;
+  letter-spacing: 0.2px; }
+
+input {
+  padding: $scale-1-2;
+  border: none;
+
+  &::-webkit-input-placeholder { color: $color-brandLight; } /* Chrome/Opera/Safari */
+  &::-moz-placeholder { color: $color-brandLight; } /* Firefox 19+ */
+  &:-ms-input-placeholder { color: $color-brandLight; }  /* IE 10+ */
+  &:-moz-placeholder { color: $color-brandLight; } /* Firefox 18- */
+}
+
+input:focus,
+input:active {
+	outline: none;
+}