User profile added

elsiehupp · May 24, 2021 · 2dacaaf · 2dacaaf
1 parent ef8aa5a
commit 2dacaaf
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 28 deletions.
diff --git a/website/macos-big-sur-icons/src/App.vue b/website/macos-big-sur-icons/src/App.vue
@@ -97,7 +97,7 @@ export default {
 } 
 
 .min-height{
-  min-height: calc(100vh - 155px);
+  min-height: calc(100vh - 125px);
   margin: auto;
 }
 

diff --git a/website/macos-big-sur-icons/src/assets/icons/Discord.svg b/website/macos-big-sur-icons/src/assets/icons/Discord.svg
diff --git a/website/macos-big-sur-icons/src/assets/icons/twitter.svg b/website/macos-big-sur-icons/src/assets/icons/twitter.svg
diff --git a/website/macos-big-sur-icons/src/components/Header.vue b/website/macos-big-sur-icons/src/components/Header.vue
@@ -134,7 +134,7 @@
             <div class="mobile-hidden">
                 <div class="header-grid-btns">
 
-                    <!-- Twitter -->
+                    <!-- Twitter + Discord -->
                     <div class="header-icon-wrapper">
                         <a href="https://twitter.com/elrumo" class="" target="_blank" rel="noopener">
                             <img :src="icons.twitter" class="header-item header-icon" alt="Twitter logo">
@@ -144,10 +144,10 @@
                         </a>
                     </div>
                     <!-- Back to all icons -->
-                    <div class="opacity-50" v-if="this.$route.name != 'Home'">
+                    <div class="opacity-70" v-if="this.$route.name != 'Home'">
                         <router-link to="/">
                             <button is="coral-button" variant="quiet">
-                                <span>Back to Icons</span>
+                                <span>All Icons</span>
                             </button>
                         </router-link>
                     </div>

