diff --git a/README.md b/README.md index 2deca597..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). @@ -58,7 +56,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 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 @@
+");n.b(n.t(n.f("content",e,t,0)));n.b("
No comments.
')}r.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("