From 875958efd3c90e0d3cffa084f01ff045bacf6b77 Mon Sep 17 00:00:00 2001
From: donal <donalspring@gmail.com>
Date: Sun, 01 Apr 2018 00:54:03 +0200
Subject: [PATCH] WIP - adding some style and such
---
src/components/ListOfTodos.vue | 6
/dev/null | 5 -
src/views/Todo.vue | 37 +++++++++
src/components/NewTodo.vue | 2
src/components/Header.vue | 107 ++++++++++++++++++++++++++
src/components/TodoItem.vue | 2
jsconfig.json | 13 +++
src/views/Home.vue | 2
src/scss/custom.scss | 3
src/router.js | 8 +-
src/App.vue | 6 +
11 files changed, 175 insertions(+), 16 deletions(-)
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..b9ece73
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,13 @@
+{
+ "include": [
+ "./src/**/*"
+ ],
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "components/*": [
+ "src/components/*"
+ ]
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 430206f..cf1e9a7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,13 +2,17 @@
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
- <router-link to="/about">About</router-link>
+ <router-link to="/todo">Todo</router-link> |
+ <router-link to="/component-catalog">Components</router-link> |
</div>
<router-view/>
</div>
</template>
<style lang="scss">
+
+@import "scss/custom.scss";
+
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..610414f
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,107 @@
+<!-- Todo Header -->
+<template id="todo-header">
+ <div class="todo-header">
+ <div class="overlay"></div>
+ <time class="clearfix">
+ <span class="day">{{ date }}</span>
+ <span class="dayofweek">{{ weekDay }}</span>
+ <span class="month">{{ month }}, {{ year }}</span>
+ </time>
+ <div class="add-circle" @click="add">
+ <i class="fa fa-plus"></i>
+ </div>
+ </div>
+</template>
+
+<script>
+// Array of Month
+const month = [
+ "January",
+ "February",
+ "Mach",
+ "April",
+ "May",
+ "June",
+ "July",
+ "August",
+ "September",
+ "October",
+ "November",
+ "September"
+];
+const weekday = [
+ "Sunday",
+ "Monday",
+ "Tuesday",
+ "Wednesday",
+ "Thursday",
+ "Friday",
+ "Saturday"
+];
+
+export default {
+ name: "Header",
+ props: {
+ name: String
+ },
+ data: function() {
+ return {
+ date: "",
+ weekDay: "",
+ month: "",
+ year: ""
+ };
+ },
+ created: function() {
+ const d = new Date();
+ this.date = d.getDate();
+ this.weekDay = weekday[d.getDay()];
+ this.month = month[d.getMonth()];
+ this.year = d.getFullYear();
+ }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+// https://github.com/tatthien/vue-todo/blob/master/src/sass/style.scss
+@import "../scss/custom.scss";
+// .clearfix {
+// overflow: auto;
+// zoom: 1;
+// }
+.todo-header {
+ border-radius: 6px 6px 0 0;
+ background: url($header_image) no-repeat;
+ background-size: cover;
+ padding: 55px 20px;
+ position: relative;
+ .overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0,0,0,0.2); /* fallback for old browsers */
+ //background: -webkit-linear-gradient(to left, rgba(85,98,112,0.5) , rgba(255,107,107,0.5)); /* Chrome 10-25, Safari 5.1-6 */
+ //background: linear-gradient(to left, rgba(85,98,112,0.5) , rgba(255,107,107,0.5)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+ border-radius: 6px 6px 0 0;
+ }
+ time {
+ color: white;
+ display: block;
+ position: relative;
+ .day {
+ font-size: 4em;
+ float: left;
+ margin-right: 10px;
+ }
+ .dayofweek {
+ display: block;
+ margin-top: 13px;
+ font-size: 1.4em;
+ font-weight: 700;
+ }
+ }
+}
+</style>
diff --git a/src/components/ListOfTodos.vue b/src/components/ListOfTodos.vue
index fd84ca9..5359536 100644
--- a/src/components/ListOfTodos.vue
+++ b/src/components/ListOfTodos.vue
@@ -24,15 +24,15 @@
data () {
return {
todos: [{
- msg: 'Have a poop',
+ title: 'Have a poop',
id: '123',
complete: false
},{
- msg: 'Learn Vue JS',
+ title: 'Learn Vue JS',
id: '132',
complete: false
},{
- msg: 'Love DevOps',
+ title: 'Love DevOps',
id: '321',
complete: false
}]
diff --git a/src/components/NewTodo.vue b/src/components/NewTodo.vue
index da2ad43..85731b6 100644
--- a/src/components/NewTodo.vue
+++ b/src/components/NewTodo.vue
@@ -26,7 +26,7 @@
console.info('INFO - ', this.newTodo)
EventBus.$emit('NEWTODOADDED', {
completed: false,
- msg: this.newTodo,
+ title: this.newTodo,
id: Math.floor(1 + (9999 - 1) * Math.random())
})
this.newTodo = ''
diff --git a/src/components/TodoItem.vue b/src/components/TodoItem.vue
index 6c2081e..918388c 100644
--- a/src/components/TodoItem.vue
+++ b/src/components/TodoItem.vue
@@ -4,7 +4,7 @@
@click="markDone"
>
<md-checkbox :value="isActive" />
- <span class="md-list-item-text" :class="{'strike-through': isActive}">{{ todoItem.msg }}</span>
+ <span class="md-list-item-text" :class="{'strike-through': isActive}">{{ todoItem.title }}</span>
</md-list-item>
</div>
</template>
diff --git a/src/router.js b/src/router.js
index 7c39db7..3251566 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,7 +1,7 @@
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
-import About from "./views/About.vue";
+import Todo from "./views/Todo.vue";
import Catalog from "./views/Catalog.vue";
Vue.use(Router);
@@ -14,9 +14,9 @@
component: Home
},
{
- path: "/about",
- name: "about",
- component: About
+ path: "/todo",
+ name: "todo",
+ component: Todo
},
{
path: "/component-catalog",
diff --git a/src/scss/custom.scss b/src/scss/custom.scss
new file mode 100644
index 0000000..74ad0cd
--- /dev/null
+++ b/src/scss/custom.scss
@@ -0,0 +1,3 @@
+// vars and global css
+
+$header_image: 'https://images.unsplash.com/photo-1440613905118-99b921706b5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=255b304482a2f50d0917f3de7b06251e';
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
- <div class="about">
- <h1>This is an about page</h1>
- </div>
-</template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 796b2da..67c36f6 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,7 +1,7 @@
<template>
<div class="home">
<img src="../assets/logo.png">
- <HelloWorld msg="Welcome to Your Vue.js App"/>
+ <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
</div>
</template>
diff --git a/src/views/Todo.vue b/src/views/Todo.vue
new file mode 100644
index 0000000..d2ba2db
--- /dev/null
+++ b/src/views/Todo.vue
@@ -0,0 +1,37 @@
+<template>
+ <div>
+ <md-card>
+ <md-card-header class="remove-padding">
+ <Header/>
+ </md-card-header>
+
+ <md-card-content>
+ </md-card-content>
+ </md-card>
+ </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from "@/components/HelloWorld.vue";
+import Header from "@/components/Header.vue";
+
+export default {
+ name: "Todo",
+ components: {
+ Header,
+ }
+};
+</script>
+
+<style lang="scss" scoped>
+ .remove-padding {
+ padding: 0px
+ }
+ .md-card {
+ width: 480px;
+ margin: 4px;
+ display: inline-block;
+ vertical-align: top;
+ }
+</style>
--
Gitblit v1.9.3