From 544ea6026cf9b6e27e566f397bd93f2dc88d4bea Mon Sep 17 00:00:00 2001
From: Taha Dostifam <mr.tahadostifam@gmail.com>
Date: Sun, 31 Mar 2024 12:39:56 +0330
Subject: [PATCH 1/3] fix: search input styles and behavior improved

---
 public/assets/css/components/searchBar.css | 40 +++++++++-------------
 public/assets/css/components/topBar.css    |  9 +++--
 src/components/Topbar.vue                  | 11 +++---
 3 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/public/assets/css/components/searchBar.css b/public/assets/css/components/searchBar.css
index e25f359..ca59d7c 100644
--- a/public/assets/css/components/searchBar.css
+++ b/public/assets/css/components/searchBar.css
@@ -9,7 +9,9 @@
     width: 70vw;
     background: var(--searchBar-field-active-background-color);
     box-shadow: var(--base-shadow);
-    padding: 15px 25px;
+    padding: 16px 17px;
+
+    transition: 0.3s ease;
 }
 
 .searchBar-input {
@@ -36,42 +38,30 @@
     align-items: center;
     justify-content: flex-start;
     background: var(--searchBar-field-background-color);
-    padding: 6px 10px;
+    padding: 11px 12px;
     border-radius: 12px;
-    transition: width 0.3s ease-in-out;
-    width: 53px;
+    width: 200px;
     overflow: hidden;
     gap: 10px;
     box-shadow: 0 0 0 0 transparent;
 }
 
+@media screen and (max-width: 850px) {
+    .searchBar-field {
+        width: 160px;
+    }
+}
+
 .searchBar-icon {
     position: relative;
     top: 2px;
     cursor: pointer;
 }
 
-.searchBar-shortcut>.mdi {
-    position: relative;
-    top: 0px;
-    cursor: pointer;
-    font-size: 15px;
-    font-weight: 900;
-}
-
 .searchBar-icon>.mdi {
     font-size: 20px;
 }
 
