Skip to content

User info pages #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
+229 −24
Open

User info pages #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6ca94eb
Warning: do not use npm's current version of hogan-js (v2.0.0)
julien-c Sep 26, 2012
e684e36
User pages
julien-c Sep 26, 2012
23757a6
These are not used anymore, right?
julien-c Sep 27, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand All @@ -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
Expand Down
86 changes: 86 additions & 0 deletions css/hn-ios.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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){
Expand All @@ -1542,4 +1625,7 @@ ol.grouped-tableview-links li>a.disclosure.tappable-active:after{
#view-comments{
left: 321px;
}
#view-user{
left: 321px;
}
}
22 changes: 22 additions & 0 deletions css/hn-web.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
10 changes: 10 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,16 @@ <h1 style="margin: 0 65px;"></h1>
</section>
</div>
</div>
<div class="view hidden" id="view-user">
<header>
<a href="#/" class="header-button header-button-left header-back-button"><button>Back</button></a>
<h1 style="margin: 0 65px;"></h1>
</header>
<div class="scroll">
<section>
</section>
</div>
</div>
<div class="view hidden" id="view-about">
<header>
<a href="#/" class="header-button header-button-left"><button>Close</button></a>
Expand Down
28 changes: 28 additions & 0 deletions js/hn-ios.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,12 @@
if (!currentView){
hideAllViews();
view.classList.remove('hidden');
} else if (currentView == 'user'){
slide({
in: view,
out: $('view-' + currentView),
direction: 'ltr'
});
} else if (currentView != 'comments'){
slide({
in: view,
Expand All @@ -182,6 +188,28 @@
}
hn.currentView = 'comments';
break;
case 'user':
var view = $('view-user');
if (!isWideScreen){
if (!currentView){
hideAllViews();
view.classList.remove('hidden');
} else if (currentView != 'user'){
slide({
in: view,
out: $('view-' + currentView),
direction: 'rtl'
});
}
} else {
hideAllViews();
$('overlay').classList.add('hide');
view.classList.remove('hidden');
$('view-home').classList.remove('hidden');
view.querySelector('header a.header-back-button').style.display = '';
}
hn.currentView = 'user';
break;
}
}
});
Expand Down
51 changes: 48 additions & 3 deletions js/hn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,10 +311,12 @@
var div = d.createElement('div');
div.innerHTML = html;

// Make all links open in new tab/window
// Make all links, except for internal ones, open in new tab/window
var links = div.querySelectorAll('a');
for (var i=0, l=links.length; i<l; i++){
links[i].target = '_blank';
if (!(links[i].className === 'user')){
links[i].target = '_blank';
}
}

// 20K chars will be the max to trigger collapsible comments.
Expand Down Expand Up @@ -454,7 +456,9 @@

var links = _ul.querySelectorAll('a');
for (var i=0, l=links.length; i<l; i++){
links[i].target = '_blank';
if (!(links[i].className === 'user')){
links[i].target = '_blank';
}
}

var subLis = _ul.children;
Expand Down Expand Up @@ -488,6 +492,44 @@
ruto.reload();
}
};


var $userView = $('view-user'),
$userHeading = $userView.querySelector('header h1'),
$userBackButton = $userView.querySelector('header a'),
$userSection = $userView.querySelector('section');

hn.user = {
currentID: null,
markupUser: function(user){
return tmpl('user', user);
},
render: function(id){
if (!id || hn.user.currentID == id) return;
hn.user.currentID = id;

var loadUser = function(data, id){
var html = hn.user.markupUser(data);
$userSection.innerHTML = html;
};

$userHeading.innerHTML = id;

$userBackButton.href = (hn.comments.currentID) ? ('#/item/' + hn.comments.currentID) : '#/';

hnapi.user(id, function(data){
// Avoiding the case where the wrong user is loaded when connection is slow
if (hn.user.currentID != id) return;

loadUser(data, id);
}, function(e){
if (hn.user.currentID != id) return;
showError();
});

}
};


hn.init = function(){
hn.news.render();
Expand All @@ -512,6 +554,9 @@
.add('/about', 'about')
.add(/^\/item\/(\d+)$/i, 'comments', function(path, id){
hn.comments.render(id);
})
.add(/^\/user\/(\w+)$/i, 'user', function(path, id){
hn.user.render(id);
});

// "Naturally" reload when an update is available
Expand Down
7 changes: 7 additions & 0 deletions js/libs/hnapi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,13 @@
req(hnapi.url + path, success, function(){
req(hnapi.url2 + path, success, error);
});
},

user: function(id, success, error){
var path = 'user/' + id;
req(hnapi.url + path, success, function(){
req(hnapi.url2 + path, success, error);
});
}

};
Expand Down
2 changes: 1 addition & 1 deletion js/scripts.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading