Css updates (#1)

* percentages as some css values * Using vh unit for table height * Adding top page padding * adjusting top padding * Removing extra css selectors * Making CSS changes to all pages * Bringing right scroll bar in closer * Changing AboutPage CSS
SunSpecOrangeButton · joelebwf · Jan 11, 2021 · Jan 5, 2021 · Jan 5, 2021 · Jan 8, 2021
commit a8412108265368a299fbffe1e461061504edf3f8
diff --git a/web/src/App.vue b/web/src/App.vue
@@ -40,23 +40,15 @@ html {
 }
 #app {
   font-family: "Montserrat";
+  font-size: 1rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
   background-color: white;
   display: grid;
-  grid-template-rows: 70px 0px 1000px 10px 60px;
-}
-
-#router-v {
-  grid-row: 3 / 4;
-}
-
-#navbar {
-  grid-row: 1 / 2;
 }
 
 </style>
 
 
-<!-- To get rid of horizontal scrolling use:   overflow-x: hidden -->
+<!-- To get rid of horizontal scrolling use:   overflow-x: hidden -->
diff --git a/web/src/components/ConceptDetail.vue b/web/src/components/ConceptDetail.vue
@@ -87,9 +87,8 @@ h1 {
 }
 
 .public-filter {
-  width: 600px;
-  overflow-wrap: break-word;
-  padding: 5px;
+  overflow-y: scroll;
+  height: 87vh;
 }
 
 button {

diff --git a/web/src/components/ConceptFilter.vue b/web/src/components/ConceptFilter.vue
@@ -156,9 +156,4 @@ label {
   margin-top: 3px;
   margin-bottom: 3px;
 }
-
-#keyword_search {
-  width: 214px;
-}
-
 </style>
