Styling tweaks + Tooltips

njt1982 · Jun 1, 2020 · f4b7729 · f4b7729
1 parent ee0d312
commit f4b7729
Show file tree

Hide file tree

Showing 12 changed files with 128 additions and 93 deletions.
diff --git a/package.json b/package.json
@@ -12,7 +12,6 @@
   },
   "dependencies": {
     "bootstrap": "^4.5.0",
-    "bootstrap-vue": "^2.15.0",
     "core-js": "^3.6.5",
     "dexie": "^3.0.1",
     "font-awesome": "^4.7.0",

diff --git a/public/index.html b/public/index.html
@@ -5,14 +5,14 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-     <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Slabo+27px&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Slabo+27px&display=swap" rel="stylesheet">
 
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <div class="jumbotron jumbotron-fluid">
       <div class="container">
-        <h1>Minecraft Item &amp; Browser</h1>
+        <h1>Minecraft Item Browser</h1>
         <p class="lead">
           Find items and learn how to make them, quickly and easily.
         </p>

diff --git a/src/App.vue b/src/App.vue
@@ -8,6 +8,8 @@
 $headings-font-family: "Slabo 27px", Serif;
 $font-family-sans-serif: "Open Sans Condensed", sans-serif;
 $fa-font-path: "~font-awesome/fonts";
+$tooltip-font-size: 1.25rem;
+$tooltip-bg: rgba(0, 0, 0, 0.8);
 @import "~bootstrap";
 @import "~font-awesome/scss/font-awesome";
 
@@ -50,9 +52,31 @@ img.mc-block {
   width: 16px;
   height: 16px;
   image-rendering: pixelated;
-  @include media-breakpoint-up(sm) {
-    width: 48px;
-    height: 48px;
+  @include media-breakpoint-up(md) {
+    width: 24px;
+    height: 24px;
+  }
+  @include media-breakpoint-up(lg) {
+    width: 32px;
+    height: 32px;
+  }
+}
+.invslot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: 2px solid;
+  border-color: #888 #eee #eee #888;
+  background: #ccc;
+  @include media-breakpoint-up(md) {
+    width: 36px;
+    height: 36px;
+  }
+  @include media-breakpoint-up(lg) {
+    width: 44px;
+    height: 44px;
   }
 }
 </style>

diff --git a/src/components/Item.vue b/src/components/Item.vue
@@ -0,0 +1,26 @@
+<template>
+  <router-link
+    :to="{
+      name: 'Home',
+      params: { item_name: item.name }
+    }"
+  >
+    <img :src="item.texture" class="mc-block" />
+  </router-link>
+</template>
+
+<script>
+/* eslint-env jquery */
+
+export default {
+  props: {
+    item: Object
+  },
+  mounted() {
+    $(this.$el).tooltip({
+      title: this.item.displayName,
+      position: "top"
+    });
+  }
+};
+</script>
diff --git a/src/components/Recipe.scss b/src/components/Recipe.scss
@@ -3,21 +3,7 @@
     > div {
       display: flex;
       > span {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 58px;
-        height: 58px;
-        border: 1px solid #000;
-        border-width: 1px 0 0 1px;
-        &:last-child {
-          border-right-width: 1px;
-        }
-      }
-      &:last-child {
-        > span {
-          border-bottom-width: 1px;
-        }
+        @extend .invslot;
       }
     }
   }
@@ -28,4 +14,29 @@
     @extend .justify-content-between;
     @extend .align-items-center;
   }
+  .card-body {
+    padding: 0.5rem;
+    @include media-breakpoint-up(sm) {
+      padding: 1rem;
+    }
+
+    .fa-chevron-right {
+      font-size: 1rem;
+      margin: 0 0.25rem;
+      @include media-breakpoint-up(sm) {
+        font-size: 1.5rem;
+      }
+      @include media-breakpoint-up(lg) {
+        font-size: 2rem;
+      }
+      color: $secondary;
+    }
+  }
+  .result {
+    @extend .d-flex;
+    @extend .align-items-center;
+    .count {
+      @extend .ml-2;
+    }
+  }
 }
diff --git a/src/components/Recipe.vue b/src/components/Recipe.vue
@@ -1,48 +1,46 @@
 <template>
-  <div class="col-md-6 mb-3" v-if="isReady">
+  <div class="col-6 col-xl-4 mb-3" v-if="isReady">
     <div class="card recipe">
-      <div class="card-header">
+      <div class="card-header" v-if="showHeader">
         <h4 class="mb-0">{{ createsItem.displayName }}</h4>
       </div>
       <div class="card-body d-flex">
         <div v-if="inputGrid" class="input-recipe">
           <div v-for="(row, index) in inputGrid" :key="index">
-            <span v-for="(col, index) in row" :key="index">
-              <router-link
-                :to="{
-                  name: 'Home',
-                  params: { item_name: getIngredientItem(col).name }
-                }"
-                class="mc-block"
-                v-if="col"
-              >
-                <img :src="getIngredientItem(col).texture" class="mc-block" />
-              </router-link>
+            <span class="invslot" v-for="(col, index) in row" :key="index">
+              <Item v-if="col" :item="getIngredientItem(col)" />
             </span>
           </div>
         </div>
 
         <i class="fa fa-chevron-right"></i>
 
-        <router-link
-          :to="{
-            name: 'Home',
-            params: { item_name: createsItem.name }
-          }"
-          class="mc-block"
-        >
-          <img class="mc-block" :src="createsItem.texture" />
-        </router-link>
+        <span class="result">
+          <Item class="invslot" :item="createsItem" />
+          <span class="count" v-if="recipe.result.count > 1">
+            {{ recipe.result.count }}
+          </span>
+        </span>
       </div>
     </div>
   </div>
 </template>
 
 <script>
 import db from "@/database";
