Initial commit, app almost completed

This commit is contained in:
i-break-codes 2016-11-20 13:08:21 +05:30
commit 230bd10707
16 changed files with 5662 additions and 0 deletions

4
.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
/node_modules
.DS_Store
app/assets/scripts
app/assets/stylesheets

40
app/assets/images/bin.svg Normal file
View File

@ -0,0 +1,40 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 59 59" style="enable-background:new 0 0 59 59;" xml:space="preserve" width="512px" height="512px">
<g>
<path d="M29.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C28.5,50.553,28.948,51,29.5,51z" fill="#FFFFFF"/>
<path d="M19.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C18.5,50.553,18.948,51,19.5,51z" fill="#FFFFFF"/>
<path d="M39.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C38.5,50.553,38.948,51,39.5,51z" fill="#FFFFFF"/>
<path d="M52.5,6H38.456c-0.11-1.25-0.495-3.358-1.813-4.711C35.809,0.434,34.751,0,33.499,0H23.5c-1.252,0-2.31,0.434-3.144,1.289 C19.038,2.642,18.653,4.75,18.543,6H6.5c-0.552,0-1,0.447-1,1s0.448,1,1,1h2.041l1.915,46.021C10.493,55.743,11.565,59,15.364,59 h28.272c3.799,0,4.871-3.257,4.907-4.958L50.459,8H52.5c0.552,0,1-0.447,1-1S53.052,6,52.5,6z M21.792,2.681 C22.24,2.223,22.799,2,23.5,2h9.999c0.701,0,1.26,0.223,1.708,0.681c0.805,0.823,1.128,2.271,1.24,3.319H20.553 C20.665,4.952,20.988,3.504,21.792,2.681z M46.544,53.979C46.538,54.288,46.4,57,43.636,57H15.364 c-2.734,0-2.898-2.717-2.909-3.042L10.542,8h37.915L46.544,53.979z" fill="#FFFFFF"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,11 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#a8e063">
<path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
<path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
<path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
<path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
<path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
<path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
</svg>

After

Width:  |  Height:  |  Size: 1010 B

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve" fill="#fff">
<g>
<path d="M500,10C229.4,10,10,235.1,10,512.5c0,222,140.4,410.2,335.1,476.7c3.1,0.7,5.7,0.9,8.3,0.9c18.2,0,25.2-13.3,25.2-24.9c0-12-0.4-43.5-0.7-85.5c-18.4,4.2-34.8,5.9-49.4,5.9c-94.3,0-115.7-73.3-115.7-73.3c-22.3-58-54.5-73.5-54.5-73.5c-42.7-30-0.2-30.8,3.1-30.8c0.2,0,0.2,0,0.2,0c49.2,4.4,75,52.1,75,52.1c24.5,42.9,57.3,54.9,86.6,54.9c23,0,43.8-7.4,56-13.1c4.4-32.4,17.1-54.5,31.1-67.2c-108.7-12.7-223.1-55.8-223.1-248.3c0-54.9,19-99.8,50.3-134.8c-5-12.7-21.9-63.9,4.8-133c0,0,3.5-1.1,10.9-1.1c17.7,0,57.8,6.8,123.8,52.7c39.2-11.2,80.9-16.6,122.7-16.8c41.6,0.2,83.6,5.7,122.7,16.8c66.1-45.9,106.1-52.7,123.8-52.7c7.4,0,10.9,1.1,10.9,1.1c26.7,69.1,9.8,120.3,4.8,133c31.3,35.2,50.3,80.1,50.3,134.8c0,192.9-114.6,235.4-223.8,247.8c17.5,15.5,33.3,46.2,33.3,93c0,67.2-0.7,121.4-0.7,137.8c0,11.8,6.8,25.2,24.9,25.2c2.6,0,5.7-0.2,8.8-0.9C849.8,922.6,990,734.3,990,512.5C990,235.1,770.6,10,500,10z M328.5,920.2c4.8,0,9.6-0.2,14.7-0.4c0,6.1,0,12,0.2,17.3c0,5.3,0,10.1,0.2,14.2c-34.1-12.7-66.3-29.5-96.5-50.3C268.6,912.6,295.5,920.2,328.5,920.2z M353.4,760.8c-1.7,4.8-3.3,9.8-4.6,15.1c-7.4,2.2-16.4,3.9-25.6,3.9c-23.8,0-41.6-11.8-56-37c-5.3-10.1-14.9-23.4-28.2-35.7C275.8,738,318.4,752.9,353.4,760.8z M769.1,889.6c-34.6,26-72.2,46.6-111.6,61.7c0-4.2,0-9,0-14.2c0-26,0-65.2,0-110.3c0-27.1-4.6-49.2-10.9-66.7c81.4-18.2,201.3-73.7,201.3-274.3c0-53.8-15.5-101.7-46.4-142.4c6.8-28.2,12-77.9-11.2-137.8l-5.9-15.5l-15.8-5.3c-3.3-1.1-10.5-2.8-21.9-2.8c-25.2,0-67.6,9-130.2,49.9c-37.2-9.2-76.1-14-116.2-14H500h-0.2c-40,0-79.2,4.8-116.2,14c-62.6-40.9-105-49.9-130.2-49.9c-11.4,0-18.6,2-21.9,3.1l-15.8,5.3l-5.9,15.5c-23.2,60.2-17.9,109.8-11.2,137.8c-30.8,40.9-46.4,88.8-46.4,142.4c0,108.5,35,174.8,80.1,215.5C214.8,687,191.8,675,164.2,673h-1.1H162h-0.7c-28.7,0-48.8,11.8-55.1,32.2c-10.3,32.4,21.4,54.7,31.9,62.1l1.1,1.3l3.3,1.3c3.5,2.2,22.1,15.3,37,53.6c4.4,13.6,13.8,31.7,29.8,48.6c-28.7-24.5-54.3-52.5-76.3-83.3C75.4,708.3,45,612.7,45,512.5c0-63.2,12-124.5,35.9-182.2c23-55.8,55.8-105.7,97.8-148.5c41.8-42.9,90.6-76.6,144.6-100C379.2,57.5,438.8,45,500,45s120.8,12.3,176.8,36.5c54.3,23.4,102.8,57.1,144.6,100s74.8,93,97.8,148.5C943,387.8,955,449,955,512.3c0,100.2-30.2,195.8-87.7,276.3C839.7,827.3,806.7,861.2,769.1,889.6z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -0,0 +1,11 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#ffcc33">
<path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
<path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
<path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
<path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
<path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
<path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
</svg>

