style: add responsiveness

JoaoHamerski · Jan 8, 2024 · 257a4d3 · 257a4d3
1 parent c7c3bb0
commit 257a4d3
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 22 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -59,7 +59,9 @@ provide('isSearchLoading', isLoading)
 
 <template>
   <ToastComponent />
-  <AppContainer class="p-10 mx-auto mt-10 w-3/4 overflow-auto h-[90vh]">
+  <AppContainer
+    class="p-10 mx-auto mt-10 w-11/12 md:w-3/4 overflow-auto h-[90vh]"
+  >
     <AppTransition
       enter-class="fadeIn"
       leave-class="fadeOut"

diff --git a/src/views/home/partials/HomeHeader.vue b/src/views/home/partials/HomeHeader.vue
@@ -2,12 +2,11 @@
   <div>
     <div class="flex justify-center">
       <FWIcon
-        class="text-neutral dark:text-white"
+        class="text-neutral dark:text-white text-9xl md:text-[10rem]"
         icon="fa-brands fa-github-alt"
-        size="10x"
       />
     </div>
-    <div class="text-2xl text-center mt-5">
+    <div class="md:text-2xl text-center mt-5">
       <h4>Digite um nome de usuário. Ex.: <b>JoaoHamerski</b></h4>
     </div>
   </div>

diff --git a/src/views/home/partials/HomeSearch.vue b/src/views/home/partials/HomeSearch.vue
@@ -18,7 +18,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="mt-16 w-1/2 mx-auto text-center">
+  <div class="mt-16 md:w-1/2 mx-auto text-center">
     <form @submit.prevent="onSearchClick">
       <HomeSearchInput
         ref="homeSearchInput"

diff --git a/src/views/home/partials/HomeSearchButton.vue b/src/views/home/partials/HomeSearchButton.vue
@@ -8,7 +8,7 @@ const loading: Ref<boolean> | undefined = inject('isSearchLoading')
 <template>
   <div class="mt-8">
     <button
-      class="btn btn-primary px-10 font-bold"
+      class="btn btn-primary px-10 font-bold btn-block md:w-fit"
       :disabled="loading"
       @click="$attrs.click"
     >

diff --git a/src/views/home/partials/HomeSearchInput.vue b/src/views/home/partials/HomeSearchInput.vue
@@ -31,7 +31,7 @@ defineExpose({ focus })
     :value="modelValue"
     type="text"
     placeholder="Nome de usuário..."
-    class="input input-bordered w-full input-lg"
+    class="input input-bordered w-full md:input-lg"
     name="username"
     @input="onInput"
   />

diff --git a/src/views/profile/partials/ProfileBadge.vue b/src/views/profile/partials/ProfileBadge.vue
@@ -9,7 +9,7 @@ defineProps<ProfileBadgeProps>()
 </script>
 
 <template>
-  <div>
+  <div class="text-nowrap">
     <FWIcon
       v-if="icon"
       :icon="icon"

diff --git a/src/views/profile/partials/ProfileHeader.vue b/src/views/profile/partials/ProfileHeader.vue
@@ -13,8 +13,8 @@ defineProps<ProfileHeaderProps>()
 </script>
 
 <template>
-  <div class="flex gap-10">
-    <div class="avatar">
+  <div class="flex flex-col md:flex-row gap-10">
+    <div class="avatar mx-auto md:mx-0">
       <div
         class="relative w-32 rounded-full ring ring-blue-500 hover:ring-blue-600 transition-shadow ring-offset-base-100 ring-offset-2"
       >
@@ -27,8 +27,8 @@ defineProps<ProfileHeaderProps>()
       </div>
     </div>
     <div class="flex flex-col justify-center">
-      <div class="mb-4">
-        <h3 class="text-3xl font-bold mb-0">
+      <div class="mb-4 text-center md:text-left">
+        <h3 class="text-xl md:text-3xl font-bold mb-0">
           <a
             class="text-blue-500 hover:text-blue-600 transition-colors"
             :href="user.html_url"
@@ -45,7 +45,7 @@ defineProps<ProfileHeaderProps>()
           ({{ user.login }})
         </div>
       </div>
-      <div class="flex gap-8 text-sm">
+      <div class="flex overflow-auto gap-8 text-xs md:text-sm">
         <ProfileBadge
           icon="fa-solid fa-users"
           label="Seguidores:"

diff --git a/src/views/profile/partials/ProfileOptions.vue b/src/views/profile/partials/ProfileOptions.vue
@@ -38,7 +38,7 @@ const archivedCount = computed<number>(
 </script>
 
 <template>
-  <div class="flex gap-5">
+  <div class="flex flex-col md:flex-row gap-5">
     <div class="grow">
       <AppSelect
         :value-model="options.sort"

diff --git a/src/views/profile/partials/ProfileReposListItem.vue b/src/views/profile/partials/ProfileReposListItem.vue
@@ -36,7 +36,7 @@ const dropdownItems = computed<DropdownItem[]>(() => [
 
 <template>
   <li>
-    <div class="flex justify-between mb-3">
+    <div class="flex justify-between items-baseline mb-3">
       <div>
         <a
           :href="repo.html_url"
@@ -70,17 +70,17 @@ const dropdownItems = computed<DropdownItem[]>(() => [
       {{ repo.description }}
     </div>
 
-    <div class="flex justify-between">
-      <div class="text-sm">
-        <span>
-          <b>Último commit: </b>
-          <span>{{ formatDateTime(repo.pushed_at).toRelative() }}</span>
-        </span>
-        <span class="mx-2">&bull;</span>
+    <div class="flex flex-col md:flex-row justify-between">
+      <div class="flex flex-col md:flex-row text-xs mb-5 md:mb-0">
         <span>
           <b>Criado </b>
           <span>{{ formatDateTime(repo.created_at).toRelative() }}</span>
         </span>
+        <span class="mx-2 hidden md:block">&bull;</span>
+        <span>
+          <b>Último commit: </b>
+          <span>{{ formatDateTime(repo.pushed_at).toRelative() }}</span>
+        </span>
       </div>
 
       <div class="flex gap-3">