Minor UI tweaks

gee-community · Jan 17, 2025 · 5aa97b5 · 5aa97b5
1 parent 4003328
commit 5aa97b5
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 7 deletions.
diff --git a/js/basemap_selector.ts b/js/basemap_selector.ts
@@ -29,7 +29,7 @@ export class BasemapSelector extends LitWidget<
         materialStyles,
         css`
             .horizontal-flex {
-                gap: 4px;
+                gap: 8px;
             }
 
             .legacy-text {
@@ -61,7 +61,7 @@ export class BasemapSelector extends LitWidget<
         return html`
             <widget-container
                 icon="map"
-                title="Basemap Selector"
+                title="Basemap"
                 @close-clicked="${this.onCloseClicked}"
             >
                 <div class="vertical-flex">

diff --git a/js/container.ts b/js/container.ts
@@ -53,7 +53,7 @@ export class Container extends LitWidget<ContainerModel, Container> {
             }
 
             .widget-container {
-                padding: 4px;
+                padding: 8px 12px 12px 12px;
             }
 
             .hidden {
@@ -71,6 +71,10 @@ export class Container extends LitWidget<ContainerModel, Container> {
                 flex-grow: 1;
                 padding: 0 12px 0 0;
             }
+
+            .left-padding {
+                padding-left: 8px;
+            }
         `,
     ];
 
@@ -135,7 +139,15 @@ export class Container extends LitWidget<ContainerModel, Container> {
     }
 
     private renderTitle(): HTMLTemplateResult {
-        return html`<span class="legacy-text header-text">${this.title}</span>`;
+        return html`<span
+            class="${classMap({
+                "legacy-text": true,
+                "header-text": true,
+                "left-padding":
+                    this.compactMode && this.title && !this.reverseHeader,
+            })}"
+            >${this.title}</span
+        >`;
     }
 
     private onCloseButtonClicked(): void {

diff --git a/js/layer_manager.ts b/js/layer_manager.ts
@@ -35,7 +35,7 @@ export class LayerManager extends LitWidget<LayerManagerModel, LayerManager> {
             .layer-manager-rows {
                 display: flex;
                 flex-direction: column;
-                gap: 4px;
+                gap: 8px;
             }
         `,
     ];

diff --git a/js/search_bar.ts b/js/search_bar.ts
@@ -44,7 +44,6 @@ export class SearchBar extends LitWidget<
 
             .input-container {
                 max-width: 460px;
-                padding: 5px;
             }
 
             .input-container > p {

diff --git a/js/styles.ts b/js/styles.ts
@@ -29,7 +29,7 @@ export const flexStyles = css`
     .vertical-flex {
         display: flex;
         flex-direction: column;
-        gap: 4px;
+        gap: 8px;
     }
 
     .horizontal-flex {