Style polish: Icons, code highlighting, margins, positions

dmstern · Nov 26, 2018 · 234ae70 · 234ae70
1 parent 4b624dd
commit 234ae70
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 34 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -403,6 +403,11 @@ a,
   }
 }
 
+td,
+th {
+  vertical-align: top;
+}
+
 .v-icon {
   vertical-align: baseline;
 
@@ -436,9 +441,8 @@ a,
   }
 }
 
-pre {
-  white-space: pre-wrap;
-  word-break: break-all;
+table.package-detail__scripts {
+  width: 100%;
 }
 
 code,
@@ -473,7 +477,7 @@ kbd {
 }
 
 code.hljs {
-  white-space: pre;
+  white-space: pre-wrap;
 
   &.bash,
   &.language-bash {

diff --git a/src/components/CodeBlock.vue b/src/components/CodeBlock.vue
@@ -70,7 +70,7 @@ export default class CodeBlock extends Vue {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import '../assets/variables';
 
 .code-block {
@@ -82,19 +82,30 @@ export default class CodeBlock extends Vue {
     max-width: calc(100% - 52px);
     min-height: 4em;
   }
-}
 
-.v-toolbar {
-  background: $color-code-bg;
-  border-bottom: 1px solid lighten($color-code-bg, 5%);
+  .v-btn {
+    margin: 0;
+    margin-top: -3px;
+  }
 }
 
 .has-title {
   .button-wrapper {
     width: 0;
 
     .v-btn {
-      transform: translate(-120%, -115%);
+      background-color: $color-white;
+      transform: translate(-120%, -120%);
+      margin-top: 0;
+    }
+  }
+
+  .v-toolbar {
+    background: $color-code-bg;
+    border-bottom: 1px solid lighten($color-code-bg, 5%);
+
+    &__content {
+      padding: 1em;
     }
   }
 

diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -61,6 +61,8 @@ export const icons = {
   sass: 'fab fa-sass',
   md: 'mdi-markdown',
   font: 'fas fa-font',
+  license: 'fas fa-file-contract',
+  configFile: 'fas fa-clipboard-check',
 };
 
 icons.keywords = icons.tags;
@@ -111,6 +113,11 @@ icons.avi = icons.fileVideo;
 icons.wmv = icons.fileVideo;
 icons.m4p = icons.fileVideo;
 icons.m4v = icons.fileVideo;
+icons.yml = icons.configFile;
+icons.yaml = icons.yml;
+icons.hbs = icons.html;
+icons.nunj = icons.html;
+icons.ftl = icons.html;
 
 Vue.use(Vuetify, {
   iconfont: 'fa', // 'md' || 'mdi' || 'fa' || 'fa4'

diff --git a/src/views/PackageDetail.vue b/src/views/PackageDetail.vue
@@ -29,13 +29,13 @@
     </v-layout>
     <v-layout row wrap>
       <v-flex xs12 md7 xl8 order-xs2 order-md1>
-        <v-tabs v-model="activeTab">
-          <v-tab>README</v-tab>
-          <v-tab>Code</v-tab>
-          <v-tab>{{data.currentPackage.dependenciesCount}} Dependencies</v-tab>
-          <v-tab>{{Object.keys(data.packageDetail.versions).length}} Versions</v-tab>
-          <v-tab-item class="readme">
-            <v-card>
+        <v-card>
+          <v-tabs v-model="activeTab">
+            <v-tab>README</v-tab>
+            <v-tab>Code</v-tab>
+            <v-tab>{{data.currentPackage.dependenciesCount}} Dependencies</v-tab>
+            <v-tab>{{Object.keys(data.packageDetail.versions).length}} Versions</v-tab>
+            <v-tab-item class="readme">
               <v-card-text>
                 <div v-highlightjs v-if="data.packageDetail.readme" :key="data.packageDetail.readme" v-html="data.packageDetail.readme"></div>
                 <div v-else>
@@ -44,15 +44,13 @@
                   </v-alert>
                 </div>
               </v-card-text>
-            </v-card>
-          </v-tab-item>
-          <v-tab-item>
-            <v-card>
+            </v-tab-item>
+            <v-tab-item>
               <v-card-text v-if="data.packageDetail.mainCode || data.currentPackage.scripts">
                 <div v-if="data.currentPackage.scripts">
                   <h2>Scripts</h2>
 
-                  <table>
+                  <table class="package-detail__scripts">
                     <thead>
                       <tr>
                         <th>Command</th>
@@ -113,10 +111,8 @@
                   Nothing to show...
                 </v-alert>
               </v-card-text>
-            </v-card>
-          </v-tab-item>
-          <v-tab-item>
-            <v-card>
+            </v-tab-item>
+            <v-tab-item>
               <v-card-text v-if="data.currentPackage.dependenciesCount">
                 <h2>Dependencies</h2>
                 <router-link
@@ -150,10 +146,8 @@
                   This package has no dependencies.
                 </v-alert>
               </v-card-text>
-            </v-card>
-          </v-tab-item>
-          <v-tab-item>
-            <v-card>
+            </v-tab-item>
+            <v-tab-item>
               <v-card-text>
                 <h2>Current Tags</h2>
                 <v-list>
@@ -188,9 +182,9 @@
                   </v-list-tile>
                 </v-list>
               </v-card-text>
-            </v-card>
-          </v-tab-item>
-        </v-tabs>
+            </v-tab-item>
+          </v-tabs>
+        </v-card>
       </v-flex>
       <v-flex xs12 md5 xl4 order-xs1 order-md2 class="meta-panel">
         <v-layout row wrap>
@@ -561,6 +555,10 @@ export default class PackageDetail extends Vue {
       return icons.info;
     }
 
+    if (filename.toLowerCase().includes('license')) {
+      return icons.license;
+    }
+
     if (filename.toLowerCase() === 'package.json') {
       return icons.packageJson;
     }
@@ -580,7 +578,15 @@ export default class PackageDetail extends Vue {
     const parts: string[] = filename.split('.');
     const extension: string = parts.length ? parts[parts.length - 1] : '';
     const extensionIcon = icons[extension];
-    return extensionIcon || icons.file;
+    if (extensionIcon) {
+      return extensionIcon;
+    };
+
+    if (filename.toLowerCase().includes('config')) {
+      return icons.configFile;
+    }
+
+    return icons.file;
   }
 
   private getLanguage(filename: string): string {
@@ -599,6 +605,8 @@ export default class PackageDetail extends Vue {
       svg: 'svg',
       ftl: 'xml',
       sh: 'bash',
+      yml: 'yaml',
+      yaml: 'yaml',
     };
     const parts = filename.split('.');
     if (parts.length > 0) {