├── .gitignore
├── README.md
├── babel.config.js
├── docs
    └── screenshot.png
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── images
    │   ├── logo.png
    │   └── logo.svg
    ├── index.html
    ├── manifest.json
    └── sw.js
├── src
    ├── App.vue
    ├── components
    │   └── Home.vue
    ├── main.js
    └── plugins
    │   └── vuetify.js
├── vue.config.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tasks Layout
 2 | 
 3 | Sample vue/vuetify layout for a tasks management web application.
 4 | 
 5 | ![Screenshot](docs/screenshot.png "Screenshot")
 6 | 
 7 | ## Project setup
 8 | 
 9 | ```
10 | yarn install
11 | ```
12 | 
13 | ### Compiles and hot-reloads for development
14 | 
15 | ```
16 | yarn run serve
17 | ```
18 | 
19 | ### Compiles and minifies for production
20 | 
21 | ```
22 | yarn run build
23 | ```
24 | 
25 | ### Run your tests
26 | 
27 | ```
28 | yarn run test
29 | ```
30 | 
31 | ### Lints and fixes files
32 | 
33 | ```
34 | yarn run lint
35 | ```
36 | 
37 | ### Customize configuration
38 | 
39 | See [Configuration Reference](https://cli.vuejs.org/config/).
40 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/docs/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/edderrd/tasks-layout/e41319b0248e7462a4034b40f628c5da8ef4b3d0/docs/screenshot.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tasks-layout",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^2.6.11",
13 |     "vuedraggable": "^2.23.2",
14 |     "vuetify": "^2.3.1"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "^4.4.5",
18 |     "@vue/cli-plugin-eslint": "^4.4.5",
19 |     "@vue/cli-service": "^4.4.5",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^7.3.1",
22 |     "eslint-plugin-vue": "^6.2.2",
23 |     "sass": "^1.26.9",
24 |     "sass-loader": "^8.0.2",
25 |     "vue-cli-plugin-vuetify": "^2.0.5",
26 |     "vue-template-compiler": "^2.6.11",
27 |     "vuetify-loader": "^1.5.0"
28 |   },
29 |   "eslintConfig": {
30 |     "root": true,
31 |     "env": {
32 |       "node": true
33 |     },
34 |     "extends": [
35 |       "plugin:vue/essential",
36 |       "eslint:recommended"
37 |     ],
38 |     "rules": {},
39 |     "parserOptions": {
40 |       "parser": "babel-eslint"
41 |     }
42 |   },
43 |   "browserslist": [
44 |     "> 1%",
45 |     "last 2 versions"
46 |   ]
47 | }
48 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/edderrd/tasks-layout/e41319b0248e7462a4034b40f628c5da8ef4b3d0/public/favicon.ico


--------------------------------------------------------------------------------
/public/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/edderrd/tasks-layout/e41319b0248e7462a4034b40f628c5da8ef4b3d0/public/images/logo.png


--------------------------------------------------------------------------------
/public/images/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 7 |   <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 8 |   <meta name="mobile-web-app-capable" content="yes" />
 9 |   <meta name="apple-mobile-web-app-title" content="Tasks Layout" />
10 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
11 |   <meta name="theme-color" content="#292929" />
12 |   <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
13 |   <title>Task Layout</title>
14 |   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" />
15 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css" />
16 |   <link rel="manifest" href="/manifest.json" />
17 | </head>
18 | 
19 | <body>
20 |   <noscript>
21 |     <strong>We're sorry but task-layout doesn't work properly without JavaScript
22 |       enabled. Please enable it to continue.</strong>
23 |   </noscript>
24 |   <script>
25 |     if (navigator.serviceWorker) {
26 |       navigator.serviceWorker
27 |         .register("/sw.js", {
28 |           scope: "."
29 |         })
30 |         .then(function (registration) {
31 |           console.log(
32 |             "ServiceWorker registration successful with scope:",
33 |             registration.scope
34 |           );
35 |         })
36 |         .catch(function (error) {
37 |           console.log("ServiceWorker registration failed:", error);
38 |         });
39 |     }
40 |   </script>
41 |   <div id="app"></div>
42 |   <!-- built files will be auto injected -->
43 | </body>
44 | 
45 | </html>


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Tasks Layout",
 3 |   "short_name": "Tasks Layout",
 4 |   "icons": [{
 5 |       "src": "/images/logo.png",
 6 |       "sizes": "128x128",
 7 |       "type": "image/png"
 8 |     },
 9 |     {
10 |       "src": "/images/logo.png",
11 |       "sizes": "144x144",
12 |       "type": "image/png"
13 |     },
14 |     {
15 |       "src": "/images/logo.png",
16 |       "sizes": "152x152",
17 |       "type": "image/png"
18 |     },
19 |     {
20 |       "src": "/images/logo.png",
21 |       "sizes": "192x192",
22 |       "type": "image/png"
23 |     },
24 |     {
25 |       "src": "/images/logo.png",
26 |       "sizes": "256x256",
27 |       "type": "image/png"
28 |     },
29 |     {
30 |       "src": "/images/logo.png",
31 |       "sizes": "512x512",
32 |       "type": "image/png"
33 |     }
34 |   ],
35 |   "start_url": "/",
36 |   "display": "standalone",
37 |   "background_color": "#202020",
38 |   "theme_color": "#202020"
39 | }


