Merge pull request #874 from posit-dev/dotnomad/links-on-pcard

Support nested links in PCard
posit-dev · Jan 24, 2024 · b056798 · b056798
2 parents 4d4400a + 95ff77c
commit b056798
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/web/src/components/AppHeader.vue b/web/src/components/AppHeader.vue
@@ -44,6 +44,10 @@ import WhitePositLogo from 'src/components/icons/WhitePositLogo.vue';
 .posit-logo-link {
   text-decoration: none;
 
+  &.vscode-router-link {
+    text-decoration: none;
+  }
+
   & > * {
     vertical-align: middle;
   }

diff --git a/web/src/components/PCard.vue b/web/src/components/PCard.vue
@@ -2,7 +2,7 @@
 
 <template>
   <div
-    class="p-card focus-shadow truncate"
+    class="p-card"
     :class="{ hoverable: to }"
   >
     <div class="card-header flex no-wrap items-center">
@@ -36,7 +36,7 @@
 
     <PLink
       v-if="to"
-      class="link-fill no-outline"
+      class="link-fill"
       :to="to"
     />
   </div>
@@ -79,17 +79,8 @@ defineProps({
     border: 1px solid;
     padding: 24px;
 
-    a {
-      color: inherit;
-      text-decoration: none;
-
-      &:focus {
-        outline: 2px solid transparent;
-        outline-offset: 2px;
-      }
-    }
-
     .link-fill {
+      text-decoration: none;
       display: block;
       position: absolute;
       inset: 0;
@@ -131,3 +122,11 @@ defineProps({
 }
 </style>
 
+<style lang="scss">
+.p-card a,
+.p-card .vscode-router-link {
+  position: relative;
+  z-index: 2;
+}
+</style>
+
diff --git a/web/src/components/PLink.vue b/web/src/components/PLink.vue
@@ -35,6 +35,7 @@ function navigate() {
 <style lang="scss" scoped>
 span.vscode-router-link {
   color: var(--vscode-textLink-foreground);
+  text-decoration: underline;
 
   &:not(:focus-visible) {
     outline: none;