Initial commit, app almost completed
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
/node_modules
|
||||
.DS_Store
|
||||
app/assets/scripts
|
||||
app/assets/stylesheets
|
||||
40
app/assets/images/bin.svg
Normal 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 |
11
app/assets/images/development-expand.svg
Normal 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 |
6
app/assets/images/github.svg
Normal 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 |
11
app/assets/images/pending-expand.svg
Normal 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 |
8
app/assets/images/plus.svg
Normal 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 |
11
app/assets/images/production-expand.svg
Normal 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 |
11
app/assets/images/rejected-expand.svg
Normal 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 |
11
app/assets/images/testing-expand.svg
Normal 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
@ -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
@ -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
@ -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
@ -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();
|
||||
4608
src/scripts/lib/handlebars-v4.0.5.js
Normal file
19
src/scripts/localstorage.js
Normal 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
@ -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;
|
||||
}
|
||||
}
|
||||