Prodjask-Vue Exercice

Developer
Yvan Dumont
Size
11,220 Kb
Views
10,120
  1. Prodjask-Vue Exercice Previews
  2. Prodjask-Vue Exercice HTML Codes
  3. Prodjask-Vue Exercice CSS Codes
  4. Prodjask-Vue Exercice JS Codes

How do I make an prodjask-vue exercice?

Simple integration exercise based on one of George Vasyagin amazing design (https://dribbble.com/shots/1320431-Project-management-system).. What is a prodjask-vue exercice? How do you make a prodjask-vue exercice? This script and codes were developed by Yvan Dumont on 08 December 2022, Thursday.

Prodjask-Vue Exercice Previews
IQ Test

Prodjask-Vue Exercice - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Prodjask-Vue Exercice</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,600,700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/sweetalert2/5.3.2/sweetalert2.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main> <header> <h1 v-text="navigation.title"></h1> <nav> <ul> <li v-text="navigation.section"></li> <li class="chevron right" v-text="navigation.details"></li> </ul> </nav> </header> <main id="panes"> <section id="menu"> <ul> <li :class="{selected: menuItem.enabled}" v-for="menuItem in menu"> <div class="icon fa fa-stack fa-lg"> <span :class="menuItem.icon"></span> </div> <span :data-count="menuItem.updates" class="badge" v-if="menuItem.updates &gt; 0"></span><a href="#" v-text="menuItem.title"></a> </li> </ul> </section> <section id="sub-menu"> <nav> <h1> 4 tasks </h1> <button class="btn">Create task</button> </nav> <ul class="tasks"> <li :class="{selected: task.selected}" class="task" v-for="task in tasks" v-on:click="selectTask(task)"> <div :class="task.color" class="circle"> <input @keyup.enter="endTaskNameEdit(task, false)" @keyup.esc="endTaskNameEdit(task, true)" class="editable" title="Double click to edit, escape to cancel, enter to save." type="text" v-bind:readonly="task.editable != true" v-model="task.name" v-on:blur="endTaskNameEdit(task, true)" v-on:dblclick="startTaskNameEdit(task, $event)" /> <div class="details"> {{task.total}} Tasks, {{task.completed}} Completed </div> </div> </li> </ul> </section> <section id="details"> <section id="todos"> <nav> <h1> To do's </h1> <ul class="todos"> <li class="todo selected"> <span class="label">All</span><span class="badge">13</span> </li> <li class="todo"> <span class="label">To do</span><span class="badge">2</span> </li> <li class="todo"> <span class="label">In Review</span><span class="badge">2</span> </li> <li class="todo"> <span class="label">Completed</span><span class="badge">2</span> </li> </ul> </nav> </section> <section id="periods"> <nav> <ul class="periods"> <li class="period"> Today </li> <li class="period"> Week </li> <li class="period selected"> Month </li> </ul> </nav> </section> <section id="timeline"> <div class="ticks"> <div class="month"> <div class="day"> 1 </div> <div class="day"> 2 </div> <div class="day"> 3 </div> <div class="day"> 4 </div> <div class="day"> 5 </div> <div class="day"> 6 </div> <div class="day start-of-week"> 7 </div> <div class="day"> 8 </div> <div class="day"> 9 </div> <div class="day"> 10 </div> <div class="day"> 11 </div> <div class="day"> 12 </div> <div class="day"> 13 </div> <div class="day start-of-week"> 14 </div> <div class="day"> 15 </div> <div class="day"> 16 </div> <div class="day"> 17 </div> <div class="day"> 18 </div> <div class="day"> 19 </div> <div class="day"> 20 </div> <div class="day start-of-week"> 21 </div> <div class="day"> 22 </div> <div class="day"> 23 </div> <div class="day"> 24 </div> <div class="day"> 25 </div> <div class="day"> 26 </div> <div class="day"> 27 </div> <div class="day start-of-week"> 28 </div> <div class="day"> 29 </div> <div class="day"> 30 </div> <div class="day"> 31 </div> <span class="label">November 2016</span> </div> <div class="month"> <div class="day"> 1 </div> <div class="day"> 2 </div> <div class="day"> 3 </div> <div class="day"> 4 </div> <div class="day"> 5 </div> <div class="day"> 6 </div> <div class="day start-of-week"> 7 </div> <div class="day"> 8 </div> <div class="day"> 9 </div> <div class="day"> 10 </div> <div class="day"> 11 </div> <div class="day"> 12 </div> <div class="day"> 13 </div> <div class="day start-of-week"> 14 </div> <div class="day"> 15 </div> <div class="day"> 16 </div> <div class="day"> 17 </div> <div class="day"> 18 </div> <div class="day"> 19 </div> <div class="day"> 20 </div> <div class="day start-of-week"> 21 </div> <div class="day"> 22 </div> <div class="day"> 23 </div> <div class="day"> 24 </div> <div class="day"> 25 </div> <div class="day"> 26 </div> <div class="day"> 27 </div> <div class="day start-of-week"> 28 </div> <div class="day"> 29 </div> <div class="day"> 30 </div> <div class="day"> 31 </div> <span class="label">December 2016</span> </div> <div class="activities"> <div class="activity" v-for="(activity, index) in activities"> <a class="btn-properties" v-on:click="showActivityEdit(activity)"><i class="fa fa-gear"></i><span class="label" v-text="activity.name"></span></a> <div :style="{width: config.timeline.daysWidth * activity.duration + &#39;px&#39;, left: (activity.start-1) * config.timeline.daysWidth + &#39;px&#39; }" class="duration"></div> </div> </div> </div> <section :class="{hide: editActivity == null}" id="editActivity" v-if="editActivity != null"> <div class="row header"> <div> Edit </div> <h1 v-text="editActivity.name"></h1> </div> <div class="row reverse-polarity"> <label for="act-start">Day of month:</label><select id="act-start" name="act-start" v-model="editActivity.start"> <option value="1"> 1 </option> <option value="2"> 2 </option> <option value="3"> 3 </option> <option value="4"> 4 </option> <option value="5"> 5 </option> <option value="6"> 6 </option> <option value="7"> 7 </option> <option value="8"> 8 </option> <option value="9"> 9 </option> <option value="10"> 10 </option> <option value="11"> 11 </option> <option value="12"> 12 </option> <option value="13"> 13 </option> <option value="14"> 14 </option> <option value="15"> 15 </option> <option value="16"> 16 </option> <option value="17"> 17 </option> <option value="18"> 18 </option> <option value="19"> 19 </option> <option value="20"> 20 </option> <option value="21"> 21 </option> <option value="22"> 22 </option> <option value="23"> 23 </option> <option value="24"> 24 </option> <option value="25"> 25 </option> <option value="26"> 26 </option> <option value="27"> 27 </option> <option value="28"> 28 </option> <option value="29"> 29 </option> <option value="30"> 30 </option> <option value="31"> 31 </option> </select> </div> <div class="row reverse-polarity"> <label for="act-duration">Duration (in days):</label><select id="act-start" name="act-duration" v-model="editActivity.duration"> <option value="1"> 1 </option> <option value="2"> 2 </option> <option value="3"> 3 </option> <option value="4"> 4 </option> <option value="5"> 5 </option> <option value="6"> 6 </option> <option value="7"> 7 </option> <option value="8"> 8 </option> <option value="9"> 9 </option> <option value="10"> 10 </option> <option value="11"> 11 </option> <option value="12"> 12 </option> <option value="13"> 13 </option> <option value="14"> 14 </option> <option value="15"> 15 </option> <option value="16"> 16 </option> <option value="17"> 17 </option> <option value="18"> 18 </option> <option value="19"> 19 </option> <option value="20"> 20 </option> <option value="21"> 21 </option> <option value="22"> 22 </option> <option value="23"> 23 </option> <option value="24"> 24 </option> <option value="25"> 25 </option> <option value="26"> 26 </option> <option value="27"> 27 </option> <option value="28"> 28 </option> <option value="29"> 29 </option> <option value="30"> 30 </option> <option value="31"> 31 </option> </select> </div> <div class="row reverse-polarity"> <button class="btn" v-on:click="cancelActivityEdit">Cancel</button><button class="btn" v-on:click="confirmAcivityEdit">Save</button> </div> </section> </section> </section> </main> <div class="source"> <a href="https://dribbble.com/shots/1320431-Project-management-system" rel="noopener noreferrer" target="random-window">Design Source at Dribbble.com </a> </div>
</main> <script src='https://use.fontawesome.com/b8dfb7e545.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js'></script>
<script src='https://cdn.jsdelivr.net/sweetalert2/5.3.2/sweetalert2.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Prodjask-Vue Exercice - Script Codes CSS Codes

/*
This file badly needs spliting!
*/
html,
body { height: 100%; font-family: 'Montserrat', sans-serif;
}
main { height: calc(100% - 85px);
}
h1 { font-size: 20px;
}
header { background-color: #3A4A63; padding: 20px; color: white; font-size: 24px; display: flex; align-items: center; height: 45px; cursor: default;
}
header h1 { display: inline-block; flex: 0 0 325px; margin-right: 20px;
}
header nav { display: inline-block; flex: 2 0 360px; whitespace: no-wrap; font-size: 18px;
}
header nav ul { display: inline; padidng: 0; font-weight: normal;
}
header nav ul li { display: inline-block;
}
#panes { display: flex; align-items: stretch; min-height: 100%; max-width: 100vw;
}
#menu { color: white; flex: 0 0 87px; background-color: #5d6e8a; display: flex; justify-content: center; text-align: center; font-size: 14px; padding-top: 20px;
}
#menu ul li.selected { cursor: pointer; color: white;
}
#menu ul li.selected a { color: white; cursor: pointer;
}
#menu ul li { font-family: 'Open Sans'; font-weight: 600; cursor: default; margin-bottom: 38px; position: relative; color: #7e92b3;
}
#menu ul li .badge::before { opacity: 1;
}
#menu ul li a { cursor: default; display: block; max-width: 70px; color: #7e92b3; text-decoration: none;
}
#menu ul li .badge::before { color: white; position: absolute; top: -2px; right: 8px; content: attr(data-count); display: inline-block; font-size: 12px; background-color: #DFBE35; padding: 4px; width: 10px; height: 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0.5;
}
#sub-menu { color: white; flex: 0 0 280px; background-color: #647695; box-shadow: inset 6px -6px 6px -6px rgba(50, 50, 50, 0.75); padding-top: 20px;
}
#sub-menu nav { margin: 0 20px 20px; display: flex; justify-content: space-between; align-items: center;
}
#sub-menu nav h1 { display: inline;
}
#sub-menu .tasks { padding: 0;
}
#sub-menu .tasks .task { font-family: 'Open Sans'; cursor: pointer;
}
#sub-menu .tasks .task > div { padding: 16px 0 24px 0; margin: 0 20px; border-top: 1px dashed #9baece;
}
#sub-menu .tasks .task.selected { background-color: #3a4a63;
}
#sub-menu .tasks .task:hover { background-color: #181f29;
}
#sub-menu .tasks .task:hover > div { cursor: pointer;
}
#sub-menu .tasks li:last-child > div { border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
}
#sub-menu .tasks li h1 { font-size: 14px; font-weight: 600; margin: auto auto 10px; margin-left: 50px;
}
#sub-menu .tasks li .details { font-size: 12px; margin-top: 6px; margin-left: 50px;
}
#sub-menu .tasks .circle { position: relative;
}
#sub-menu .tasks .circle::before { position: absolute; left: calc(8px); top: calc(37%); content: ''; display: inline-block; width: 16px; height: 16px; border: 3px solid; border-color: #23bae5; border-radius: 50%;
}
#sub-menu .tasks .pink::before { border-color: #e44c72;
}
#sub-menu .tasks .orange::before { border-color: #DFBE35;
}
#sub-menu .tasks .green::before { border-color: #a3ed5a;
}
#details { background-color: #e2e8f6; color: #545d64; overflow: hidden;
}
#details nav { font-family: 'Open Sans'; color: #555c64; display: flex; align-items: center; justify-content: start; flex-wrap: nowrap; height: 75px; border-bottom: 1px solid #d0dcec; padding-left: 20px;
}
#details nav h1 { flex: 0 0 200px; font-weight: bold;
}
#details .todos { font-weight: 700; display: inline-flex; flex: 0 0 auto;
}
#details .todos .todo { font-size: 12px; display: inline-block; cursor: pointer; opacity: 0.5;
}
#details .todos .todo .badge { display: inline-block; height: 12px; width: 12px; line-height: 12px; font-size: 12px; text-align: center; background-color: #f2f6f9; margin-left: 8px; padding: 6px; border-radius: 10px;
}
#details .todos .todo.selected { opacity: 1;
}
#details .todos .todo.selected { opacity: 1;
}
#details .todos .todo:not(:last-child) { margin-right: 30px;
}
#details #periods > nav { height: 55px; white-space: nowrap;
}
#details .period { display: inline; font-size: 14px; opacity: 0.5; cursor: pointer;
}
#details .period.selected { font-weight: bold; opacity: 1;
}
#details .period:not(:last-child) { margin-right: 30px;
}
#timeline { position: relative;
}
#timeline .ticks { white-space: nowrap; overflow-x: scroll; font-size: 0; margin-bottom: -800px;
}
#timeline .ticks .month:nth-child(odd) { background-color: #cfdbeb;
}
#timeline .ticks .month { position: relative; display: inline-flex; white-space: nowrap; background-color: #c8d3e5; font-size: 14px; color: #aab5c8; height: 1000px; box-shadow: inset 1px 4px 6px -6px rgba(50, 50, 50, 0.75);
}
#timeline .ticks .month .day { text-align: center; height: 1000px; padding-top: 20px; position: relative; display: inline-block; width: 48px; transition: background-color 0.1s ease-in; cursor: default; font-family: 'Open Sans';
}
#timeline .ticks .month .day:hover { background-color: #bfcbde;
}
#timeline .ticks .month .day::before { position: absolute; content: ' '; display: inline-block; top: 0; left: 50%; border-left: 1px solid #a9b4c6; height: 6px;
}
#timeline .ticks .month .day.start-of-week { padding-top: 30px;
}
#timeline .ticks .month .day.start-of-week::before { height: 18px;
}
#timeline .ticks .month .label { position: absolute; top: 75px; left: 20px; font-size: 20px; cursor: default; pointer-events: none;
}
.activities { pointer-events: none; position: relative; top: -885px; left: 0; display: flex; width: 2550px; flex-direction: column;
}
.activities .activity { pointer-events: none; font-size: 14px; position: relative; height: 50px; padding-left: 10px; display: inline-flex; align-items: center; background-color: #e2e8f6; border-top: 1px solid #b6c3d3;
}
.activities .activity .duration { z-index: 0; position: absolute; display: inline-block; height: 35px; min-width: 1px; background-color: #e55e7e; border-radius: 4px; cursor: pointer; transition: all 0.75s ease-in-out;
}
.activities .activity .btn-properties { z-index: 1; pointer-events: auto;
}
.activities .activity .btn-properties i { padding-right: 20px;
}
.activities .activity .btn-properties .label { display: inline-block; width: 160px;
}
.activities .activity:last-child { border-bottom: 1px solid #b6c3d3;
}
#editActivity { opacity: 1; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; bottom: 0; right: 0; color: white; background-color: rgba(58, 74, 99, 0.25); transition: all 1s ease-out;
}
#editActivity.hide { opacity: 0; mouse-event: none; z-index: 0;
}
#editActivity .row { min-width: 300px; padding: 20px; background-color: white; color: black; display: flex;
}
#editActivity .header { flex-direction: column;
}
#editActivity div label { min-width: 100px; line-height: 23px;
}
#editActivity div.reverse-polarity { flex-direction: row; justify-content: space-between;
}
#editActivity select { border: none; font-size: 16px; font-weight: 700;
}
.disabled { cursor: default !important; opacity: 0.5 !important; user-select: none;
}
/* Chevrons: https://codepen.io/jonneal/pen/kptBs */
.chevron::before { border-style: solid; border-width: 0.25em 0.25em 0 0; content: ''; display: inline-block; height: 0.45em; position: relative; top: 0.35em; transform: rotate(-45deg); vertical-align: top; width: 0.45em; font-size: 14px;
}
.chevron.right:before { left: -0.125em; transform: rotate(45deg);
}
/* buttons */
.btn { border: none; border-radius: 4px; padding: 10px 24px; background-color: #23bae5; color: white;
}
.btn:hover { background-color: #49cbf0; cursor: pointer;
}
.btn-properties { border: none; background-color: transparent; padding: 10px 20px;
}
.btn-properties:hover { cursor: pointer;
}
.source { position: fixed; bottom: 5px; right: 5px; font-family: 'Open Sans'; font-size: 12px; font-weight: 700; color: #555c64; transition: height 0.25s ease-in;
}
.source a { position: relative; text-decoration: none; color: #555c64; transition: color 0.25s ease-in;
}
.source a:hover { color: #e55e7e;
}
/*scrollbars*/
*::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #F5F5F5;
}
*::-webkit-scrollbar { width: 6px; height: 6px; background-color: #F5F5F5;
}
*::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2); background-color: #3a4a63;
}
input[type=text].editable { font-size: 14px; font-weight: 600; color: #181f29; margin-left: 42px; padding: 8px; background-color: #bfcbde; border: 0; border-radius: 2px; cursor: initial;
}
input[type=text]:read-only { background-color: transparent; color: white; cursor: text; margin-left: 42px; padding: 8px;
}

