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