Node Tutorial Part 17: UI Improvements

2011-03-21 00:00:00 +0000 by Alex R. Young

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

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:


I put a class on the registration and login forms and wrote the
following Stylus:

  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

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:

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('' + new_doc.title + '');
    $('#document-title-' + new_doc._id).click();

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.


I added some styles to make the buttons feel like they're being pressed:

ul.toolbar a:active
  background-color dark-grey
  color white


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