ActiveWAFL Crash Course

The WAFL Cones Ice Cream Shop, Version 1.0

4.2 Style the Presentation Templates

Presentation Stylesheets are usually written in CSS.

The skeleton application that we created with Utensils comes with a sample landing page stylesheet.
We'll just edit that one.

Edit the file WaflCones/Presentation/Stylesheets/LandingPage.css and replace it's contents with the following.

WaflCones/Presentation/Stylesheets/LandingPage.css
  1. #MainMenu
  2. {
  3.     text-align: center;
  4. }
  5. #MainMenu a.Button
  6. {
  7.     display: inline-block;
  8.     padding: 5%;
  9.     font-size: 200%;
  10.     line-height: normal;
  11.     margin: 20px;
  12. }
  13. #MainMenu a.Button#AdministrationButton,
  14. #MainMenu a.Button#SignoutButton
  15. {
  16.     font-size: 150%;
  17.     padding: 3%;
  18. }
  19. #LoginForm
  20. {
  21.     max-width: 500px;
  22. }

We'll also create the Presentation Stylesneets for the new sale page and the administration menu.
Their CSS follows. Note that you'll need to create the WaflCones/Presentation/Stylesheets/Administration directory.

WaflCones/Presentation/Stylesheets/Sale.css
  1. #ProcessSaleButton,
  2. #AddItemButton
  3. {
  4.     font-size: 130%;
  5.     line-height: normal;
  6. }
  7. #AddItemButton
  8. {
  9.     padding: 12px;
  10. }
  11. #AmountTendered
  12. {
  13.     font-size: 130%;
  14. }
  15. .Price
  16. {
  17.     text-align: right;
  18. }
  19. #FlavorButtons
  20. {
  21.     text-align: center;
  22. }
  23. #FlavorButtons label
  24. {
  25.     display: inline;
  26.     font-size: 130%;
  27. }
  28. #PostSalePopup
  29. {
  30.     text-align: center;
  31.     font-size: 130%;
  32. }
  33. #PostSalePopup a.Button
  34. {
  35.     padding: 12px;
  36.     margin: 12px;
  37.     font-size: 130%;
  38. }
WaflCones/Presentation/Stylesheets/Administration/LandingPage.css
  1. a.Button
  2. {
  3.     display: inline-block;
  4.     padding: 5%;
  5.     font-size: 200%;
  6.     line-height: normal;
  7.     margin: 20px;
  8. }

Congratulations on your progress. You have created the presentation layer for three web pages.

In order to display these pages in our MVC application, we'll need a server-side controller action to return a response that includes them as a View.

Continue to Create the server controllers to create the server-side controllers for the pages we just set up.