diff --git a/web/src/components/ConceptList.vue b/web/src/components/ConceptList.vue
@@ -169,35 +169,11 @@ export default {
 
 <style>
 .concept-public-list-container {
-  display: grid;
-  grid-template-rows: 20px 720px 50px;
-  grid-template-columns: auto;
-  height: 100%;
-  padding-top: 5px;
-  width: 900px;
-  overflow-y: auto;
+  height: 87vh;
 }
 
-li {
-  margin-top: -6px;
-  margin-bottom: -6px;
-}
-ul {
-  padding: 0;
-  list-style: none;
-}
-
-.concept-public-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  background-color: white;
-  height: 725px;
-  justify-content: flex-start;
-  align-content: flex-start;
-  grid-row: 2 / 3;
-  grid-column: 1 /2;
-  width: 900px;
+.load-more-btn-container {
+  text-align: center;
 }
 
 @keyframes spin {
@@ -213,14 +189,4 @@ a {
   color: #1d4679;
 }
 
-.concept-table {
-  margin-left: 0px;
-}
-
-.load-more-btn-container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-</style>
+</style>
diff --git a/web/src/components/EntrypointDetail.vue b/web/src/components/EntrypointDetail.vue
@@ -50,9 +50,9 @@ export default {
 
 <style scoped>
     .entrypoint-detail-container {
-      width: 600px;
       overflow-wrap: break-word;
-      padding: 5px;
+      overflow-y: scroll;
+      height: 87vh;
     }
 
     h1 {

diff --git a/web/src/components/EntrypointFilter.vue b/web/src/components/EntrypointFilter.vue
@@ -134,9 +134,4 @@ label {
   margin-top: 3px;
   margin-bottom: 3px;
 }
-
-#keyword_search {
-  width: 214px;
-}
-
 </style>
diff --git a/web/src/components/EntrypointList.vue b/web/src/components/EntrypointList.vue
@@ -163,39 +163,12 @@ export default {
 </script>
 
 <style>
-.btn {
-  margin: 5px;
-}
 .entrypoint-public-list-container {
-  display: grid;
-  grid-template-rows: 20px 720px 50px;
-  grid-template-columns: auto;
-  height: 100%;
-  padding-top: 5px;
-  width: 900px;
-  overflow-y: auto;
+  height: 87vh;
 }
 
-li {
-  margin-top: -6px;
-  margin-bottom: -6px;
-}
-ul {
-  padding: 0;
-  list-style: none;
-}
-
-.entrypoint-public-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  background-color: white;
-  height: 725px;
-  justify-content: flex-start;
-  align-content: flex-start;
-  grid-row: 2 / 3;
-  grid-column: 1 /2;
-  width: 900px;
+.load-more-btn-container {
+  text-align: center;
 }
 
 @keyframes spin {
@@ -211,14 +184,4 @@ a {
   color: #1d4679;
 }
 
-.entrypoint-table {
-  margin-left: 0px;
-}
-
-.load-more-btn-container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-</style>
+</style>
diff --git a/web/src/components/GlossaryFilter.vue b/web/src/components/GlossaryFilter.vue
@@ -131,9 +131,5 @@ label {
   margin-top: 3px;
   margin-bottom: 3px;
 }
-
-#keyword_search {
-  width: 214px;
-}
-
 </style>
+
diff --git a/web/src/components/GlossaryList.vue b/web/src/components/GlossaryList.vue
@@ -150,35 +150,11 @@ export default {
 
 <style>
 .glossary-public-list-container {
-  display: grid;
-  grid-template-rows: 20px 720px 50px;
-  grid-template-columns: auto;
-  height: 100%;
-  padding-top: 5px;
-  width: 1500px;
+  height: 87vh;
 }
 
-li {
-  margin-top: -6px;
-  margin-bottom: -6px;
-}
-ul {
-  padding: 0;
-  list-style: none;
-}
-
-.glossary-public-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  background-color: white;
-  height: 725px;
-  justify-content: flex-start;
-  align-content: flex-start;
-  grid-row: 2 / 3;
-  grid-column: 1 /2;
-  width: 1500px;
-  #overflow-y: auto;
+.load-more-btn-container {
+  text-align: center;
 }
 
 @keyframes spin {
@@ -194,15 +170,4 @@ a {
   color: #1d4679;
 }
 
-.glossary-table {
-  margin-left: 0px;
-}
-
-.load-more-btn-container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-
-</style>
+</style>
diff --git a/web/src/components/Navbar.vue b/web/src/components/Navbar.vue
@@ -13,7 +13,7 @@
 -->
 
 <template>
-    <nav class="navbar navbar-expand-md navbar-light navbar-custom">
+    <nav class="navbar navbar-expand-sm navbar-light navbar-custom">
         <router-link to="entrypoints" class="navbar-brand">
             <img id="oblogo" src="@/assets/ob.png" alt="Orange Button"/>
             <h1 class="app-title">Orange Button Taxonomy Viewer</h1>
@@ -58,10 +58,10 @@
 }
 nav {
   font-family: "Roboto Condensed";
-  font-size: 18px;
+  font-size: 1.1em;
   font-style: normal;
   display: grid;
-  grid-template-columns: 1300px 400px 1fr;
+  grid-template-columns: 30% 70%;
   padding-left: 20px;
   border-bottom: 1px solid #dadce0;
   padding-top: 12px;
@@ -88,7 +88,7 @@ nav {
 
 .app-title {
   font-family: "Roboto";
-  font-size: 25px;
+  font-size: 1.25em;
   font-weight: bold;
   display: inline;
   text-transform: uppercase;

diff --git a/web/src/components/TypeFilter.vue b/web/src/components/TypeFilter.vue
@@ -137,9 +137,4 @@ label {
   margin-top: 3px;
   margin-bottom: 3px;
 }
-
-#keyword_search {
-  width: 214px;
-}
-
 </style>
diff --git a/web/src/components/TypeList.vue b/web/src/components/TypeList.vue
@@ -166,39 +166,12 @@ export default {
 </script>
 
 <style>
-.btn {
-  margin: 5px;
-}
 .type-public-list-container {
-  display: grid;
-  grid-template-rows: 20px 720px 50px;
-  grid-template-columns: auto;
-  height: 100%;
-  padding-top: 5px;
-  width: 1500px;
+  height: 87vh;
 }
 
-li {
-  margin-top: -6px;
-  margin-bottom: -6px;
-}
-ul {
-  padding: 0;
-  list-style: none;
-}
-
-.type-public-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  background-color: white;
-  height: 725px;
-  justify-content: flex-start;
-  align-content: flex-start;
-  grid-row: 2 / 3;
-  grid-column: 1 /2;
-  width: 1500px;
-  #overflow-y: auto;
+.load-more-btn-container {
+  text-align: center;
 }
 
 @keyframes spin {
@@ -214,14 +187,4 @@ a {
   color: #1d4679;
 }
 
-.type-table {
-  margin-left: 0px;
-}
-
-.load-more-btn-container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-</style>
+</style>
diff --git a/web/src/components/UnitFilter.vue b/web/src/components/UnitFilter.vue
@@ -138,9 +138,4 @@ label {
   margin-top: 3px;
   margin-bottom: 3px;
 }
-
-#keyword_search {
-  width: 214px;
-}
-
 </style>