Initial commit with UI mockup.
This commit is contained in:
Jonathan Bernard
commit
f00ec0e7a9
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
*.sw?
|
||||||
|
build/
|
||||||
|
.sass-cache/
|
||||||
158
mockup/css/display.scss
Normal file
158
mockup/css/display.scss
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
/* Personal Status Display
|
||||||
|
Author: Jonathan Bernard <jdbernard@gmail.com> */
|
||||||
|
|
||||||
|
/* Theme: [She Sells Seashells](http://www.colourlovers.com/palette/57650/She_Sells_Seashells)
|
||||||
|
$color1: #ffefd3;
|
||||||
|
$color2: #fffee4;
|
||||||
|
$color3: #d0ecea;
|
||||||
|
$color4: #49aca5;
|
||||||
|
$color5: #6d5f49;
|
||||||
|
|
||||||
|
$fgColor: $color5;
|
||||||
|
$mutedFgColor: lighten($fgColor, 15%);
|
||||||
|
$bgColor: $color2;
|
||||||
|
$bgColor2: $color1;
|
||||||
|
$accent1: $color3;
|
||||||
|
$accent2: $color4;
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Theme: [Between The Clouds](http://www.colourlovers.com/palette/1083480/Between_The_Clouds)
|
||||||
|
$color1: #73c8a9;
|
||||||
|
$color2: #dee1b6;
|
||||||
|
$color3: #e1b866;
|
||||||
|
$color4: #bd5532;
|
||||||
|
$color5: #373b44;
|
||||||
|
|
||||||
|
$fgColor: $color5;
|
||||||
|
$mutedFgColor: lighten($fgColor, 15%);
|
||||||
|
$bgColor: lighten($color2, 10%);
|
||||||
|
$bgColor2: $color3;
|
||||||
|
$accent1: $color1;
|
||||||
|
$accent2: $color4;
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Theme: [Less Squinting!](http://www.colourlovers.com/palette/1066563/Less_Squinting!)
|
||||||
|
$color1: #B2CBA3;
|
||||||
|
$color2: #E0DF9F;
|
||||||
|
$color3: #E7A83E;
|
||||||
|
$color4: #9A736E;
|
||||||
|
$color5: #EA525F;
|
||||||
|
|
||||||
|
$fgColor: darken($color4, 10%);
|
||||||
|
$mutedFgColor: lighten($fgColor, 15%);
|
||||||
|
$bgColor: lighten($color2, 15%);
|
||||||
|
$bgColor2: $color1;
|
||||||
|
$accent1: $color3;
|
||||||
|
$accent2: $color5;
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Theme: [with you](http://www.colourlovers.com/palette/908111/with_you)
|
||||||
|
$color1: #785D56;
|
||||||
|
$color2: #BE4C54;
|
||||||
|
$color3: #C6B299;
|
||||||
|
$color4: #E6D5C1;
|
||||||
|
$color5: #FFF4E3;
|
||||||
|
|
||||||
|
$fgColor: $color1;
|
||||||
|
$mutedFgColor: lighten($fgColor, 15%);
|
||||||
|
$bgColor: lighten($color5, 5%);
|
||||||
|
$bgColor2: $color4;
|
||||||
|
$accent1: $color3;
|
||||||
|
$accent2: $color2;
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Theme: [Autumn Oak](http://www.colourlovers.com/palette/29411/Autumn_Oak)
|
||||||
|
*/
|
||||||
|
$color1: #111111;
|
||||||
|
$color2: #FCF7D1;
|
||||||
|
$color3: #A9A17A;
|
||||||
|
$color4: #B52C00;
|
||||||
|
$color5: #8C0005;
|
||||||
|
|
||||||
|
/* Normal
|
||||||
|
$fgColor: $color1;
|
||||||
|
$mutedFgColor: lighten($fgColor, 15%);
|
||||||
|
$bgColor: $color2;
|
||||||
|
$bgColor2: $color3;
|
||||||
|
$accent1: $color5;
|
||||||
|
$accent2: $color4;
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Inverted */
|
||||||
|
$mutedFgColor: $color2;
|
||||||
|
$fgColor: lighten($mutedFgColor, 15%);
|
||||||
|
$bgColor: $color1;
|
||||||
|
$bgColor2: $color3;
|
||||||
|
$accent1: $color5;
|
||||||
|
$accent2: $color4;
|
||||||
|
|
||||||
|
/// Global Rules
|
||||||
|
* {
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
|
||||||
|
html {
|
||||||
|
background-color: $bgColor;
|
||||||
|
color: $fgColor;
|
||||||
|
font-size: 150%; }
|
||||||
|
|
||||||
|
/* HTML5 elements */
|
||||||
|
article,aside,details,figcaption,figure,
|
||||||
|
footer,header,hgroup,menu,nav,section {
|
||||||
|
display:block; }
|
||||||
|
|
||||||
|
p, ul, li { margin: 0.5em 0; }
|
||||||
|
|
||||||
|
a { color: $accent2; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Advent Pro, Rosario, Jura, Average Sans, Cantarell;
|
||||||
|
margin: 0.5rem 1rem; }
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding: 0.2rem;
|
||||||
|
|
||||||
|
& > h3 {
|
||||||
|
border-bottom: solid 2px $accent1;
|
||||||
|
color: $accent2;
|
||||||
|
font-family: Play, Jura, Exo, Rationale, Quicksand, Average Sans, sans-serif;
|
||||||
|
font-size: larger;
|
||||||
|
margin: 0.2rem 0.2rem 0.2rem -0.2rem;
|
||||||
|
padding-left: 0.2rem; }
|
||||||
|
|
||||||
|
.task-notes {
|
||||||
|
color: $mutedFgColor;
|
||||||
|
font-size: 75%;
|
||||||
|
max-height: 10em;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-action {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
|
||||||
|
.date, .project {
|
||||||
|
background: $bgColor2;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: $mutedFgColor;
|
||||||
|
font-size: 66%;
|
||||||
|
max-width: 33%;
|
||||||
|
padding: 0 0.5em;
|
||||||
|
white-space: nowrap; }
|
||||||
|
|
||||||
|
.details {
|
||||||
|
color: $mutedFgColor;
|
||||||
|
display: block;
|
||||||
|
font-size: 75%; }
|
||||||
|
|
||||||
|
.project:before {
|
||||||
|
content: 'Project: ';
|
||||||
|
font-family: Play;
|
||||||
|
font-variant: small-caps; }
|
||||||
|
|
||||||
|
.date:before {
|
||||||
|
content: 'Due: ';
|
||||||
|
font-family: Play;
|
||||||
|
font-variant: small-caps; }
|
||||||
|
}
|
||||||
|
}
|
||||||
66
mockup/display.html
Normal file
66
mockup/display.html
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>What I am Doing</title>
|
||||||
|
<link rel="stylesheet" href="css/display.css" type="text/css">
|
||||||
|
<link
|
||||||
|
href='http://fonts.googleapis.com/css?family=Average+Sans|Quicksand:300,400,700|Oleo+Script+Swash+Caps|Ubuntu|Rationale|Exo:200,400|Cantarell|Jura|Play|Seaweed+Script|Rosario|Bubbler+One|Spinnaker|Advent+Pro'
|
||||||
|
rel='stylesheet' type='text/css'>
|
||||||
|
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section id=current-task>
|
||||||
|
<h3>Current Activity</h3>
|
||||||
|
<span class=task>QD Lobby Map: Meeting with JCA.</span>
|
||||||
|
<div class=task-notes>
|
||||||
|
<p>Discussed current display procedure, plans for new display.
|
||||||
|
Thoughts for new display:</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><p>Predefined window of time (TBD) for the orders to be shown on the map. All
|
||||||
|
orders displayed will be chosen based on when they were placed.</p></li>
|
||||||
|
<li><p>Discussed whether we wanted to have a periodic refresh, meaning we would
|
||||||
|
blank the display at the beginning of the week/month and let it fill back in
|
||||||
|
as orders come in, or keep a rolling refresh, meaning we would drop orders
|
||||||
|
from the display when they are more than a week/month old.</p>
|
||||||
|
|
||||||
|
<p>In other words, does the display show the current week/month or does it show
|
||||||
|
the last 7/30 days?</p>
|
||||||
|
|
||||||
|
<p>The decision was to expirement and see which was a more impressive display.</p></li>
|
||||||
|
<li><p>I need to investigate the latest version of KML in case there are new
|
||||||
|
features available that would be useful.</p></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Other notes:</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>QD is running Google Earth 7.1 (latest Beta)</li>
|
||||||
|
<li>Chris will send me the Order Tour source code.</li>
|
||||||
|
<li>We planned to have my old workstation setup and configured with GoToMyPC to
|
||||||
|
allow access to the QD development environment.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id=priorities>
|
||||||
|
<h3>Next Actions (unsorted)</h3>
|
||||||
|
<div class=next-action>
|
||||||
|
<span class=action>Respond to ELance job proposal.</span>
|
||||||
|
<span class=date>Mon, 08/05</span>
|
||||||
|
</div>
|
||||||
|
<div class=next-action>
|
||||||
|
<span class=action>Create matching project folder structure in
|
||||||
|
the <em>done</em> folder as the project folder and move action items
|
||||||
|
appropriately.</span>
|
||||||
|
<span class=project><a href=/project/gtd-cli">GTD CLI</a></span>
|
||||||
|
</div>
|
||||||
|
<div class=next-action>
|
||||||
|
<span class=action>Implement category drill down.</span>
|
||||||
|
<span class=project><a href="/project/time-analyzer">Time analyzer software</a></span>
|
||||||
|
<span class=details>Double-clicking on a category should show a
|
||||||
|
graph of sub-items in that category.</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user