--------------------------------------------------------------------------------
/public/sw.js:
--------------------------------------------------------------------------------
1 | this.addEventListener('fetch', function (event) {
2 |   // it can be empty if you just want to get rid of that error
3 | });


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <v-app>
  3 |     <v-navigation-drawer
  4 |       v-model="drawer"
  5 |       mini-variant
  6 |       app
  7 |       clipped
  8 |       :class="appBarColor"
  9 |       class="darken-4"
 10 |     >
 11 |       <v-list dense>
 12 |         <template v-for="(link, index) in links">
 13 |           <v-list-item
 14 |             link
 15 |             :key="index"
 16 |             @click="setAppBarTitle(link.label, link.icon)"
 17 |           >
 18 |             <v-list-item-action>
 19 |               <v-icon>{{ link.icon }}</v-icon>
 20 |             </v-list-item-action>
 21 |             <v-list-item-content>
 22 |               <v-list-item-title>{{ link.label }}</v-list-item-title>
 23 |             </v-list-item-content>
 24 |             <v-list-item-action v-if="link.due_count">
 25 |               <v-chip x-small color="red darken-3">{{ link.due_count }}</v-chip>
 26 |             </v-list-item-action>
 27 |           </v-list-item>
 28 |         </template>
 29 |       </v-list>
 30 |       <v-list dense subheader>
 31 |         <v-divider></v-divider>
 32 |         <template v-for="(project, index) in projects">
 33 |           <v-list-item
 34 |             link
 35 |             :key="index"
 36 |             @click="setAppBarTitle(project.label, null, project.color)"
 37 |           >
 38 |             <v-list-item-avatar>
 39 |               <v-avatar
 40 |                 :size="28"
 41 |                 class="text-uppercase body-2"
 42 |                 :color="project.color"
 43 |                 >{{ `${project.label[0]}${project.label[1]}` }}</v-avatar
 44 |               >
 45 |             </v-list-item-avatar>
 46 |             <v-list-item-content>
 47 |               <v-list-item-title>{{ project.label }}</v-list-item-title>
 48 |             </v-list-item-content>
 49 |             <v-list-item-action v-if="project.due_count">
 50 |               <v-chip x-small color="red darken-4">{{
 51 |                 project.due_count
 52 |               }}</v-chip>
 53 |             </v-list-item-action>
 54 |           </v-list-item>
 55 |         </template>
 56 |         <v-list-item link>
 57 |           <v-list-item-action>
 58 |             <v-icon color="grey">mdi-plus</v-icon>
 59 |           </v-list-item-action>
 60 |           <v-list-item-content>
 61 |             <v-list-item-title class="grey--text"
 62 |               >Add a project...</v-list-item-title
 63 |             >
 64 |           </v-list-item-content>
 65 |         </v-list-item>
 66 |       </v-list>
 67 |       <template #append>
 68 |         <div class="mb-5 d-flex justify-center align-center">
 69 |           <v-btn icon>
 70 |             <v-avatar :size="26">
 71 |               <img src="//www.gravatar.com/avatar/none?f=y&d=mm" />
 72 |             </v-avatar>
 73 |           </v-btn>
 74 |         </div>
 75 |       </template>
 76 |     </v-navigation-drawer>
 77 |     <v-content>
 78 |       <div style="display: flex; min-height: min-content;">
 79 |         <div style="height: 99.8vh; overflow: auto;">
 80 |           <v-navigation-drawer
 81 |             width="380px"
 82 |             :class="appBarColor"
 83 |             class="darken-3"
 84 |           >
 85 |             <v-toolbar
 86 |               :class="appBarColor"
 87 |               class="darken-3"
 88 |               flat
 89 |               :extended="isSearching"
 90 |               style="position: sticky; top: 0; z-index: 1; margin-right: 1px;"
 91 |             >
 92 |               <v-toolbar-title>
 93 |                 {{ appBarTitle }}
 94 |               </v-toolbar-title>
 95 |               <v-spacer></v-spacer>
 96 |               <v-btn icon @click="isSearching = !isSearching">
 97 |                 <v-icon>mdi-magnify</v-icon>
 98 |               </v-btn>
 99 |               <v-btn icon>
