feat: make icons demo better

Dafnik · May 31, 2024 · 2b8ef39 · 2b8ef39
1 parent 322c945
commit 2b8ef39
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/apps/dfx-bootstrap-icons-demo/src/app/app.component.ts b/apps/dfx-bootstrap-icons-demo/src/app/app.component.ts
@@ -76,7 +76,7 @@ import { ThemePicker } from 'playground-lib';
             </div>
           </div>
           <div class="col-12 col-lg-4 d-flex justify-content-center">
-            <img ngSrc="assets/header.png" priority alt="" width="400" height="300" />
+            <img ngSrc="assets/header.png" priority alt="" width="360" height="270" />
           </div>
         </header>
       </div>

diff --git a/apps/dfx-bootstrap-icons-demo/src/app/app.config.ts b/apps/dfx-bootstrap-icons-demo/src/app/app.config.ts
@@ -1,7 +1,7 @@
 import { ApplicationConfig } from '@angular/core';
 import { provideRouter, withEnabledBlockingInitialNavigation } from '@angular/router';
 import { appRoutes } from './app.routes';
-import { allIcons, provideBi, withHeight, withIcons, withWidth } from 'dfx-bootstrap-icons';
+import { allIcons, provideBi, withIcons, withSize } from 'dfx-bootstrap-icons';
 import { provideDfxHelper, withWindow } from 'dfx-helper';
 import { provideHttpClient } from '@angular/common/http';
 
@@ -10,6 +10,6 @@ export const appConfig: ApplicationConfig = {
     provideRouter(appRoutes, withEnabledBlockingInitialNavigation()),
     provideDfxHelper(withWindow()),
     provideHttpClient(),
-    provideBi(withIcons(allIcons), withWidth('32'), withHeight('48')),
+    provideBi(withIcons(allIcons), withSize('32')),
   ],
 };
diff --git a/apps/dfx-bootstrap-icons-demo/src/app/home.component.ts b/apps/dfx-bootstrap-icons-demo/src/app/home.component.ts
@@ -19,9 +19,9 @@ import { injectWindow } from 'dfx-helper';
 
       <app-load-icon />
 
-      <ul class="row row-cols-3 row-cols-sm-4 row-cols-lg-6 g-2 g-lg-3 list-unstyled list m-0">
+      <ul class="d-flex flex-wrap justify-content-between gap-2 list-unstyled list m-0">
         @for (icon of searchResults(); track icon) {
-          <li class="col mb-4">
+          <li class="mb-4" style="min-width: 110px">
             <div class="d-block text-decoration-none">
               <a href="https://icons.getbootstrap.com/icons/{{ icon }}/" target="_blank">
                 <div class="px-3 py-5 mb-2 text-center rounded icon-block">
@@ -71,8 +71,8 @@ import { injectWindow } from 'dfx-helper';
     .to-top {
       bottom: 0;
       margin: 0 8px 12px 0;
-      position: fixed;
       right: 0;
+      position: fixed;
       opacity: 0;
     }