"Doing" Development Journal - Layout

With a very basic project in place, it is time to start laying out the pieces in the mockup.

Regions

There are three major regions:

"Current Activity", "Notes", and "Past Activities"

The "Current Activity" and "Notes" share the left hand side while "Past Activities" will fill the right hand side. We can rough these in with a few placeholders:

<div>

  <div style='background: #ffe'>
    <h1>Doing</h1>  
    <input data-bind='value: activity keyup'/>
  </div>

  <div style='background: #fef'>
    <h2>Notes</h2>
  </div>

</div>

<div style='background: #eff'>
  <h1>Done</h1>
</div>

I have added backgrounds to these divs to help visualize their boundaries. Right now this looks like:

Gorgeous Pastel Debugging

We will have fixed regions that should resize with the browser, as opposed to a more traditional scrolling page. Given this approach we can simply make the left and right regions each fill half the page:

<div style='position: absolute; left: 0; top: 0; bottom: 0; right: 50%'>
  <!-- ... -->
</div>

<div style='background: #eff; position: absolute; left: 50%; top: 0; bottom: 0; right: 0'>
  <!-- ... -->
</div>

Now we have our basic layout:

Gorgeous Pastel Blocks

Since everything is laid out properly, we can move the styles to doing.css. The divs for each region will get an ID so they can be referenced later.

Current Activity

The current activity consists of an input, start button, and timer. Initially I won't worry too much about styling anything. Our goal here is just to lay out the page.

<div id='current-activity'>
  <h1>Doing</h1>  
  <form>
    <input data-bind='value: activity keyup'/>
    <input type='submit' value='Start'>
  </form>
  <div class='timer'>
    00:00
  </div>
</div>

The timer needs a little bit of css to position it correctly:

#current-activity > .timer {
  position: absolute;
  top: 0;
  right: 0;
}

This will place it in the top-right corner of the doing-panel. Once again, the goal is a functional application before a pretty one, so we'll press on.

Notes

The notes are really just a header and a textarea:

<div id='notes'>
  <h2>Notes</h2>
  <textarea></textarea>
</div>

We will succumb a tiny bit, and make the textarea fill the width of the notes section:

#notes > textarea {
  width: 100%;
}

Ideally this should also expand to the bottom of the page, but we can make a second pass later.

Past Activities

Like the notes region, past activities is quite straightforward. All we need to match the mockup is a table with two columns, one for the names of recently completed activities, and one for their durations. No doubt we will want something fancier later, but simple is expedient:

<div id='past-activities'>
  <h1>Done</h1>
  <table class='activity-list'>
    <col class='name'>
    <col class='duration'>
    <tr>
      <td>Item One</td> <td>15m</td>
    </tr>
  </table>
</div>

In the vein of the ever popular ipsum lorum, I'll add one activity we can pretend is done already. There are two ways to style table cells, you can always slap a style on every cell, but for layout, it is more concise to define the columns up front. I can then reference those columns in the CSS for this region:

#past-activities > .activity-list {
  width: 100%;
}

.activity-list col.duration {
  width: 8em;
}

The duration column has a fixed width, and since name has no explicit width, it will grow to fill the remaining space.

We could spend a fair amount of time trying to make sure that the notes region and the past activities fill the remainder of the page, but it's likely this will all get scrapped, so stopping now would be prudent. All of the functional elements from the mockup are now visible in our page, with a serviceable layout.

Boring by Design
blog comments powered by Disqus
Monkey Small Crow Small