UI and build process tweaks.

* Reworked the buid process to compile SCSS files and move WWW assets
  directories individually.
* Added pulsing animation for the current marker.
* Bugfix for View objects.

Makefile

@@ -1,5 +1,7 @@
 MODS = $(wildcard src/*.erl)
 BEAMS = $(MODS:src/%.erl=build/ebin/%.beam)
+SCSS = $(wildcard www/css/*.scss)
+CSS_FILES = $(SCSS:www/css/%.scss=build/www/css/%.css)
 TEST_MODS = $(wildcard test/*.erl)
 TEST_BEAMS = $(TEST_MODS:test/%.erl=build/test/%.beam)
 TS_ROOT=/usr/local/var/yaws/jdb-labs.com/timestamper
@@ -9,7 +11,7 @@ default: build
 
 all : compile test
 
-compile : init $(BEAMS)
+compile : init $(BEAMS) $(CSS_FILES)
 
 compile-test : init $(TEST_BEAMS)
 
@@ -33,6 +35,9 @@ clean:
 
 init:
 	-mkdir -p build/ebin
+	-mkdir -p build/www/css
+	-mkdir -p build/www/js
+	-mkdir -p build/www/img
 
 build/ebin/%.beam : src/%.erl
 	erlc -W -o build/ebin $<
@@ -41,9 +46,14 @@ build/test/%.beam : test/%.erl
 	@echo Compiling sources...
 	erlc -W -o build/test $<
 
+build/www/css/%.css : www/css/%.scss
+	scss $< $@
+
 build: compile
 	-mkdir -p build/include
-	cp -r www build
+	cp -r www/js build/www/
+	cp -r www/img build/www/
+	cp -r www/*.* build/www/
 	cp lib/* build/ebin
 	cp src/ts_db_records.hrl build/include
 	cp yaws.prod.conf build/yaws.conf

www/css/ts-screen.css

@@ -1,369 +0,0 @@
-/*
- * author: Jonathan Bernard
- * TimeStamper main CSS for screen media types
- */
-/* _rounded.scss */
-* {
-  color: inherit; }
-
-body {
-  color: #222222;
-  width: 75%;
-  margin: auto;
-  padding: 0; }
-
-input {
-  border: solid thin #555555;
-  -webkit-box-shadow: inset 0px 2px 4px #CCC;
-  box-shadow: inset 0px 2px 4px #CCC;
-  margin: 0;
-  margin-bottom: 0.5em;
-  padding: 0;
-  font-family: Cantarell; }
-
-#top {
-  background: #222222;
-  color: #eeeeee;
-  margin: 0;
-  opacity: 1;
-  padding: 0.5em 0;
-  padding: 0.5rem 0;
-  position: fixed;
-  top: 0px;
-  width: 75%;
-  z-index: 1; }
-  #top * {
-    margin: 0;
-    padding: 0; }
-  #top #fade-bar {
-    background: url("img/fade.png") repeat-x;
-    height: 32px;
-    width: 100%; }
-
-#timeline {
-  border-bottom: thin solid #eeeeee;
-  font-family: Arvo;
-  font-size: 1.5em;
-  padding: 0 2em;
-  padding: 0 2rem; }
-  #timeline .timeline-desc {
-    display: inline-block;
-    width: 70%; }
-  #timeline .timeline-desc-input {
-    width: 70%; }
-  #timeline .timeline-id {
-    display: inline-block; }
-  #timeline .timeline-desc-input, #timeline .timeline-id-input {
-    font-family: inherit;
-    font-size: inherit;
-    color: #222222;
-    display: none; }
-  #timeline.edit-id .timeline-id-input {
-    display: inline-block; }
-  #timeline.edit-id .timeline-id {
-    display: none; }
-  #timeline.edit-desc .timeline-desc-input {
-    display: inline-block; }
-  #timeline.edit-desc .timeline-desc {
-    display: none; }
-  #timeline .drop-menu {
-    text-align: right;
-    display: inline-block;
-    width: 29%; }
-    #timeline .drop-menu .drop-menu-items {
-      text-align: right;
-      right: 0;
-      width: 172.41%; }
-      #timeline .drop-menu .drop-menu-items .new-timeline-link {
-        padding-right: 0.5em;
-        font-size: medium; }
-        #timeline .drop-menu .drop-menu-items .new-timeline-link a {
-          text-decoration: underline; }
-        #timeline .drop-menu .drop-menu-items .new-timeline-link img {
-          position: relative;
-          top: 4px;
-          left: -4px; }
-      #timeline .drop-menu .drop-menu-items .timeline-link {
-        padding: 0 0.5em;
-        font-size: medium;
-        border-left: thin solid white; }
-
-.dialog {
-  background: white;
-  background: rgba(255, 255, 255, 0.5);
-  color: #eeeeee;
-  margin: 0;
-  padding: 0;
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100em;
-  z-index: 10; }
-  .dialog * {
-    margin: 0;
-    padding: 0; }
-  .dialog div.container {
-    background: #222222;
-    border-radius: 10px;
-    font-family: Cantarell;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 4em;
-    padding: 1em;
-    width: 20em; }
-    .dialog div.container h2 {
-      border-bottom: thin solid #eeeeee;
-      font-family: Arvo;
-      padding-bottom: 0.5em;
-      margin-bottom: 0.5em; }
-    .dialog div.container label {
-      display: inline-block;
-      width: 6em; }
-    .dialog div.container input {
-      color: #222222; }
-    .dialog div.container .button-panel {
-      margin-top: 0.5em;
-      overflow: hidden; }
-      .dialog div.container .button-panel .validate-tips {
-        font-size: 1em; }
-      .dialog div.container .button-panel .dialog-button {
-        float: right;
-        padding-left: 1em;
-        font-family: Arvo;
-        font-size: 1.2em; }
-        .dialog div.container .button-panel .dialog-button a {
-          color: #eeeeee; }
-
-#login.dialog {
-  background: white;
-  opacity: 1; }
-
-/*#login {
-
-    background: white;
-    color: $lightTxt;
-    margin: 0;
-    padding: 0;
-    opacity: 1;
-
-    position: fixed;
-    top: 0px;
-    left: 0px;
-
-    width: 100%;
-    height: 100em;
-
-    z-index: 10;
-
-    * {
-        margin: 0;
-        padding: 0;
-    }
-    
-    div.container {
-
-        background: $darkBg;
-        border-radius: 10px;
-        font-family: Cantarell;
-        margin-left: auto;
-        margin-right: auto;
-        margin-top: 4em;
-        padding: 1em;
-        width: 20em;
-        
-        h2 {
-            border-bottom: thin solid $lightBg;
-            font-family: Arvo;
-            padding-bottom: 0.5em;
-            margin-bottom: 0.5em;
-        }
-
-        label {
-            display: inline-block;
-            width: 6em;
-        }
-
-        input {
-            color: $darkTxt;
-        }
-
-        #login-button {
-
-            text-align: right;
-            margin-top: 0.5em;
-
-            font-family: Arvo;
-            font-size: 1.2em;
-
-            .validate-tips { font-size: 1em; }
-
-            a { color: $lightBg; }
-        }
-    }
-}*/
-#user {
-  font-family: "Josefin Sans";
-  margin-top: -0.3em;
-  padding: 0 2em;
-  margin-top: -0.3rem;
-  padding: 0 2rem;
-  width: 100%; }
-  #user .fullname, #user .username {
-    display: inline-block;
-    font-size: larger; }
-  #user .fullname-input {
-    font-family: inherit;
-    font-size: inherit;
-    color: #222222;
-    display: none; }
-  #user.edit-fullname .fullname-input {
-    display: inline-block; }
-  #user.edit-fullname .fullname {
-    display: none; }
-  #user .user-menu {
-    display: inline-block; }
-  #user .user-menu .user-menu-items {
-    list-style: none;
-    display: none; }
-    #user .user-menu .user-menu-items li {
-      display: inline-block;
-      padding-left: 0.5em; }
-    #user .user-menu .user-menu-items a {
-      text-decoration: none; }
-    #user .user-menu .user-menu-items a:hover {
-      text-decoration: underline; }
-  #user .user-menu:hover .user-menu-items, #user .user-menu-items:hover {
-    display: inline-block; }
-
-#entry-list {
-  margin: 6em 0 0 0;
-  margin: 6rem 0 0 0;
-  padding-bottom: 1em 0 0 0;
-  padding-bottom: 1rem 0 0 0; }
-  #entry-list .day-seperator {
-    background: #cccccc;
-    color: #222222;
-    font-family: Cantarell;
-    font-weight: bold;
-    margin: 1em 0 0 0;
-    margin: 1rem 0 0 0;
-    padding: 0 2em;
-    padding: 0 2rem; }
-    #entry-list .day-seperator * {
-      margin: 0;
-      padding: 0; }
-    #entry-list .day-seperator h4, #entry-list .day-seperator h5 {
-      display: inline-block; }
-    #entry-list .day-seperator h5 {
-      color: #667; }
-  #entry-list #new-entry {
-    margin: 0.5em 0 0 0;
-    padding: 0 2em;
-    margin: 0.5rem 0 0 0;
-    padding: 0 2rem; }
-    #entry-list #new-entry * {
-      margin: 0;
-      padding: 0; }
-  #entry-list .timestamp, #entry-list .timestamp-input, #entry-list .duration {
-    text-align: right;
-    width: 14%; }
-  #entry-list .mark, #entry-list .mark-input {
-    width: 70%; }
-  #entry-list .entry {
-    font-family: Cantarell;
-    padding: 0 2em;
-    padding: 0 2rem; }
-    #entry-list .entry div {
-      display: inline-block; }
-    #entry-list .entry .mark {
-      margin: 0;
-      padding: 0;
-      position: relative; }
-      #entry-list .entry .mark * {
-        margin: 0;
-        padding: 0; }
-      #entry-list .entry .mark img.expand-entry, #entry-list .entry .mark img.collapse-entry {
-        display: none;
-        left: -20px;
-        position: absolute;
-        top: 6px; }
-    #entry-list .entry:hover .mark img.expand-entry, #entry-list .entry.show-notes img.collapse-entry {
-      display: inline; }
-    #entry-list .entry .mark-input, #entry-list .entry .timestamp-input, #entry-list .entry.show-notes:hover img.expand-entry {
-      display: none; }
-    #entry-list .entry .notes {
-      display: none;
-      font-family: Cantarell;
-      font-size: small;
-      margin: 0;
-      padding: 0 0 0 1em;
-      width: 70%; }
-      #entry-list .entry .notes :first-child {
-        margin-top: 0; }
-      #entry-list .entry .notes .notes-input, #entry-list .entry .notes pre, #entry-list .entry .notes code {
-        font-family: 'Anonymous Pro'; }
-    #entry-list .entry .notes * {
-      width: 100%; }
-    #entry-list .entry.edit-mark .mark-input {
-      display: inline-block; }
-    #entry-list .entry.edit-mark .mark {
-      display: none; }
-    #entry-list .entry.edit-timestamp .timestamp-input {
-      display: inline-block; }
-    #entry-list .entry.edit-timestamp .timestamp {
-      display: none; }
-    #entry-list .entry .notes-input {
-      display: none; }
-    #entry-list .entry.edit-notes .notes-input {
-      display: block; }
-    #entry-list .entry.edit-notes .notes-text {
-      display: none; }
-
-.drop-menu {
-  margin: 0;
-  padding: 0;
-  position: relative; }
-  .drop-menu * {
-    margin: 0;
-    padding: 0; }
-  .drop-menu .drop-menu-items {
-    display: none;
-    list-style: none;
-    position: absolute; }
-    .drop-menu .drop-menu-items li {
-      display: inline-block;
-      padding-left: 0.5em; }
-  .drop-menu:hover .drop-menu-items, .drop-menu .drop-menu-items:hover {
-    display: block; }
-  .drop-menu a {
-    display: inline-block;
-    text-decoration: none; }
-    .drop-menu a:hover {
-      text-decoration: underline; }
-
-.footer {
-  background: #222222;
-  color: #eeeeee;
-  font-family: Bentham;
-  margin: 0;
-  padding: 1em 0;
-  padding: 1rem 0;
-  text-align: center;
-  width: 100%; }
-  .footer * {
-    margin: 0;
-    padding: 0; }
-  .footer a {
-    color: white;
-    text-decoration: none; }
-    .footer a:hover {
-      text-decoration: underline; }
-
-.logo {
-  font-family: Bentham;
-  text-decoration: overline underline;
-  color: inherit; }
-
-.hidden {
-  display: none; }

