Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

derby updated to use bower #525

Merged
merged 1 commit into from

4 participants

Stephen Sawchuk Pascal Hartig Sindre Sorhus Addy Osmani
Stephen Sawchuk

(#475)

This one was similar to the SocketStream example, #523. I created a .bowerrc to point to /public/components. That was about it for this one. I also tweaked the app a bit. It now:

  • requires dblclick to edit,
  • adds the "selected" class to the active view's footer link. I see this is working at todomvc.derbyjs.com, but wasn't working locally for me :-\
  • re-structured the mark-up to conform to the normal template, which eliminated the need for an additional .css file.

As always, happy to make changes, and hope I didn't break anything :-D

Pascal Hartig
Owner

Awesome. We wanted to move the hosting anyway, I'll try to deploy this later this week.

Sindre Sorhus
Owner

:D

Addy Osmani
Owner

Really nice work @stephenplusplus! You've been on fire lately :) @passy I'm going to merge this tonight. Could you work on checking we don't have deployment issues when you get a chance?

Addy Osmani addyosmani merged commit feb84b1 into from
Pascal Hartig
Owner

@addyosmani I'll check tomorrow or Friday. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 6, 2013
  1. Stephen Sawchuk
This page is out of date. Refresh to see the latest.
3  labs/architecture-examples/derby/.bowerrc
View
@@ -0,0 +1,3 @@
+{
+ "directory": "public/components"
+}
7 labs/architecture-examples/derby/component.json
View
@@ -0,0 +1,7 @@
+{
+ "name": "todomvc-derby",
+ "version": "0.0.0",
+ "dependencies": {
+ "todomvc-common": "~0.1.3"
+ }
+}
1  labs/architecture-examples/derby/public/base.css
View
1  labs/architecture-examples/derby/public/bg.png
View
414 labs/architecture-examples/derby/public/components/todomvc-common/base.css
View
@@ -0,0 +1,414 @@
+html,
+body {
+ margin: 0;
+ padding: 0;
+}
+
+button {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: none;
+ font-size: 100%;
+ vertical-align: baseline;
+ font-family: inherit;
+ color: inherit;
+ -webkit-appearance: none;
+ /*-moz-appearance: none;*/
+ -ms-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+}
+
+body {
+ font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ line-height: 1.4em;
+ background: #eaeaea url('bg.png');
+ color: #4d4d4d;
+ width: 550px;
+ margin: 0 auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-font-smoothing: antialiased;
+ -ms-font-smoothing: antialiased;
+ -o-font-smoothing: antialiased;
+ font-smoothing: antialiased;
+}
+
+#todoapp {
+ background: #fff;
+ background: rgba(255, 255, 255, 0.9);
+ margin: 130px 0 40px 0;
+ border: 1px solid #ccc;
+ position: relative;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+ box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
+ 0 25px 50px 0 rgba(0, 0, 0, 0.15);
+}
+
+#todoapp:before {
+ content: '';
+ border-left: 1px solid #f5d6d6;
+ border-right: 1px solid #f5d6d6;
+ width: 2px;
+ position: absolute;
+ top: 0;
+ left: 40px;
+ height: 100%;
+}
+
+#todoapp input::-webkit-input-placeholder {
+ font-style: italic;
+}
+
+#todoapp input:-moz-placeholder {
+ font-style: italic;
+ color: #a9a9a9;
+}
+
+#todoapp h1 {
+ position: absolute;
+ top: -120px;
+ width: 100%;
+ font-size: 70px;
+ font-weight: bold;
+ text-align: center;
+ color: #b3b3b3;
+ color: rgba(255, 255, 255, 0.3);
+ text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
+ -webkit-text-rendering: optimizeLegibility;
+ -moz-text-rendering: optimizeLegibility;
+ -ms-text-rendering: optimizeLegibility;
+ -o-text-rendering: optimizeLegibility;
+ text-rendering: optimizeLegibility;
+}
+
+#header {
+ padding-top: 15px;
+ border-radius: inherit;
+}
+
+#header:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ height: 15px;
+ z-index: 2;
+ border-bottom: 1px solid #6c615c;
+ background: #8d7d77;
+ background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
+ background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+ background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+ background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+ background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+ background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
+ border-top-left-radius: 1px;
+ border-top-right-radius: 1px;
+}
+
+#new-todo,
+.edit {
+ position: relative;
+ margin: 0;
+ width: 100%;
+ font-size: 24px;
+ font-family: inherit;
+ line-height: 1.4em;
+ border: 0;
+ outline: none;
+ color: inherit;
+ padding: 6px;
+ border: 1px solid #999;
+ box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ -moz-font-smoothing: antialiased;
+ -ms-font-smoothing: antialiased;
+ -o-font-smoothing: antialiased;
+ font-smoothing: antialiased;
+}
+
+#new-todo {
+ padding: 16px 16px 16px 60px;
+ border: none;
+ background: rgba(0, 0, 0, 0.02);
+ z-index: 2;
+ box-shadow: none;
+}
+
+#main {
+ position: relative;
+ z-index: 2;
+ border-top: 1px dotted #adadad;
+}
+
+label[for='toggle-all'] {
+ display: none;
+}
+
+#toggle-all {
+ position: absolute;
+ top: -42px;
+ left: -4px;
+ width: 40px;
+ text-align: center;
+ border: none; /* Mobile Safari */
+}
+
+#toggle-all:before {
+ content: '»';
+ font-size: 28px;
+ color: #d9d9d9;
+ padding: 0 25px 7px;
+}
+
+#toggle-all:checked:before {
+ color: #737373;
+}
+
+#todo-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+#todo-list li {
+ position: relative;
+ font-size: 24px;
+ border-bottom: 1px dotted #ccc;
+}
+
+#todo-list li:last-child {
+ border-bottom: none;
+}
+
+#todo-list li.editing {
+ border-bottom: none;
+ padding: 0;
+}
+
+#todo-list li.editing .edit {
+ display: block;
+ width: 506px;
+ padding: 13px 17px 12px 17px;
+ margin: 0 0 0 43px;
+}
+
+#todo-list li.editing .view {
+ display: none;
+}
+
+#todo-list li .toggle {
+ text-align: center;
+ width: 40px;
+ /* auto, since non-WebKit browsers doesn't support input styling */
+ height: auto;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ border: none; /* Mobile Safari */
+ -webkit-appearance: none;
+ /*-moz-appearance: none;*/
+ -ms-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+}
+
+#todo-list li .toggle:after {
+ content: '';
+ line-height: 43px; /* 40 + a couple of pixels visual adjustment */
+ font-size: 20px;
+ color: #d9d9d9;
+ text-shadow: 0 -1px 0 #bfbfbf;
+}
+
+#todo-list li .toggle:checked:after {
+ color: #85ada7;
+ text-shadow: 0 1px 0 #669991;
+ bottom: 1px;
+ position: relative;
+}
+
+#todo-list li label {
+ word-break: break-word;
+ padding: 15px;
+ margin-left: 45px;
+ display: block;
+ line-height: 1.2;
+ -webkit-transition: color 0.4s;
+ -moz-transition: color 0.4s;
+ -ms-transition: color 0.4s;
+ -o-transition: color 0.4s;
+ transition: color 0.4s;
+}
+
+#todo-list li.completed label {
+ color: #a9a9a9;
+ text-decoration: line-through;
+}
+
+#todo-list li .destroy {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 10px;
+ bottom: 0;
+ width: 40px;
+ height: 40px;
+ margin: auto 0;
+ font-size: 22px;
+ color: #a88a8a;
+ -webkit-transition: all 0.2s;
+ -moz-transition: all 0.2s;
+ -ms-transition: all 0.2s;
+ -o-transition: all 0.2s;
+ transition: all 0.2s;
+}
+
+#todo-list li .destroy:hover {
+ text-shadow: 0 0 1px #000,
+ 0 0 10px rgba(199, 107, 107, 0.8);
+ -webkit-transform: scale(1.3);
+ -moz-transform: scale(1.3);
+ -ms-transform: scale(1.3);
+ -o-transform: scale(1.3);
+ transform: scale(1.3);
+}
+
+#todo-list li .destroy:after {
+ content: '';
+}
+
+#todo-list li:hover .destroy {
+ display: block;
+}
+
+#todo-list li .edit {
+ display: none;
+}
+
+#todo-list li.editing:last-child {
+ margin-bottom: -1px;
+}
+
+#footer {
+ color: #777;
+ padding: 0 15px;
+ position: absolute;
+ right: 0;
+ bottom: -31px;
+ left: 0;
+ height: 20px;
+ z-index: 1;
+ text-align: center;
+}
+
+#footer:before {
+ content: '';
+ position: absolute;
+ right: 0;
+ bottom: 31px;
+ left: 0;
+ height: 50px;
+ z-index: -1;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
+ 0 6px 0 -3px rgba(255, 255, 255, 0.8),
+ 0 7px 1px -3px rgba(0, 0, 0, 0.3),
+ 0 43px 0 -6px rgba(255, 255, 255, 0.8),
+ 0 44px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+#todo-count {
+ float: left;
+ text-align: left;
+}
+
+#filters {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: absolute;
+ right: 0;
+ left: 0;
+}
+
+#filters li {
+ display: inline;
+}
+
+#filters li a {
+ color: #83756f;
+ margin: 2px;
+ text-decoration: none;
+}
+
+#filters li a.selected {
+ font-weight: bold;
+}
+
+#clear-completed {
+ float: right;
+ position: relative;
+ line-height: 20px;
+ text-decoration: none;
+ background: rgba(0, 0, 0, 0.1);
+ font-size: 11px;
+ padding: 0 10px;
+ border-radius: 3px;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
+}
+
+#clear-completed:hover {
+ background: rgba(0, 0, 0, 0.15);
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
+}
+
+#info {
+ margin: 65px auto 0;
+ color: #a6a6a6;
+ font-size: 12px;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+ text-align: center;
+}
+
+#info a {
+ color: inherit;
+}
+
+/*
+ Hack to remove background from Mobile Safari.
+ Can't use it globally since it destroys checkboxes in Firefox and Opera
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ #toggle-all,
+ #todo-list li .toggle {
+ background: none;
+ }
+
+ #todo-list li .toggle {
+ height: 40px;
+ }
+
+ #toggle-all {
+ top: -56px;
+ left: -15px;
+ width: 65px;
+ height: 41px;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ -webkit-appearance: none;
+ appearance: none;
+ }
+}
+
+.hidden{
+ display:none;
+}
40 labs/architecture-examples/derby/public/components/todomvc-common/base.js
View
@@ -0,0 +1,40 @@
+(function () {
+ 'use strict';
+
+ if (location.hostname === 'todomvc.com') {
+ window._gaq = [['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
+ }
+
+ function getSourcePath() {
+ // If accessed via addyosmani.github.com/todomvc/, strip the project
+ // path.
+ if (location.hostname.indexOf('github.com') > 0) {
+ return location.pathname.replace(/todomvc\//, '');
+ }
+ return location.pathname;
+ }
+
+ function appendSourceLink() {
+ var sourceLink = document.createElement('a');
+ var paragraph = document.createElement('p');
+ var footer = document.getElementById('info');
+ var urlBase = 'https://github.com/addyosmani/todomvc/tree/gh-pages';
+
+ if (footer) {
+ sourceLink.href = urlBase + getSourcePath();
+ sourceLink.appendChild(document.createTextNode('Check out the source'));
+ paragraph.appendChild(sourceLink);
+ footer.appendChild(paragraph);
+ }
+ }
+
+ function redirect() {
+ if (location.hostname === 'addyosmani.github.com') {
+ location.href = location.href.replace('addyosmani.github.com/todomvc',
+ 'todomvc.com');
+ }
+ }
+
+ appendSourceLink();
+ redirect();
+})();
BIN  labs/architecture-examples/derby/public/components/todomvc-common/bg.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1  labs/architecture-examples/derby/public/ie.js
View
9 labs/architecture-examples/derby/src/todos/index.coffee
View
@@ -30,6 +30,8 @@ get '/:groupName', (page, model, {groupName}) ->
.where('group').equals(groupName)
.where('completed').notEquals(true)
+ model.set '_list.filterName', 'all'
+
# model.set '_filter', 'all'
# model.ref '_list.shown', '_list', '_filter'
# XXX 2012-12-04 Calling .get on keyed ref returns getter fn.
@@ -43,12 +45,15 @@ get '/:groupName', (page, model, {groupName}) ->
# Transitional route for enabling a filter
get from: '/:groupName', to: '/:groupName/:filterName',
forward: (model, {filterName}) ->
+ model.set '_list.filterName', filterName
model.ref '_list.shown', "_list.#{filterName}"
back: (model, params) ->
+ model.set '_list.filterName', filterName
model.ref '_list.shown', "_list.all"
get from: '/:groupName/:filterName', to: '/:groupName/:filterName',
forward: (model, {filterName}) ->
+ model.set '_list.filterName', filterName
model.ref '_list.shown', "_list.#{filterName}"
ready (model) ->
@@ -82,6 +87,10 @@ ready (model) ->
item = model.at(el)
item.set '_editing', true
+ input = el.parentElement.parentElement.lastChild.firstChild
+ input.value = item.get('text')
+ input.focus()
+
exports.endEdit = (e, el) ->
item = model.at(el)
item.set '_editing', false
1  labs/architecture-examples/derby/styles/404.styl
View
@@ -1 +0,0 @@
-@import './base';
51 labs/architecture-examples/derby/styles/todos/index.styl
View
@@ -1,51 +0,0 @@
-#todo-list li input.text {
- word-break: break-word;
- margin: 15px 15px 15px 60px;
- line-height: 1.2;
- -webkit-transition: color 0.4s;
- -moz-transition: color 0.4s;
- -ms-transition: color 0.4s;
- -o-transition: color 0.4s;
- transition: color 0.4s;
- font-size: 24px;
- color: inherit;
- background-color: transparent;
- display: block;
- border: none;
- width: 506px;
- padding: 13px 17px 12px 17px;
- margin: 0 0 0 43px;
- -webkit-font-smoothing: antialiased;
- -moz-font-smoothing: antialiased;
- -ms-font-smoothing: antialiased;
- -o-font-smoothing: antialiased;
- font-smoothing: antialiased;
-}
-#todo-list li input.text:focus {
- border: 1px solid #999;
- box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- -ms-box-sizing: border-box;
- -o-box-sizing: border-box;
- box-sizing: border-box;
- -webkit-font-smoothing: antialiased;
- -moz-font-smoothing: antialiased;
- -ms-font-smoothing: antialiased;
- -o-font-smoothing: antialiased;
- font-smoothing: antialiased;
- outline: none;
-}
-
-#todo-list li.completed input.text {
- color: #a9a9a9;
- text-decoration: line-through;
-}
-
-section.empty-list, footer.empty-list,
-section.empty-list #toggle-all,
-button#clear-completed.non-completed,
-#todo-list li.editing input.toggle,
-#todo-list li.editing button.destroy {
- display: none;
-}
33 labs/architecture-examples/derby/views/todos/index.html
View
@@ -1,8 +1,8 @@
<Head:>
- <link href="/base.css" rel="stylesheet">
+ <link href="/components/todomvc-common/base.css" rel="stylesheet">
<Title:>
- DerbyJS • TodoMVC
+ DerbyJS • TodoMVC
<Header:>
<ui:connectionAlert>
@@ -11,7 +11,7 @@
<section id="todoapp">
<app:todoHeader>
- <section id="main" class="{#unless _list.shown}empty-list{/}">
+ <section id="main" class="{#unless _list.shown}hidden{/}">
<input id="toggle-all" type="checkbox" checked="{noItems(_list.active)}" x-bind=click:clickToggleAll>
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">{#each _list.shown}<app:todo>{/}</ul>
@@ -29,27 +29,28 @@
<todo:>
<li data-id={{id}} class="{#if .completed}completed{else}active{/}{#if ._editing} editing{/}">
- <div>
+ <div class="view">
<input class="toggle" type="checkbox" checked="{.completed}">
- <form x-bind=submit:submitEdit>
- <input class="text" x-bind="focus:startEdit, blur:endEdit" value="{.text}">
- </form>
+ <label x-bind=dblclick:startEdit>{.text}</label>
<button class="destroy" x-bind=click:del></button>
</div>
- </li>
+ <form x-bind=submit:submitEdit>
+ <input class="edit" x-bind=blur:endEdit value="{.text}">
+ </form>
+ </li>
<todoFooter:>
- <footer id="footer" class="{#unless _list.all}empty-list{/}">
- <span id="todo-count"><strong>{_list.active.length}</strong> item{#unless oneItem(_list.active)}s{/} left</span>
+ <footer id="footer" class="{#unless _list.all}hidden{/}">
+ <span id="todo-count"><strong>{_list.active.length}</strong> item{#unless oneItem(_list.active)}s{/} left</span>
<ul id="filters">
- <li class="all">
- <a href="/{{_groupName}}" class="{#if equal(_filter, 'all')}selected{/}">All</a>
+ <li>
+ <a href="/{{_groupName}}" class="{#if equal(_list.filterName, 'all')}selected{/}">All</a>
</li>
- <li class="active">
- <a href="/{{_groupName}}/active" class="{#if equal(_filter, 'active')}selected{/}">Active</a>
+ <li>
+ <a href="/{{_groupName}}/active" class="{#if equal(_list.filterName, 'active')}selected{/}">Active</a>
</li>
- <li class="completed">
- <a href="/{{_groupName}}/completed" class="{#if equal(_filter, 'completed')}selected{/}">Completed</a>
+ <li>
+ <a href="/{{_groupName}}/completed" class="{#if equal(_list.filterName, 'completed')}selected{/}">Completed</a>
</li>
</ul>
<button x-bind=click:clearCompleted id="clear-completed" class="{#unless _list.completed}non-completed{/}">
Something went wrong with that request. Please try again.