Primer commit

web-v2 · Aug 6, 2022 · b20a173 · b20a173
1 parent f1c82ad
commit b20a173
Show file tree

Hide file tree

Showing 29 changed files with 472 additions and 105 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -12,6 +12,7 @@ module.exports = {
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/multi-word-component-names': 0, // disable this rule just for views
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,9 +8,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "bootstrap": "^5.2.0",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
-    "vue-router": "^4.0.3"
+    "vue-router": "^4.0.3",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -20,6 +22,8 @@
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
+    "eslint-plugin-vue": "^8.0.3",
+    "sass": "^1.54.0",
+    "sass-loader": "^10.3.1"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   </head>
   <body>
     <noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,30 +1,3 @@
 <template>
-  <nav>
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </nav>
   <router-view/>
 </template>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-nav {
-  padding: 30px;
-}
-
-nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-nav a.router-link-exact-active {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/main.js b/src/main.js
@@ -1,5 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import store from './store'
 
-createApp(App).use(router).mount('#app')
+import './styles/styles.scss'
+
+createApp(App).use(store).use(router).mount('#app')
diff --git a/src/modules/daybook/components/Entry.vue b/src/modules/daybook/components/Entry.vue
@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <div class="entry-container mb-3 pointer p-2" @click="$router.push({name: 'entry', params: {id: '1s5a1s5a8s7arfg54s4a5'}})">            
+            <!-- titulo-->
+            <div class="entry-title d-flex">
+                <span class="text-success fs-5 fw-bold">01</span>
+                <span class="mx-1 fs-5">Agosto</span>
+                <span class="mx-2 fw-light">2022, lunes</span>
+            </div>
+            <div class="entry-description">
+                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque blanditiis dicta excepturi at alias provident sequi labore iusto magnam dolorem, fugit saepe molestiae recusandae laboriosam eum. Nesciunt pariatur ex facilis.
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="scss" scoped>
+.entry-container{
+    border-bottom: 1px solid #2c3e50;
+    transition: 0.2s all ease-in;
+    &:hover{
+        background-color: lighten($color: grey, $amount: 45);
+        transition: 0.2s all ease-in;
+    }
+    .entry-description{
+        font-size: 14px;
+    }
+}
+
+</style>
diff --git a/src/modules/daybook/components/EntryList.vue b/src/modules/daybook/components/EntryList.vue
@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <div class="entry-list-container">
+            <div class="px-2 pt-2">
+                <input type="text" class="form-control" placeholder="Buscar entrada">
+            </div>
+            <div class="entry-scrollarea">
+                <span>
+                    <Entry v-for="items in 25" :key="items" />
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineAsyncComponent } from 'vue'
+export default {
+    components:{
+        Entry: defineAsyncComponent(()=>import('./Entry.vue'))
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.entry-list-container{
+    border-right: 1px solid #2c3e50;
+    height: calc(100vh - 56px);
+}
+.entry-scrollarea{
+    height: calc(100vh - 110px);
+    overflow: scroll;
+}
+</style>
+
diff --git a/src/modules/daybook/components/Fab.vue b/src/modules/daybook/components/Fab.vue
@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <button class="btn btn-primary">
+            <i class="fa fa-2x" :class="icon"></i>
+        </button>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        icon:{
+            type: String,
+            default: 'fa-plus'
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+button{
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 80px;
+    height: 80px;
+    border-radius: 100%
+}
+</style>
diff --git a/src/modules/daybook/components/Navbar.vue b/src/modules/daybook/components/Navbar.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <nav class="navbar bg-primary">
+            <a href="" class="navbar-brand text-white">
+                <img src="@/assets/logo.png" alt="Vue-logo" class="d-inline-block align-text-top mx-2" height="24">
+                Dayboot
+            </a>
+            <div class="d-flex">
+                <button class="btn btn-outline-info">
+                    <i class="fa fa-sign-out-alt"></i>
+                </button>
+            </div>
+        </nav>
+    </div>
+</template>
diff --git a/src/modules/daybook/layouts/DayBootLayout.vue b/src/modules/daybook/layouts/DayBootLayout.vue
@@ -0,0 +1,23 @@
+<template>
+    <div>
+        <Navbar />
+        <div class="d-flex">
+            <div class="col-4">
+                <EntryList />
+            </div>
+            <div class="col">
+                <router-view />
+            </div>            
+        </div>
+    </div>
+</template>
+
+<script>
+import {defineAsyncComponent} from 'vue'
+export default{
+    components: {
+        Navbar: defineAsyncComponent(()=>import('../components/Navbar.vue')),
+        EntryList: defineAsyncComponent(()=>import('../components/EntryList.vue'))
+    }
+}
+</script>
diff --git a/src/modules/daybook/router/index.js b/src/modules/daybook/router/index.js
@@ -0,0 +1,16 @@
+export default { 
+    name: 'dayboot',
+    component: () => import(/* webpackChunkName: "dayboot" */ '@/modules/daybook/layouts/DayBootLayout.vue'),
+    children: [
+        {
+            path: '',
+            name: 'no-entry',
+            component: () => import(/* webpackChunkName: "no-entry" */ '@/modules/daybook/views/NoEntrySelected.vue')                        
+        },
+        {
+            path: ':id',
+            name: 'entry',
+            component: () => import(/* webpackChunkName: "no-entry" */ '@/modules/daybook/views/EntryView.vue')                        
+        }
+    ]
+}