-.searchBar-shortcut {
-    display: flex;
-}
-
-.searchBar-shortcut>.mdi+span {
-    font-size: 14px;
-    font-weight: 500;
-}
-
 .searchBar-results {
     position: absolute;
     top: 76px;
@@ -88,12 +78,14 @@
 
 .searchBar.active {
     position: fixed;
-    z-index: 1;
-    top: 0;
+    z-index: 20;
+    top: 20px;
     left: 0;
     right: 0;
     bottom: 0;
     margin: 20px;
     display: flex;
     justify-content: center;
-}
\ No newline at end of file
+}
+
+
diff --git a/public/assets/css/components/topBar.css b/public/assets/css/components/topBar.css
index 6517021..88645bc 100644
--- a/public/assets/css/components/topBar.css
+++ b/public/assets/css/components/topBar.css
@@ -11,7 +11,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 20px;
+    gap: 35px;
 }
 
 .topBar-navigation {
@@ -90,6 +90,7 @@
     height: 24px;
     display: inline-block;
     position: relative;
+    top: 2px;
 }
 
 .topBar-hamburger-inner {
@@ -157,6 +158,10 @@
 }
 
 @media screen and (max-width: 745px) {
+    .topBar-wrapper {
+        gap: 10px;
+    }
+
     .topBar-navigation {
         position: absolute;
         top: 50px;
@@ -183,4 +188,4 @@
     .topBar-hamburger {
         display: inline-block;
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/Topbar.vue b/src/components/Topbar.vue
index 2ccca67..151de4b 100644
--- a/src/components/Topbar.vue
+++ b/src/components/Topbar.vue
@@ -13,15 +13,14 @@
                     <div class="searchBar-wrapper">
                         <transition name="fade">
                             <div class="searchBar-field">
-                                <div class="searchBar-icon" @click="toggleSearch">
+                                <div class="searchBar-icon" @click="isSearchActive ? toggleSearch() : undefined">
                                     <span class="mdi material-icons">
                                         {{ isSearchActive ? 'close' : 'search' }}
                                     </span>
                                 </div>
-                                <div class="searchBar-shortcut" @click="toggleSearch" v-if="!isSearchActive">
-                                    <span>/</span>
-                                </div>
-                                <input type="text" class="searchBar-input" placeholder="Search" v-model="searchQuery" />
+
+                                <input @click="!isSearchActive ? toggleSearch() : undefined" type="text"
+                                    class="searchBar-input" placeholder="Search" v-model="searchQuery" />
                             </div>
                         </transition>
                         <transition name="fade">
@@ -44,7 +43,9 @@
                     </div>
                 </div>
             </div>
+
             <div class="overlay" v-if="isMenuToggled" @click="toggleMenu"></div>
+
             <nav>
                 <ul class="topBar-navigation" :class="{ active: isMenuToggled }">
                     <li><router-link :to="{ name: 'blog' }">Blog</router-link></li>
-- 
2.45.3


From 664bddc0e9fe1dc34e106e2dd72b4c9b1f6002b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=5B=20Taha=2E=20Dostifam=E2=80=8D=20=5D?=
 <mr.tahadostifam@gmail.com>
Date: Mon, 1 Apr 2024 13:37:18 +0330
Subject: [PATCH 2/3] Rename development.md to development_template.md

---
 .../{development.md => development_template.md}                   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename .github/PULL_REQUEST_TEMPLATE/{development.md => development_template.md} (100%)

diff --git a/.github/PULL_REQUEST_TEMPLATE/development.md b/.github/PULL_REQUEST_TEMPLATE/development_template.md
similarity index 100%
rename from .github/PULL_REQUEST_TEMPLATE/development.md
rename to .github/PULL_REQUEST_TEMPLATE/development_template.md
-- 
2.45.3


From 0635b4cf5906ac8f2f377eeccd84cc86a7507399 Mon Sep 17 00:00:00 2001
From: Taha Dostifam <mr.tahadostifam@gmail.com>
Date: Mon, 1 Apr 2024 16:31:26 +0330
Subject: [PATCH 3/3] feat: get contributos list completed

---
 src/config.ts                           |  5 +++++
 src/views/get-involved/Contributors.vue | 26 +++++++------------------
 2 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index e69de29..84f9d4f 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -0,0 +1,5 @@
+const config = {
+    contributorsListJsonUrl: "https://raw.githubusercontent.com/parchlinux/GetContributors/main/json/contributors.json"
+}
+
+export default config;
diff --git a/src/views/get-involved/Contributors.vue b/src/views/get-involved/Contributors.vue
index a6dab67..4a7a1dd 100644
--- a/src/views/get-involved/Contributors.vue
+++ b/src/views/get-involved/Contributors.vue
@@ -9,20 +9,19 @@
       <div class="contributors-card">
         <img :src="contributor.avatar_url" :alt="contributor.login" class="contributors-card-image"/>
         <div class="contributors-card-info">
-          <h1 ref="nameElement" class="contributors-card-name">{{ contributor.name }}</h1>
-          <p class="contributors-card-login">@{{ contributor.login }}</p>
+          <h1 ref="nameElement" class="contributors-card-name">{{ contributor.login }}</h1>
         </div>
       </div>
     </a>
   </div>
   </template>
-  
+
 <script lang="ts">
 import { defineComponent, ref, onMounted } from 'vue';
+import config from '@/config';
 
 interface Contributor {
   id: number;
-  name: string;
   login: string;
   avatar_url: string;
   profile_url: string;
@@ -33,34 +32,23 @@ export default defineComponent({
   setup() {
     const contributors = ref<Contributor[]>([]);
 
-    const filterIds = [1607653, 49699333];
+    const filterIds: string[] = [];
 
     const fetchContributorsData = async () => {
       try {
-        const cachedData = localStorage.getItem('contributorsData');
-        if (cachedData) {
-          contributors.value = JSON.parse(cachedData);
-          return;
-        }
-
-        const contributorsResponse = await fetch('https://raw.githubusercontent.com/Vanilla-OS/.github/main/contributors.json');
+        const contributorsResponse = await fetch(config.contributorsListJsonUrl);
         const contributorsData = await contributorsResponse.json();
 
-        contributorsData.sort((a: Contributor, b: Contributor) => a.name.localeCompare(b.name));
-
         for (const contributor of contributorsData) {
           if (!filterIds.includes(contributor.id) && !contributors.value.some((c: Contributor) => c.login === contributor.login)) {
             contributors.value.push({
               id: contributor.id,
-              name: contributor.name,
-              login: contributor.login,
+              login: contributor.username,
               avatar_url: contributor.avatar_url,
-              profile_url: contributor.profile_url,
+              profile_url: "https://github.com/" + contributor.username,
             });
           }
         }
-
-        localStorage.setItem('contributorsData', JSON.stringify(contributors.value));
       } catch (error) {
         console.error('Error fetching contributors:', error);
       }
-- 
2.45.3