Launch screen, my questions screen, linked together and added back button in header

app/css/buddyup.css

@@ -1,3 +1,9 @@
+@font-face {
+    font-family: "gaia-icons";
+    src: url("../media/fonts/gaia-icons.ttf") format("truetype");
+    font-weight: 500;
+    font-style: normal;
+}
 * {
     box-sizing: border-box;
 }
@@ -18,6 +24,9 @@ h2 {
 .help-articles {
     margin-top: 1rem;
 }
+.questions.all {
+    margin-top: 0;
+}
 .questions h2,
 .top-helpers h2,
 .help-articles h2 {
@@ -58,24 +67,48 @@ button {
     cursor: pointer;
     font-size: 1rem;
 }
+.button-blue,
+.button-gray {
+    display: block;
+    padding: .7rem;
+    border: 1px solid #333;
+    text-align: left;
+    width: 100%;
+}
 .button-blue {
     background-color: #0095DD;
     color: white;
-    padding: .7rem;
-    border: 1px solid #333;
-    width: 100%;
-    text-align: left;
 }
-[data-icon="forward"] {
-    background: #edecec url(building_blocks/buttons/images/next.png) 100% 6px no-repeat;
-    padding: .7rem;
-    border: 1px solid #333;
-    width: 100%;
-    text-align: left;
+.button-gray {
+    background-color: #edecec;
+}
+.button-gray:link,
+.button-gray:visited {
+    color: #333;
+    text-decoration: none;
 }
 .my-favourites {
     border-top: 0;
 }
+.my-favourites:before {
+    float: right;
+}
+/* icons */
+[data-icon]:before {
+    font-family: "gaia-icons";
+    content: attr(data-icon);
+    text-rendering: optimizeLegibility;
+}
+[data-icon-after]:after {
+    float: right;
+    font-family: "gaia-icons";
+    content: attr(data-icon-after);
+    text-rendering: optimizeLegibility;
+}
+.icon-back {
+    display: inline-block;
+    background: transparent url(building_blocks/headers/images/icons/) 0 0 no-repeat;
+}
 /* footer */
 footer button:hover {
     cursor: pointer;
@@ -123,6 +156,9 @@ form[name="submit"] {
     position: absolute;
     width: 1px;
 }
+.no-border {
+    border: 0;
+}
 /* overrides */
 input[type="text"] {
     display: inline-block;
@@ -130,6 +166,12 @@ input[type="text"] {
     border: 0;
     width: 85%;
 }
+section[role="region"] > header:first-child a.back-link {
+    position: absolute;
+    top: 0;
+    color: white;
+    min-width: 4rem;
+}
 section.skin-organic[role="region"] > header:first-child,
 .skin-organic section[role="region"] > header:first-child {
     background-color: gray;

app/index.html

@@ -28,15 +28,13 @@
           <h2>Need Help? Let us get started.</h2>
           <button class="button-blue">Ask A Question</button>
           <h2>Have Answers? Help out.</h2>
-          <button data-icon="forward">View Unanswered Questions</button>
+          <button class="button-gray" data-icon-after="forward">View Unanswered Questions</button>
         </section>
         <section class="questions">
           <h2>My Questions</h2>
           <ul id="myquestions" data-type="budyup-list"></ul>
-          <ul>
-            <li><button data-icon="forward">All My Questions</button></li>
-            <li><button data-icon="forward" class="my-favourites">My Favourites</button></li>
-          </ul>
+          <a href="my_questions.html" data-icon-after="forward" class="button-gray">All My Questions</a>
+          <a href="" data-icon-after="forward" class="button-gray my-favourites">My Favourites</a>
         </section>
         <section class="top-helpers">
           <h2>Top Helpers this Week</h2>

app/js/app.js

@@ -15,24 +15,28 @@ window.addEventListener('DOMContentLoaded', function() {
     var questions = '';
     var myQuestions = document.querySelector('#myquestions');
 
-    var request = new XMLHttpRequest();
-
     function buildURL() {
         var base = 'https://support.allizom.org/api/2/question/?format=json';
         return base + '&product=' + PRODUCT + '&locale=' + LOCALE;
     }
 
-    request.open('GET', buildURL());
-    request.onload = function() {
-        var json = JSON.parse(this.responseText);
-        var results = json.results;
+    // only attempt to load questions if we have a container.
+    if(myQuestions) {
+        var request = new XMLHttpRequest();
 
-        for (var i = 0; i < 3; i++) {
-            questions += '<li><a href="">' + results[i].title + '</a></li>';
+        request.open('GET', buildURL());
+        request.onload = function() {
+            var json = JSON.parse(this.responseText);
+            var results = json.results;
+            var resultCount = myQuestions.dataset['all'] ? results.length : 3;
+
+            for (var i = 0; i < resultCount; i++) {
+                questions += '<li><a href="">' + results[i].title + '</a></li>';
+            }
+            myQuestions.innerHTML = questions;
         }
-        myQuestions.innerHTML = questions;
+
+        request.send();
     }
 
-    request.send();
-
 });

app/my_questions.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="description" content="SUMO real time support app for FirefoxOS" />
+    <meta name="viewport" content="width=device-width" />
+
+    <title>My Questions - BuddyUP</title>
+
+    <link rel="stylesheet" type="text/css" href="css/building_blocks/layout.css" media="screen" />
+    <link rel="stylesheet" type="text/css" href="css/building_blocks/headers.css" media="screen" />
+    <link rel="stylesheet" type="text/css" href="css/building_blocks/lists.css" media="screen" />
+
+    <link rel="stylesheet" type="text/css" href="css/fira.css" media="screen" />
+    <link rel="stylesheet" type="text/css" href="css/gaia-icons.css" media="screen" />
+    <link rel="stylesheet" type="text/css" href="css/buddyup.css" media="screen" />
+
+    <link rel="prefetch" type="application/l10n" href="data/locales.ini" />
+    <script type="text/javascript" src="js/libs/l10n.js" defer></script>
+  </head>
+  <body class="skin-organic">
+    <section role="region" class="vbox fit">
+      <header>
+        <h1>My Questions</h1>
+        <a href="index.html" id="back" class="back-link" data-icon="back-light">
+          <span class="visuallyhidden">Back</span>
+        </a>
+      </header>
+      <main class="fit scroll">
+        <section class="questions all">
+          <ul id="myquestions" data-type="budyup-list" data-all="true"></ul>
+          <a href="" data-icon-after="forward" class="button-gray my-favourites no-border">My Favourites</a>
+        </section>
+      </main>
+    </section>
+    <script type="text/javascript" src="js/app.js" defer></script>
+</body>
+</html>