www/css/ts-screen.scss

@@ -414,6 +414,11 @@ input {
 
         &.edit-notes .notes-text { display: none; }
 
+        &.current .duration {
+            -webkit-animation: pulse 1s infinite alternate;
+            -moz-animation: pulse 1s infinite alternate;
+            -o-animation: pulse 1s infinite alternate;
+            animation: pulse 1s infinite alternate; }
     }
 
 }
@@ -483,3 +488,20 @@ input {
 }
 
 .hidden { display: none; }
+
+@-webkit-keyframes pulse {
+    from { opacity: 1; }
+    to { opacity: 0.2; } }
+
+@-moz-keyframes pulse {
+    from { opacity: 1; }
+    to { opacity: 0.2; } }
+
+@-o-keyframes pulse {
+    from { opacity: 1; }
+    to { opacity: 0.2; } }
+
+@keyframes pulse {
+    from { opacity: 1; }
+    to { opacity: 0.2; } }
+

www/js/ts.js

@@ -296,7 +296,7 @@ $(document).ready(function(){
 
     TS.EntryListView = Backbone.View.extend({
         
-        el: $("#entry-list"),
+        el: $("#entry-list")[0],
 
         events: { "keypress #new-entry-input"    : "createNewEntryOnEnter" },
 
@@ -312,7 +312,9 @@ $(document).ready(function(){
             var lastEntry = this.collection.at(this.collection.length - 2);
             lastEntry.view.nextModel = entry;
             lastEntry.view.update();
-            this.renderOne(entry, null); },
+            this.renderOne(entry, null);
+			$(".entry.current").removeClass("current");
+			$(entry.view.el).addClass("current"); },
 
         renderOne: function(entry, nextEntry) {
             // exclude if any exclusion RegExps match
@@ -428,7 +430,7 @@ $(document).ready(function(){
             else if (dayDiff == 0) { return "Today"; } } });
 
     TS.TimelineListView = Backbone.View.extend({
-        el: $("#timeline"),
+        el: $("#timeline")[0],
 
         collection: TS.TimelineList,
 
@@ -487,7 +489,7 @@ $(document).ready(function(){
 
     TS.UserView = Backbone.View.extend({
         
-        el: $("#user"),
+        el: $("#user")[0],
 
         model: TS.UserModel,
 
@@ -518,7 +520,7 @@ $(document).ready(function(){
 
     TS.AppView = Backbone.View.extend({
 
-        el: $("body"),
+        el: $("body")[0],
 
         events: { 'click #timeline .drop-menu-items a': 'selectTimeline' },
 
@@ -635,7 +637,7 @@ $(document).ready(function(){
                 this.entries.collection.fetch() } } });
 
     TS.LoginView = Backbone.View.extend({
-        el: $("#login"),
+        el: $("#login")[0],
 
         events: {
             "keypress #password-input"  : "loginOnEnter",
@@ -685,7 +687,7 @@ $(document).ready(function(){
             if (e.keyCode == 13) { this.doLogin(); } } });
 
     TS.NewTimelineView = Backbone.View.extend({
-        el: $("#new-timeline"),
+        el: $("#new-timeline")[0],
 
         events: {
             "click #new-timeline-create a"  : "createTimeline",