Merge pull request #111 from oss-specs/feature/UITweaks

Feature/ui tweaks
oss-specs · Sep 17, 2015 · ddc71aa · ddc71aa
2 parents 1b5dda7 + 2c4b804
commit ddc71aa
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 78 deletions.
diff --git a/lib/specifications/projectGitInteractions.js b/lib/specifications/projectGitInteractions.js
@@ -36,6 +36,7 @@ function parseTagsAndBranches(refNames, projectBranchName) {
 }
 
 // Wrap up the supplied repository metadata in an object.
+// TODO: this model and associated helper functions has become large enough to warrant a separate module.
 function generateRepoMetaData(projectData, sha, tagsAndBranches, currentBranchName) {
   return {
     repoUrl: projectData.url,
@@ -44,7 +45,7 @@ function generateRepoMetaData(projectData, sha, tagsAndBranches, currentBranchNa
     commit: sha,
     shortCommit: sha.substring(0, 7),
     currentBranchName: currentBranchName,
-    currentBranchNameEncoded: encodeURIComponent(currentBranchName),
+    currentBranchNameShort: currentBranchName.replace(tagOrBranchRegex, ''),
     tagsAndBranches: tagsAndBranches
   };
 }

diff --git a/lib/specifications/projectMetaData.js b/lib/specifications/projectMetaData.js
@@ -22,9 +22,12 @@ function pathsToRoutes(featureFileRoot, projectName) {
     // Remove the .feature for a slightly shorter display name.
     var featureName = featureRoute.replace('.feature', '');
 
+    var featureNameShort = featureName.replace(/.+[\/\\]/, '');
+
     return {
       featureRoute: featureRoute,
-      featureName: featureName
+      featureName: featureName,
+      featureNameShort: featureNameShort
     };
   }
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "specs",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": true,
   "bin": {
     "module-name": "./bin/www"

diff --git a/public/css/main.css b/public/css/main.css
@@ -86,6 +86,8 @@ button.call-to-action {
 }
 button.call-to-action a {
   color: white;
+  padding: 1em;
+  text-decoration: none;
 }
 button.call-to-action:hover {
   background-color: green;
@@ -94,34 +96,6 @@ button.call-to-action:active {
   box-shadow: 1px 1px rgba(0, 0, 0, 0.4);
 }
 
-/* Top nav. */
-.header-nav {
-  width: 70%;
-  margin: 0 auto;
-  position: relative;
-  top: 0.8em;
-  text-align: left;
-  font-size: 1.2em;
-  list-style: none;
-}
-.header-nav a {
-  font-weight: bold;
-  color: blue;
-  text-decoration: none;
-}
-.header-nav li {
-  display: inline;
-  margin-left: 0.2em;
-}
-.header-nav li:hover a {
-  text-decoration: underline;
-  color: green;
-}
-.header-nav li.primary {
-  font-size: 1.2em;
-  margin-right: 1em;
-}
-
 /**
  * Landscape and larger phones
  */

diff --git a/public/css/navigation.css b/public/css/navigation.css
@@ -0,0 +1,40 @@
+/**
+ * Top nav.
+ **/
+
+.header-nav {
+  width: 70%;
+  margin: 0 auto;
+  position: relative;
+  top: 0.8em;
+  text-align: left;
+  font-size: 1.2em;
+  list-style: none;
+}
+
+.header-nav a {
+  display: inline-block;
+  font-weight: bold;
+  color: blue;
+  text-decoration: none;
+}
+
+.header-nav li {
+  display: inline;
+  margin-left: 0.2em;
+}
+
+.header-nav li:hover a {
+  text-decoration: underline;
+  color: green;
+}
+
+/* The logo-ish element of the nav. */
+.header-nav li.primary {
+  font-size: 0.8em;
+  margin-right: 1em;
+  text-transform: uppercase;
+}
+.header-nav li.primary a::first-letter {
+  font-size: 1.4em;
+}
diff --git a/public/css/project.css b/public/css/project.css
@@ -1,29 +1,39 @@
-.project > header {
-  margin-bottom: 1em;
-}
-
 .project-name {
   font-size: 2.5em;
-  margin-right: 0.4em;
-  display: inline-block;
+  text-transform: capitalize;
+}
+
+.project .controls {
+  margin-bottom: 2em;
 }
 
 .project-refs {
-    display: inline-block;
-    margin-top: 1em;
+  margin-bottom: 1em;
 }
 
 .project-branch {
   margin-right: 0.4em;
 }
 
+.project-branch select {
+  min-width: 30%;
+  max-width: 60%;
+}
+
 .project-commit {
+  display: inline-block;
+  margin-top: 1em;
   margin-right: 1em;
 }
 
+.project-update {
+  margin-top: 1em;
+  margin-right: 2em;
+  margin-bottom: 1em;
+}
+
 .repo-link {
   font-size: 0.7em;
-  margin-right: 3em;
   font-weight: bold;
   text-transform: uppercase;
 }
@@ -36,22 +46,9 @@
   text-decoration: underline;
 }
 
-.project-update {
-  margin-top: 1em;
-  margin-bottom: 1em;
+.spec-links > h2 {
+  color: grey;
 }
-
-.project-update a {
-  padding: 1em;
-  text-decoration: none;
-}
-
-.links-container {
+.spec-links > div {
   margin-left: 3em;
 }
-
-@media (min-width: 800px) {
-  .project-update {
-    float: right;
-  }
-}
diff --git a/routes/project.js b/routes/project.js
@@ -15,19 +15,23 @@ router.get('/:projectName', function(req, res, next) {
 
   var projectName = req.params.projectName;
 
-  // Query param casuing a Git update (pull).
-  var projectShouldUpdate = (req.query.update === 'true' || !!parseInt(req.query.update));
+  // Query param causing a Git update (pull).
+  var projectShouldUpdate = (req.query.update === 'true');
 
   // Query param indicating that it should be attempted
   // to check out the specified branch.
   var targetBranchName = req.query.branch || false;
 
   // Render the project page and send to client.
   function render(projectData) {
-    var data = {};
+    var data = {
+      renderingOptions: {}
+    };
+
     if (projectData) {
-      data = {project: projectData}
+      data['project'] = projectData;
     }
+
     res.render('project', data);
   }
 

diff --git a/views/partials/layout-start-document.hbs b/views/partials/layout-start-document.hbs
@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="/public/css/alphabeta.css">
     <link rel="stylesheet" href="/public/css/loader.css">
     <link rel="stylesheet" href="/public/css/main.css">
+    <link rel="stylesheet" href="/public/css/navigation.css">
 
     <!-- Old IE hack for main elements-->
     <script>document.createElement('main');</script>
diff --git a/views/project.hbs b/views/project.hbs
@@ -3,35 +3,37 @@
 {{> layout_start_body}}
 <main>
   <header>
-    <h1>Project Specifications</h1>
+    <h1 class="project-name">{{project.name}}</h1>
   </header>
   {{#if project}}
     <section class="project">
-      <header class="group">
-        <h2 class="project-name">{{project.name}}</h2>
-        <span class="project-refs">
+      <section class="controls">
+        <div class="project-refs">
           <span class="project-branch">
-            <label for="project-branch-select">branch:</label>
-            <select onchange="window.location.href = window.location.pathname + '?branch=' + this.value">
+            <label for="project-branch-select">Branch or tag:</label>
+            <select title="{{project.currentBranchNameShort}}" onchange="window.location.href = window.location.pathname + '?branch=' + this.value">
               {{#each project.tagsAndBranches}}
                 <option value="{{this.urlEncodedName}}" {{#if this.current}}selected{{/if}} >{{this.name}}</option>
               {{else}}
                 <option selected>No branch data found</option>
               {{/each}}
             </select>
           </span>
-          <span class="project-commit">(&nbsp;&commat;{{project.shortCommit}}&nbsp;)</span>
-        </span>
-        <span class="repo-link"><a href="{{project.repoUrl}}">visit&nbsp;repository</a></span>
-        <button class="project-update call-to-action"><a href="?update=true">Update</a></button>
-      </header>
-      <div class="links-container">
-        {{#each project.featureFilePaths}}
-          <p><a class="spec-link" href="{{../project.name}}/{{this.featureRoute}}">{{this.featureName}}</a></p>
-        {{else}}
-          <p>Sorry, this project does not appear to contain any specifications</p>
-        {{/each}}
-      </div>
+          <span class="project-commit">&commat;{{project.shortCommit}}</span>
+        </div>
+        <button class="project-update call-to-action"><a href="?update=true">Get Latest</a></button>
+        <span class="repo-link"><a href="{{project.repoUrl}}">(visit&nbsp;repository)</a></span>
+      </section>
+      <section class="spec-links">
+        <h2>Specifications</h2>
+        <div>
+          {{#each project.featureFilePaths}}
+            <p><a class="spec-link" href="{{../project.name}}/{{this.featureRoute}}">{{this.featureName}}</a></p>
+          {{else}}
+            <p>Sorry, this project does not appear to contain any specifications</p>
+          {{/each}}
+        </div>
+      </section>
     </section>
   {{else}}
     <p>Sorry, no project data was found</p>