First release

MichaelGitArt · MichaelGitArt · commit 78432b7542e6 · 2020-07-25T21:16:25.000+03:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "bootstrap-reboot": "^4.4.1",
     "core-js": "^3.6.5",
     "css-mqpacker-starter": "^1.0.1",
+    "nprogress": "^0.2.0",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
diff --git a/src/App.vue b/src/App.vue
@@ -9,5 +9,6 @@
   min-height: 100vh;
   display: flex;
   align-items: center;
+  padding: 30px 0 20px;
 }
 </style>
diff --git a/src/components/General/AModal.vue b/src/components/General/AModal.vue
@@ -17,8 +17,6 @@ export default {
     },
   },
   render(h) {
-    console.log("modal!");
-
     let content = [
       h(
         "div",
@@ -118,13 +116,15 @@ export default {
 .a-modal-header h3 {
   text-transform: uppercase;
   text-align: center;
-  font-size: 28px;
+  font-size: 1em;
   margin-bottom: 10px;
 }
 
 .a-modal-content {
   overflow-y: auto;
   max-height: 100%;
+  font-size: 1em;
+
   @include custom-scroll();
 }
 </style>
diff --git a/src/components/Сontrols/ABtn.vue b/src/components/Сontrols/ABtn.vue
@@ -32,13 +32,15 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import "~css-mqpacker-starter";
+
 .a-btn {
   color: white;
   background-color: black;
   border-radius: 15px;
   border: none;
   padding: 15px 50px;
-  font-size: 24px;
+  font-size: 0.85em;
   text-transform: uppercase;
   cursor: pointer;
   transition: all 0.3s;
diff --git a/src/components/Сontrols/ATextfield.vue b/src/components/Сontrols/ATextfield.vue
@@ -84,6 +84,8 @@ export default {
     min-width: 0;
     width: auto;
     flex-grow: 1;
+    position: relative;
+    z-index: 4;
     @include placeholder(rgba(0, 0, 0, 0.25));
     &--centered {
       text-align: center;
diff --git a/src/components/Сontrols/ControlIcon.vue b/src/components/Сontrols/ControlIcon.vue
@@ -30,7 +30,8 @@ export default {
   text-align: center;
   align-items: center;
   height: 34px;
-  width: 34px;
+  min-width: 34px;
+  padding: 0 4px;
   cursor: pointer;
   transition: all 0.2s;
   border: 2px solid #000;
diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -1,6 +1,7 @@
 @import "~bootstrap-reboot";
 @import "~css-mqpacker-starter";
 @import "fonts";
+@import "util/nprogress";
 
 body {
   font-family: "fucken", "fuckru", "IndieFlower";
@@ -34,3 +35,9 @@ textarea {
 .w-100 {
   width: 100%;
 }
+
+@include md {
+  body {
+    font-size: 22px;
+  }
+}
diff --git a/src/scss/media.scss b/src/scss/media.scss
diff --git a/src/scss/util/nprogress.scss b/src/scss/util/nprogress.scss
@@ -0,0 +1,14 @@
+@import "~nprogress/nprogress.css";
+
+#nprogress .bar {
+  //background: #000;
+  height: 3px;
+  //box-shadow: 0 0 7px #000, 0 0 16px #000;
+}
+#nprogress .peg {
+  //box-shadow: 0 0 10px #000, 0 0 5px #000;
+}
+#nprogress .spinner-icon {
+  //border-top-color: #000;
+  //border-left-color: #000;
+}
diff --git a/src/store/index.js b/src/store/index.js
@@ -1,20 +1,30 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import loadingStore from "./loading";
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
+  modules: {
+    loading: loadingStore,
+  },
   state: {
     cardUrl: null,
     cardId: null,
     shareUrl: null,
+    controls: null,
+    ready: false,
   },
   mutations: {
     setCard(state, { id, url, shareUrl }) {
       state.cardId = id;
       state.cardUrl = url;
       state.shareUrl = shareUrl;
     },
+    setControls(state, controls) {
+      state.controls = controls;
+      state.ready = true;
+    },
     clear(state) {
       state.cardId = null;
       state.cardUrl = null;
@@ -27,5 +37,34 @@ export default new Vuex.Store({
       const shareUrl = window.location.href + `for-you/${id}`;
       commit("setCard", { id, url, shareUrl });
     },
+    initApp({ dispatch, commit }) {
+      dispatch("startLoading");
+      fetch("https://loh.biz/8/api.php?action=data", {
+        method: "GET",
+      })
+        .then((res) => res.json())
+        .then((resData) => {
+          const categories = convertForControl(resData.categories);
+          const genders = convertForControl(resData.genders);
+          const modes = convertForControl(resData.modes);
+
+          commit("setControls", { categories, genders, modes });
+        })
+        .finally(() => {
+          dispatch("endLoading");
+        });
+    },
   },
 });
+
+function convertForControl(obj) {
+  const arr = [];
+  Object.keys(obj).forEach((key, index) => {
+    arr.push({
+      key,
+      id: index,
+      name: obj[key],
+    });
+  });
+  return arr;
+}
diff --git a/src/store/loading.js b/src/store/loading.js
@@ -0,0 +1,35 @@
+import NProgress from "nprogress";
+
+export default {
+  state: {
+    apiWaitingCount: 0,
+  },
+  mutations: {
+    addLoading(state) {
+      state.apiWaitingCount++;
+      NProgress.start();
+    },
+    removeLoading(state) {
+      state.apiWaitingCount--;
+      if (state.apiWaitingCount <= 0) {
+        state.apiWaitingCount = 0;
+        NProgress.done();
+      } else {
+        NProgress.inc();
+      }
+    },
+  },
+  actions: {
+    startLoading({ commit }) {
+      commit("addLoading");
+    },
+    endLoading({ commit }) {
+      commit("removeLoading");
+    },
+  },
+  getters: {
+    isLoading(state) {
+      return state.apiWaitingCount !== 0;
+    },
+  },
+};
diff --git a/src/views/Home.vue b/src/views/Home.vue
diff --git a/src/views/Share.vue b/src/views/Share.vue

Original file line number	Diff line number	Diff line change
`@@ -9,5 +9,6 @@`
`9`	`9`	`min-height: 100vh;`
`10`	`10`	`display: flex;`
`11`	`11`	`align-items: center;`
	`12`	`+ padding: 30px 0 20px;`
`12`	`13`	`}`
`13`	`14`	`</style>`