Tool for stand ups / TODO / worklog

dabblet.css

/**
 * Tool for stand ups / TODO / worklog
 */

html
{
	min-height: 100%;
	font-family: Source Sans Pro, sans-serif;font-style:normal;font-weight:400;
	-webkit-font-feature-settings: "onum" 1, "lita";
	-moz-font-feature-settings: "onum" 1, "lita";
	font-feature-settings: "onum" 1, "lita";
	line-height: 1.5em
}

.sr-only
{
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

ul li
{
	list-style: none;
}

label:focus
{
	outline: none;
}

ins, del { display: block; }

ins
{
    background-color: #fea;
    text-decoration: none;
}
input:checked + label
{
    color: gray;
    text-decoration: line-through;
}
del
{
   text-decoration: none;
   background-color: #faa; 
}

.badge
{
	display: inline-block;
	margin-left: 1ex;
	padding: 0 1ex 0.25ex;
	line-height: 1;
	background-color: orangered;
	border-radius: 0.5em;
}

dabblet.html

<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Sans Pro:400">

<h1>StanderUpper</h1>

<ol>
  <li>Lay out plan for today (basing on yestarday's unfinished items)
  <li>Freeze it before starting work
  <li>Work marking items as done, modyfing and adding new if that's <em>really</em> necessary, but rather adding things for tomorrow and later in “Nextly”
  <li>Go to sleep
  <li>Wake up
  <li>Archive yesterday's plan
  <li>Go to step 1.
</ol>

<h4>GitHub integration</h4>

<ol>
  <li>if list item starts with a issue number, it gets linked to the issue (sync closing etc)
  <li>issue numbers get auto-completed (showing issue title and whether it's closed)
  <li>if issue number gets entered at the start of the line, it's name gets inserted after the number
  <li>done issues get added to Today list
  <li>issues tagged as “in progress” get added to Today list
  <li>issues tagged as ”backlog” get added to Nextly list
  <li>if GitHub repo is on waffle, we can show only top X items from “backlog”
</ol>

<p>
  Names of labels configurable.
</p>

<h3>Today</h3>

List of items to be done during that day. Should be populated on mornings and then marked as "frozen". After that adding new items is discouraged (by marking with a background colour).

<ul>
  <li><input type=checkbox> <label contentEditable>do stuff</label> <span class=badge title="13 days on a list">13</span>
  <li><input type=checkbox> <label contentEditable>#42 item linked with an issue
  <li><ins><input type=checkbox> <label contentEditable>not planned
  <li><input type=checkbox checked> <label contentEditable>done stuff
  <li><ins><input type=checkbox checked> <label contentEditable>not planned done stuff
  <li><ins><input type=checkbox checked> <label contentEditable>#13 item that was not planned, but got closed
</ul>

<button>Archive as previous work</button>
<button>Freeze as future plan</button>

<h3>Nextly</h3>

A queue of future items, can be edited during the day. If (and ideally only then) one runs out of things to do planned for a day she can take items from here.

Fetching items from issue tracker here would be a nice addition.

<ul>
  <li><button><span aria-hidden=true>➕</span> <span class=sr-only>Add to today's TODO</span></button> <label contentEditable>do stuff
  <li><button><span aria-hidden=true>➕</span> <span class=sr-only>Add to today's TODO</span></button> <label contentEditable>do other stuff
  <li><button><span aria-hidden=true>➕</span> <span class=sr-only>Add to today's TODO</span></button> <label contentEditable>more stuff
  <li><button><span aria-hidden=true>➕</span> <span class=sr-only>Add to today's TODO</span></button> <label contentEditable>#7 issue with label “backlog”
</ul>

<hr>


<h3>Yesterday</h3>

Archive view. Also read only view of other people's TODOs. If you see lots of colour backgrounds on one's list, it means that his planned work is being heavily interrupted. Note that added, then removed (during single day) itemd do not show here. Only items that were removed after list has been frozen.

<ul>
  <li><input disabled type=checkbox> <label>do stuff
  <li><ins><input disabled type=checkbox> <label>not planned stuff
  <li><input disabled type=checkbox checked> <label>done stuff
  <li><ins><input disabled type=checkbox checked> <label>not planned done stuff
  <li><del><input disabled type=checkbox>removed stuff
  <li><del><input disabled type=checkbox checked>removed stuff done
</ul>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}