100 |                 <v-icon>mdi-plus</v-icon>
101 |               </v-btn>
102 |               <template #extension v-if="isSearching">
103 |                 <v-text-field
104 |                   autofocus
105 |                   style="margin-bottom: -25px"
106 |                   class="mr-2"
107 |                   prepend-inner-icon="mdi-magnify"
108 |                   clearable
109 |                   rounded
110 |                   filled
111 |                   solo
112 |                   flat
113 |                   dense
114 |                   @keydown.esc="isSearching = false"
115 |                   placeholder="Search"
116 |                 ></v-text-field>
117 |               </template>
118 |             </v-toolbar>
119 |             <v-list subheader two-line>
120 |               <v-subheader>In Process</v-subheader>
121 |               <draggable v-model="issues">
122 |                 <v-list-item link v-for="(issue, index) in issues" :key="index">
123 |                   <v-list-item-content>
124 |                     <v-list-item-title>{{
125 |                       `${issue.title} ${index}`
126 |                     }}</v-list-item-title>
127 |                     <v-list-item-subtitle>{{
128 |                       issue.description
129 |                     }}</v-list-item-subtitle>
130 |                   </v-list-item-content>
131 |                 </v-list-item>
132 |               </draggable>
133 |             </v-list>
134 |             <v-list subheader two-line>
135 |               <v-subheader>To Do</v-subheader>
136 |               <draggable v-model="issues">
137 |                 <v-list-item link v-for="(issue, index) in issues" :key="index">
138 |                   <v-list-item-content>
139 |                     <v-list-item-title>{{
140 |                       `${issue.title} ${index}`
141 |                     }}</v-list-item-title>
142 |                     <v-list-item-subtitle>{{
143 |                       issue.description
144 |                     }}</v-list-item-subtitle>
145 |                   </v-list-item-content>
146 |                 </v-list-item>
147 |               </draggable>
148 |             </v-list>
149 |           </v-navigation-drawer>
150 |         </div>
151 |         <div style="height: 99.8vh; overflow: auto;" id="main-content">
152 |           <Home />
153 |         </div>
154 |       </div>
155 |     </v-content>
156 |   </v-app>
157 | </template>
158 | 
159 | <script>
160 | import draggable from "vuedraggable";
161 | import Home from "./components/Home";
162 | 
163 | export default {
164 |   name: "App",
165 | 
166 |   components: {
167 |     draggable,
168 |     Home
169 |   },
170 | 
171 |   data: () => ({
172 |     drawer: true,
173 |     appBarColor: "grey",
174 |     appBarTitle: "Tasks",
175 |     appBarIcon: "mdi-lightbulb",
176 |     isSearching: false,
177 |     links: [
178 |       { label: "Inbox", icon: "mdi-inbox", color: "background" },
179 |       {
180 |         label: "Planned",
181 |         icon: "mdi-clock-outline",
182 |         due_count: 2,
183 |         color: "background"
184 |       }
185 |     ],
186 |     projects: [
187 |       { label: "Accounting", color: "cyan", due_count: 1 },
188 |       { label: "Secret Game", color: "green" },
189 |       { label: "Dashboard", color: "blue", due_count: 1 }
190 |     ],
191 |     issues: [
192 |       {
193 |         title: "some random title",
194 |         order: 1,
195 |         description: "Lorem, ipsum dolor sit amet"
196 |       },
197 |       {
198 |         title: "some random title",
199 |         order: 2,
200 |         description: "Lorem, ipsum dolor sit amet"
201 |       },
202 |       {
203 |         title: "some random title",
204 |         order: 3,
205 |         description: "Lorem, ipsum dolor sit amet"
206 |       },
207 |       {
208 |         title: "some random title",
209 |         order: 3,
210 |         description: "Lorem, ipsum dolor sit amet"
211 |       },
212 |       {
213 |         title: "some random title",
214 |         order: 3,
215 |         description: "Lorem, ipsum dolor sit amet"
216 |       },
217 |       {
218 |         title: "some random title",
219 |         order: 3,
220 |         description: "Lorem, ipsum dolor sit amet"
221 |       },
222 |       {
223 |         title: "some random title",
224 |         order: 3,
225 |         description: "Lorem, ipsum dolor sit amet"
226 |       },
227 |       {
228 |         title: "some random title",
229 |         order: 3,
230 |         description: "Lorem, ipsum dolor sit amet"
231 |       },
232 |       {
233 |         title: "some random title",
234 |         order: 3,
235 |         description: "Lorem, ipsum dolor sit amet"
236 |       },
237 |       {
238 |         title: "some random title",
239 |         order: 3,
240 |         description: "Lorem, ipsum dolor sit amet"
241 |       },
242 |       {
243 |         title: "some random title",
244 |         order: 4,
245 |         description: "Lorem, ipsum dolor sit amet"
246 |       }
247 |     ]
248 |   }),
249 | 
250 |   created() {
251 |     this.$vuetify.theme.dark = true;
252 |   },
253 | 
254 |   methods: {
255 |     setAppBarTitle(title, icon, color = "grey") {
256 |       this.appBarColor = color;
257 |       this.appBarTitle = title;
258 |       this.appBarIcon = icon;
259 |     }
260 |   }
261 | };
262 | </script>
263 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div style="position: relative;">
 3 |     <v-toolbar
 4 |       style="position: sticky; top: 0; z-index: 1"
 5 |       color="background"
 6 |       :flat="!contentScrolled"
 7 |     >
 8 |       <v-toolbar-title>Some random title 1</v-toolbar-title>
 9 |       <v-spacer></v-spacer>