After

Width:  |  Height:  |  Size: 1010 B

View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<circle style="fill:#004e92;" cx="25" cy="25" r="25"/>
<line style="fill:none;stroke:#000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="25" y1="13" x2="25" y2="38"/>
<line style="fill:none;stroke:#000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="37.5" y1="25" x2="12.5" y2="25"/>
</svg>

After

Width:  |  Height:  |  Size: 729 B

View File

@ -0,0 +1,11 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#3CD3AD">
<path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
<path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
<path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
<path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
<path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
<path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
</svg>

After

Width:  |  Height:  |  Size: 1010 B

View File

@ -0,0 +1,11 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#ef473a">
<path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
<path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
<path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
<path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
<path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
<path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
</svg>

After

Width:  |  Height:  |  Size: 1010 B

View File

@ -0,0 +1,11 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" fill="#3a7bd5">
<path d="M59,22c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1s1,0.448,1,1v20C60,21.552,59.553,22,59,22z"/>
<path d="M59,2H39c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S59.553,2,59,2z"/>
<path d="M35,26c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C35.512,25.902,35.256,26,35,26z"/>
<path d="M1,60c-0.553,0-1-0.448-1-1V39c0-0.552,0.447-1,1-1s1,0.448,1,1v20C2,59.552,1.553,60,1,60z"/>
<path d="M21,60H1c-0.553,0-1-0.448-1-1s0.447-1,1-1h20c0.553,0,1,0.448,1,1S21.553,60,21,60z"/>
<path d="M1,60c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l24-24
c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-24,24C1.512,59.902,1.256,60,1,60z"/>
</svg>

After

Width:  |  Height:  |  Size: 1010 B

59
gulpfile.js Normal file
View File

