diff --git a/floethereum/css/main.css b/floethereum/css/main.css index a3c5ac2..9dce0c4 100644 --- a/floethereum/css/main.css +++ b/floethereum/css/main.css @@ -788,20 +788,20 @@ theme-toggle { align-self: center; } -.label { - text-transform: capitalize; - font-size: 0.8rem; - margin-bottom: 0.3rem; - color: rgba(var(--text-color), 0.8); - margin-top: 1.5rem; - font-weight: 500; -} -.label:first-of-type { - margin-top: 0; -} -.label + :is(h1, h2, h3, h4, h5, h6, p, span, sm-copy, a) { - font-weight: 700; -} + .label { + text-transform: capitalize; + font-size: 0.8rem; + margin-bottom: 0.3rem; + color: rgba(var(--text-color), 0.8); + margin-top: 1.5rem; + font-weight: 500; + } + .label:first-of-type { + margin-top: 0; + } + .label + :is(h1, h2, h3, h4, h5, h6, p, span, sm-copy, a) { + font-weight: 700; + } main { display: grid; @@ -822,6 +822,7 @@ main { display: flex; height: 100%; width: 100%; + justify-content: space-around; } #main_navbar ul li { width: 100%; @@ -887,6 +888,13 @@ main { flex-direction: column; width: min(100%, 42rem); } +#page_container[data-page=retrieve] { + align-items: flex-start; +} +#page_container[data-page=retrieve] > * { + padding: 1rem; + margin: 0 auto; +} aside { view-transition-name: search-history; @@ -1171,4 +1179,4 @@ aside h4 { -webkit-animation: none !important; animation: none !important; } -} \ No newline at end of file +} diff --git a/floethereum/index.html b/floethereum/index.html index dc4ed91..036d75e 100644 --- a/floethereum/index.html +++ b/floethereum/index.html @@ -5,7 +5,7 @@ FLO Ethereum - + - + +
@@ -385,6 +399,7 @@ this.routingStart(this.state) } if (this.routes[page]) { + //Actual routing step await this.routes[page](this.state) this.lastPage = page } else { @@ -411,6 +426,8 @@ else page = path this.state = { page, wildcards, lastPage: this.lastPage, params } + + if (queryString) { params = new URLSearchParams(queryString) this.state.params = Object.fromEntries(params) @@ -428,6 +445,39 @@ } } } + +//Moving notification draw so that it does not overlap the menu item +(function placeToasts() { + const drawer = document.getElementById('notification_drawer'); + const panel = drawer?.shadowRoot?.querySelector('.notification-panel'); + if (!panel) return; + + const apply = () => { + if (window.matchMedia('(min-width: 640px)').matches) { + // Desktop: offset from left navbar + Object.assign(panel.style, { + left: 'calc(10rem + 1rem)', + bottom: '1rem', + top: 'auto', + right: '1rem', // optional, lets long toasts wrap before content edge + zIndex: '1000' + }); + } else { + // Mobile: keep top-right or top-left as you prefer + Object.assign(panel.style, { + left: '0.5rem', + top: '0.5rem', + right: '0.5rem', + bottom: 'auto', + zIndex: '1000' + }); + } + }; + + apply(); + window.addEventListener('resize', apply); +})(); + - \ No newline at end of file +