+import Item from "./Item";
 
 export default {
-  props: ["recipe"],
+  props: {
+    recipe: Object,
+    showHeader: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    Item
+  },
   data() {
     return {
       createsItem: undefined,

diff --git a/src/components/ResultView.vue b/src/components/ResultView.vue
@@ -11,7 +11,12 @@
     <div v-if="used_id.length" class="mb-4">
       <h2>Used In</h2>
       <div class="row">
-        <Recipe v-for="recipe in used_id" :key="recipe.id" :recipe="recipe" />
+        <Recipe
+          v-for="recipe in used_id"
+          :key="recipe.id"
+          :recipe="recipe"
+          showHeader
+        />
       </div>
     </div>
   </div>
@@ -25,7 +30,9 @@ import db from "@/database";
 import Recipe from "./Recipe";
 
 export default {
-  props: ["item"],
+  props: {
+    item: Object
+  },
   components: {
     Recipe
   },

diff --git a/src/components/Sidebar.scss b/src/components/Sidebar.scss
@@ -4,6 +4,8 @@
     @extend .d-flex;
     @extend .justify-content-between;
     @extend .align-items-center;
-    font-size: 1.2rem;
+    @include media-breakpoint-up(lg) {
+      font-size: 1.2rem;
+    }
   }
 }
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="col-md-3">
+  <div class="col-md-3 mb-4">
     <h4>Search</h4>
     <div class="form-group">
       <div class="input-group">
@@ -27,7 +27,7 @@
         class="list-group-item"
       >
         {{ item.displayName }}
-        <img class="mc-block" :src="item.texture" />
+        <img class="mc-block ml-1" :src="item.texture" />
       </router-link>
     </div>
   </div>
@@ -38,7 +38,9 @@ import _debounce from "lodash/debounce";
 import db from "@/database";
 
 export default {
-  props: ["results"],
+  props: {
+    results: Array
+  },
   created() {
     if (this.$route.params.item_name) {
       let self = this;

diff --git a/src/main.js b/src/main.js
@@ -1,7 +1,7 @@
 import Vue from "vue";
+import "bootstrap";
 import App from "./App.vue";
 import router from "./router";
-
 window.$ = require("jquery");
 
 Vue.config.productionTip = false;

diff --git a/vue.config.js b/vue.config.js
@@ -1,3 +1,9 @@
 module.exports = {
-  publicPath: "/minecraft-item-browser/"
+  publicPath: "/minecraft-item-browser/",
+  pages: {
+    index: {
+      entry: "src/main.js",
+      title: "Minecraft Item Browser"
+    }
+  }
 };
diff --git a/yarn.lock b/yarn.lock
@@ -897,15 +897,6 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
-"@nuxt/opencollective@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@nuxt/opencollective/-/opencollective-0.3.0.tgz#11d8944dcf2d526e31660bb69570be03f8fb72b7"
-  integrity sha512-Vf09BxCdj1iT2IRqVwX5snaY2WCTkvM0O4cWWSO1ThCFuc4if0Q/nNwAgCxRU0FeYHJ7DdyMUNSdswCLKlVqeg==
-  dependencies:
-    chalk "^2.4.2"
-    consola "^2.10.1"
-    node-fetch "^2.6.0"
-
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@@ -1855,18 +1846,7 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bootstrap-vue@^2.15.0:
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/bootstrap-vue/-/bootstrap-vue-2.15.0.tgz#0dfc12c054496c0f10efed510da1def41697cf3c"
-  integrity sha512-ncxWkDG0mKFVot314wWKJELi+ESO7k6ngV//qvJFs9iVzlFI8Hx3rBVbpcPW2vrJ+0vitH8N2SOwn4fdQ3frMQ==
-  dependencies:
-    "@nuxt/opencollective" "^0.3.0"
-    bootstrap ">=4.5.0 <5.0.0"
-    popper.js "^1.16.1"
-    portal-vue "^2.1.7"
-    vue-functional-data-merge "^3.1.0"
-
-"bootstrap@>=4.5.0 <5.0.0", bootstrap@^4.5.0:
+bootstrap@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.0.tgz#97d9dbcb5a8972f8722c9962483543b907d9b9ec"
   integrity sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA==
@@ -2512,11 +2492,6 @@ connect-history-api-fallback@^1.6.0:
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
   integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
 
-consola@^2.10.1:
-  version "2.12.2"
-  resolved "https://registry.yarnpkg.com/consola/-/consola-2.12.2.tgz#9610f158e7b0a9ecc8f8bb0c4fc8e7c52bf41d05"
-  integrity sha512-c9mzemrAk57s3UIjepn8KKkuEH5fauMdot5kFSJUnqHcnApVS9Db8Rbv5AZ1Iz6lXzaGe9z1crQXhJtGX4h/Og==
-
 console-browserify@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
@@ -5892,11 +5867,6 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
-node-fetch@^2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
-  integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
-
 [email protected]:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
@@ -6617,11 +6587,6 @@ popper.js@^1.16.1:
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
   integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
 
-portal-vue@^2.1.7:
-  version "2.1.7"
-  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.7.tgz#ea08069b25b640ca08a5b86f67c612f15f4e4ad4"
-  integrity sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==
-
 portfinder@^1.0.26:
   version "1.0.26"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.26.tgz#475658d56ca30bed72ac7f1378ed350bd1b64e70"
@@ -8808,11 +8773,6 @@ vue-eslint-parser@^7.0.0:
     esquery "^1.0.1"
     lodash "^4.17.15"
 
-vue-functional-data-merge@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz#08a7797583b7f35680587f8a1d51d729aa1dc657"
-  integrity sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA==
-
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"