UI fixes

whiletrue-industries · Dec 24, 2023 · 899db80 · 899db80
1 parent 85164c3
commit 899db80
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/projects/chronomaps/src/app/chronomap/chronomap.component.html b/projects/chronomaps/src/app/chronomap/chronomap.component.html
@@ -21,7 +21,7 @@
                 <div class='button-close' (click)='itemSelected(null)'></div>
                 <div class='filler' #contentFiller>
                 </div>
-                <div class='map-toggle'>
+                <div class='map-toggle' [style.border-color]='chronomap.primaryColor()'>
                     <div (click)='toggleMapMode()' [class.map]='this.mapMode === "Map"'></div>
                 </div>
                 <div class='scroller' #scroller [style.width]='detailWidthPx' #contentItem>
@@ -45,7 +45,7 @@
                     <div class='target-icon' #targetIcon>
                         <app-media-icon [type]='currentItem.type' [color]='chronomap.primaryColor()'></app-media-icon>
                     </div>
-                    <div class='description-toggle'>
+                    <div class='description-toggle' [style.border-color]='chronomap.primaryColor()'>
                         <div class='description-toggle-button' (click)='toggleDescriptionMode()' [class.more]='this.mapMode === "More"'></div>
                         <div class='date'>{{currentItem.formattedPostTimestamp}}</div>
                         <div class='backdrop'></div>

diff --git a/projects/chronomaps/src/app/chronomap/chronomap.component.less b/projects/chronomaps/src/app/chronomap/chronomap.component.less
@@ -3,13 +3,17 @@
 @transition-time: 350ms;
 
 @desktop-map-toggle-height: 48px + 20px + 20px;
-@desktop-description-toggle-height: 48px + 72px + 72px;
+@desktop-description-toggle-padding-top: 72px;
+@desktop-description-toggle-padding-bottom: 72px;
+@desktop-description-toggle-height: 48px + @desktop-description-toggle-padding-top + @desktop-description-toggle-padding-bottom;
 @desktop-content-peek-height: 40px;
 @desktop-date-offset: 40px;
 @mobile-map-toggle-height: 48px + 8px + 8px;
-@mobile-description-toggle-height: 48px + 8px + 20px;
+@mobile-description-toggle-padding-top: 20px;
+@mobile-description-toggle-padding-bottom: 8px;
+@mobile-description-toggle-height: 48px + @mobile-description-toggle-padding-top + @mobile-description-toggle-padding-bottom;
 @mobile-content-peek-height: 40px;
-@mobile-date-offset: 64px;
+@mobile-date-offset: 56px;
 
 :host {
     width: 100%;
@@ -108,6 +112,8 @@
                         align-items: center;
                         justify-content: center;
                         scroll-snap-align: start;
+                        border-bottom: 1px solid black;
+                        width: 100%;
 
                         > div {
                             pointer-events: all;
@@ -129,6 +135,7 @@
                     }
                     &.small-map-mode {
                         .map-toggle {
+                            border: none;
                             > div {
                                 opacity: 0;
                             }
@@ -234,16 +241,21 @@
                         flex: 0 0 auto;
                         .desktop({
                             height: @desktop-description-toggle-height;
+                            padding-top: @desktop-description-toggle-padding-top;
+                            padding-bottom: @desktop-description-toggle-padding-bottom;
                         });
                         .mobile({
                             height: @mobile-description-toggle-height;
+                            padding-top: @mobile-description-toggle-padding-top;
+                            padding-bottom: @mobile-description-toggle-padding-bottom;
                         });
                         width: 100%;
                         display: flex;
                         flex-flow: column;
                         align-items: center;
                         justify-content: center;
                         position: relative;
+                        border-top: 1px solid black;
 
                         .description-toggle-button {
                             pointer-events: all;
@@ -259,14 +271,15 @@
                             position: absolute;
                             .desktop({
                                 bottom: @desktop-date-offset;
+                                font-size: 16px;
                             });
                             .mobile({
                                 bottom: @mobile-date-offset;
+                                font-size: 13px;
                             });
                             color: @color-gray-5;
                             text-align: center;
                             .font-manrope;
-                            font-size: 16px;
                             font-weight: 400;
                             line-height: normal;
                             text-transform: uppercase;

diff --git a/projects/chronomaps/src/app/chronomap/chronomap.component.ts b/projects/chronomaps/src/app/chronomap/chronomap.component.ts
@@ -133,7 +133,7 @@ export class ChronomapComponent implements OnInit, AfterViewInit, OnDestroy {
       style: MAPBOX_STYLE,
       minZoom: 3,
       attributionControl: false,
-      logoPosition: this.layout.mobile() ? 'top-left' : 'bottom-right',
+      logoPosition: 'bottom-right',
     });
     if (this.layout.desktop()) {
       this.baseMap.addControl(new mapboxgl.NavigationControl(), 'top-left');