CSS Updates on All Pages, and Copy and Mailto links on ConceptFilter (#…

…57)

Addressed issues #49 and #50.

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 -->

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 {

web/src/components/ConceptFilter.vue

@@ -43,6 +43,8 @@
                   <h1>Select entrypoint:</h1>
                   <b-form-select id="entryPointSelector" v-model="entryPointSelected" :options="$store.state.entryPointList" />
                 </label>
+              Selected Entrypoint Link: <br>
+              <a href @click.prevent="copyLinkToClipboard">Copy to Clipboard</a> or <a :href=filterMailtoLink>Email</a>
             </div>
             <div class="button-group">
                 <button type="button" class="btn btn-primary" @click="updateQuery">
@@ -66,7 +68,18 @@ export default {
     }
   },
   beforeCreate() {
-      this.$store.commit("callAPIentrypoints");
+    this.$store.commit("callAPIentrypoints");
+  },
+  created() {
+    // if query params, create cookie
+    // query param form = ?views=
+    if (Object.keys(this.$route.query).length !== 0) {
+      let givenEntryPoint = this.$route.query['views'];
+      if (this.$store.state.entryPointList.includes(givenEntryPoint)) {
+        // setting entryPointSelected triggers the watch for it below, updating the data list
+        this.entryPointSelected = givenEntryPoint;
+      }
+    }
   },
   methods: {
     updateQuery() {
@@ -79,6 +92,23 @@ export default {
       this.$store.commit("clearConceptsChks");
       this.entryPointSelected = '';
       this.$store.commit("callAPI", "concepts/none");
+    },
+    getParameterizedURL() {
+      let currentURL = window.location.href;
+      if (currentURL.indexOf("?") > 0) {
+        currentURL = currentURL.substring(0, currentURL.indexOf("?"));
+      }
+      return currentURL + "?views=" + this.entryPointSelected;
+    },
+    copyLinkToClipboard() {
+      navigator.clipboard.writeText(this.getParameterizedURL())
+        .then(() => { /* success */ })
+        .catch(() => { /* failed */ });
+    }
+  },
+  computed: {
+    filterMailtoLink: function() {
+      return "mailto:?body=" + this.getParameterizedURL();
     }
   },
   watch: {
@@ -156,9 +186,4 @@ label {
   margin-top: 3px;
   margin-bottom: 3px;
 }
-
-#keyword_search {
-  width: 214px;
-}
-
 </style>

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>

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 {

web/src/components/EntrypointFilter.vue

@@ -134,9 +134,4 @@ label {
   margin-top: 3px;
   margin-bottom: 3px;
 }
-
-#keyword_search {
-  width: 214px;
-}
-
 </style>

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>

web/src/components/GlossaryFilter.vue

@@ -131,9 +131,5 @@ label {
   margin-top: 3px;
   margin-bottom: 3px;
 }
-
-#keyword_search {
-  width: 214px;
-}
-
 </style>
+

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>

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;

web/src/components/TypeFilter.vue

@@ -137,9 +137,4 @@ label {
   margin-top: 3px;
   margin-bottom: 3px;
 }
-
-#keyword_search {
-  width: 214px;
-}
-
 </style>