diff --git a/website/macos-big-sur-icons/src/components/app.less b/website/macos-big-sur-icons/src/components/app.less
@@ -418,6 +418,8 @@ option[value=""][disabled] {
 
 .header-grid-btns > div{
     // padding-left: 15px;
+    height: fit-content;
+    margin: auto;
 }
 
 .header-item{
@@ -436,12 +438,16 @@ option[value=""][disabled] {
 }
 
 .header-icon{
-    height: 22px;
+    height: 18px;
     padding: 4px 0px 0px 0px;
     cursor: pointer;
     transition: 0.2s;
 }
 
+.profile-nav{
+    max-height: 30px;
+}
+
 .coral--dark .header-icon:hover{
     filter: brightness(1.5);
 }
@@ -651,7 +657,7 @@ option[value=""][disabled] {
     border-color: rgb(225, 225, 225);
     border-radius: var(--main-border-radius);
     margin: auto;
-    // padding: 0px 10px;
+    min-height: 200px;
 }
 
 .card-text-wrapper{
@@ -983,6 +989,7 @@ option[value=""][disabled] {
     top: 50%;
     width: 80%;
     height: 80%;
+    z-index: 9;
     /* backdrop-filter: blur(5px) saturate(0.5); */
     backdrop-filter: blur(3px);
 }

diff --git a/website/macos-big-sur-icons/src/router/index.js b/website/macos-big-sur-icons/src/router/index.js
@@ -385,12 +385,24 @@ const routes = [
     name: 'UserProfile',
     component: () => import('../views/UserProfile.vue')
   },
+  {
+    // path: '/user',
+    path: '/u/:user',
+    name: 'UserProfile',
+    component: () => import('../views/UserProfile.vue')
+  },
   {
     // path: '/user',
     path: '/user/',
     name: 'UserProfile',
     component: () => import('../views/UserProfile.vue')
   },
+  {
+    // path: '/user',
+    path: '/u/',
+    name: 'UserProfile',
+    component: () => import('../views/UserProfile.vue')
+  },
   {
     path: '/:search',
     name: 'Search',

diff --git a/website/macos-big-sur-icons/src/store/store.js b/website/macos-big-sur-icons/src/store/store.js
@@ -226,7 +226,7 @@ export default new Vuex.Store({
       let IconsBase = Parse.Object.extend("Icons2");
       let approvedQuery = new Parse.Query(IconsBase);
       let numToLoad = 15
-      
+
       // Approved Count
       /////////////////////////////////////////////
       let approvedIconsCount = new Parse.Query(IconsBase);
@@ -271,7 +271,6 @@ export default new Vuex.Store({
       })
 
       approvedQuery.equalTo("approved", false);
-      approvedQuery.doesNotExist("icnsFile");
       let notApproved = await approvedQuery.find();
 
       notApproved.forEach((result)=>{

diff --git a/website/macos-big-sur-icons/src/views/UserProfile.vue b/website/macos-big-sur-icons/src/views/UserProfile.vue
@@ -48,7 +48,6 @@
         </div>
 
         <div class="profile-descrption-box">
-          <div v-if="loading.user" class="loading-placeholder m-b-10"></div>
           <div v-if="loading.user" class="loading-placeholder m-b-10"></div>
           <div v-if="loading.user" class="loading-placeholder m-b-10"></div>
           <p v-if="user.bio" class="coral-Body--L m-b-5">
@@ -68,13 +67,32 @@
 
       </div>
     </section>
-    
+
     <!-- Icons section -->
     <section class="m-auto user-profile-icons">
+
+      <!-- Tabs -->
       <coral-tablist>
-        <coral-tab aria-label="All Icons" @click="changeIconStatus('all')">All</coral-tab>
-        <coral-tab aria-label="Approved Icons" selected="" @click="changeIconStatus('approved')">Approved</coral-tab>
-        <coral-tab aria-label="Waiting Icons" @click="changeIconStatus('notApproved')">Waiting</coral-tab>
+        <coral-tab aria-label="All Icons" @click="changeIconStatus('all')">
+          All
+          <span class="coral-Detail coral-Detail--M f-w-400 opacity-80">
+            ({{approvedIconsCount.approved + approvedIconsCount.notApproved}})
+          </span>
+        </coral-tab>
+
+        <coral-tab aria-label="Approved Icons" selected="" @click="changeIconStatus('approved')">
+          Approved
+          <span class="coral-Detail coral-Detail--M f-w-400 opacity-80">
+            ({{approvedIconsCount.approved}})
+          </span>
+        </coral-tab>
+
+        <coral-tab aria-label="Waiting Icons" @click="changeIconStatus('notApproved')">
+          Waiting
+          <span class="coral-Detail coral-Detail--M f-w-400 opacity-80">
+            ({{approvedIconsCount.notApproved}})
+          </span>
+        </coral-tab>
         <!-- <select
           id="order-selector"
           class="dropdown-select right-align-tablist dropdown-select-quiet"
@@ -96,28 +114,23 @@
         </select> -->
       </coral-tablist>
 
-      <p class="coral-Body--M">
-        <!-- {{iconsCount}}
-        {{isLoading}} -->
-      </p>
-
+      <div v-if="!loading.user && iconsCount == 0" class="waiting-wrapper">
+        <p class="coral-Body--M">
+          {{ errorMessage }}
+        </p>
+      </div>
+
       <UserIconGrid v-if="userIcons.length != 0" :userIcons="userIcons"/>
 
       <div
         class="icon-list-area p-t-40 p-b-50"
         v-else
       >
-        <div style="z-index: 2; height: 100%" class="card-wrapper card-hover coral-card">
+        <div style="z-index: 2; height: 100%; min-heigh: 210px" class="card-wrapper card-hover coral-card">
           <script async type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom" id="_carbonads_js2"></script>
         </div>
         <UserIconCardLoading v-for="num in placeholderCount" :key="num+Math.floor(Math.random() * 10000000 + 1)" :icon="iconsCount"/>
       </div>
-
-      <div v-if="!isLoading && iconsCount == 0" class="waiting-wrapper">
-        <p class="coral-Body--M">
-          {{ errorMessage }}
-        </p>
-      </div>
 
       <button
         is="coral-button"
@@ -247,6 +260,11 @@ export default {
         
         parent.loading.user = false
       } else{
+        let isLoading = {
+          arr: "loading",
+          data: false
+        }
+        parent.setDataToArr(isLoading)
         parent.loading.user = false
         parent.errorMessage = "This account doesn’t exist"
       }
@@ -320,7 +338,6 @@ export default {
 
       switch (parent.iconsToShow) {
         case "all":
-          console.log(allIcons);
           return allIcons
 
         case "approved":