Merge pull request #2 from Carifio24/logo-sizing

Sizing for credit logos

Author: Carifio24

package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@fortawesome/vue-fontawesome": "^3.0.6",
     "@kyvg/vue3-notification": "^2.9.1",
     "@mdi/font": "^7.4.47",
     "@wwtelescope/engine-pinia": "^0.9.0",

src/components/CreditLogos.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="logo-credits">
+  <div id="logo-credits" :style="cssVars">
     <div id="icons-container">
       <a href="https://www.cosmicds.cfa.harvard.edu/" target="_blank" rel="noopener noreferrer"
         ><img alt="CosmicDS Logo" src="https://raw.githubusercontent.com/cosmicds/minids/main/assets/cosmicds_logo_for_dark_backgrounds.png"
@@ -17,40 +17,38 @@
   </div>
 </template>
 
-
 <script lang="ts">
-import { defineComponent, } from "vue";
+import { defineComponent } from "vue";
 
 export default defineComponent({
 
-
   props: {
     visible: {
       type: Boolean,
       default: true
     },
-  },
-
-  data() {
-    return {    };
-  },
-
-  created() {
-    return;
-  },
-
-  methods: {
-    
+    logoSize: {
+      type: String,
+      default: "5vmin"
+    }
   },
 
   computed: { 
-
     isMobile() {
       return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
     },
+    cssVars() {
+      return {
+        "--logo-size": this.logoSize,
+      };
+    }
   },
 
-  watch: {
-  }
 });
-</script>
+</script>
+
+<style>
+#logo-credits img {
+  height: var(--logo-size);
+}
+</style>

src/components/IconButton.vue

@@ -45,7 +45,9 @@ import { defineComponent } from "vue";
 import { VTooltip } from "vuetify/components/VTooltip";
 import { VIcon } from "vuetify/components/VIcon";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import type { FontAwesomeIconProps } from "@fortawesome/vue-fontawesome/";
+
+// We need to do this because FontAwesome doesn't export the prop types
+type FontAwesomeIconProps = InstanceType<typeof FontAwesomeIcon>["$props"];
 
 type SizeType = Extract<FontAwesomeIconProps, 'size'>;
 

yarn.lock

@@ -264,7 +264,7 @@ __metadata:
   dependencies:
     "@fortawesome/fontawesome-svg-core": ^6.5.1
     "@fortawesome/free-solid-svg-icons": ^6.5.1
-    "@fortawesome/vue-fontawesome": ^3.0.3
+    "@fortawesome/vue-fontawesome": ^3.0.6
     "@kyvg/vue3-notification": ^2.9.1
     "@mdi/font": ^7.4.47
     "@types/leaflet": ^1.9.3
@@ -364,13 +364,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fortawesome/vue-fontawesome@npm:^3.0.3":
-  version: 3.0.5
-  resolution: "@fortawesome/vue-fontawesome@npm:3.0.5"
+"@fortawesome/vue-fontawesome@npm:^3.0.6":
+  version: 3.0.6
+  resolution: "@fortawesome/vue-fontawesome@npm:3.0.6"
   peerDependencies:
     "@fortawesome/fontawesome-svg-core": ~1 || ~6
     vue: ">= 3.0.0 < 4"
-  checksum: 741222a35bd189e4e7957ad77ee0e557cb3281c99f6e7b379713c2a4bb2f65f0945c4ae60fdcc8d49721cc5f1a8d874bf6e1b58a3688002c3170e4376b94db02
+  checksum: 0ae311ed998660ae7b460ec03e5fd5f64268dd841ac000bb67172211fa3f36b2df46d6ffb95de608f716664ebc07048a17d5da8b4f93f2ccddc8a054b410bcaf
   languageName: node
   linkType: hard