From cf72d4d898260f55d913ff136940dce42c1753a6 Mon Sep 17 00:00:00 2001
From: joelebwf <joelebwf@users.noreply.github.com>
Date: Wed, 19 Feb 2020 15:43:50 -0600
Subject: [PATCH] CSS Updates (#48)

CSS updates including screen size and ADA fixes.
---
 web/src/App.vue                              |   6 +-
 web/src/components/ConceptDetail.vue         | 130 +++++++------------
 web/src/components/ConceptFilter.vue         |  26 ++--
 web/src/components/ConceptList.vue           |  97 +-------------
 web/src/components/EntrypointDetail.vue      | 104 +++------------
 web/src/components/EntrypointDetailChild.vue |  46 ++-----
 web/src/components/EntrypointFilter.vue      |  20 +--
 web/src/components/EntrypointList.vue        | 102 ++-------------
 web/src/components/GlossaryFilter.vue        |  18 +--
 web/src/components/GlossaryList.vue          |  97 +-------------
 web/src/components/Navbar.vue                |   4 +-
 web/src/components/TypeFilter.vue            |  18 +--
 web/src/components/TypeList.vue              |  94 +-------------
 web/src/components/UnitFilter.vue            |  18 +--
 web/src/components/UnitList.vue              |  94 +-------------
 web/src/store.js                             |   4 +-
 web/src/views/AboutPage.vue                  |   4 +-
 web/src/views/ConceptsPage.vue               |  22 ++--
 web/src/views/EntrypointsPage.vue            |  27 ++--
 web/src/views/GlossaryPage.vue               |  19 +--
 web/src/views/TypesPage.vue                  |  19 +--
 web/src/views/UnitsPage.vue                  |  19 +--
 22 files changed, 197 insertions(+), 791 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 1693a01..dc29f94 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -13,7 +13,7 @@
 -->
 
 <template>
-    <div id="app">
+    <div id="app" role="main">
         <Navbar id="navbar"></Navbar>
         <router-view id="router-v"/>
         <!-- <Footer id="footer"></Footer> -->
@@ -48,10 +48,6 @@ html {
   grid-template-rows: 70px 0px 1000px 10px 60px;
 }
 
-#footer {
-  grid-row: 5 / 6;
-}
-
 #router-v {
   grid-row: 3 / 4;
 }
diff --git a/web/src/components/ConceptDetail.vue b/web/src/components/ConceptDetail.vue
index 20a8fd4..b5a4406 100644
--- a/web/src/components/ConceptDetail.vue
+++ b/web/src/components/ConceptDetail.vue
@@ -14,46 +14,49 @@
 
 <template>
     <div class="public-filter">
-        <form @submit.prevent>
-            <br/>
-            <h1>{{ conceptName }} </h1>
-            Label: {{ apiData.label }} <br/>
-            Taxonomy: {{ apiData.taxonomy}} <br/>
-            Entrypoints:<br/>
-            <ul>
-               <li v-for="item in apiData.entrypoints">
-                 {{ item }}
-               </li>
-            </ul>
-            Description:
-            <ul>
-              <li>{{ apiData.description }} </li>
-            </ul>
-            Item Type: {{ apiData.type }}<br/>
-            Validation Rule:  {{ apiData.validationRule }} <br/>
-                Precision/Decimals: {{ apiData.precisionDecimals }} <br/>
-            Units:
-            <ul>
-               <li v-for="item in apiData.units">
-                 {{ item }}
-               </li>
-            </ul>
-            Period: {{ apiData.period }} <br/>
-            Nillable: {{ apiData.nillable }} <br/>
-            Calculations:
-            <ul>
-               <li v-for="item in apiData.calculations">
-                 {{ item }}
-               </li>
-            </ul>
-            Usages in Calculations:
-            <ul>
-               <li v-for="item in apiData.usages">
-                 {{ item }}
-               </li>
-            </ul>
-
-        </form>
+        <div v-if="conceptName === ''">
+                <h1>Click on a row to display details</h1>
+        </div>
+        <div v-else>
+            <form @submit.prevent>
+                <h1>{{ conceptName }} </h1>
+                Label: {{ apiData.label }} <br/>
+                Taxonomy: {{ apiData.taxonomy}} <br/>
+                Entrypoints:<br/>
+                <ul>
+                   <li v-for="item in apiData.entrypoints">
+                     {{ item }}
+                   </li>
+                </ul>
+                Description:
+                <ul>
+                  <li>{{ apiData.description }} </li>
+                </ul>
+                Item Type: {{ apiData.type }}<br/>
+                Validation Rule:  {{ apiData.validationRule }} <br/>
+                    Precision/Decimals: {{ apiData.precisionDecimals }} <br/>
+                Units:
+                <ul>
+                   <li v-for="item in apiData.units">
+                     {{ item }}
+                   </li>
+                </ul>
+                Period: {{ apiData.period }} <br/>
+                Nillable: {{ apiData.nillable }} <br/>
+                Calculations:
+                <ul>
+                   <li v-for="item in apiData.calculations">
+                     {{ item }}
+                   </li>
+                </ul>
+                Usages in Calculations:
+                <ul>
+                   <li v-for="item in apiData.usages">
+                     {{ item }}
+                   </li>
+                </ul>
+            </form>
+        </div>
     </div>
 </template>
 
