GH-743 Fix hero content alignment and buttons in the mobile view (#773)

* Issue-743 Fix footer position on different screen sizes. * Issue-743 Fix footer position on different screen sizes. * Issue-743 Change config selector tab to dropdown on mobile devices * Issue-743 Replace raw css with utility classes for the mobile dropdown * Issue-743 Replace encoded svg image with svg path image for dropdown arrow * Issue-743 Fix hero content alignment on mobile view, Fix sign in and theme switcher button responsiveness. * Issue-743 Adjust spacing on the hero component Co-authored-by: sudhinm <[email protected]>
dzikoysk · Oct 5, 2021 · 1782314 · 1782314
1 parent a1ff717
commit 1782314
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/reposilite-frontend/src/components/header/Header.vue b/reposilite-frontend/src/components/header/Header.vue
@@ -16,13 +16,13 @@
 
 <template>
   <header class="bg-gray-100 dark:bg-black dark:text-white">
-    <div class="container mx-auto flex flex-row py-10 justify-between">
+    <div class="container mx-auto flex flex-row py-10 justify-between <sm:pb-2">
       <h1 class="text-xl font-medium py-1">
         <router-link :to="'/'">{{ title }}</router-link>
       </h1>
       <Menu :token="token" class="mt-0.5"/>
     </div>
-    <Hero class="pt-2 pb-11" />
+    <Hero class="pt-2 pb-11 <sm:pb-4" />
   </header>
 </template>
 

diff --git a/reposilite-frontend/src/components/header/Hero.vue b/reposilite-frontend/src/components/header/Hero.vue
@@ -16,15 +16,15 @@
 
 <template>
   <div class="bg-gray-100 dark:bg-black">
-    <div class="container mx-auto flex flex-row">
-      <div class="w-35">
+    <div class="container mx-auto flex flex-row <sm:(flex-col items-center)">
+      <div class="w-35 <sm:mb-2">
         <img class="border-2 rounded-full dark:border-gray-700" :src="organizationLogo">
       </div>
-      <div class="flex flex-col justify-center px-10">
-        <div>
-          <p>{{description}}</p>
+      <div class="flex flex-col justify-center px-10 <sm:px-0">
+        <div class="<sm:text-center">
+          {{description}}
         </div>
-        <div class="flex flex-row py-2">
+        <div class="flex flex-row py-2 <sm:justify-center">
           <GlobeIcon />
           <a class="px-3 text-gray-500" :href="organizationWebsite">{{organizationWebsite}}</a>
         </div>

diff --git a/reposilite-frontend/src/components/header/Menu.vue b/reposilite-frontend/src/components/header/Menu.vue
@@ -30,7 +30,7 @@
     <MenuButton v-if="logged" @click="signout()">
       Logout
     </MenuButton>
-    <div class="pl-2 pt-1.3 cursor-pointer rounded-full bg-white dark:bg-gray-900" @click="toggleTheme()">
+    <div class="pl-2 pt-1.3 cursor-pointer rounded-full bg-white dark:bg-gray-900 max-h-33px" @click="toggleTheme()">
       <SunIcon class="mr-1.9" v-if="theme.isDark"/>
       <MoonIcon class="mr-1.5" v-else/>
     </div>

diff --git a/reposilite-frontend/src/components/header/MenuButton.vue b/reposilite-frontend/src/components/header/MenuButton.vue
@@ -15,7 +15,7 @@
   -->
 
 <template>
-  <div class="mx-2 py-1.5 rounded-full bg-white dark:bg-gray-900 font-bold px-6 text-sm cursor-pointer">
+  <div class="mx-2 py-1.5 rounded-full bg-white dark:bg-gray-900 font-bold px-6 text-sm cursor-pointer min-w-93px">
     <slot/>
   </div>
 </template>