* Layout of common and scientific names is better

* Open new tab when accessing a nursery website
CodeForPhilly · May 15, 2022 · 1b8b66c · 1b8b66c
1 parent 031f99a
commit 1b8b66c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/src/components/Explorer.vue b/src/components/Explorer.vue
@@ -194,8 +194,10 @@
             <article v-for="result in results" :key="result._id" @click="this.$router.push(plantLink(result))" class="plant-preview-wrapper">
               <div class="plant-preview">
                 <div class="photo" :style="imageStyle(result, true)"></div>
-                <h4 class="common-name">{{ result['Common Name'] }}</h4>
-                <h5 class="scientific-name">{{ result['Scientific Name'] }}</h5>
+                <div class="names">
+                  <h4 class="common-name">{{ result['Common Name'] }}</h4>
+                  <h5 class="scientific-name">{{ result['Scientific Name'] }}</h5>
+                </div>
                 <button @click.stop="toggleFavorite(result._id)" class="favorite-large text"><span class="material-icons material-align">{{ renderFavorite(result._id) }}</span></button>
                 <div class="plant-controls-wrapper">
                   <div class="plant-controls">
@@ -1395,28 +1397,28 @@ td, th {
   aspect-ratio: 1/1;
   border-radius: 8px 8px 0 0;
 }
-.common-name {
+.names {
   position: absolute;
-  bottom: 74px;
+  top: calc(50% - 16px);
   left: 16px;
   margin: 0;
   padding: 0;
   font-size: 14px;
-  font-weight: normal;
   font-family: Lato;
   color: white;
 }
-.scientific-name {
-  position: absolute;
-  bottom: 56px;
-  left: 16px;
+.common-name {
+  font-size: 14px;
   margin: 0;
   padding: 0;
+  font-weight: normal;
+}
+.scientific-name {
   font-size: 12px;
   font-style: italic;
+  margin: 0;
+  padding: 0;
   font-weight: normal;
-  font-family: Lato;
-  color: white;
 }
 .plant-controls-wrapper {
   position: absolute;

diff --git a/src/components/Map.vue b/src/components/Map.vue
@@ -8,7 +8,7 @@
         <div v-if="nurseries">
           <ul>
             <li :ref="nursery._id" v-for="nursery in nurseries" v-bind:key="nursery._id" :class="{ nursery: true, focused: nursery === focused }">
-              <h4><a @click.prevent="setFocusedNursery(nursery)" :href="nursery.URL">{{ nursery.SOURCE }}</a></h4>
+              <h4><a @click.prevent="setFocusedNursery(nursery)" target="_blank" :href="nursery.URL">{{ nursery.SOURCE }}</a></h4>
               <div class="details">
                 <p><a :href="addressLink(nursery)">{{ nursery.ADDRESS }}<br />{{ nursery.CITY }}, {{ nursery.STATE }} {{ nursery.ZIP }}</a></p>
                 <p><a :href="phoneLink(nursery)">{{ nursery.PHONE }}</a></p>