From 6ca94eb4b5df69e7124b7e08dda1fb37a7a52e12 Mon Sep 17 00:00:00 2001 From: Julien Chaumond Date: Wed, 26 Sep 2012 16:06:10 +0200 Subject: [PATCH 1/3] Warning: do not use npm's current version of hogan-js (v2.0.0) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2deca597..a7dee749 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ If there are changes in the `/js` folder, run this to regenerate `scripts.js` (s ### Changes to templates -If there are changes in the `/templates` folder, run this to regenerate `templates.js` (skip the npm install if `uglify-js` and `hogan.js` are already installed): +If there are changes in the `/templates` folder, run this to regenerate `templates.js` (skip the npm install if `uglify-js` is already installed ; do not use `npm install hogan.js` as the current NPM version – 2.0.0 – is not compatible): npm install uglify-js npm install git://github.com/twitter/hogan.js.git From e684e36609c085df417047de20564911624ccbd6 Mon Sep 17 00:00:00 2001 From: Julien Chaumond Date: Wed, 26 Sep 2012 22:04:14 +0200 Subject: [PATCH 2/3] User pages --- css/hn-ios.css | 86 ++++++++++++++++++++++++++++++++ css/hn-web.css | 22 ++++++++ index.html | 10 ++++ js/hn-ios.js | 28 +++++++++++ js/hn.js | 51 +++++++++++++++++-- js/libs/hnapi.js | 7 +++ js/scripts.js | 2 +- js/templates.js | 2 +- templates/comments.mustache | 2 +- templates/post-comments.mustache | 2 +- templates/user.mustache | 23 +++++++++ 11 files changed, 228 insertions(+), 7 deletions(-) create mode 100644 templates/user.mustache diff --git a/css/hn-ios.css b/css/hn-ios.css index 031e94d8..7e37cb22 100644 --- a/css/hn-ios.css +++ b/css/hn-ios.css @@ -706,6 +706,10 @@ ol.grouped-tableview-links li>a.disclosure.tappable-active:after{ font-size: 13px; color: #666d74; } +.view .post-content header .metadata a.user{ + color: #666d74; + text-decoration: none; +} .view .post-content header .metadata a.external-link{ color: #666d74; text-decoration: none; @@ -817,6 +821,11 @@ ol.grouped-tableview-links li>a.disclosure.tappable-active:after{ .view section.comments p.metadata b{ color: #b23914; } +.view section.comments p.metadata a.user{ + color: #b23914; + font-weight: bold; + text-decoration: none; +} .view section.comments p.metadata time{ display: block; text-align: right; @@ -905,6 +914,20 @@ ol.grouped-tableview-links li>a.disclosure.tappable-active:after{ .view section.comments li>a.more-link.tappable-active *{ color: #fff; } + +.view header.user h1{ + text-transform: capitalize; +} +#view-user header h1{ + text-transform: capitalize; +} +.view header.user span.karma{ + color: #385487; + font-weight: bold; + font-size: 13px; + line-height: 1.5em; +} + .link-text{ color: #385487; font-weight: bold; @@ -1533,6 +1556,66 @@ ol.grouped-tableview-links li>a.disclosure.tappable-active:after{ #app-desc{ margin-left: 82px; } + + + + #view-user{ + left: 281px; + right: 0; + width: auto; + -webkit-box-direction: reverse; + box-direction: reverse; + } + #view-user .scroll{ + -webkit-box-direction: normal; + box-direction: normal; + } + #view-user>header{ + position: relative; + background-image: url(../images/ios/silver-button-bar.png); + border-bottom-left-radius: 3px; + border-bottom-right-radius: 5px; + } + #view-user>header h1{ + text-align: left; + font-size: 14px; + padding-left: 44px !important; + padding-right: 10px !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + #view-user>header a.header-back-button{ + padding: 0; + height: 44px; + width: 44px; + background: transparent url(../images/ios/close-button.png) no-repeat center; + -webkit-background-size: 9px 10px; + background-size: 9px 10px; + } + #view-user>header a.header-back-button button{ + display: none; + } + #view-user>header a.header-back-button:after{ + pointer-events: none; + opacity: 0; + content: ''; + display: block; + width: 60px; + height: 60px; + position: absolute; + left: -8px; + top: -8px; + z-index: 1; + background: transparent no-repeat; + background-image: -webkit-radial-gradient(center contain, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 100%); + background-image: radial-gradient(center contain, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 100%); + } + #view-user>header a.header-back-button.tappable-active:after{ + opacity: 1; + } + + + } @media only screen and (min-width: 1000px){ @@ -1542,4 +1625,7 @@ ol.grouped-tableview-links li>a.disclosure.tappable-active:after{ #view-comments{ left: 321px; } + #view-user{ + left: 321px; + } } \ No newline at end of file diff --git a/css/hn-web.css b/css/hn-web.css index 444455bd..085e3312 100644 --- a/css/hn-web.css +++ b/css/hn-web.css @@ -363,6 +363,10 @@ ol.grouped-tableview-links li>a:hover{ font-size: 13px; color: #666d74; } +.view .post-content header .metadata a.user{ + color: #666d74; + text-decoration: none; +} .view .post-content header .metadata a.external-link{ color: #666d74; text-decoration: none; @@ -461,8 +465,13 @@ ol.grouped-tableview-links li>a:hover{ margin: 0; } .view section.comments p.metadata b{ + color: #b23914; +} +.view section.comments p.metadata a.user{ float: left; color: #b23914; + font-weight: bold; + text-decoration: none; } .view section.comments p.metadata time{ display: block; @@ -519,6 +528,19 @@ ol.grouped-tableview-links li>a:hover{ font-weight: bold; } +.view header.user h1{ + text-transform: capitalize; +} +#view-user header h1{ + text-transform: capitalize; +} +.view header.user span.karma{ + color: #385487; + font-weight: bold; + font-size: 13px; + line-height: 1.5em; +} + .link-text{ color: #385487; font-weight: bold; diff --git a/index.html b/index.html index 180a473a..d6115e54 100644 --- a/index.html +++ b/index.html @@ -92,6 +92,16 @@

