Merge pull request #127 from kit-data-manager/improved-design

Minor design optimizations

Author: maximiliani

.pre-commit-config.yaml

@@ -4,10 +4,15 @@ repos:
     - repo: https://github.com/pre-commit/pre-commit-hooks
       rev: v3.2.0
       hooks:
-          - id: trailing-whitespace
           - id: check-yaml
           - id: check-added-large-files
     - repo: https://github.com/Materials-Data-Science-and-Informatics/somesy
       rev: "v0.7.3"
       hooks:
           - id: somesy
+    - repo: local
+      hooks:
+        - id: eslint
+          name: ESLint
+          entry: npm run lint
+          language: node

CITATION.cff

@@ -5,7 +5,7 @@ title: '@kit-data-manager/mapping-service-input'
 abstract: The mapping-service-input provides a minimalistic user interface for 
   the KIT Data Manager Mapping Service. It allows users to select an existing 
   mapping schema and use it to map their data.
-version: 1.2.2
+version: 1.2.3
 keywords:
   - metadata
   - JSON

codemeta.json

@@ -28,7 +28,7 @@
   ],
   "name": "@kit-data-manager/mapping-service-input",
   "description": "The mapping-service-input provides a minimalistic user interface for the KIT Data Manager Mapping Service. It allows users to select an existing mapping schema and use it to map their data.",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "keywords": [
     "metadata",
     "JSON",

package.json

@@ -6,7 +6,7 @@
     "url": "https://orcid.org/0000-0003-2804-688X"
   },
   "license": "Apache-2.0",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "private": false,
   "keywords": [
     "metadata",

somesy.toml

@@ -1,6 +1,6 @@
 [project]
 name = "@kit-data-manager/mapping-service-input"
-version = "1.2.2"
+version = "1.2.3"
 description = "The mapping-service-input provides a minimalistic user interface for the KIT Data Manager Mapping Service. It allows users to select an existing mapping schema and use it to map their data."
 license = "Apache-2.0"
 repository = "https://github.com/kit-data-manager/com_mapping-service-input.git"

src/main.ts

@@ -452,6 +452,7 @@ class MappingInputProvider extends HTMLElement {
         const buttons = this.shadowRoot.querySelectorAll<HTMLButtonElement>('.selection-button');
         buttons.forEach((b) => {
             b.classList.remove('selected-id');
+            b.textContent = 'Select';
             b.setAttribute('aria-selected', 'false');
         });
         if (id && id !== this.selectedMappingId && id !== '') {

src/style.css

@@ -99,16 +99,16 @@ button[disabled|='true'] {
     color: var(--text-white);
     width: 100%;
     flex: 1 0 auto;
+    align-items: center;
     justify-content: center;
+    padding: 0.375rem;
 }
 
 .title {
     font-size: large;
     font-weight: bold;
-    display: flex;
-    margin: 0.375rem;
-    flex: 1 0 calc(var(--grid-element-min-width) - 2*0.4rem);
-    line-break: auto;
+    display: inline-flex;
+    flex: 1 0 calc(var(--grid-element-min-width) - 2 * 0.4rem);
     align-items: center; /* Vertical centering */
     justify-content: center; /* Horizontal centering */
     height: 100%; /* Ensure the div has height */
@@ -167,11 +167,12 @@ button[disabled|='true'] {
 .description {
     /*flex: 0 1 auto;*/
     color: var(--deactivated-color) !important;
-    padding: 0.5rem;
+    font-size: medium;
+    padding-inline: 0.5rem;
     display: inline-block;
     text-align: justify;
     overflow-x: auto;
-    height: calc(var(--grid-element-min-width)/2 + 2rem);
+    height: calc(var(--grid-element-min-width) / 2 + 2rem);
     margin-bottom: var(--margin-around);
 }
 
@@ -193,8 +194,8 @@ button[disabled|='true'] {
         grid-template-columns: 1fr;
     }
 
-    .description{
-        height: calc((var(--grid-element-min-width)*2)/3 + 1rem);
+    .description {
+        height: calc((var(--grid-element-min-width) * 2) / 3 + 1rem);
     }
 }
 
@@ -234,6 +235,7 @@ button[disabled|='true'] {
 
     &:has(> button.selected-id) {
         outline: 0.3rem solid var(--tertiary-color);
+        border: 1px solid var(--tertiary-color);
 
         .header {
             background-color: var(--tertiary-color) !important;

src/template.html

@@ -1,6 +1,5 @@
 <div class="step" id="step-1" role="tab">
   <h3 aria-hidden="true">Select a Mapping</h3>
-
   <div id="options" class="mapping-options" role="tablist" aria-description="Select one of the available mappings">
     <div class="container-wrapper">
       <div