From 57cccf6b02194e21040814b67bfc1642df93d789 Mon Sep 17 00:00:00 2001 From: i-break-codes Date: Sun, 20 Nov 2016 13:45:04 +0530 Subject: [PATCH] add tip, update readme --- README.md | 20 +++++++++++++++- app/assets/images/info.svg | 37 +++++++++++++++++++++++++++++ index.html | 8 +++++-- src/scripts/app.js | 12 ++++++++++ src/stylesheets/app.scss | 48 ++++++++++++++++++++++++++++++++++++++ 5 files changed, 122 insertions(+), 3 deletions(-) create mode 100644 app/assets/images/info.svg diff --git a/README.md b/README.md index 786d965..825aebb 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,20 @@ # scrum-board -JavaScript Scrum App to manage tasks with ease +JavaScript Scrum App to manage tasks with ease. + +> Warning : It uses localstorage to store your tasks, make sure you don't clean up your Local Storage for this app atleast. + +#### Setup +- Clone Application by typing the following command in your terminal `git@github.com:i-break-codes/scrum-board.git` +- Install node modules - `npm install` +- Compile Assets - `gulp` + +#### More to come +- [ ] Edit task title +- [ ] Set tasks priority +- [ ] Import / Export tasks +- [ ] Remember expanded/collapsed state of a task +- [ ] Database / Websockets for collab board + +#### Support +- Bugs and requests, submit them through the project's issues section +- Questions? DM or Tweet me [@mr_ali3n](https://twitter.com/mr_ali3n) \ No newline at end of file diff --git a/app/assets/images/info.svg b/app/assets/images/info.svg new file mode 100644 index 0000000..9787886 --- /dev/null +++ b/app/assets/images/info.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 74efefe..63b4c11 100644 --- a/index.html +++ b/index.html @@ -44,7 +44,7 @@
  • - +
    • @@ -86,6 +86,10 @@ +
    + Double click on the task text to edit it +
    + - + diff --git a/src/scripts/app.js b/src/scripts/app.js index ad1fd74..6ec24f3 100644 --- a/src/scripts/app.js +++ b/src/scripts/app.js @@ -1,5 +1,6 @@ var App = function() { function init() { + tips(); preset(); draggable(); droppable(); @@ -193,6 +194,17 @@ var App = function() { } } + function tips() { + if(!JSON.parse(LocalStorage.get('showedTip'))) { + $('#tips').removeClass('hide').addClass('tips'); + } + + $('#tips').on('click', function() { + $(this).addClass('hide'); + LocalStorage.set('showedTip', true); + }); + } + return { init: init, getAllNotes: getAllNotes diff --git a/src/stylesheets/app.scss b/src/stylesheets/app.scss index 8348cdc..4535a69 100644 --- a/src/stylesheets/app.scss +++ b/src/stylesheets/app.scss @@ -527,4 +527,52 @@ footer { height: 29px; width: 29px; } +} + +.onboard { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, .7); + z-index: 2; +} + +.onboard-modal { + height: 300px; + width: 450px; + background-color: #fff; + border-radius: 3px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.tips { + position: absolute; + bottom: 90px; + right: -280px; + font-size: 13px; + background-color: rgba(0,0,0,.3); + padding: 10px; + border-radius: 3px; + padding-left: 25px; + opacity: 0; + animation: showTips 500ms ease-in forwards; + cursor: pointer; + background: { + image: url('../images/info.svg'); + position: 4px center; + size: 16px; + repeat: no-repeat; + } +} + +@keyframes showTips { + to { + right: 20px; + opacity: 1; + } } \ No newline at end of file