From f00ec0e7a9eadd25ba0da32943acae0fe131bb24 Mon Sep 17 00:00:00 2001 From: Jonathan Bernard Date: Wed, 11 Sep 2013 23:31:04 -0500 Subject: [PATCH] Initial commit with UI mockup. --- .gitignore | 3 + mockup/css/display.scss | 158 ++++++++++++++++++++++++++++++++++++++++ mockup/display.html | 66 +++++++++++++++++ 3 files changed, 227 insertions(+) create mode 100644 .gitignore create mode 100644 mockup/css/display.scss create mode 100644 mockup/display.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..fcc82ad --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +*.sw? +build/ +.sass-cache/ diff --git a/mockup/css/display.scss b/mockup/css/display.scss new file mode 100644 index 0000000..3e80024 --- /dev/null +++ b/mockup/css/display.scss @@ -0,0 +1,158 @@ +/* Personal Status Display + Author: Jonathan Bernard */ + +/* 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; } + } +} diff --git a/mockup/display.html b/mockup/display.html new file mode 100644 index 0000000..e8e257a --- /dev/null +++ b/mockup/display.html @@ -0,0 +1,66 @@ + + + + What I am Doing + + + + + +
+

Current Activity

+ QD Lobby Map: Meeting with JCA. +
+

Discussed current display procedure, plans for new display. +Thoughts for new display:

+ +
    +

  • 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.

    • +

  • 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.

    + +

    In other words, does the display show the current week/month or does it show +the last 7/30 days?

    + +

    The decision was to expirement and see which was a more impressive display.

    • +

  • I need to investigate the latest version of KML in case there are new +features available that would be useful.

    • +
+ + +

Other notes:

+ +
    +
  • QD is running Google Earth 7.1 (latest Beta)
    • +
  • Chris will send me the Order Tour source code.
    • +
  • We planned to have my old workstation setup and configured with GoToMyPC to +allow access to the QD development environment.
    • +
+
+
+
+

Next Actions (unsorted)

+
+ Respond to ELance job proposal. + Mon, 08/05 +
+
+ Create matching project folder structure in + the done folder as the project folder and move action items + appropriately. + GTD CLI +
+
+ Implement category drill down. + Time analyzer software + Double-clicking on a category should show a + graph of sub-items in that category. +
+
+ +