Node Tutorial Part 17: UI Improvements
Welcome to part 17 of Let’s Make a Web App, a tutorial series about building a web app with Node. This series will walk you through the major areas you’ll need to face when building your own applications. These tutorials are tagged with lmawa.
Click to show previous tutorials.
Interface Improvements
I’ve neglected to work on Nodepad’s interface for quite a few weeks now. I’d really like it to have a more usable interface before proceeding on more features.
The areas that need improving are:
- Login form
- Registration form
- Add new document
- Rename document
Forms
I put a class on the registration and login forms and wrote the following Stylus:
form.users
background-color faded-white
border 1px solid medium-grey
float left
padding 0 10px 10px 10px
form.users div
padding 10px 0 0 0
float left
clear left
form.users label
width 140px
float left
clear right
color dark-grey
font-weight bold
form.users input[type=submit]
margin-left 140px
clear both
This just makes the forms feel a bit more substantial and easier to read. As you can see, I’m using the Stylus variables to keep the colours consistent.
Document Rename
I’ve added an input field to the document index so documents can be renamed. The Ajax save code now updates the document title in the left-hand-side navigation when the save returns:
$('#save-button').click(function() {
var id = $('#document-list .selected').itemID(),
params = { d: { data: $('#editor').val(), id: id, title: $('input.title').val() } };
$.put('/documents/' + id + '.json', params, function(data) {
// Saved, will return JSON
$('#document-title-' + id).html(data.title);
});
});
I added some styles to make the title input sit next to the main textarea. It looks a bit like Apple’s iOS Mail fields (no boxes around the fields, just single grey lines).
New Document
I added a new server-side method that just returns document titles: document/titles.json.
When the new document link is pressed (the “+” button), it creates a new document using Ajax, then selects the new one:
$('#create-document').click(function(e) {
$.post('/documents.json', { d: { data: '', title: 'Untitled Document' } }, function(new_doc) {
$('#document-list').append('<li><a id="document-title-' + new_doc._id + '" href="/documents/' + new_doc._id + '">' + new_doc.title + '</a></li>');
$('#document-title-' + new_doc._id).click();
});
e.preventDefault();
});
This could be changed to sort the documents as well.
Sorting Documents
A few weeks ago we switched to Mongoose’s new API. The documentation is still a bit lacking, so I’m not convinced that this is the best way to sort documents:
app.get('/documents.:format?', loadUser, function(req, res) {
Document.find({ user_id: req.currentUser.id },
[], { sort: ['title', 'descending'] },
function(err, documents) {
The old API was Document.find().sort() which made more sense to me, but now we have to do it like this.
Buttons
I added some styles to make the buttons feel like they’re being pressed:
ul.toolbar a:active
background-color dark-grey
color white
Conclusion
Now Nodepad better to use in Firefox and Chrome/Safari. It’s not quite professional quality yet, and would need more browser testing, but it’s closer to something I’d actually want to use.
This week’s code is commit 5c5fb5c
