DailyJS

Node Tutorial Part 17: UI Improvements

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

tutorials server node lmawa nodepad

Node Tutorial Part 17: UI Improvements

Posted by Alex R. Young on .
Featured

tutorials server node lmawa nodepad

Node Tutorial Part 17: UI Improvements

Posted by Alex R. Young on .

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