fix: responsive design

angular-sanctuary · May 8, 2024 · f20f072 · f20f072
1 parent 6867e55
commit f20f072
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 6 deletions.
diff --git a/angular-hub/src/app/components/cards/event-card.component.ts b/angular-hub/src/app/components/cards/event-card.component.ts
@@ -36,7 +36,7 @@ import { TagComponent } from '../tag.component';
           <span class="text-gray-500 dark:text-gray-400" itemprop="location">{{
             event().location
           }}</span>
-          <ul class="flex gap-2">
+          <ul class="flex flex-wrap gap-2">
             <li class="inline">
               <app-tag [title]="event().language" />
             </li>

diff --git a/angular-hub/src/app/components/navigation/navigation.component.html b/angular-hub/src/app/components/navigation/navigation.component.html
@@ -1,12 +1,13 @@
 <header class="flex items-center p-4">
   <p-button
-    class="flex-none lg:hidden"
+    class="flex-1 sm:flex-none lg:hidden"
     (click)="sidebarVisible = true"
     [text]="true"
     icon="pi pi-bars"
   />
   <a
-    class="flex lg:flex-none flex-1 items-center px-2 mx-2 gap-2 sm:mr-16"
+    class="hidden sm:flex lg:flex-none flex-1 items-center px-2 mx-2 gap-2 sm:mr-16"
+    [ngClass]="{ flex: !isInstallButtonVisible() }"
     routerLink="/"
   >
     <img class="h-8" src="/assets/images/logo.webp" alt="" />

diff --git a/angular-hub/src/app/components/navigation/navigation.component.ts b/angular-hub/src/app/components/navigation/navigation.component.ts
@@ -4,6 +4,7 @@ import { ButtonModule } from 'primeng/button';
 import { SidebarModule } from 'primeng/sidebar';
 import { DividerModule } from 'primeng/divider';
 import { PwaService } from '../../services/pwa.service';
+import { NgClass } from '@angular/common';
 
 @Component({
   selector: 'app-navigation',
@@ -17,6 +18,7 @@ import { PwaService } from '../../services/pwa.service';
     SidebarModule,
     RouterLinkActive,
     DividerModule,
+    NgClass,
   ],
 })
 export class NavigationComponent {

diff --git a/angular-hub/src/app/pages/communities/index.page.ts b/angular-hub/src/app/pages/communities/index.page.ts
@@ -27,7 +27,7 @@ export const routeMeta: RouteMeta = {
       class="h-36 w-full flex flex-col justify-center items-center mb-8 bg-no-repeat bg-auto md:bg-cover px-4"
       style="background-image: url(/assets/images/img.png);"
     >
-      <h1 class="title text-5xl">ANGULAR HUB</h1>
+      <h1 class="title text-4xl sm:text-5xl">ANGULAR HUB</h1>
       <h2 class="text-2xl text-center">Curated list of Angular Communities</h2>
     </aside>
 

diff --git a/angular-hub/src/app/pages/index.page.ts b/angular-hub/src/app/pages/index.page.ts
@@ -20,7 +20,7 @@ import { InputSwitchModule } from 'primeng/inputswitch';
       class="h-36 w-full flex flex-col justify-center items-center mb-4 md:mb-8 bg-no-repeat bg-auto md:bg-cover px-4"
       style="background-image: url(/assets/images/img.png);"
     >
-      <h1 class="title text-5xl">ANGULAR HUB</h1>
+      <h1 class="title text-4xl sm:text-5xl">ANGULAR HUB</h1>
       <h2 class="text-2xl text-center">
         Curated list of Angular Communities and Events
       </h2>

diff --git a/angular-hub/src/app/pages/podcasts/index.page.ts b/angular-hub/src/app/pages/podcasts/index.page.ts
@@ -26,7 +26,7 @@ export const routeMeta: RouteMeta = {
       class="h-36 w-full flex flex-col justify-center items-center mb-8 bg-no-repeat bg-auto md:bg-cover px-4"
       style="background-image: url(/assets/images/img.png);"
     >
-      <h1 class="title text-5xl shadow-2xl">ANGULAR HUB</h1>
+      <h1 class="title text-4xl sm:text-5xl">ANGULAR HUB</h1>
       <h2 class="text-2xl text-center">Curated list of Angular Podcasts</h2>
     </aside>