Add badges in demo and minor fixes

Harvest-Dev · Dec 18, 2024 · 8597ed3 · 8597ed3
1 parent c1c6de3
commit 8597ed3
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 27 deletions.
diff --git a/src/app/app-home.component.html b/src/app/app-home.component.html
@@ -1,7 +1,17 @@
 <h1>
   <code><pre>&#60;select2&#62;&#60;/select2&#62;</pre></code>
 </h1>
-
+<p class="badges">
+  <a href="https://badge.fury.io/js/ng-select2-component" target="_blank"
+    ><img src="https://badge.fury.io/js/ng-select2-component.svg" alt="npm version"
+  /></a>
+  <a href="https://www.npmjs.com/package/ng-select2-component" target="_blank"
+    ><img src="https://img.shields.io/npm/dm/ng-select2-component.svg" alt="Downloads"
+  /></a>
+  <a href="https://raw.githubusercontent.com/Harvest-Dev/ng-select2/master/LICENSE.md" target="_blank"
+    ><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="GitHub license"
+  /></a>
+</p>
 <p>
   {{ 'Extended version of the basic HTML select.' | transloco }}
 </p>
@@ -15,30 +25,22 @@ <h1>
 
   <div>
     <h3>
-         {{ 'Installation' | transloco }}
+      {{ 'Installation' | transloco }}
     </h3>
     <div>
-        <code>npm install ng-select2-component</code>
+      <code>npm install ng-select2-component</code>
     </div>
 
-
-    <h3>
-        {{ 'Basic usage' | transloco }}
-    </h3>
     <h3>
-        HTML
+      {{ 'Basic usage' | transloco }}
     </h3>
+    <h3>HTML</h3>
     <div>
-        <code><pre [highlight]="html" language="html"></pre></code>
+      <code><pre [highlight]="html" language="html"></pre></code>
     </div>
-    <h3>
-        Typescript
-    </h3>
+    <h3>Typescript</h3>
     <div>
-        <code><pre [highlight]="ts" language="ts"></pre></code>
+      <code><pre [highlight]="ts" language="ts"></pre></code>
     </div>
-
-
   </div>
-
 </div>
diff --git a/src/app/app-home.component.scss b/src/app/app-home.component.scss
@@ -1,5 +1,9 @@
-
-
 select2 {
     width: 300px;
 }
+
+.badges {
+    display: flex;
+    flex-wrap: wrap-reverse;
+    gap: 12px;
+}
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -94,25 +94,23 @@
 }
 
 nav {
-    background-color: #ddd;
-    padding: 15px;
     position: sticky;
     top: 0;
     z-index: 100000;
+    background-color: #ddd;
+    padding: 15px;
 
     ul {
-        list-style: none;
+        margin-bottom: 5px;
         padding: 0;
         font-size: 20px;
-        margin-bottom: 5px;
+        list-style: none;
     }
-
 }
 
-
-img{
+.attachment-full {
     position: fixed;
-    right: 0;
     top: 0;
+    right: 0;
     z-index: 100000;
 }
diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
@@ -3,7 +3,7 @@
   "Basic usage": "Utilisation de base",
   "Examples": "Exemples",
   "Code generator": "Générateur de code",
-  "Extended version of the basic HTML select.": "Version étendu du select HTML de base.",
+  "Extended version of the basic HTML select.": "Version étendue du select HTML de base.",
   "Generator": "Générateur",
   "Data": "Données",
   "Tags": "Balises",