+
');if(r.s(r.f("loading",e,t,1),e,t,0,965,1006,"{{ }}")){r.rs(e,t,function(e,t,n){n.b('
Loading…
')});e.pop()}if(r.s(r.f("load_error",e,t,1),e,t,0,1033,1116,"{{ }}")){r.rs(e,t,function(e,t,n){n.b('
Couldn\'t load comments.
')});e.pop()}if(!r.s(r.f("loading",e,t,1),e,t,1,0,0,"")&&!r.s(r.f("load_error",e,t,1),e,t,1,0,0,"")){if(r.s(r.f("has_comments",e,t,1),e,t,0,1175,1202,"{{ }}")){r.rs(e,t,function(e,t,n){n.b("
    ");n.b(n.rp("")});e.pop()}r.s(r.f("has_comments",e,t,1),e,t,1,0,0,"")||r.b('

    No comments.

    ')}r.b("
");return r.fl()},partials:{"
');r.b(r.v(r.f("i",e,t,0)));r.b('.
');r.b(r.v(r.f("title",e,t,0)));r.b("");if(r.s(r.f("user",e,t,1),e,t,0,302,594,"{{ }}")){r.rs(e,t,function(e,t,n){n.b('');if(n.s(n.f("domain",e,t,1),e,t,0,336,381,"{{ }}")){n.rs(e,t,function(e,t,n){n.b('');n.b(n.v(n.f("domain",e,t,0)));n.b("
")});e.pop()}n.b('');n.b(n.v(n.f("points",e,t,0)));n.b(" ");n.b(n.v(n.f("i_point",e,t,0)));n.b(" by ");n.b(n.v(n.f("user",e,t,0)));n.b(' ');n.b(n.v(n.f("time_ago",e,t,0)));if(n.s(n.f("comments_count",e,t,1),e,t,0,519,561,"{{ }}")){n.rs(e,t,function(e,t,n){n.b(" · ");n.b(n.v(n.f("comments_count",e,t,0)));n.b(" ");n.b(n.v(n.f("i_comment",e,t,0)))});e.pop()}n.b("")});e.pop()}if(!r.s(r.f("user",e,t,1),e,t,1,0,0,"")){r.b('');if(r.s(r.f("domain",e,t,1),e,t,0,646,691,"{{ }}")){r.rs(e,t,function(e,t,n){n.b('');n.b(n.v(n.f("domain",e,t,0)));n.b("
")});e.pop()}r.b('');r.b(r.v(r.f("time_ago",e,t,0)));r.b("")}r.b("
");if(r.s(r.f("detail_disclosure",e,t,1),e,t,0,796,870,"{{ }}")){r.rs(e,t,function(e,t,n){n.b('')});e.pop()}r.b("");return r.fl()},partials:{},subs:{}}),"stories-load":new e({code:function(e,t,n){var r=this;r.b(n=n||"");if(r.s(r.f("loading",e,t,1),e,t,0,12,53,"{{ }}")){r.rs(e,t,function(e,t,n){n.b('
Loading…
')});e.pop()}if(r.s(r.f("load_error",e,t,1),e,t,0,80,132,"{{ }}")){r.rs(e,t,function(e,t,n){n.b('
Couldn\'t load stories.
')});e.pop()}return r.fl()},partials:{},subs:{}})}})(Hogan.Template) \ No newline at end of file +(function(e){TEMPLATES={"comments-toggle":new e({code:function(e,t,n){var r=this;r.b(n=n||"");r.b('");return r.fl()},partials:{},subs:{}}),comments:new e({code:function(e,t,n){var r=this;r.b(n=n||"");if(r.s(r.f("comments",e,t,1),e,t,0,13,166,"{{ }}")){r.rs(e,t,function(e,t,n){n.b('

  • ');n.b(n.v(n.f("user",e,t,0)));n.b("

    ");n.b(n.t(n.f("content",e,t,0)));n.b("

      ");n.b(n.rp("")});e.pop()}return r.fl()},partials:{"');if(r.s(r.f("has_post",e,t,1),e,t,0,39,620,"{{ }}")){r.rs(e,t,function(e,t,n){n.b('

      ');n.b(n.v(n.f("title",e,t,0)));n.b("
      ");if(n.s(n.f("user",e,t,1),e,t,0,107,170,"{{ }}")){n.rs(e,t,function(e,t,n){if(n.s(n.f("domain",e,t,1),e,t,0,118,159,"{{ }}")){n.rs(e,t,function(e,t,n){n.b('');n.b(n.v(n.f("domain",e,t,0)));n.b("")});e.pop()}});e.pop()}n.b('

      ');if(n.s(n.f("user",e,t,1),e,t,0,217,455,"{{ }}")){n.rs(e,t,function(e,t,n){n.b('');n.b(n.v(n.f("points",e,t,0)));n.b(" ");n.b(n.v(n.f("i_point",e,t,0)));n.b(' by ');n.b(n.v(n.f("user",e,t,0)));n.b(' ');n.b(n.v(n.f("time_ago",e,t,0)));if(n.s(n.f("comments_count",e,t,1),e,t,0,387,429,"{{ }}")){n.rs(e,t,function(e,t,n){n.b(" · ");n.b(n.v(n.f("comments_count",e,t,0)));n.b(" ");n.b(n.v(n.f("i_comment",e,t,0)))});e.pop()}n.b("")});e.pop()}if(!n.s(n.f("user",e,t,1),e,t,1,0,0,"")){n.b('');n.b(n.v(n.f("time_ago",e,t,0)));n.b("")}n.b('');n.b(n.v(n.f("short_hn_url",e,t,0)));n.b("

      ")});e.pop()}if(r.s(r.f("has_content",e,t,1),e,t,0,649,948,"{{ }}")){r.rs(e,t,function(e,t,n){n.b('
      ');n.b(n.t(n.f("content",e,t,0)));if(n.s(n.f("has_poll",e,t,1),e,t,0,710,925,"{{ }}")){n.rs(e,t,function(e,t,n){n.b('
        ');if(n.s(n.f("poll",e,t,1),e,t,0,736,911,"{{ }}")){n.rs(e,t,function(e,t,n){n.b('
      • ');n.b(n.v(n.f("item",e,t,0)));n.b(' ');n.b(n.v(n.f("points",e,t,0)));n.b(" ");n.b(n.v(n.f("i_point",e,t,0)));n.b('
        • ')});e.pop()}n.b("
      ")});e.pop()}n.b("
      ")});e.pop()}r.b('
      ');if(r.s(r.f("loading",e,t,1),e,t,0,1008,1049,"{{ }}")){r.rs(e,t,function(e,t,n){n.b('
      Loading…
      ')});e.pop()}if(r.s(r.f("load_error",e,t,1),e,t,0,1076,1159,"{{ }}")){r.rs(e,t,function(e,t,n){n.b('
      Couldn\'t load comments.
      ')});e.pop()}if(!r.s(r.f("loading",e,t,1),e,t,1,0,0,"")&&!r.s(r.f("load_error",e,t,1),e,t,1,0,0,"")){if(r.s(r.f("has_comments",e,t,1),e,t,0,1218,1245,"{{ }}")){r.rs(e,t,function(e,t,n){n.b("
        ");n.b(n.rp("")});e.pop()}r.s(r.f("has_comments",e,t,1),e,t,1,0,0,"")||r.b('

        No comments.

        ')}r.b("
      ");return r.fl()},partials:{"
      ');r.b(r.v(r.f("i",e,t,0)));r.b('.
      ');r.b(r.v(r.f("title",e,t,0)));r.b("");if(r.s(r.f("user",e,t,1),e,t,0,302,594,"{{ }}")){r.rs(e,t,function(e,t,n){n.b('');if(n.s(n.f("domain",e,t,1),e,t,0,336,381,"{{ }}")){n.rs(e,t,function(e,t,n){n.b('');n.b(n.v(n.f("domain",e,t,0)));n.b("
      ")});e.pop()}n.b('');n.b(n.v(n.f("points",e,t,0)));n.b(" ");n.b(n.v(n.f("i_point",e,t,0)));n.b(" by ");n.b(n.v(n.f("user",e,t,0)));n.b(' ');n.b(n.v(n.f("time_ago",e,t,0)));if(n.s(n.f("comments_count",e,t,1),e,t,0,519,561,"{{ }}")){n.rs(e,t,function(e,t,n){n.b(" · ");n.b(n.v(n.f("comments_count",e,t,0)));n.b(" ");n.b(n.v(n.f("i_comment",e,t,0)))});e.pop()}n.b("      ")});e.pop()}if(!r.s(r.f("user",e,t,1),e,t,1,0,0,"")){r.b('');if(r.s(r.f("domain",e,t,1),e,t,0,646,691,"{{ }}")){r.rs(e,t,function(e,t,n){n.b('');n.b(n.v(n.f("domain",e,t,0)));n.b("
      ")});e.pop()}r.b('');r.b(r.v(r.f("time_ago",e,t,0)));r.b("      ")}r.b("
      ");if(r.s(r.f("detail_disclosure",e,t,1),e,t,0,796,870,"{{ }}")){r.rs(e,t,function(e,t,n){n.b('')});e.pop()}r.b("");return r.fl()},partials:{},subs:{}}),"stories-load":new e({code:function(e,t,n){var r=this;r.b(n=n||"");if(r.s(r.f("loading",e,t,1),e,t,0,12,53,"{{ }}")){r.rs(e,t,function(e,t,n){n.b('
      Loading…
      ')});e.pop()}if(r.s(r.f("load_error",e,t,1),e,t,0,80,132,"{{ }}")){r.rs(e,t,function(e,t,n){n.b('
      Couldn\'t load stories.
      ')});e.pop()}return r.fl()},partials:{},subs:{}}),user:new e({code:function(e,t,n){var r=this;r.b(n=n||"");r.b('

      ');r.b(r.v(r.f("id",e,t,0)));r.b('

      Karma: ');r.b(r.v(r.f("karma",e,t,0)));r.b('

      Created: ');r.b(r.v(r.f("created",e,t,0)));r.b("
      Average: ");r.b(r.v(r.f("avg",e,t,0)));r.b('

      • About

        ');r.b(r.t(r.f("about",e,t,0)));r.b("
      ");return r.fl()},partials:{},subs:{}})}})(Hogan.Template) \ No newline at end of file diff --git a/templates/comments.mustache b/templates/comments.mustache index 8dfd31de..110b9ecf 100644 --- a/templates/comments.mustache +++ b/templates/comments.mustache @@ -1,6 +1,6 @@ {{#comments}}
    • -

      {{user}}

      +

      {{user}}

      {{{content}}}

        {{>comments_list}} diff --git a/templates/post-comments.mustache b/templates/post-comments.mustache index 2b16a010..c9d74116 100644 --- a/templates/post-comments.mustache +++ b/templates/post-comments.mustache @@ -10,7 +10,7 @@

        {{#user}} - {{points}} {{i_point}} by {{user}} + {{points}} {{i_point}} by {{user}} {{time_ago}}{{#comments_count}} · {{comments_count}} {{i_comment}}{{/comments_count}} {{/user}} {{^user}} diff --git a/templates/user.mustache b/templates/user.mustache new file mode 100644 index 00000000..8f412de9 --- /dev/null +++ b/templates/user.mustache @@ -0,0 +1,23 @@ +

        +
        +

        + {{id}} +

        + Karma: {{karma}} +

        + Created: {{created}} +
        + Average: {{avg}} +

        +
        +
        +
        +
          +
        • +
          +

          About

          +
          + {{{about}}} +
          • +
        +
        \ No newline at end of file From 23757a6de7f6003c4d6ac4fc22df2cb994fcda37 Mon Sep 17 00:00:00 2001 From: Julien Chaumond Date: Thu, 27 Sep 2012 10:58:02 +0200 Subject: [PATCH 3/3] These are not used anymore, right? --- README.md | 2 -- scripts.js | 14 -------------- 2 files changed, 16 deletions(-) delete mode 100644 scripts.js diff --git a/README.md b/README.md index a7dee749..e2a7b831 100644 --- a/README.md +++ b/README.md @@ -29,11 +29,9 @@ Technical stuff This mobile web app primarily works on iOS 5 Mobile Safari. It uses these wonderful scripts: - [Tappable](https://github.com/cheeaun/tappable) - touch-friendly tap events -- [Director](https://github.com/flatiron/director) - location.hash router - [Hogan.js](https://github.com/twitter/hogan.js) - logic-less templating - [Amplify.Store](http://amplifyjs.com/api/store/) - client-side storage - [Viper](https://github.com/alpha123/Viper/) - simple animation -- [PubSubJS](https://github.com/mroderick/PubSubJS) - publish/subscribe messaging - Vanilla JavaScript - everything else Also uses the [unofficial Hacker News API](http://node-hnapi.herokuapp.com/), [open-sourced](https://github.com/cheeaun/node-hnapi). diff --git a/scripts.js b/scripts.js deleted file mode 100644 index 71d03d17..00000000 --- a/scripts.js +++ /dev/null @@ -1,14 +0,0 @@ -// amplify.store.js -(function(e,t){function i(e,i){n.addType(e,function(s,o,u){var a,f,l,c,h=o,p=(new Date).getTime();if(!s){h={},c=[],l=0;try{s=i.length;while(s=i.key(l++))r.test(s)&&(f=JSON.parse(i.getItem(s)),f.expires&&f.expires<=p?c.push(s):h[s.replace(r,"")]=f.data);while(s=c.pop())i.removeItem(s)}catch(d){}return h}s="__amplify__"+s;if(o===t){a=i.getItem(s),f=a?JSON.parse(a):{expires:-1};if(!(f.expires&&f.expires<=p))return f.data;i.removeItem(s)}else if(o===null)i.removeItem(s);else{f=JSON.stringify({data:o,expires:u.expires?p+u.expires:null});try{i.setItem(s,f)}catch(d){n[e]();try{i.setItem(s,f)}catch(d){throw n.error()}}}return h})}var n=e.store=function(e,t,r){var i=n.type;return r&&r.type&&r.type in n.types&&(i=r.type),n.types[i](e,t,r||{})};n.types={},n.type=null,n.addType=function(e,t){n.type||(n.type=e),n.types[e]=t,n[e]=function(t,r,i){return i=i||{},i.type=e,n(t,r,i)}},n.error=function(){return"amplify.store quota exceeded"};var r=/^__amplify__/;for(var s in{localStorage:1,sessionStorage:1})try{window[s].setItem("__amplify__","x"),window[s].removeItem("__amplify__"),i(s,window[s])}catch(o){}if(!n.types.localStorage&&window.globalStorage)try{i("globalStorage",window.globalStorage[window.location.hostname]),n.type==="sessionStorage"&&(n.type="globalStorage")}catch(o){}(function(){if(n.types.localStorage)return;var e=document.createElement("div"),r="amplify";e.style.display="none",document.getElementsByTagName("head")[0].appendChild(e);try{e.addBehavior("#default#userdata"),e.load(r)}catch(i){e.parentNode.removeChild(e);return}n.addType("userData",function(i,s,o){e.load(r);var u,a,f,l,c,h=s,p=(new Date).getTime();if(!i){h={},c=[],l=0;while(u=e.XMLDocument.documentElement.attributes[l++])a=JSON.parse(u.value),a.expires&&a.expires<=p?c.push(u.name):h[u.name]=a.data;while(i=c.pop())e.removeAttribute(i);return e.save(r),h}i=i.replace(/[^\-._0-9A-Za-z\xb7\xc0-\xd6\xd8-\xf6\xf8-\u037d\u37f-\u1fff\u200c-\u200d\u203f\u2040\u2070-\u218f]/g,"-"),i=i.replace(/^-/,"_-");if(s===t){u=e.getAttribute(i),a=u?JSON.parse(u):{expires:-1};if(!(a.expires&&a.expires<=p))return a.data;e.removeAttribute(i)}else s===null?e.removeAttribute(i):(f=e.getAttribute(i),a=JSON.stringify({data:s,expires:o.expires?p+o.expires:null}),e.setAttribute(i,a));try{e.save(r)}catch(d){f===null?e.removeAttribute(i):e.setAttribute(i,f),n.userData();try{e.setAttribute(i,a),e.save(r)}catch(d){throw f===null?e.removeAttribute(i):e.setAttribute(i,f),n.error()}}return h})})(),function(){function i(e){return e===t?t:JSON.parse(JSON.stringify(e))}var e={},r={};n.addType("memory",function(n,s,o){return n?s===t?i(e[n]):(r[n]&&(clearTimeout(r[n]),delete r[n]),s===null?(delete e[n],null):(e[n]=s,o.expires&&(r[n]=setTimeout(function(){delete e[n],delete r[n]},o.expires)),s)):i(e)})}()})(this.amplify=this.amplify||{}); -// director.js -(function(e){function i(e,t){for(var n=0;n7))window.onhashchange=n,this.mode="modern";else{var r=document.createElement("iframe");r.id="state-frame",r.style.display="none",document.body.appendChild(r),this.writeFrame(""),"onpropertychange"in document&&"attachEvent"in document&&document.attachEvent("onpropertychange",function(){event.propertyName==="location"&&t.check()}),window.setInterval(function(){t.check()},50),this.onHashChanged=n,this.mode="legacy"}return window.Router.listeners.push(e),this.mode},destroy:function(e){if(!window.Router||!window.Router.listeners)return;var t=window.Router.listeners;for(var n=t.length-1;n>=0;n--)t[n]===e&&t.splice(n,1)},setHash:function(e){return this.mode==="legacy"&&this.writeFrame(e),location.hash=e[0]==="/"?e:"/"+e,this},writeFrame:function(e){var t=document.getElementById("state-frame"),n=t.contentDocument||t.contentWindow.document;n.open(),n.write("