10 |       <v-btn icon>
11 |         <v-icon>mdi-clock</v-icon>
12 |       </v-btn>
13 |       <v-btn icon>
14 |         <v-icon>mdi-settings</v-icon>
15 |       </v-btn>
16 |       <v-btn icon>
17 |         <v-icon>mdi-menu</v-icon>
18 |       </v-btn>
19 |     </v-toolbar>
20 |     <div class="pa-4" v-scroll:#main-content="onScroll">
21 |       <v-card>
22 |         <v-card-text
23 |           class="grey--text text--lighten-2"
24 |         >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam alias a aliquam recusandae quia maxime accusantium natus blanditiis perspiciatis unde! Ad aspernatur nulla tempora facere corrupti animi labore iure. Sapiente?</v-card-text>
25 |       </v-card>
26 | 
27 |       <div class="mt-6">
28 |         <v-subheader class="ml-0 pl-0">Comments</v-subheader>
29 |         <v-card v-for="(comment, index) in comments" :key="index" class="mb-4">
30 |           <v-list>
31 |             <v-list-item>
32 |               <v-list-item-action>
33 |                 <v-avatar :size="26" color="primary">ME</v-avatar>
34 |               </v-list-item-action>
35 |               <v-list-item-content
36 |                 class="body-2 grey--text text--lighten-2"
37 |               >Comment {{ index }}: Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad quod iste laudantium possimus cupiditate reprehenderit. Deleniti facere culpa ut libero quod, nihil ea quo similique vitae, id quas nesciunt ducimus.</v-list-item-content>
38 |             </v-list-item>
39 |           </v-list>
40 |         </v-card>
41 |       </div>
42 |     </div>
43 |   </div>
44 | </template>
45 | 
46 | <script>
47 | export default {
48 |   name: "HelloWorld",
49 | 
50 |   data: () => ({
51 |     comments: new Array(40),
52 |     contentScrolled: false
53 |   }),
54 | 
55 |   methods: {
56 |     onScroll(e) {
57 |       this.contentScrolled = e.target.scrollTop >= 1;
58 |     }
59 |   }
60 | };
61 | </script>
62 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import vuetify from "./plugins/vuetify";
 4 | 
 5 | Vue.config.productionTip = false;
 6 | 
 7 | new Vue({
 8 |   vuetify,
 9 |   render: h => h(App)
10 | }).$mount("#app");


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuetify from 'vuetify/lib';
 3 | 
 4 | Vue.use(Vuetify);
 5 | 
 6 | export default new Vuetify({
 7 |   theme: {
 8 |     themes: {
 9 |       dark: {
10 |         background: "#303030",
11 |       }
12 |     }
13 |   }
14 | });


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   "transpileDependencies": [
3 |     "vuetify"
4 |   ]
5 | }


--------------------------------------------------------------------------------