Crafter searchable with '@', avatar styling, icon in avatar and in ch…

…ip styling

src/App.vue

@@ -117,11 +117,11 @@
                 <span class="search--key grey--text text--darken-1">
                   {{
                     isCrafter(data.item)
-                    ? `crafter:${data.item.name}`
+                    ? `@`
                     : `#`
                   }}
                 </span>
-                <span v-html="data.item.value"></span>
+                <span v-html="isCrafter(data.item) ? data.item.name : data.item.value"></span>
               </v-list-tile-title>
             </v-list-tile-content>
             <v-spacer></v-spacer>
@@ -408,6 +408,11 @@ a {
     font-size: inherit;
     transform: none;
   }
+
+  .v-chip &,
+  .v-avatar & {
+    opacity: .8;
+  }
 }
 
 code,

src/assets/variables.scss

@@ -34,3 +34,5 @@ $grid-breakpoints: (
 );
 
 $mdi2faScaleFactor: 20/24;
+
+$shadow-focused: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);

src/components/PackageDetailItem.vue

@@ -51,6 +51,11 @@ export default class PackageDetailItem extends Vue {
   a:not([href="#"]),
   .v-avatar {
     margin-right: .5em;
+    transition: $transition-smooth;
+    
+    &:hover {
+      box-shadow: $shadow-focused;
+    }
   }
 }
 

types/Crafter.ts

@@ -94,6 +94,7 @@ export default class Crafter extends Searchable {
       text.push(
         this.name,
         `author:${this.name}`,
+        `@${this.name}`,
         `crafter:${this.name}`,
         `contributor:${this.name}`,
         `collaborator:${this.name}`,