Prodjask-Vue Exercice - Script Codes JS Codes

'use strict';
// Get those by ajax/json
var menu = [{ title: 'Activities', icon: 'fa-line-chart', updates: 2
}, { title: 'Tasks', icon: 'fa-tasks', enabled: true
}, { title: 'Talks', icon: 'fa-comments-o'
}, { title: 'Files', icon: 'fa-picture-o'
}, { title: 'People', icon: 'fa-comments-o'
}, { title: 'Client space', icon: 'fa-address-card-o'
}];
// Get those by ajax/json
var tasks = [{ name: 'UX Design', color: 'blue', total: 24, completed: 4, selected: false, editable: false
}, { name: 'UI Design', color: 'pink', total: 24, completed: 4, selected: true, editable: false
}, { name: 'Frontend developpement', color: 'orange', total: 24, selected: false, completed: 3, editable: false
}, { name: 'Backend developpement', color: 'green', total: 24, selected: false, completed: 4, editable: false
}];
// Get those by ajax/json
var activities = [{ name: 'Landing page', start: 6, duration: 8
}, { name: 'Cart page', start: 13, duration: 3
}, { name: 'Contact page', start: 15, duration: 8
}];
// This is the "view" logic object.
// it contains all the "ui" logic like:
// animations, field edition,
// initialisation, etc.
var prodjask = new Vue({ el: 'main', data: { navigation: { title: 'Prodjask', section: 'Projects', details: 'Task management' }, config: { timeline: { daysWidth: 48 } }, menu: menu, tasks: tasks, activities: activities, editActivity: null, backupActivity: null, backupTaskName: null, }, methods: { // Make activities rows same width as timeline container. // This _should_ work in css only.
Prodjask-Vue Exercice - Script Codes
Prodjask-Vue Exercice - Script Codes
Home Page Home
Developer Yvan Dumont
Username LeYvan
Uploaded December 08, 2022
Rating 3
Size 11,220 Kb
Views 10,120
Do you need developer help for Prodjask-Vue Exercice?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yvan Dumont (LeYvan) Script Codes
Name
Whyutils
Drive-Space-Info
Tile Map Test
A Pen by Yvan Dumont
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!