Merge pull request #34 from kit-data-manager/issues

Issues

Author: ajaykirarkit

package.json

@@ -3,7 +3,7 @@
   "description": "This component contains an option to select an input file form which metadata needs to be extracted, an option to search from available mapping schemas whose name will be self explainatory .",
   "author": "Ajay",
   "license": "Apache License 2.0",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "private": false,
   "keywords": [
     "metadata",

src/main.ts

@@ -96,7 +96,7 @@ class MappingInputProvider extends HTMLElement {
     //Box of detailed contents like image, description of mapping
     const mappingIdsEndpoint = this.baseUrl.toString() + "api/v1/mappingAdministration/";
     let optionsContainer: HTMLElement = <HTMLInputElement>(
-      this.shadowRoot.getElementById('options-container')
+      this.shadowRoot.getElementById('options-container options-center')
     );
     // Remove any existing event listeners before adding a new one
     optionsContainer.removeEventListener("click", this.handleButtonClick.bind(this));
@@ -148,6 +148,11 @@ class MappingInputProvider extends HTMLElement {
             });
           }
           optionsContainer.appendChild(division);
+          if (mappingIds.length < 5) {
+            optionsContainer.classList.add('options-center'); // Add the class if less than 5 cards
+          } else {
+            optionsContainer.classList.remove('options-center'); // Remove the class if more than 5 cards
+          }
         })
       }).catch(error => {
         console.error('Error while fetch Mapping Ids' + error)

src/style.css

@@ -79,14 +79,19 @@ button:hover {
   padding: 1.25rem;
 }
 
+/* The common styles for options-container */
 .options-container {
   display: flex;
   flex-wrap: nowrap;
-  justify-content: center;
   overflow-x: auto;
   padding-bottom: 0.625rem;
 }
 
+/* The class to center the container */
+.options-center {
+  justify-content: center;
+}
+
 .cards {
   flex: 0 0 calc(25% - 1.25rem);
   display: flex;
@@ -101,16 +106,16 @@ button:hover {
   margin: 0.625rem;
   overflow: hidden;
   position: relative;
-  min-width: 12.5rem;
+  min-width: 18.5rem;
   /* Added minimum width for better mobile view */
   background-color: #eef3f4;
   /* Add your desired background color here */
-}     
+}
 
 .cards img {
   max-width: 6.25rem;
   margin-bottom: 0.625rem;
-} 
+}
 
 .cards h2 {
   margin-bottom: 0.625rem;
@@ -136,4 +141,4 @@ button:hover {
 .section-heading {
   /* background-color: #c52222; */
   font-size: large;
-}
+}

src/template.html

@@ -6,7 +6,7 @@ <h1 class="home-text08">Mapping Component</h1>
 		</span>
 	</div>
 	<div class="container-wrapper">
-		<div id="options-container" class="options-container">
+		<div id="options-container options-center" class="options-container">
 		</div>
 	</div>
 </div>