@ -0,0 +1,59 @@
var gulp = require('gulp'),
browserSync = require('browser-sync'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
cleanCSS = require('gulp-clean-css'),
uglify = require('gulp-uglify'),
renameFiles = require('gulp-rename');
gulp.task('browser-sync', function() {
browserSync.init(null, {
server: {
// baseDir: "app",
proxy: 'http://localhost:8888/scrum/',
// files: ['app/views/**/*.*', 'public/**/*.css', 'public/**/*.js'],
browser: 'google chrome',
port: 3005,
// open: false
}
});
});
gulp.task('bs-reload', function () {
browserSync.reload();
});
gulp.task('css', function () {
return gulp.src('src/stylesheets/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer('last 3 version'))
.pipe(gulp.dest('app/assets/stylesheets'))
.pipe(cleanCSS({debug: true}, function(details) {
console.log('Original Size : ' + details.name + ': ' + details.stats.originalSize + ' bytes');
console.log('Minified Size : ' + details.name + ': ' + details.stats.minifiedSize + ' bytes');
}))
.pipe(renameFiles({ suffix: '.min' }))
.pipe(gulp.dest('app/assets/stylesheets'))
.pipe(browserSync.reload({
stream:true
}));
});
gulp.task('js',function(){
return gulp.src('src/scripts/**/*.js')
.pipe(gulp.dest('app/assets/scripts'))
.pipe(uglify())
.pipe(renameFiles({ suffix: '.min' }))
.pipe(gulp.dest('app/assets/scripts'))
.pipe(browserSync.reload({
stream: true,
once: true
}));
});
gulp.task('default', ['js', 'css', 'browser-sync'], function () {
gulp.watch("src/stylesheets/**/*.scss", ['css']);
gulp.watch("src/scripts/**/*.js", ['js']);
gulp.watch("app/*.html", ['bs-reload']);
});

109
index.html Normal file
View File

@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Scrum Board - Manage your tasks with ease</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="app/assets/stylesheets/app.css">
</head>
<body>
<div class="wrapper">
<header class="clear">
<ul>
<li>Rejected</li>
<li>Pending</li>
<li>Development</li>
<li>Testing</li>
<li>Production</li>
</ul>
</header>
<section id="dashboard" class="dashboard clear">
<div id="rejected" class="rejected"></div>
<div id="pending" class="pending"></div>
<div id="development" class="development"></div>
<div id="testing" class="testing"></div>
<div id="production" class="production"></div>
</section>
<footer>
<ul>
<li class="branding">Scrum <span>Board</span> <sup>Beta</sup></li>
</ul>
<ul class="controls">
<li data-tooltip="Drag A Task Here To Delete">
<a href="#" class="remove" id="remove">
<img src="app/assets/images/bin.svg" alt="">
</a>
</li>
<li data-tooltip="Add Task">
<a href="#" id="add-task" class="add-task">
<img src="app/assets/images/plus.svg" alt="">
</a>
</li>
<li data-tooltip="Github" class="github-ref">
<a href="#">
<img src="app/assets/images/github.svg" alt="">
</a>
</li>
</ul>
</footer>
</div>
<div id="removed-task-notification" class="removed-task-notification hide"></div>
<div class="modal hide" id="add-task-modal">
<div class="modal-wrapper">
<form action="index.html" method="post" class="add-task-form" name="add_task">
<span class="close-modal">X</span>
<h3>Add a new Task</h3>
<ul>
<li>
<input type="text" name="title" placeholder="Title" autofocus>
</li>
<li>
<textarea name="description" placeholder="Description"></textarea>
</li>
<li>
<input type="text" name="remote_url" placeholder="Remote Task URL">
</li>
<li>
<input type="text" name="assigned_to" placeholder="Assigned To">
</li>
<li>
<input type="submit" name="create_task" value="Create Task">
</li>
</ul>
</form>
</div>
<div class="create-task-branding">
Scrum <span>Board</span> <sup>Beta</sup>
</div>
</div>
<script id="task-card-template" type="text/x-handlebars-template">
{{#each this}}
<div class="card" data-task-id="{{id}}">
<a href="#" class="expand-card"></a>
<h5>{{title}}</h5>
<div class="card-details">
<p data-field="description">{{description}}</p>
<p data-field="remote_url"><a href="{{remote_url}}" target="_blank">{{remote_url}}</a></p>
<p data-field="assigned_to">{{assigned_to}}</p>
</div>
</div>
{{/each}}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="app/assets/scripts/handlebars-v4.0.5.js"></script>
<script src="app/assets/scripts/localstorage.js"></script>
<script src="app/assets/scripts/app.js"></script>
</body>
</html>

22
package.json Normal file
View File

@ -0,0 +1,22 @@
{
"name": "scrum-board",
"version": "1.0.0",
"description": "Manage your tasks with Scrum Board.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.14.0",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.0.12",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2",
"gulp-uglify": "^2.0.0"
},
"dependencies": {
"gulp-autoprefixer": "^3.1.1"
}
}

202
src/scripts/app.js Normal file
View File

@ -0,0 +1,202 @@
var App = function() {
function init() {
preset();
draggable();
droppable();
openCard();
createTask();
closeModal();
printNotes();
editTask();
exitEditMode();
}
function preset() {
$('#remove').on('click', function(e) {
e.preventDefault();
});
var defaultTask = {
id: 1,
title: 'This is a sample task',
description: 'Sample tasks are useful to get started',
remote_url: 'https://asana.com/12345/1234',
assigned_to: 'Jon Doe',
status: 'pending'
}
if(!LocalStorage.get('appInitialized', true)) {
LocalStorage.set('taskCounter', 1);
LocalStorage.set('task-1', JSON.stringify(defaultTask));
LocalStorage.set('appInitialized', true);
}
}
function createTask() {
var source = $("#task-card-template").html();
var template = Handlebars.compile(source);
$('#add-task').on('click', function(e) {
e.preventDefault();
$('#add-task-modal').removeClass('hide');
$('#add-task-modal').find('form').on('submit', function(e) {
e.preventDefault();
var obj = {};
var params = $(this).serialize();
var splitParams = params.split('&');
for(var i = 0, l = splitParams.length; i < l; i++) {
var keyVal = splitParams[i].split('=');
obj[keyVal[0]] = unescape(keyVal[1]);
}
var iid = LocalStorage.get('taskCounter');
obj.id = ++iid;
obj.status = 'pending';
LocalStorage.set('task-' + obj.id, JSON.stringify(obj));
LocalStorage.set('taskCounter', iid);
var newCard = template([obj]);
$('#dashboard #' + obj.status).append(newCard);
draggable();
$('.close-modal').trigger('click');
});
});
}
function editTask() {
$('.card-details p').on('dblclick', function(e) {
e.stopPropagation();
$(this).attr('contenteditable','true').parents('.card').addClass('edit-mode');
});
$('.card').find('p').on('input', function() {
var taskId = $(this).parents('.card').data('task-id');
var fieldToEdit = $(this).data('field');
var getTaskData = JSON.parse(LocalStorage.get('task-' + taskId));
getTaskData[fieldToEdit] = $(this).text();
LocalStorage.set('task-' + taskId, JSON.stringify(getTaskData));
});
}
function exitEditMode() {
$(document).on('dblclick', function(e) {
$('.card').removeClass('edit-mode').find('[contenteditable]').removeAttr('contenteditable');
});
}
function closeModal() {
$('.close-modal').on('click', function() {
$('.modal').addClass('hide');
})
}
function draggable() {
$('.card').draggable({
handle: 'h5',
revert: true,
cursor: 'move',
start: function(event, ui) {
},
stop: function(event, ui) {
}
});
}
function droppable() {
var droppableConfig = {
tolerance: 'pointer',
drop: function(event, ui) {
var elm = ui.draggable,
parentId = elm.parent().attr('id'),
currentId = $(this).attr('id'),
taskId = elm.data('task-id');
if($(this).attr('id') == 'remove') {
//Deletes task
elm.remove();
LocalStorage.remove('task-' + taskId);
$('#removed-task-notification').text('Task removed successfully').removeClass('hide');
setTimeout(function() {
$('#removed-task-notification').text('').addClass('hide');
}, 3000);
} else {
//Moves task
if(parentId != currentId) {
$(elm).detach().removeAttr('style').appendTo(this);
var getTaskData = JSON.parse(LocalStorage.get('task-' + taskId));
getTaskData.status = currentId;
LocalStorage.set('task-' + taskId, JSON.stringify(getTaskData));
}
}
$(this).removeClass('dragged-over');
},
over: function(event, ui) {
$(this).addClass('dragged-over');
},
out: function(event, ui) {
$(this).removeClass('dragged-over');
}
}
$('#dashboard > div, #remove').droppable(droppableConfig);
}
function openCard() {
$(document).on('click', '.expand-card', function(e) {
$(this).parent().toggleClass('expanded');
e.preventDefault();
});
}
function getAllNotes() {
var getAllData = localStorage;
var getTasks = [];
for(var data in getAllData) {
if(data.split('-')[0] == 'task') {
getTasks.push(JSON.parse(localStorage[data]));
}
}
return getTasks;
}
function printNotes() {
var source = $("#task-card-template").html();
var template = Handlebars.compile(source);
var status = ['rejected', 'pending', 'development', 'testing', 'production'];
for(var i = 0, l = status.length; i < l; i++) {
var result = App.getAllNotes().filter(function(obj) {
return obj.status == status[i];
});
if(result) {
var cards = template(result);
$('#dashboard #' + status[i]).append(cards);
draggable();
}
}
}
return {
init: init,
getAllNotes: getAllNotes
}
}();
App.init();

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,19 @@
var LocalStorage = function() {
function set(key, val) {
localStorage.setItem(key, val);
}
function get(key) {
return localStorage.getItem(key);
}
function remove(key) {
localStorage.removeItem(key);
}
return {
set: set,
get: get,
remove: remove
}
}();

530
src/stylesheets/app.scss Normal file
View File

@ -0,0 +1,530 @@
@import 'https://fonts.googleapis.com/css?family=Hind+Vadodara:300,400';
//Colors
$base-color: rgba(0,0,0,.4);
$primary-color: #fff;
$secondary-color: rgba(255,255,255,.1);
$grad-start: #000428;
$grad-end: #004e92;
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
html, body, .wrapper {
height: 100%;
}
body {
font-weight: 300;
font-family: Hind Vadodara;
background-image: linear-gradient(to left, $grad-start, $grad-end);
color: $primary-color;
font-size: 14px;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: inherit;
}
.clear {
&:after {
content: "";
display: table;
clear: both;
}
}
.hide {
display: none !important;
}
header {
background-color: $base-color;
li {
padding: 15px;
float: left;
width: 20%;
text-align: center;
position: relative;
text-transform: uppercase;
&:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
}
&:nth-child(1) {
&:after {
background: linear-gradient(to left, #cb2d3e , #ef473a);
}
}
&:nth-child(2) {
&:after {
background: linear-gradient(to left, #ffb347 , #ffcc33);
}
}
&:nth-child(3) {
&:after {
background: linear-gradient(to left, #56ab2f , #a8e063);
}
}
&:nth-child(4) {
&:after {
background: linear-gradient(to left, #00d2ff , #3a7bd5);
}
}
&:nth-child(5) {
&:after {
background: linear-gradient(to left, #4CB8C4 , #3CD3AD);
}
}
}
}
.wrapper {
overflow: hidden;
}
//dashboard
.dashboard {
height: calc(100% - 101px);
> div {
float: left;
height: 100%;
border-right: 1px solid $base-color;
width: 20%;
}
}
//Cards
.card {
background-color: $base-color;
min-height: 50px;
margin: 10px;
position: relative;
overflow: hidden;
height: 40px;
box-shadow: 3px 3px 3px rgba(0,0,0,.1);
z-index: 2;
&:before {
content: "";
position: absolute;
height: 100%;
width: 1px;
}
p:before,
h5:after {
.rejected & {
color: #ef473a;
}
.pending & {
color: #ffcc33;
}
.development & {
color: #a8e063;
}
.testing & {
color: #3a7bd5;
}
.production & {
color: #3CD3AD;
}
}
h5 {
font-size: 13px;
line-height: 50px;
padding-left: 10px;
font-weight: 300;
}
&.edit-mode {
h5 {
position: relative;
&:after {
top: 50%;
margin-left: 5px;
margin-top: 1px;
transform: translateY(-50%);
position: absolute;
font-size: 9px;
content: "(Edit Mode Enabled)";
}
}
}
.rejected & {
&:before {
background: linear-gradient(to left, #cb2d3e , #ef473a);
}
}
.pending & {
&:before {
background: linear-gradient(to left, #ffb347 , #ffcc33);
}
}
.development & {
&:before {
background: linear-gradient(to left, #56ab2f , #a8e063);
}
}
.testing & {
&:before {
background: linear-gradient(to left, #00d2ff , #3a7bd5);
}
}
.production & {
&:before {
background: linear-gradient(to left, #4CB8C4 , #3CD3AD);
}
}
&.expanded {
overflow: auto !important;
height: auto !important;
}
}
.card-details {
padding: 10px;
font-size: 12px;
word-wrap: break-word;
padding-top: 0;
p {
margin-bottom: 10px;
position: relative;
&:before {
position: absolute;
left: 0;
}
&:nth-child(1) {
padding-left: 67px;
&:before {
content: "Description : ";
}
}
&:nth-child(2) {
padding-left: 72px;
&:before {
content: "Remote URL : ";
}
}
&:nth-child(3) {
padding-left: 70px;
&:before {
content: "Assigned To : ";
}
}
}
a {
border-bottom: 1px dotted #fff;
&:hover {
border-bottom-style: solid;
}
}
}
.dragged-over {
background-color: rgba(0,0,0,.1);
}
@keyframes rotate180 {
to {
transform: rotate(180deg);
}
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to left, $grad-start, $grad-end);
z-index: 2;
}
.modal-wrapper {
position: absolute;
top: 50%;
left: 50%;
max-width: 400px;
margin: auto;
width: 100%;
transform: translateX(-50%) translateY(-50%);
.close-modal {
border: 1px solid rgba(255,255,255,.1);
border-radius: 50%;
width: 50px;
height: 50px;
position: absolute;
top: -90px;
font-family: Open Sans;
line-height: 52px;
font-size: 20px;
left: 50%;
transform: translateX(-50%);
vertical-align: middle;
cursor: pointer;
&:hover {
border-color: #fff;
}
}
h3 {
font-weight: 100;
font-size: 30px;
position: relative;
}
}
.add-task-form {
text-align: center;
li {
margin-top: 30px;
}
[type=text],
[type=submit],
textarea {
color: #fff;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
width: 100%;
line-height: 24px;
padding: 15px 10px;
appearance: none;
border: 1px solid rgba(255,255,255,.07);
background-color: transparent;
transition: border-color .25s linear;
&::-webkit-input-placeholder {
color: rgba(255,255,255,.3);
}
&:focus {
border-color: #fff;
}
}
[type=submit] {
cursor: pointer;
border-color: transparent;
}
textarea {
resize: none;
min-height: 100px;
}
}
.expand-card {
height: 19px;
width: 19px;
background-size: auto 100%;
display: inline-block;
position: absolute;
top: 25px;
cursor: pointer;
transform: translateY(-50%);
right: 15px;
padding: 3px;
.rejected & {
background-image: url('../images/rejected-expand.svg');
}
.pending & {
background-image: url('../images/pending-expand.svg');
}
.development & {
background-image: url('../images/development-expand.svg');
}
.testing & {
background-image: url('../images/testing-expand.svg');
}
.production & {
background-image: url('../images/production-expand.svg');
}
svg {
fill: #fff;
}
}
.removed-task-notification {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
padding: 5px 20px;
color: #515151;
border-radius: 3px;
background-color: rgba(255,255,255,.8);
box-sizing: 0 0 3px rgba(0,0,0,.6);
}
footer {
height: 50px;
position: relative;
border-top: 1px solid $base-color;
}
.remove {
display: block;
background-color: #ef473a;
border-radius: 50%;
height: 30px;
width: 30px;
text-align: center;
padding-top: 7px;
transition: all 300ms ease-out;
cursor: default;
img {
width: 16px;
}
&.dragged-over {
width: 250px;
border-radius: 3px;
}
}
.add-task {
z-index: 1;
border-radius: 50%;
img {
width: 30px;
display: block;
box-shadow: 3px 3px 3px rgba(0,0,0,.1);
}
&:hover {
img {
animation: rotate180 .2s linear;
}
}
}
[data-tooltip] {
position: relative;
&:before {
display: none;
content: attr(data-tooltip);
background-color: rgba(0,0,0,.6);
padding: 10px 20px;
position: absolute;
text-align: center;
white-space: nowrap;
left: 50%;
transform: translateY(-130%) translateX(-50%);
}
&:hover {
&:before {
display: block;
}
}
}
.controls {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
li {
float: left;
margin-right: 20px;
}
}
.branding,
.create-task-branding {
text-transform: uppercase;
font-size: 18px;
padding: 10px;
sup {
position: absolute;
font-size: 9px;
margin-top: -6px;
margin-left: -3px;
}
span {
color: rgba(255,255,255,.6);
}
}
.create-task-branding {
position: absolute;
bottom: 2px;
left: 0;
width: 300px;
}
.github-ref {
height: 30px;
width: 30px;
img {
height: 29px;
width: 29px;
}
}