@@ -75,15 +78,7 @@ export default {
 </script>
 
 <style scoped>
-.clear-icon {
-  color: #db4437;
-  margin-bottom: 3px;
-}
 
-.search-icon {
-  color: #4285f4;
-  margin-bottom: 3px;
-}
 h1 {
   font-size: 18px;
   color: #4b4e52;
@@ -92,14 +87,10 @@ h1 {
 }
 
 .public-filter {
-  padding-left: 20px;
-  padding-top: 5px;
-}
-
-.form-group {
-  font-family: "Roboto Condensed";
-
-  display: block;
+  width: 600px;
+  border: 1px solid #dadce0;
+  overflow-wrap: break-word;
+  padding: 5px;
 }
 
 button {
@@ -111,38 +102,11 @@ label {
   display: block;
 }
 
-.button-group {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 5px;
-  margin-left: -17px;
-}
-
-.btn-primary,
-.btn-primary:active,
-.btn-primary:visited,
-.btn-primary:focus,
-.btn-primary:disabled {
-  background-color: white;
-  border-color: #4b4e52;
-  color: #4b4e52;
-}
-
-.btn-primary:hover {
-  background-color: #eeeeee;
-  color: #4b4e52;
-  border-color: #4b4e52;
-}
-
 label {
   margin-top: 3px;
   margin-bottom: 3px;
 }
 
-#keyword_search {
-  width: 214px;
-}
-
 ul.a {
   list-style-type: circle;
 }
diff --git a/web/src/components/ConceptFilter.vue b/web/src/components/ConceptFilter.vue
index d77e259..1e76cfe 100644
--- a/web/src/components/ConceptFilter.vue
+++ b/web/src/components/ConceptFilter.vue
@@ -15,31 +15,33 @@
 <template>
     <div class="public-filter">
         <form @submit.prevent>
-            <h1>Keyword</h1>
             <div class="form-group">
-                <input
-                        type="text"
-                        class="form-control"
-                        id="keyword_search"
-                        v-model="$store.state.searchTerm"
-                        @keyup.enter="updateQuery"
-                />
+                <label for="keyword_search">
+                    <h1>Keyword</h1>
+                    <input
+                            type="text"
+                            class="form-control"
+                            id="keyword_search"
+                            v-model="$store.state.searchTerm"
+                            @keyup.enter="updateQuery"
+                    />
+                </label>
             </div>
 
             <h1>Concept Type</h1>
             <div class="form-group">
-                <label for="data">
+                <label for="solar">
                     <input type="checkbox" id="solar" value="Solar" v-model="$store.state.chkSolar"/> Solar
                 </label>
-                <label for="documents">
+                <label for="usgaap">
                     <input type="checkbox" id="usgaap" value="USGaap" v-model="$store.state.chkUSGaap"/> US-Gaap
                 </label>
-                <label for="process">
+                <label for="dei">
                     <input type="checkbox" id="dei" value="DEI" v-model="$store.state.chkDEI"/> DEI
                 </label>
                 <label for="entryPointSelector">
                   <h1>Select entrypoint:</h1>
-                  <b-form-select v-model="entryPointSelected" :options="$store.state.entryPointList" />
+                  <b-form-select id="entryPointSelector" v-model="entryPointSelected" :options="$store.state.entryPointList" />
                 </label>
             </div>
             <div class="button-group">
diff --git a/web/src/components/ConceptList.vue b/web/src/components/ConceptList.vue
index e9d4ded..2bde577 100644
--- a/web/src/components/ConceptList.vue
+++ b/web/src/components/ConceptList.vue
@@ -39,7 +39,7 @@
                 </template>
             </b-table>
             <div class="load-more-btn-container" v-if="!apiLoading">
-              <b-button variant="primary" @click="loadMore" v-if="showLoadMore">Load more</b-button>
+              <b-button @click="loadMore" v-if="showLoadMore">Load more</b-button>
             </div>
         </div>
     </div>
@@ -168,16 +168,13 @@ export default {
 </script>
 
 <style>
-.btn {
-  margin: 5px;
-}
 .concept-public-list-container {
   display: grid;
-  grid-template-rows: 50px 720px 50px;
+  grid-template-rows: 20px 720px 50px;
   grid-template-columns: auto;
   height: 100%;
   padding-top: 5px;
-  width: 1163px;
+  width: 900px;
   overflow-y: auto;
 }
 
@@ -190,32 +187,6 @@ ul {
   list-style: none;
 }
 
-.card {
-  border: 2px solid #444549;
-  box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-  height: 227px;
-  width: 488px;
-  padding: 10px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-  display: grid;
-  grid-template-columns: 33% 1fr;
-  grid-template-rows: 140px auto;
-  font-family: "Roboto Condensed";
-}
-
-.logo {
-  width: 140px;
-  height: 140px;
-  background-color: #d8d8d8;
-}
-
-.card-body {
-  padding: 0;
-  grid-column: 2 / 3;
-}
-
 .concept-public-list {
   display: flex;
   flex-direction: row;
@@ -226,24 +197,7 @@ ul {
   align-content: flex-start;
   grid-row: 2 / 3;
   grid-column: 1 /2;
-  width: 1163px;
-}
-
-a.nav-link {
-  padding: 0px;
-}
-
-.loader {
-  border: 16px solid #f3f3f3; /* Light grey */
-  border-top: 16px solid #3498db; /* Blue */
-  border-radius: 50%;
-  width: 120px;
-  height: 120px;
-  animation: spin 2s linear infinite;
-  margin-left: 400px;
-  margin-top: 150px;
-  grid-row: 2 / 3;
-  grid-column: 1 /2;
+  width: 900px;
 }
 
 @keyframes spin {
@@ -255,36 +209,6 @@ a.nav-link {
   }
 }
 
-#top-buttons {
-  grid-row: 1 / 2;
-  margin-top: -20px;
-  position: relative;
-  margin-left: auto;
-  margin-right: 0;
-}
-
-#bottom-buttons {
-  grid-row: 3 / 4;
-  position: relative;
-  margin-left: auto;
-  margin-right: 0;
-}
-
-.pagination {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.btn-primary,
-.btn-primary:hover,
-.btn-primary:active,
-.btn-primary:visited,
-.btn-primary:focus,
-.btn-primary:disabled {
-  background-color: #1d4679;
-  border-color: #1d4679;
-}
-
 a {
   color: #1d4679;
 }
@@ -293,19 +217,6 @@ a {
   margin-left: 0px;
 }
 
-.concept-code-field-col {
-  width: 400px;
-  text-align: center;
-}
-
-.col-field-styling {
-  text-align: center;
-}
-
-.table {
-  margin-bottom: 0px !important;
-}
-
 .load-more-btn-container {
   width: 100%;
   display: flex;
diff --git a/web/src/components/EntrypointDetail.vue b/web/src/components/EntrypointDetail.vue
index c736c9d..37eabff 100644
--- a/web/src/components/EntrypointDetail.vue
+++ b/web/src/components/EntrypointDetail.vue
@@ -14,7 +14,12 @@
 
 <template>
      <div class="entrypoint-detail-container">
-         <entrypoint-child v-bind:abstract="apiData" v-bind:key="apiData.name"></entrypoint-child>
+        <div v-if="entrypointName === ''">
+                <h1>Click on a row to display details</h1>
+        </div>
+        <div v-else>
+             <entrypoint-child v-bind:abstract="apiData" v-bind:key="apiData.name"></entrypoint-child>
+        </div>
     </div>
 </template>
 
@@ -44,90 +49,17 @@ export default {
 </script>
 
 <style scoped>
-.clear-icon {
-  color: #db4437;
-  margin-bottom: 3px;
-}
-
-.search-icon {
-  color: #4285f4;
-  margin-bottom: 3px;
-}
-h1 {
-  font-size: 18px;
-  color: #4b4e52;
-  font-family: "Roboto Condensed";
-  font-weight: bold;
-}
-
-h2 {
-  font-size: 16px;
-  color: #4b4e52;
-  font-family: "Roboto Condensed";
-  font-weight: bold;
-}
-
-.entrypoint-detail-container {
-  padding-left: 20px;
-  padding-top: 5px;
-  height: 100vh;
-  overflow-y: scroll;
-}
-
-.form-group {
-  font-family: "Roboto Condensed";
-
-  display: block;
-}
-
-button {
-  margin: 5px;
-  margin-bottom: 15px;
-}
-
-label {
-  display: block;
-}
-
-.button-group {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 5px;
-  margin-left: -17px;
-}
-
-.btn-primary,
-.btn-primary:active,
-.btn-primary:visited,
-.btn-primary:focus,
-.btn-primary:disabled {
-  background-color: white;
-  border-color: #4b4e52;
-  color: #4b4e52;
-}
-
-.btn-primary:hover {
-  background-color: #eeeeee;
-  color: #4b4e52;
-  border-color: #4b4e52;
-}
-
-label {
-  margin-top: 3px;
-  margin-bottom: 3px;
-}
-
-#keyword_search {
-  width: 214px;
-}
-
-ul.a {
-  list-style-type: circle;
-}
-
-li {
-    list-style-type: disc;
-    margin-left: 35px;
-}
+    .entrypoint-detail-container {
+      width: 600px;
+      border: 1px solid #dadce0;
+      overflow-wrap: break-word;
+      padding: 5px;
+    }
 
+    h1 {
+      font-size: 18px;
+      color: #4b4e52;
+      font-family: "Roboto Condensed";
+      font-weight: bold;
+    }
 </style>
diff --git a/web/src/components/EntrypointDetailChild.vue b/web/src/components/EntrypointDetailChild.vue
index 4f42f2a..71f5670 100644
--- a/web/src/components/EntrypointDetailChild.vue
+++ b/web/src/components/EntrypointDetailChild.vue
@@ -35,7 +35,7 @@
                                 <th>Purpose</th>
                             </tr>
                             <tr v-for="citem in item.columns">
-                                <td>{{ citem.name }}</td>
+                                <td class="anytext"><div class="anytext">{{ citem.name }}</div></td>
                                 <td v-if="citem.purpose == 'Abstract'"><a :href="'#'+citem.name">{{ citem.purpose }}</a></td>
                                 <td v-else>{{ citem.purpose }}
                                     <div v-if="citem.valuesenum != null">
@@ -75,10 +75,6 @@ export default {
   margin-bottom: 3px;
 }
 
-.search-icon {
-  color: #4285f4;
-  margin-bottom: 3px;
-}
 h1 {
   font-size: 18px;
   color: #4b4e52;
@@ -96,12 +92,7 @@ h2 {
 .public-filter {
   padding-left: 20px;
   padding-top: 5px;
-}
-
-.form-group {
-  font-family: "Roboto Condensed";
-
-  display: block;
+  overflow-wrap: break-word;
 }
 
 button {
@@ -113,38 +104,11 @@ label {
   display: block;
 }
 
-.button-group {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 5px;
-  margin-left: -17px;
-}
-
-.btn-primary,
-.btn-primary:active,
-.btn-primary:visited,
-.btn-primary:focus,
-.btn-primary:disabled {
-  background-color: white;
-  border-color: #4b4e52;
-  color: #4b4e52;
-}
-
-.btn-primary:hover {
-  background-color: #eeeeee;
-  color: #4b4e52;
-  border-color: #4b4e52;
-}
-
 label {
   margin-top: 3px;
   margin-bottom: 3px;
 }
 
-#keyword_search {
-  width: 214px;
-}
-
 ul.a {
   list-style-type: circle;
 }
@@ -154,4 +118,10 @@ li {
     margin-left: 35px;
 }
 
+.anytext {
+  overflow-wrap: break-word;
+  width: 400px;
+}
+
 </style>
+
diff --git a/web/src/components/EntrypointFilter.vue b/web/src/components/EntrypointFilter.vue
index 8c1be71..b516f85 100644
--- a/web/src/components/EntrypointFilter.vue
+++ b/web/src/components/EntrypointFilter.vue
@@ -15,15 +15,17 @@
 <template>
     <div class="public-filter">
         <form @submit.prevent>
-            <h1>Keyword</h1>
             <div class="form-group">
-                <input
-                        type="text"
-                        class="form-control"
-                        id="keyword_search"
-                        v-model="$store.state.searchTerm"
-                        @keyup.enter="updateQuery"
-                />
+                <label for="keyword_search">
+                    <h1>Keyword</h1>
+                    <input
+                            type="text"
+                            class="form-control"
+                            id="keyword_search"
+                            v-model="$store.state.searchTerm"
+                            @keyup.enter="updateQuery"
+                    />
+                </label>
             </div>
 
             <h1>Entrypoint Type</h1>
@@ -32,7 +34,7 @@
                     <input type="checkbox" id="data" value="Data" v-model="$store.state.chkData"/> Data
                 </label>
                 <label for="documents">
-                    <input type="checkbox" id="document" value="Documents" v-model="$store.state.chkDocuments"/> Documents
+                    <input type="checkbox" id="documents" value="Documents" v-model="$store.state.chkDocuments"/> Documents
                 </label>
                 <label for="process">
                     <input type="checkbox" id="Process" value="Process" v-model="$store.state.chkProcess"/> Process
diff --git a/web/src/components/EntrypointList.vue b/web/src/components/EntrypointList.vue
index 0a1db9e..39376cc 100644
--- a/web/src/components/EntrypointList.vue
+++ b/web/src/components/EntrypointList.vue
@@ -37,7 +37,7 @@
                 </template>
             </b-table>
             <div class="load-more-btn-container" v-if="!apiLoading">
-              <b-button variant="primary" @click="loadMore" v-if="showLoadMore">Load more</b-button>
+              <b-button @click="loadMore" v-if="showLoadMore">Load more</b-button>
             </div>
         </div>
     </div>
@@ -53,8 +53,9 @@ export default {
         {
           key: "entrypoint",
           label: "Entrypoint",
-          thStyle: { width: "274px" },
-          thClass: ".col-field-styling"
+          thStyle: { width: "160px" },
+          thClass: ".col-field-styling",
+          tdClass: ".col-entrypoint-field-styling"
         },
         {
           key: "type",
@@ -167,11 +168,12 @@ export default {
 }
 .entrypoint-public-list-container {
   display: grid;
-  grid-template-rows: 50px 720px 50px;
+  grid-template-rows: 20px 720px 50px;
   grid-template-columns: auto;
   height: 100%;
   padding-top: 5px;
-  width: 1163px;
+  width: 900px;
+  overflow-y: auto;
 }
 
 li {
@@ -183,32 +185,6 @@ ul {
   list-style: none;
 }
 
-.card {
-  border: 2px solid #444549;
-  box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-  height: 227px;
-  width: 488px;
-  padding: 10px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-  display: grid;
-  grid-template-columns: 33% 1fr;
-  grid-template-rows: 140px auto;
-  font-family: "Roboto Condensed";
-}
-
-.logo {
-  width: 140px;
-  height: 140px;
-  background-color: #d8d8d8;
-}
-
-.card-body {
-  padding: 0;
-  grid-column: 2 / 3;
-}
-
 .entrypoint-public-list {
   display: flex;
   flex-direction: row;
@@ -219,26 +195,7 @@ ul {
   align-content: flex-start;
   grid-row: 2 / 3;
   grid-column: 1 /2;
-  width: 1163px;
-  height: 100%;
-  overflow-y: auto;
-}
-
-a.nav-link {
-  padding: 0px;
-}
-
-.loader {
-  border: 16px solid #f3f3f3; /* Light grey */
-  border-top: 16px solid #3498db; /* Blue */
-  border-radius: 50%;
-  width: 120px;
-  height: 120px;
-  animation: spin 2s linear infinite;
-  margin-left: 400px;
-  margin-top: 150px;
-  grid-row: 2 / 3;
-  grid-column: 1 /2;
+  width: 900px;
 }
 
 @keyframes spin {
@@ -250,36 +207,6 @@ a.nav-link {
   }
 }
 
-#top-buttons {
-  grid-row: 1 / 2;
-  margin-top: -20px;
-  position: relative;
-  margin-left: auto;
-  margin-right: 0;
-}
-
-#bottom-buttons {
-  grid-row: 3 / 4;
-  position: relative;
-  margin-left: auto;
-  margin-right: 0;
-}
-
-.pagination {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.btn-primary,
-.btn-primary:hover,
-.btn-primary:active,
-.btn-primary:visited,
-.btn-primary:focus,
-.btn-primary:disabled {
-  background-color: #1d4679;
-  border-color: #1d4679;
-}
-
 a {
   color: #1d4679;
 }
@@ -288,19 +215,6 @@ a {
   margin-left: 0px;
 }
 
-.entrypoint-code-field-col {
-  width: 400px;
-  text-align: center;
-}
-
-.col-field-styling {
-  text-align: center;
-}
-
-.table {
-  margin-bottom: 0px !important;
-}
-
 .load-more-btn-container {
   width: 100%;
   display: flex;
diff --git a/web/src/components/GlossaryFilter.vue b/web/src/components/GlossaryFilter.vue
index 881aeb1..5be300c 100644
--- a/web/src/components/GlossaryFilter.vue
+++ b/web/src/components/GlossaryFilter.vue
@@ -15,15 +15,17 @@
 <template>
     <div class="public-filter">
         <form @submit.prevent>
-            <h1>Keyword</h1>
             <div class="form-group">
-                <input
-                        type="text"
-                        class="form-control"
-                        id="keyword_search"
-                        v-model="$store.state.searchTerm"
-                        @keyup.enter="updateQuery"
-                />
+                <label for="keyword_search">
+                    <h1>Keyword</h1>
+                    <input
+                            type="text"
+                            class="form-control"
+                            id="keyword_search"
+                            v-model="$store.state.searchTerm"
+                            @keyup.enter="updateQuery"
+                    />
+                </label>
             </div>
 
             <h1>Glossary Items Type</h1>
diff --git a/web/src/components/GlossaryList.vue b/web/src/components/GlossaryList.vue
index 2772c16..80c2253 100644
--- a/web/src/components/GlossaryList.vue
+++ b/web/src/components/GlossaryList.vue
@@ -33,7 +33,7 @@
                 </template>
             </b-table>
             <div class="load-more-btn-container" v-if="!apiLoading">
-              <b-button variant="primary" @click="loadMore" v-if="showLoadMore">Load more</b-button>
+              <b-button @click="loadMore" v-if="showLoadMore">Load more</b-button>
             </div>
         </div>
     </div>
@@ -149,16 +149,13 @@ export default {
 </script>
 
 <style>
-.btn {
-  margin: 5px;
-}
 .glossary-public-list-container {
   display: grid;
-  grid-template-rows: 50px 720px 50px;
+  grid-template-rows: 20px 720px 50px;
   grid-template-columns: auto;
   height: 100%;
   padding-top: 5px;
-  width: 1163px;
+  width: 1500px;
 }
 
 li {
@@ -170,32 +167,6 @@ ul {
   list-style: none;
 }
 
-.card {
-  border: 2px solid #444549;
-  box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-  height: 227px;
-  width: 488px;
-  padding: 10px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-  display: grid;
-  grid-template-columns: 33% 1fr;
-  grid-template-rows: 140px auto;
-  font-family: "Roboto Condensed";
-}
-
-.logo {
-  width: 140px;
-  height: 140px;
-  background-color: #d8d8d8;
-}
-
-.card-body {
-  padding: 0;
-  grid-column: 2 / 3;
-}
-
 .glossary-public-list {
   display: flex;
   flex-direction: row;
@@ -206,27 +177,10 @@ ul {
   align-content: flex-start;
   grid-row: 2 / 3;
   grid-column: 1 /2;
-  width: 1163px;
+  width: 1500px;
   #overflow-y: auto;
 }
 
-a.nav-link {
-  padding: 0px;
-}
-
-.loader {
-  border: 16px solid #f3f3f3; /* Light grey */
-  border-top: 16px solid #3498db; /* Blue */
-  border-radius: 50%;
-  width: 120px;
-  height: 120px;
-  animation: spin 2s linear infinite;
-  margin-left: 400px;
-  margin-top: 150px;
-  grid-row: 2 / 3;
-  grid-column: 1 /2;
-}
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);
@@ -236,36 +190,6 @@ a.nav-link {
   }
 }
 
-#top-buttons {
-  grid-row: 1 / 2;
-  margin-top: -20px;
-  position: relative;
-  margin-left: auto;
-  margin-right: 0;
-}
-
-#bottom-buttons {
-  grid-row: 3 / 4;
-  position: relative;
-  margin-left: auto;
-  margin-right: 0;
-}
-
-.pagination {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.btn-primary,
-.btn-primary:hover,
-.btn-primary:active,
-.btn-primary:visited,
-.btn-primary:focus,
-.btn-primary:disabled {
-  background-color: #1d4679;
-  border-color: #1d4679;
-}
-
 a {
   color: #1d4679;
 }
@@ -274,19 +198,6 @@ a {
   margin-left: 0px;
 }
 
-.glossary-code-field-col {
-  width: 400px;
-  text-align: center;
-}
-
-.col-field-styling {
-  text-align: center;
-}
-
-.table {
-  margin-bottom: 0px !important;
-}
-
 .load-more-btn-container {
   width: 100%;
   display: flex;
diff --git a/web/src/components/Navbar.vue b/web/src/components/Navbar.vue
index 01ff6c4..9a358bc 100644
--- a/web/src/components/Navbar.vue
+++ b/web/src/components/Navbar.vue
@@ -15,7 +15,7 @@
 <template>
     <nav class="navbar navbar-expand-md navbar-light navbar-custom">
         <router-link to="entrypoints" class="navbar-brand">
-            <img id="oblogo" src="@/assets/ob.png"/>
+            <img id="oblogo" src="@/assets/ob.png" alt="Orange Button"/>
             <h1 class="app-title">Orange Button Taxonomy Viewer</h1>
         </router-link>
         <ul class="navbar-nav ml-auto">
@@ -61,7 +61,7 @@ nav {
   font-size: 18px;
   font-style: normal;
   display: grid;
-  grid-template-columns: 600px 1fr;
+  grid-template-columns: 1300px 400px 1fr;
   padding-left: 20px;
   border-bottom: 1px solid #dadce0;
   padding-top: 12px;
diff --git a/web/src/components/TypeFilter.vue b/web/src/components/TypeFilter.vue
index 6d29cdd..c200d22 100644
--- a/web/src/components/TypeFilter.vue
+++ b/web/src/components/TypeFilter.vue
@@ -15,15 +15,17 @@
 <template>
     <div class="public-filter">
         <form @submit.prevent>
-            <h1>Keyword</h1>
             <div class="form-group">
-                <input
-                        type="text"
-                        class="form-control"
-                        id="keyword_search"
-                        v-model="$store.state.searchTerm"
-                        @keyup.enter="updateQuery"
-                />
+                <label for="keyword_search">
+                    <h1>Keyword</h1>
+                    <input
+                            type="text"
+                            class="form-control"
+                            id="keyword_search"
+                            v-model="$store.state.searchTerm"
+                            @keyup.enter="updateQuery"
+                    />
+                </label>
             </div>
 
             <h1>Type</h1>
diff --git a/web/src/components/TypeList.vue b/web/src/components/TypeList.vue
index 0efc4c6..8cba760 100644
--- a/web/src/components/TypeList.vue
+++ b/web/src/components/TypeList.vue
@@ -33,7 +33,7 @@
                 </template>
             </b-table>
             <div class="load-more-btn-container" v-if="!apiLoading">
-              <b-button variant="primary" @click="loadMore" v-if="showLoadMore">Load more</b-button>
+              <b-button @click="loadMore" v-if="showLoadMore">Load more</b-button>
             </div>
         </div>
     </div>
@@ -171,11 +171,11 @@ export default {
 }
 .type-public-list-container {
   display: grid;
-  grid-template-rows: 50px 720px 50px;
+  grid-template-rows: 20px 720px 50px;
   grid-template-columns: auto;
   height: 100%;
   padding-top: 5px;
-  width: 1163px;
+  width: 1500px;
 }
 
 li {
@@ -187,32 +187,6 @@ ul {
   list-style: none;
 }
 
-.card {
-  border: 2px solid #444549;
-  box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-  height: 227px;
-  width: 488px;
-  padding: 10px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-  display: grid;
-  grid-template-columns: 33% 1fr;
-  grid-template-rows: 140px auto;
-  font-family: "Roboto Condensed";
-}
-
-.logo {
-  width: 140px;
-  height: 140px;
-  background-color: #d8d8d8;
-}
-
-.card-body {
-  padding: 0;
-  grid-column: 2 / 3;
-}
-
 .type-public-list {
   display: flex;
   flex-direction: row;
@@ -223,27 +197,10 @@ ul {
   align-content: flex-start;
   grid-row: 2 / 3;
   grid-column: 1 /2;
-  width: 1163px;
+  width: 1500px;
   #overflow-y: auto;
 }
 
-a.nav-link {
-  padding: 0px;
-}
-
-.loader {
-  border: 16px solid #f3f3f3; /* Light grey */
-  border-top: 16px solid #3498db; /* Blue */
-  border-radius: 50%;
-  width: 120px;
-  height: 120px;
-  animation: spin 2s linear infinite;
-  margin-left: 400px;
-  margin-top: 150px;
-  grid-row: 2 / 3;
-  grid-column: 1 /2;
-}
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);
@@ -253,36 +210,6 @@ a.nav-link {
   }
 }
 
-#top-buttons {
-  grid-row: 1 / 2;
-  margin-top: -20px;
-  position: relative;
-  margin-left: auto;
-  margin-right: 0;
-}
-
-#bottom-buttons {
-  grid-row: 3 / 4;
-  position: relative;
-  margin-left: auto;
-  margin-right: 0;
-}
-
-.pagination {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.btn-primary,
-.btn-primary:hover,
-.btn-primary:active,
-.btn-primary:visited,
-.btn-primary:focus,
-.btn-primary:disabled {
-  background-color: #1d4679;
-  border-color: #1d4679;
-}
-
 a {
   color: #1d4679;
 }
@@ -291,19 +218,6 @@ a {
   margin-left: 0px;
 }
 
-.type-code-field-col {
-  width: 400px;
-  text-align: center;
-}
-
-.col-field-styling {
-  text-align: center;
-}
-
-.table {
-  margin-bottom: 0px !important;
-}
-
 .load-more-btn-container {
   width: 100%;
   display: flex;
diff --git a/web/src/components/UnitFilter.vue b/web/src/components/UnitFilter.vue
index b991e0f..1e1a6ae 100644
--- a/web/src/components/UnitFilter.vue
+++ b/web/src/components/UnitFilter.vue
@@ -15,15 +15,17 @@
 <template>
     <div class="public-filter">
         <form @submit.prevent>
-            <h1>Keyword</h1>
             <div class="form-group">
-                <input
-                        type="text"
-                        class="form-control"
-                        id="keyword_search"
-                        v-model="$store.state.searchTerm"
-                        @keyup.enter="updateQuery"
-                />
+                <label for="keyword_search">
+                    <h1>Keyword</h1>
+                    <input
+                            type="text"
+                            class="form-control"
+                            id="keyword_search"
+                            v-model="$store.state.searchTerm"
+                            @keyup.enter="updateQuery"
+                    />
+                </label>
             </div>
 
             <h1>Unit Type</h1>
diff --git a/web/src/components/UnitList.vue b/web/src/components/UnitList.vue
index dc4190e..5217331 100644
--- a/web/src/components/UnitList.vue
+++ b/web/src/components/UnitList.vue
@@ -33,7 +33,7 @@
                 </template>
             </b-table>
             <div class="load-more-btn-container" v-if="!apiLoading">
-              <b-button variant="primary" @click="loadMore" v-if="showLoadMore">Load more</b-button>
+              <b-button @click="loadMore" v-if="showLoadMore">Load more</b-button>
             </div>
         </div>
     </div>
@@ -182,11 +182,11 @@ export default {
 }
 .unit-public-list-container {
   display: grid;
-  grid-template-rows: 50px 720px 50px;
+  grid-template-rows: 20px 720px 50px;
   grid-template-columns: auto;
   height: 100%;
   padding-top: 5px;
-  width: 1163px;
+  width: 1500px;
 }
 
 li {
@@ -198,32 +198,6 @@ ul {
   list-style: none;
 }
 
-.card {
-  border: 2px solid #444549;
-  box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-  height: 227px;
-  width: 488px;
-  padding: 10px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-  display: grid;
-  grid-template-columns: 33% 1fr;
-  grid-template-rows: 140px auto;
-  font-family: "Roboto Condensed";
-}
-
-.logo {
-  width: 140px;
-  height: 140px;
-  background-color: #d8d8d8;
-}
-
-.card-body {
-  padding: 0;
-  grid-column: 2 / 3;
-}
-
 .unit-public-list {
   display: flex;
   flex-direction: row;
@@ -234,27 +208,10 @@ ul {
   align-content: flex-start;
   grid-row: 2 / 3;
   grid-column: 1 /2;
-  width: 1163px;
+  width: 1500px;
   #overflow-y: auto;
 }
 
-a.nav-link {
-  padding: 0px;
-}
-
-.loader {
-  border: 16px solid #f3f3f3; /* Light grey */
-  border-top: 16px solid #3498db; /* Blue */
-  border-radius: 50%;
-  width: 120px;
-  height: 120px;
-  animation: spin 2s linear infinite;
-  margin-left: 400px;
-  margin-top: 150px;
-  grid-row: 2 / 3;
-  grid-column: 1 /2;
-}
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);
@@ -264,36 +221,6 @@ a.nav-link {
   }
 }
 
-#top-buttons {
-  grid-row: 1 / 2;
-  margin-top: -20px;
-  position: relative;
-  margin-left: auto;
-  margin-right: 0;
-}
-
-#bottom-buttons {
-  grid-row: 3 / 4;
-  position: relative;
-  margin-left: auto;
-  margin-right: 0;
-}
-
-.pagination {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.btn-primary,
-.btn-primary:hover,
-.btn-primary:active,
-.btn-primary:visited,
-.btn-primary:focus,
-.btn-primary:disabled {
-  background-color: #1d4679;
-  border-color: #1d4679;
-}
-
 a {
   color: #1d4679;
 }
@@ -302,19 +229,6 @@ a {
   margin-left: 0px;
 }
 
-.unit-code-field-col {
-  width: 400px;
-  text-align: center;
-}
-
-.col-field-styling {
-  text-align: center;
-}
-
-.table {
-  margin-bottom: 0px !important;
-}
-
 .load-more-btn-container {
   width: 100%;
   display: flex;
diff --git a/web/src/store.js b/web/src/store.js
index 5f6e372..1be52bd 100644
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -69,8 +69,8 @@ export default new Vuex.Store({
     chkAcronym: false,
     chkAbbreviation: false,
 
-    conceptDetail: "Click on a row to display details",
-    entrypointDetail: "Click on a row to display details"
+    conceptDetail: "",
+    entrypointDetail: ""
   },
   getters: {
     apiData: state => state.apiData,
diff --git a/web/src/views/AboutPage.vue b/web/src/views/AboutPage.vue
index 21f18dd..8d8139e 100644
--- a/web/src/views/AboutPage.vue
+++ b/web/src/views/AboutPage.vue
@@ -76,7 +76,7 @@
         </div>
 </template>
 
-<style>
+<style scoped>
 .about-container {
   display: flex;
   height: 75%;
@@ -99,7 +99,7 @@
 }
 
 a {
-  color: #4285f4;
+  color: blue;
 }
 
 </style>
diff --git a/web/src/views/ConceptsPage.vue b/web/src/views/ConceptsPage.vue
index 02a915b..917b493 100644
--- a/web/src/views/ConceptsPage.vue
+++ b/web/src/views/ConceptsPage.vue
@@ -45,6 +45,9 @@ export default {
     returnItemsCount() {
       return this.$store.state.returnItemsCount;
     }
+  },
+  created() {
+      this.$store.state.conceptDetail = "";
   }
 };
 
@@ -75,20 +78,13 @@ export default {
   grid-row: 2 / 3;
 }
 
-.nav-link {
-  display: inline;
-  padding: 0;
-  padding-right: 5px;
-}
-
-#sort-by-button {
-  float: right;
-}
-
 .concept-count {
-  grid-column: 4 / 5;
-  grid-row: 1 / 2;
-  font-family: "Roboto Condensed";
+    grid-column:  2 / 3;
+    grid-row: 1 / 3;
+    place-self: start;
+    justify-self: center;
+    padding-top: 340px;
+    font-weight: bold;
 }
 
 a {
diff --git a/web/src/views/EntrypointsPage.vue b/web/src/views/EntrypointsPage.vue
index fc54f63..fd4e719 100644
--- a/web/src/views/EntrypointsPage.vue
+++ b/web/src/views/EntrypointsPage.vue
@@ -15,8 +15,7 @@
 <template>
     <div class="entrypoint-search-container">
         <div class="entrypoint-count">
-            <br/>
-            <strong>{{ returnItemsCount }} Entrypoints</strong>
+            {{ returnItemsCount }} Entrypoints
         </div>
         <div class="entrypoint-search-sidebar">
             <component-entrypoint-filter></component-entrypoint-filter>
@@ -45,7 +44,10 @@ export default {
     returnItemsCount() {
       return this.$store.state.returnItemsCount;
     }
-  }
+  },
+  created() {
+      this.$store.state.entrypointDetail = "";
+   }
 };
 
 </script>
@@ -74,20 +76,13 @@ export default {
   grid-row: 2 / 3;
 }
 
-.nav-link {
-  display: inline;
-  padding: 0;
-  padding-right: 5px;
-}
-
-#sort-by-button {
-  float: right;
-}
-
 .entrypoint-count {
-  grid-column: 4 / 5;
-  grid-row: 1 / 2;
-  font-family: "Roboto Condensed";
+  grid-column:  2 / 3;
+  grid-row: 1 / 3;
+  place-self: start;
+  justify-self: center;
+  padding-top: 300px;
+  font-weight: bold;
 }
 
 a {
diff --git a/web/src/views/GlossaryPage.vue b/web/src/views/GlossaryPage.vue
index 59d3c41..3069bb4 100644
--- a/web/src/views/GlossaryPage.vue
+++ b/web/src/views/GlossaryPage.vue
@@ -66,20 +66,13 @@ export default {
   grid-row: 1 / span 2;
 }
 
-.nav-link {
-  display: inline;
-  padding: 0;
-  padding-right: 5px;
-}
-
-#sort-by-button {
-  float: right;
-}
-
 .glossary-count {
-  grid-column: 4 / 5;
-  grid-row: 1 / 2;
-  font-family: "Roboto Condensed";
+    grid-column:  2 / 3;
+    grid-row: 1 / 3;
+    place-self: start;
+    justify-self: center;
+    padding-top: 250px;
+    font-weight: bold;
 }
 
 a {
diff --git a/web/src/views/TypesPage.vue b/web/src/views/TypesPage.vue
index 36cd623..6f358c3 100644
--- a/web/src/views/TypesPage.vue
+++ b/web/src/views/TypesPage.vue
@@ -65,20 +65,13 @@ export default {
   grid-row: 1 / span 2;
 }
 
-.nav-link {
-  display: inline;
-  padding: 0;
-  padding-right: 5px;
-}
-
-#sort-by-button {
-  float: right;
-}
-
 .type-count {
-  grid-column: 4 / 5;
-  grid-row: 1 / 2;
-  font-family: "Roboto Condensed";
+    grid-column:  2 / 3;
+    grid-row: 1 / 3;
+    place-self: start;
+    justify-self: center;
+    padding-top: 300px;
+    font-weight: bold;
 }
 
 a {
diff --git a/web/src/views/UnitsPage.vue b/web/src/views/UnitsPage.vue
index 196e903..b6dba07 100644
--- a/web/src/views/UnitsPage.vue
+++ b/web/src/views/UnitsPage.vue
@@ -67,20 +67,13 @@ export default {
   grid-row: 1 / span 2;
 }
 
-.nav-link {
-  display: inline;
-  padding: 0;
-  padding-right: 5px;
-}
-
-#sort-by-button {
-  float: right;
-}
-
 .unit-count {
-  grid-column: 4 / 5;
-  grid-row: 1 / 2;
-  font-family: "Roboto Condensed";
+    grid-column:  2 / 3;
+    grid-row: 1 / 3;
+    place-self: start;
+    justify-self: center;
+    padding-top: 300px;
+    font-weight: bold;
 }
 
 a {