<commit_before>---
layout: default
title: Deliteful Tutorial Part 4
---
#Deliteful Tutorial (Part 4) - The Photo List View

We will now begin to create our [Flickr photo feed viewer application](Part3PhotoFeedApp.md).

It is time to open your favorite editor or IDE and load the `index.html` file of the application in it.

> If you have chosen to get the tutorial application from the `ibm-js/deliteful-tutorial` project,
switch to the `part4` branch now:
```
$ git checkout part4
```

##HTML and CSS

The layout of the default application that we generated using Yeoman is roughly similar to what we want: a header
on top, and contents that fit the remaining page space below. So we will keep the existing structure to make our list 
view, that is, a (vertical) `d-linear-layout` and another nested, horizontal `d-linear-layout` for the header.

Edit the contents of the `d-linear-layout` below the `<!-- page content -->` as follows:

```html
<!-- page content -->
<d-linear-layout class="width100 height100" id="listView">
	<!-- view content header -->
	<d-linear-layout vertical="false" class="pageHeader">
		<div>
			<button is="d-button" onclick="leftPane.toggle()">Settings</button>
		</div>
		<div class="fill titleStyle">Flickr Photo Feed</div>
		<div>
			<button is="d-button">Refresh</button>
		</div>
	</d-linear-layout>
	<!-- view content will go here -->
</d-linear-layout>
```

We have changed some labels, set an `id` attribute on the view and added a second button after the title (the nested
`d-linear-layout` will automatically stack it on the right because the middle div has a `fill` class).

We also need to change the CSS, so open `css/app.css` in your editor. To keep things simple,
remove all the existing content and add these rules to define the look of our new header:

```css
.pageHeader {
    background-color: #428bca;
    color: white;
    height: 48px;
    border-bottom: 2px solid #357ebd;
    padding: 0.3em;
}
.titleStyle {
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    font-size: 16px;
}
.d-button {
    border-radius: 0;
}
```

(You can also remove the `css/delitefont.*` files as we won't use them in this tutorial).

If you open `index.html` in your browser now, you should get something like this:
<commit_msg>Clear the left menu pane in part 4, so it does not throw errors when user clicks the menu items.<commit_after>---
layout: default
title: Deliteful Tutorial Part 4
---
#Deliteful Tutorial (Part 4) - The Photo List View

We will now begin to create our [Flickr photo feed viewer application](Part3PhotoFeedApp.md).

It is time to open your favorite editor or IDE and load the `index.html` file of the application in it.

> If you have chosen to get the tutorial application from the `ibm-js/deliteful-tutorial` project,
switch to the `part4` branch now:
```
$ git checkout part4
```

##HTML and CSS

The layout of the default application that we generated using Yeoman is roughly similar to what we want: a header
on top, and contents that fit the remaining page space below. So we will keep the existing structure to make our list 
view, that is, a (vertical) `d-linear-layout` and another nested, horizontal `d-linear-layout` for the header.

Edit the contents of the `body` element as follows :

```html
<!-- left menu side pane -->
<d-side-pane mode="push" position="start" id="leftPane">
</d-side-pane>

<!-- page content -->
<d-linear-layout class="width100 height100" id="listView">
	<!-- view content header -->
	<d-linear-layout vertical="false" class="pageHeader">
		<div>
			<button is="d-button" onclick="leftPane.toggle()">Settings</button>
		</div>
		<div class="fill titleStyle">Flickr Photo Feed</div>
		<div>
			<button is="d-button">Refresh</button>
		</div>
	</d-linear-layout>
	<!-- view content will go here -->
</d-linear-layout>
```

We have removed the contents of the left pane (we will fill it again later when we implement the Settings view),
changed some labels, set an `id` attribute on the view and added a second button after the title (the nested
`d-linear-layout` will automatically stack it on the right because the middle div has a `fill` class).

We also need to change the CSS, so open `css/app.css` in your editor. To keep things simple,
remove all the existing content and add these rules to define the look of our new header:

```css
.pageHeader {
    background-color: #428bca;
    color: white;
    height: 48px;
    border-bottom: 2px solid #357ebd;
    padding: 0.3em;
}
.titleStyle {
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    font-size: 16px;
}
.d-button {
    border-radius: 0;
}
```

(You can also remove the `css/delitefont.*` files as we won't use them in this tutorial).

If you open `index.html` in your browser now, you should get something like this:

{'fraction_non_alphanumeric': 0.10947237224761114, 'fraction_numerical': 0.011425010386373079, 'mean_word_length': 3.81018981018981, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 43, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3720232', 'n_tokens_mistral': 1515, 'n_tokens_neox': 1423, 'n_words': 648}