feat(links): update page locations and cleanup

update the location of various pages, clean up links/references
fabric8-ui · Jun 29, 2017 · e9b61c0 · e9b61c0
1 parent dcfe4b7
commit e9b61c0
Show file tree

Hide file tree

Showing 28 changed files with 159 additions and 369 deletions.
diff --git a/README.md b/README.md
@@ -1,18 +1,24 @@
 [![Build Status](https://travis-ci.org/fabric8-ui/fabric8-ux.svg?branch=master)](https://travis-ci.org/fabric8-ui/fabric8-ux)
 [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
-[![codebeat badge](https://codebeat.co/badges/0ca8937c-4201-4d2e-a0b3-9f7d77284838)](https://codebeat.co/projects/github-com-fabric8io-fabric8-ux-master)
 
 # User Experience Repo
 
-Design Issues, Documents and UX Mockups related to the [fabric8-platform](https://github.com/fabric8-ui/fabric8-platform) and [fabric8-planner](https://github.com/fabric8-ui/fabric8-planner) repositories.
+Design Stories, Documents and UX Mockups related to the [fabric8-ui](https://github.com/fabric8-ui/fabric8-ui) and [fabric8-planner](https://github.com/fabric8-ui/fabric8-planner) repositories.
 
 All information is tracked by the User Experience Design Team.
 
 ## Important Links and References
-- [Design Links](https://github.com/fabric8-ui/fabric8-ux/blob/master/invision-links.md)
-- [Information Architecture](https://github.com/fabric8-ui/fabric8-ux/blob/master/ia.md)
+- Design Links
+    - [Platform](https://github.com/fabric8-ui/fabric8-ux/blob/master/src/docs/designs/platform.md)
+    - [Planner](https://github.com/fabric8-ui/fabric8-ux/blob/master/src/docs/designs/planner.md)
+    - [Bayesian](https://github.com/fabric8-ui/fabric8-ux/blob/master/src/docs/designs/bayesian.md)
+    - [Hypothesis Engine](https://github.com/fabric8-ui/fabric8-ux/blob/master/src/docs/designs/hypothesis.md)
+    - [fabric8 Patterns](https://github.com/fabric8-ui/fabric8-ux/blob/master/src/docs/designs/patterns.md)
+- [Information Architecture](https://github.com/fabric8-ui/fabric8-ux/blob/master/src/docs/resources/ia.md)
 - [HTML/CSS Code Guidelines](https://github.com/fabric8-ui/fabric8-ux/blob/master/code-guidelines.md)
 
+----
+
 ## Local Development
 Want to submit a PR to our site? Run the environment locally using the steps below:
 

diff --git a/_includes/design-legend.html b/_includes/design-legend.html
@@ -0,0 +1,19 @@
+<div class="container-fluid">
+  <div class="col-sm-7 col-sm-offset-5">
+    <ul class="status-list col-sm-3">
+      <li class="legend">LEGEND</li>
+    </ul>
+    <ul class="status-list col-sm-3">
+      <li class="orange">In Progress</li>
+      <li class="blue">Ready for implementation</li>
+    </ul>
+    <ul class="status-list col-sm-3">
+      <li class="green">UXD verified</li>
+      <li class="red">Designs need to be updated</li>
+    </ul>
+    <ul class="status-list col-sm-3">
+      <li class="purple">Planned - current goal by UXD</li>
+      <li class="grey">Unplanned - future goal by UXD</li>
+    </ul>
+  </div>
+</div>
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -0,0 +1,2 @@
+
+</html>
diff --git a/_includes/header.html b/_includes/header.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="description" content="fabric8 UXD">
+    <meta name="author" content="Adam J. Jolicoeur">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="shortcut icon" href="{{ page.relative_path }}assets/img/fabric8.png">
+    <title>{% if page.title %}{{ page.title }}{% endif %}</title>
+    <!-- link to main stylesheet -->
+    <link rel="stylesheet" type="text/css" href="{{ page.relative_path }}assets/css/styles.css">
+    <!-- jQuery -->
+    <script src="{{ page.relative_path }}assets/js/vendor/jquery.min.js"></script>
+    <!-- Bootstrap JS -->
+    <script src="{{ page.relative_path }}assets/js/vendor/bootstrap.min.js"></script>
+    <!-- PatternFly JS -->
+    <script src="{{ page.relative_path }}assets/js/vendor/patternfly.min.js"></script>
+    <!-- Site JS -->
+    <script src="{{ page.relative_path }}assets/js/designSearch.js"></script>
+    <script src="{{ page.relative_path }}assets/js/designSort.js"></script>
+    <!-- Place this tag in your head or just before your close body tag. -->
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
+  </head>
+  <body>
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -33,31 +33,31 @@
               <a href="{{ page.relative_path }}src/docs/designs/bayesian">Bayesian</a>
             </li>
             <li {% if page.navbar_active == "hypothesis" %} class="active"{% endif %} >
-              <a href="{{ page.relative_path }}src/docs/designs/hypothesis">Hypothesis</a>
+              <a href="{{ page.relative_path }}src/docs/designs/hypothesis">Hypothesis Engine</a>
             </li>
             <li role="separator" class="divider"></li>
-            <li {% if page.navbar_active == "general-designs" %} class="active"{% endif %} >
-              <a href="{{ page.relative_path }}src/docs/designs/general">Site-Wide Designs</a>
+            <li {% if page.navbar_active == "patterns" %} class="active"{% endif %} >
+              <a href="{{ page.relative_path }}src/docs/designs/patterns">fabric8 Patterns</a>
             </li>
           </ul>
         </li>
-        <li {% if page.navbar_active == "ia" %} class="active dropdown"{% endif %}>
-          <a href="{{ page.relative_path }}ia">Information Architecture</a>
-        </li>
         <li class="dropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Design Resources <span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li {% if page.navbar_active == "sketch" %} class="active"{% endif %}>
-              <a href="{{ page.relative_path }}src/docs/sketch">Sketch Components</a>
+              <a href="{{ page.relative_path }}src/docs/resources/sketch">Sketch Components</a>
             </li>
             <li {% if page.navbar_active == "photoshop" %} class="active"{% endif %}>
-              <a href="{{ page.relative_path }}src/docs/photoshop">Photoshop Components</a>
+              <a href="{{ page.relative_path }}src/docs/resources/photoshop">Photoshop Components</a>
             </li>
             <li {% if page.navbar_active == "colors" %} class="active"{% endif %}>
-              <a href="{{ page.relative_path }}src/docs/colors">Color Palette</a>
+              <a href="{{ page.relative_path }}src/docs/resources/colors">Color Palette</a>
             </li>
           </ul>
         </li>
+        <li {% if page.navbar_active == "ia" %} class="active dropdown"{% endif %}>
+          <a href="{{ page.relative_path }}src/docs/resources/ia">Information Architecture</a>
+        </li>
         <li {% if page.navbar_active == "guidelines" %} class="active"{% endif %}>
           <a href="{{ page.relative_path }}code-guidelines">Code Guidelines</a>
         </li>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,25 +1,4 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <meta name="description" content="fabric8 UXD">
-    <meta name="author" content="Adam J. Jolicoeur">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="shortcut icon" href="{{ page.relative_path }}assets/img/favicon.svg">
-    <title>{% if page.title %}{{ page.title }}{% endif %}</title>
-    <!-- link to main stylesheet -->
-    <link rel="stylesheet" type="text/css" href="{{ page.relative_path }}assets/css/styles.css">
-    <!-- jQuery -->
-    <script src="{{ page.relative_path }}assets/js/vendor/jquery.min.js"></script>
-    <!-- Bootstrap JS -->
-    <script src="{{ page.relative_path }}assets/js/vendor/bootstrap.min.js"></script>
-    <!-- PatternFly JS -->
-    <script src="{{ page.relative_path }}assets/js/vendor/patternfly.min.js"></script>
-    <!-- Site JS -->
-    <script async defer src="https://buttons.github.io/buttons.js"></script>
-  </head>
-  <body>
+  {% include header.html %}
     {% include nav.html %}
     <section>
       <div class="container-fluid">

diff --git a/_layouts/links-current.html b/_layouts/links-current.html
@@ -1,89 +1,54 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <meta name="description" content="fabric8 UXD">
-    <meta name="author" content="Adam J. Jolicoeur">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="shortcut icon" href="{{ page.relative_path }}assets/img/favicon.svg">
-    <title>{% if page.title %}{{ page.title }}{% endif %}</title>
-    <!-- link to main stylesheet -->
-    <link rel="stylesheet" type="text/css" href="{{ page.relative_path }}assets/css/styles.css">
-    <!-- jQuery -->
-    <script src="{{ page.relative_path }}assets/js/vendor/jquery.min.js"></script>
-    <!-- Bootstrap JS -->
-    <script src="{{ page.relative_path }}assets/js/vendor/bootstrap.min.js"></script>
-    <!-- PatternFly JS -->
-    <script src="{{ page.relative_path }}assets/js/vendor/patternfly.min.js"></script>
-    <!-- Site JS -->
-    <script src="{{ page.relative_path }}assets/js/designSearch.js"></script>
-    <script src="{{ page.relative_path }}assets/js/designSort.js"></script>
-  </head>
-  <body>
+  {% include header.html %}
     {% include nav.html %}
+    <style>
+      .hide { display: none; }
+    </style>
     <!-- Toolbar -->
     <div class="row toolbar-pf table-view-pf-toolbar" id="toolbar1">
       <div class="col-sm-12">
         <form class="toolbar-pf-actions">
           <div class="form-group toolbar-pf-filter">
             <label class="sr-only" for="filter">
-              Rendering Engine
+              Filter Designs
             </label>
             <div class="input-group">
               <div class="input-group-btn">
                 <button type="button" class="btn btn-default dropdown-toggle" id="filter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                  Filter by Design
+                  Filter Designs <span class="caret"></span>
                 </button>
+                <ul class="dropdown-menu">
+                  <li>
+                    <a data-target="#" id="design">Design Title</a>
+                  </li>
+                  <li>
+                    <a data-target="#" id="designer">Designer</a>
+                  </li>
+                </ul>
               </div>
-              <input type="text" class="form-control" placeholder="Filter By Design..." autocomplete="off" id="myInput" onkeyup="myFunction()">
+              <input type="text" class="form-control" placeholder="by Design Title..." autocomplete="off" id="designFilter" onkeyup="titleFunction()">
+              <input type="text" class="form-control hide" placeholder="by Designer..." autocomplete="off" id="designerFilter" onkeyup="designerFunction()">
             </div>
           </div>
         </form>
       </div>
     </div>
     <section>
       <div class="container-fluid">
-        <div>
-          <div class="pull-left">
+        <div class="col-sm-12">
+          <div class="col-sm-5">
             <h1>{% if page.title %}{{ page.title }}{% endif %}</h1>
           </div>
-          <div class="pull-right">
-            <ul class="status-list">
-              <li class="purple">Planned - current goal by UXD</li>
-              <li class="grey">Unplanned - future goal by UXD</li>
-            </ul>
-          </div>
-          <div class="pull-right">
-            <ul class="status-list">
-              <li class="green">UXD verified with correct implementation</li>
-              <li class="red">Designs are out of date and need to be updated</li>
-            </ul>
-          </div>
-          <div class="pull-right">
-            <ul class="status-list">
-              <li class="orange">Currently being worked on by UXD</li>
-              <li class="blue">UXD complete - ready for implementation</li>
-            </ul>
-          </div>
-          <div class="pull-right">
-            <ul class="status-list">
-              <li class="legend">
-                <strong>LEGEND</strong>
-              </li>
-              <li></li>
-            </ul>
-          </div>
         </div>
       </div>
+      {% include design-legend.html %}
       <div class="container-fluid">
 
         {{ content }}
 
       </div><!-- /.container -->
     </section>
     <script>
-    $("table").addClass("table table-striped table-bordered table-hover").attr("id", "myTable2");
+    $("table").addClass("table table-striped table-bordered table-hover").attr("id", "designTable");
     // $("table").attr("id", "myTable2");
     $("table>tbody>tr>td>a").attr("target", "top");
     $("table>tbody>tr>td:contains('Out of Date')").addClass("red");
@@ -93,4 +58,4 @@ <h1>{% if page.title %}{{ page.title }}{% endif %}</h1>
     $("table>tbody>tr>td:contains('TBD')").addClass("grey");
     $("table>tbody>tr>td:contains('Not Yet Started')").addClass("purple");
     </script>
-  </html>
+  {% include footer.html %}
diff --git a/_sass/base.scss b/_sass/base.scss
@@ -33,7 +33,10 @@ body { font-size: $fa-font-size-base; }
   }
 }
 .status-list {
-  .legend { color: $color-pf-black; }
+  .legend {
+    color: $color-pf-black;
+    text-align: right;
+  }
   padding: 0 5px;
   list-style: none;
   li {

diff --git a/assets/js/designSearch.js b/assets/js/designSearch.js
@@ -1,9 +1,24 @@
-function myFunction() {
+$(document).ready(function () {
+  $('#design').click(function() {
+    $("#designFilter").removeClass('hide');
+    $("#designFilter").addClass('show');
+    $("#designerFilter").removeClass('show');
+    $("#designerFilter").addClass('hide');
+  });
+  $('#designer').click(function() {
+    $("#designerFilter").addClass('show');
+    $("#designerFilter").removeClass('hide');
+    $("#designFilter").addClass('hide');
+    $("#designFilter").removeClass('show');
+  });
+});
+
+function titleFunction() {
   // Declare variables
   var input, filter, table, tr, td, i;
-  input = document.getElementById("myInput");
+  input = document.getElementById("designFilter");
   filter = input.value.toUpperCase();
-  table = document.getElementById("myTable2");
+  table = document.getElementById("designTable");
   tr = table.getElementsByTagName("tr");
 
   // Loop through all table rows, and hide those who don't match the search query
@@ -18,3 +33,24 @@ function myFunction() {
     }
   }
 }
+
+function designerFunction() {
+  // Declare variables
+  var input, filter, table, tr, td, i;
+  input = document.getElementById("designerFilter");
+  filter = input.value.toUpperCase();
+  table = document.getElementById("designTable");
+  tr = table.getElementsByTagName("tr");
+
+  // Loop through all table rows, and hide those who don't match the search query
+  for (i = 0; i < tr.length; i++) {
+    td = tr[i].getElementsByTagName("td")[2];
+    if (td) {
+      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
+        tr[i].style.display = "";
+      } else {
+        tr[i].style.display = "none";
+      }
+    }
+  }
+}
diff --git a/code-guidelines.md b/code-guidelines.md
@@ -6,19 +6,18 @@ relative_path: ./
 ---
 
 # OpenShift.io HTML/CSS Code Guidelines
+*covering HTML, CSS (Less) and structure*
 
 ----
 
-## __This is a draft and is still in progress__
-
 Please enforce these guidelines at all times. Small or large, call out what is incorrect.
 
 > Every line of code should appear to be written by a single person, no matter the number of contributors.
 
 This set of rules generate some constraints and conventions. If you run into instances where a convention is not obvious or a solution could be handled in a few different ways, contact the OpenShift.io community and have a conversation about how to handle it and update these guidelines when needed.
 
 
-## Table of content (WIP)
+## Table of Contents
 
 - HTML
   - [Syntax](#syntax)
@@ -39,6 +38,8 @@ This set of rules generate some constraints and conventions. If you run into ins
 
 <!-- ============================================================ -->
 
+----
+
 # HTML
 
 **Practicality over purity**. Strive to maintain HTML standards and semantics, but not at the expense of practicality. Use the least amount of markup with the fewest intricacies whenever possible.
@@ -115,6 +116,8 @@ Preferably, we want to keep our lines of HTML to 120 characters or less. This is
 
 <!-- ============================================================ -->
 
+----
+
 # CSS
 
 Before we discuss how we write out our rulesets, let’s first familiarize ourselves with relevant terminology: