diff --git a/Makefile b/Makefile
index af84dca..36e33b3 100644
--- a/Makefile
+++ b/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
diff --git a/www/css/ts-screen.css b/www/css/ts-screen.css
deleted file mode 100644
index 319656a..0000000
--- a/www/css/ts-screen.css
+++ /dev/null
@@ -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; }
diff --git a/www/css/ts-screen.scss b/www/css/ts-screen.scss
index 2d7f4e0..bbe25cb 100644
--- a/www/css/ts-screen.scss
+++ b/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; } }
+
diff --git a/www/js/ts.js b/www/js/ts.js
index 9c9636c..fa7c777 100644
--- a/www/js/ts.js
+++ b/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",