diff --git a/src/map-app/app/view/sidebar.ts b/src/map-app/app/view/sidebar.ts index a944cca8..b39af4f6 100644 --- a/src/map-app/app/view/sidebar.ts +++ b/src/map-app/app/view/sidebar.ts @@ -190,14 +190,8 @@ export class SidebarView extends BaseView { } //else show it const sidebar = d3.select("#map-app-sidebar"); - const sidebarButton = d3.select("#map-app-sidebar-button"); d3.select(".w3-btn").attr("title", this.presenter.mapui.labels.hideDirectory); - const initiativeListSidebar = d3.select("#sea-initiatives-list-sidebar"); - if (!initiativeListSidebar.empty() && !sidebarButton.empty()) - initiativeListSidebar.insert(() => sidebarButton.node(), // moves sidebarButton - "#sea-initiatives-list-sidebar-content"); - sidebar .on( "transitionend", @@ -215,9 +209,7 @@ export class SidebarView extends BaseView { hideInitiativeList() { const sidebar = d3.select("#map-app-sidebar"); - const sidebarButton = d3.select("#map-app-sidebar-button"); - sidebar.insert(() => sidebarButton.node(), // moves sidebarButton - "#sea-initiatives-list-sidebar"); + sidebar.on( "transitionend", (event: TransitionEvent) => { diff --git a/src/map-app/styles/style.css b/src/map-app/styles/style.css index 810a4da5..1ec5ebc9 100644 --- a/src/map-app/styles/style.css +++ b/src/map-app/styles/style.css @@ -491,6 +491,10 @@ div.map-app-map-container { margin-top: 1em; } +.sea-sidebar-open.sea-sidebar-list-initiatives .map-app-sidebar-button { + transform: translateX(var(--sidebar-width)); +} + .map-app-sidebar-button button { padding: 0 0.45em; font-size: 2.4em; @@ -500,9 +504,12 @@ div.map-app-map-container { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } +.map-app-sidebar-button button:hover { + transform: translateX(0px); +} + .w3-btn:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); - transform: translateX(0px); } .map-app-sidebar-header {