Utwo · Utwo · Aug 13, 2020 · Aug 15, 2020 · Aug 15, 2020 · Aug 15, 2020
diff --git a/.browserslistrc b/.browserslistrc
@@ -1,3 +1,3 @@
 > 1%
 last 2 versions
-not ie <= 8
+not dead
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,19 +3,12 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ["plugin:vue/essential", "@vue/prettier"],
-  rules: {
-    "no-console": "off",
-    "no-debugger": "off",
-    semi: "off",
-    "vue/attribute-hyphenation": ["error", "always"],
-    "vue/require-default-prop": "error",
-    "vue/require-prop-types": "error",
-    "vue/attributes-order": "error",
-    "vue/order-in-components": "error",
-    "vue/no-use-v-if-with-v-for": false
-  },
+  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
   parserOptions: {
     parser: "babel-eslint"
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
   }
-}
+};
diff --git a/.prettierrc b/.prettierrc
diff --git a/babel.config.js b/babel.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/app"]
-}
+  presets: ["@vue/cli-plugin-babel/preset"]
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,38 +11,40 @@
     "scraper": "node ./node_modules/scraper/scraper.js"
   },
   "dependencies": {
-    "core-js": "^2.6.5",
-    "date-fns": "^1.30.0",
-    "register-service-worker": "^1.6.2",
-    "vue": "^2.6.10",
-    "vue-router": "^3.0.3",
-    "vuetify": "^1.5.13"
+    "core-js": "^3.6.5",
+    "date-fns": "^2.15.0",
+    "register-service-worker": "^1.7.1",
+    "vue": "^2.6.11",
+    "vue-router": "^3.4.3",
+    "vuetify": "^2.3.8"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.6.0",
-    "@vue/cli-plugin-eslint": "^3.6.0",
-    "@vue/cli-plugin-pwa": "^3.6.0",
-    "@vue/cli-service": "^3.6.0",
-    "@vue/eslint-config-prettier": "^4.0.1",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "lint-staged": "^8.1.5",
+    "@vue/cli-plugin-babel": "^4.5.3",
+    "@vue/cli-plugin-eslint": "^4.5.3",
+    "@vue/cli-plugin-pwa": "^4.5.3",
+    "@vue/cli-service": "^4.5.3",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.6.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-vue": "^6.2.2",
+    "lint-staged": "^10.2.11",
+    "prettier": "^1.19.1",
+    "sass": "^1.26.10",
+    "sass-loader": "^9.0.3",
     "scraper": "github:Utwo/ctpcj-scraper",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.2",
-    "vue-cli-plugin-vuetify": "^0.5.0",
-    "vue-template-compiler": "^2.5.21",
-    "vuetify-loader": "^1.2.2"
+    "vue-cli-plugin-vuetify": "^2.0.7",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.6.0"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"
   },
   "engines": {
-    "node": "11.x"
+    "node": "12.x"
   },
   "lint-staged": {
-    "*.{js,vue}": [
+    "*.{js,jsx,vue}": [
       "vue-cli-service lint",
       "git add"
     ]

diff --git a/postcss.config.js b/postcss.config.js
diff --git a/public/index.html b/public/index.html
@@ -1,19 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <link rel="preconnect" href="https://ctpcj-scraper.now.sh/" crossorigin>
-    <meta name="description" content="A simple bus schedule app for Cluj-Napoca.">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
+    <link rel="preconnect" href="https://ctpcj-scraper.now.sh/" crossorigin />
+    <meta
+      name="description"
+      content="A simple bus schedule app for Cluj-Napoca."
+    />
     <title>Bus Cluj</title>
-    <link rel="shortcut icon" href="/img/icons/favicon.ico">
-    <meta name="theme-color" content="#81c784">
+    <link rel="shortcut icon" href="/img/icons/favicon.ico" />
+    <meta name="theme-color" content="#1DE9B6" />
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but bus doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but bus doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "BusCluj",
-  "short_name": "Bus",
+  "short_name": "BusCluj",
   "icons": [
     {
       "src": "/img/icons/android-chrome-192x192.png",
@@ -9,12 +9,12 @@
     },
     {
       "src": "/img/icons/android-chrome-256x256.png",
-      "sizes": "512x512",
+      "sizes": "256x256",
       "type": "image/png"
     }
   ],
   "start_url": "./index.html",
   "display": "standalone",
   "background_color": "#fff",
-  "theme_color": "#81c784"
-}
+  "theme_color": "#1DE9B6"
+}
diff --git a/scss/_fonts.scss b/scss/_fonts.scss
@@ -0,0 +1,51 @@
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Roboto"), local("Roboto-Regular"),
+    url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2)
+      format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: local("Roboto Medium"), local("Roboto-Medium"),
+    url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmEU9fBBc4.woff2)
+      format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+/* fallback */
+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/materialicons/v54/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2)
+    format("woff2");
+}
+
+.material-icons {
+  font-family: "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+}
diff --git a/src/assets/_loading.styl → scss/_loading.scss b/src/assets/_loading.styl → scss/_loading.scss
@@ -1,14 +1,11 @@
 .ferry {
-  display: inline-block;
   width: 64px;
   height: 32px;
   border-radius: 3px 0 0 0;
   background: #2b2b2b;
-  margin: 6rem 0 4rem;
-  animation: bop .48s ease-in-out alternate infinite;
-  box-shadow:
-    inset 0 -5px 0 0 #e74c3c,
-    inset 0 -15px 0 0 #2b2b2b,
+  margin: 6rem auto 4rem;
+  animation: bop 0.48s ease-in-out alternate infinite;
+  box-shadow: inset 0 -5px 0 0 #e74c3c, inset 0 -15px 0 0 #2b2b2b,
     inset 0 -17px 0 0 #f0cf3c;
   border-top: 4px solid #ecf0f1;
 }
@@ -38,25 +35,25 @@
 }
 
 .chimney {
-    position: absolute;
-    top: -35px;
-    display: block;
-    width: 17px;
-    height: 22px;
-    background: #f0cf3c;
-    left: 32px;
-    z-index: -1;
-    transform: rotate(8deg);
-    box-shadow: inset 0 3px 0 0 #2b2b2b;
-  }
+  position: absolute;
+  top: -35px;
+  display: block;
+  width: 17px;
+  height: 22px;
+  background: #f0cf3c;
+  left: 32px;
+  z-index: -1;
+  transform: rotate(8deg);
+  box-shadow: inset 0 3px 0 0 #2b2b2b;
+}
 
 .waves {
   position: absolute;
   bottom: -37px;
   display: block;
   width: 100px;
   height: 50px;
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjE1NSIgaGVpZ2h0PSI4NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI4NyIgd2lkdGg9IjE1NyIgeT0iLTEiIHg9Ii0xIi8+CiAgPGcgZGlzcGxheT0ibm9uZSIgb3ZlcmZsb3c9InZpc2libGUiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIGlkPSJjYW52YXNHcmlkIj4KICAgPHJlY3QgZmlsbD0idXJsKCNncmlkcGF0dGVybikiIHN0cm9rZS13aWR0aD0iMCIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIvPgogIDwvZz4KIDwvZz4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8ZyBpZD0ic3ZnXzkiPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z18xIiBjeT0iMzMuNSIgY3g9IjM0LjUiIHN0cm9rZS13aWR0aD0iMS41IiBmaWxsPSIjZmZmIi8+CiAgIDxlbGxpcHNlIHJ5PSIyNiIgcng9IjI2IiBpZD0ic3ZnXzMiIGN5PSIzMy41IiBjeD0iNjMuODY4NDkzIiBzdHJva2Utd2lkdGg9IjEuNSIgZmlsbD0iI2ZmZiIvPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z182IiBjeT0iMzMuNSIgY3g9IjkxLjcxODg4IiBzdHJva2Utd2lkdGg9IjEuNSIgZmlsbD0iI2ZmZiIvPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z183IiBjeT0iMzMuNSIgY3g9IjEyMS4wODczNzMiIHN0cm9rZS13aWR0aD0iMS41IiBmaWxsPSIjZmZmIi8+CiAgIDxyZWN0IGlkPSJzdmdfOCIgaGVpZ2h0PSI0NiIgd2lkdGg9IjE0MC4wMDAwMDYiIHk9IjMyLjUiIHg9IjcuNSIgc3Ryb2tlLXdpZHRoPSIxLjUiIGZpbGw9IiNmZmYiLz4KICA8L2c+CiA8L2c+Cjwvc3ZnPg==');
+  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjE1NSIgaGVpZ2h0PSI4NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI4NyIgd2lkdGg9IjE1NyIgeT0iLTEiIHg9Ii0xIi8+CiAgPGcgZGlzcGxheT0ibm9uZSIgb3ZlcmZsb3c9InZpc2libGUiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIGlkPSJjYW52YXNHcmlkIj4KICAgPHJlY3QgZmlsbD0idXJsKCNncmlkcGF0dGVybikiIHN0cm9rZS13aWR0aD0iMCIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIvPgogIDwvZz4KIDwvZz4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8ZyBpZD0ic3ZnXzkiPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z18xIiBjeT0iMzMuNSIgY3g9IjM0LjUiIHN0cm9rZS13aWR0aD0iMS41IiBmaWxsPSIjZmZmIi8+CiAgIDxlbGxpcHNlIHJ5PSIyNiIgcng9IjI2IiBpZD0ic3ZnXzMiIGN5PSIzMy41IiBjeD0iNjMuODY4NDkzIiBzdHJva2Utd2lkdGg9IjEuNSIgZmlsbD0iI2ZmZiIvPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z182IiBjeT0iMzMuNSIgY3g9IjkxLjcxODg4IiBzdHJva2Utd2lkdGg9IjEuNSIgZmlsbD0iI2ZmZiIvPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z183IiBjeT0iMzMuNSIgY3g9IjEyMS4wODczNzMiIHN0cm9rZS13aWR0aD0iMS41IiBmaWxsPSIjZmZmIi8+CiAgIDxyZWN0IGlkPSJzdmdfOCIgaGVpZ2h0PSI0NiIgd2lkdGg9IjE0MC4wMDAwMDYiIHk9IjMyLjUiIHg9IjcuNSIgc3Ryb2tlLXdpZHRoPSIxLjUiIGZpbGw9IiNmZmYiLz4KICA8L2c+CiA8L2c+Cjwvc3ZnPg==");
   background-size: 133% 144%;
   background-repeat: repeat-x;
   animation: sail 4s linear infinite;

diff --git a/scss/main.scss b/scss/main.scss
@@ -0,0 +1,91 @@
+// $color-pack = false
+@import "./fonts", "./loading";
+
+li {
+  list-style-position: inside;
+}
+
+a {
+  // color: $primary;
+  text-decoration: none;
+}
+
+main {
+  margin-top: 116px;
+}
+
+.search__wrap {
+  flex: 1;
+}
+
+.search-icon--mobile {
+  display: none;
+}
+
+.bus-table tbody {
+  display: block;
+  max-height: 60vh;
+  overflow-y: scroll;
+}
+
+.bus-table thead,
+tbody tr {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+}
+
+.bus-table thead th {
+  width: 100%;
+}
+
+.scroll-here {
+  border-top: 1px solid #4caf50;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: 0.4s all ease-out;
+  transform-origin: 50% 100%;
+  transform: translate3d(0, 0, 0);
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.progress-linear__bar__determinate.primary {
+  animation: bg-pan-right 6s linear infinite alternate both;
+  background: linear-gradient(270deg, #cc6aa5, #3e91cc, #2dcca7);
+  background-size: 600% 100%;
+}
+
+@keyframes bg-pan-right {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 50%;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .search-expand {
+    position: absolute;
+    z-index: 999;
+    top: 3px;
+    left: 0;
+    width: 75%;
+    transition: 0.4s all;
+  }
+
+  .hide-search--mobile {
+    display: none;
+  }
+
+  .search-icon--mobile {
+    display: block;
+  }
+}
diff --git a/src/App.vue b/src/App.vue
@@ -2,23 +2,19 @@
   <v-app id="app">
     <TheNavigation />
     <main>
-      <v-layout row>
-        <v-flex xs12 md8 offset-md2>
-          <v-card>
-            <router-view />
-          </v-card>
-        </v-flex>
-      </v-layout>
+      <v-card>
+        <router-view />
+      </v-card>
     </main>
   </v-app>
 </template>
 
 <script>
-import TheNavigation from "./components/TheNavigation"
+import TheNavigation from "./components/TheNavigation";
 
 export default {
   components: {
     TheNavigation
   }
-}
+};
 </script>