From 38a185e047c9107293642a542b0e3c70cdafb86c Mon Sep 17 00:00:00 2001 From: Duncan Stuart Date: Sun, 14 Apr 2024 00:26:56 +0200 Subject: [PATCH 1/7] Include an icon in the Map main navigation link Need to include a link for licensing purposes, so let's take this opportunity to modernise the CSS. --- app/assets/images/map.svg | 40 +++++++++++++ .../stylesheets/website/_navigation.scss | 12 ++++ app/assets/stylesheets/website/_website.scss | 57 ++++++++++--------- app/views/layouts/website.html.erb | 9 +-- .../layouts/website/_navigation.html.erb | 2 +- 5 files changed, 87 insertions(+), 33 deletions(-) create mode 100644 app/assets/images/map.svg diff --git a/app/assets/images/map.svg b/app/assets/images/map.svg new file mode 100644 index 00000000..f09f79b4 --- /dev/null +++ b/app/assets/images/map.svg @@ -0,0 +1,40 @@ + + + + + + diff --git a/app/assets/stylesheets/website/_navigation.scss b/app/assets/stylesheets/website/_navigation.scss index 55fbdf50..887d6582 100644 --- a/app/assets/stylesheets/website/_navigation.scss +++ b/app/assets/stylesheets/website/_navigation.scss @@ -29,5 +29,17 @@ a.current:hover { border: borders.$thick-border; } + + .nav-map a::after { + content: ""; + display: inline-block; + width: 1.2em; + height: 1.2em; + background-image: url("map.svg"); + background-size: contain; + background-repeat: no-repeat; + vertical-align: text-bottom; + margin-left: 8px; + } } } diff --git a/app/assets/stylesheets/website/_website.scss b/app/assets/stylesheets/website/_website.scss index 803036cb..845a0ab0 100644 --- a/app/assets/stylesheets/website/_website.scss +++ b/app/assets/stylesheets/website/_website.scss @@ -18,21 +18,18 @@ } } - #footer { + .website-footer { margin: 30px 20px 0; } + + #footer_nav { + width: 100%; + } } // SMALL -address, -#valid_statement, -#footer_nav { - margin-bottom: 20px; -} -address, -#valid_statement, -#last_updated { +.last-updated { text-align: center; } @@ -48,6 +45,23 @@ address, } } +.website-footer { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px 0.6ch; // 0.6ch is roughly the width of a space? + border-top: borders.$basic-border; + padding: 30px 20px; + + p { + margin: 0; + } +} + +.last-updated { + width: 100% +} + #footer_nav { li { margin-bottom: 10px; @@ -72,7 +86,7 @@ address, } } - #footer { + .website-footer { margin: 30px 40px 0; } @@ -116,21 +130,12 @@ address, } } - #footer_nav { - float: left; - text-align: left; - width: 480px; - height: 31px; - } - - address, - #valid_statement { - text-align: right; - margin-bottom: 0; + address { + margin-left: auto; } - #last_updated { - clear: both; + .last-updated { + width: 100%; } .banner { @@ -204,11 +209,7 @@ address, // Footer ///////////////////////////////////////////// -#footer { - border-top: borders.$basic-border; - padding: 30px 20px; - clear: both; - +.website-footer { p, address { a { diff --git a/app/views/layouts/website.html.erb b/app/views/layouts/website.html.erb index 63347a72..7771e2d7 100644 --- a/app/views/layouts/website.html.erb +++ b/app/views/layouts/website.html.erb @@ -27,16 +27,17 @@ <%= content_for?(:page_content) ? yield(:page_content) : yield %> - + <% end %> diff --git a/app/views/layouts/website/_navigation.html.erb b/app/views/layouts/website/_navigation.html.erb index 9d564c01..e2013126 100644 --- a/app/views/layouts/website/_navigation.html.erb +++ b/app/views/layouts/website/_navigation.html.erb @@ -4,7 +4,7 @@ <%= nav_link 'Listings', root_path, { :rel => "start" } %> <% links.each do |link| %> -
  • +
  • <%= nav_link link.fetch(:text), link.fetch(:path), { :rel => "section" } %>
    • <% end %> From c6c5a76fb12b86c84025e38fd97f6166312cf98a Mon Sep 17 00:00:00 2001 From: Duncan Stuart Date: Sun, 14 Apr 2024 00:28:44 +0200 Subject: [PATCH 2/7] Tweaks and tidying of map css --- app/assets/stylesheets/application.scss | 1 + app/assets/stylesheets/shared/_colours.scss | 1 + .../website/_listings_navigation.scss | 2 +- app/assets/stylesheets/website/_map.scss | 81 +++---------------- .../website/_map_info_windows.scss | 51 ++++++++++++ 5 files changed, 65 insertions(+), 71 deletions(-) create mode 100644 app/assets/stylesheets/website/_map_info_windows.scss diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 9bb85e60..64e22e97 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -9,4 +9,5 @@ @use "website/info"; @use "website/login"; @use "website/map"; +@use "website/map_info_windows"; @use "name_clash"; diff --git a/app/assets/stylesheets/shared/_colours.scss b/app/assets/stylesheets/shared/_colours.scss index ab2d0463..9c0a9e1b 100644 --- a/app/assets/stylesheets/shared/_colours.scss +++ b/app/assets/stylesheets/shared/_colours.scss @@ -9,6 +9,7 @@ $link-colour: $darkblue; $highlight-colour: $red; $lowlight-colour: $greybrown; $background-colour: #fee6b8; +$background-light-colour: #fff8ea; $banner-colour: #ebb68f; $notice-colour: $green; $alert-colour: $red; diff --git a/app/assets/stylesheets/website/_listings_navigation.scss b/app/assets/stylesheets/website/_listings_navigation.scss index 5243db1d..a31b27ec 100644 --- a/app/assets/stylesheets/website/_listings_navigation.scss +++ b/app/assets/stylesheets/website/_listings_navigation.scss @@ -94,7 +94,7 @@ ///////////////////////////////////////////// .donation { padding: 10px 15px; - background-color: #fff8ea; + background-color: colours.$background-light-colour; border: borders.$double-border; display: flex; flex-wrap: wrap; diff --git a/app/assets/stylesheets/website/_map.scss b/app/assets/stylesheets/website/_map.scss index 213bfe7f..a9af7c99 100644 --- a/app/assets/stylesheets/website/_map.scss +++ b/app/assets/stylesheets/website/_map.scss @@ -41,53 +41,6 @@ body.socials { } } - ul.info-listings { - margin-top: 15px; - - li { - /* padding to allow for the bottom border applied to the link it contains on hover */ - padding-bottom: 1px; - } - - .info-listing { - display: flex; - gap: 10px; - margin-bottom: 8px; - } - - .social_date { - font-weight: bold; - min-width: 80px; - max-width: 30%; - } - - .event_details { - flex-grow: 1; - } - - .day { - font-weight: bold; - margin-right: 5px; - } - - .new-label { - color: white; - background-color: colours.$text-colour; - padding: 0.3em 0.6em; - margin-right: 0.2em; - position: relative; - bottom: 0.1em; - text-transform: uppercase; - font-size: 0.8em; - } - } - - .nota_bene { - margin: 15px 0 0; - font-size: 0.9em; - color: colours.$greybrown; - } - .page { background: colours.$background-colour none; width: 100%; @@ -103,6 +56,10 @@ body.socials { text-transform: uppercase; font-size: 1.1em; text-align: center; + + em { + display: block; + } } .primary-nav { @@ -128,11 +85,12 @@ body.socials { .listings { font-size: 14px; + overflow: auto; + display: none; li { text-align: center; border-bottom: solid 1px #bebebe; - display: none; a { padding: 10px; @@ -156,15 +114,11 @@ body.socials { } &.open { + display: block; width: 100%; - - li { - display: list-item; - } } } - // SMALL ONLY @media only screen and (width <= 767px) { .page { position: relative; // otherwise it doesn't show the block-shadow @@ -175,14 +129,9 @@ body.socials { align-items: center; justify-content: space-between; height: auto; - border-right: solid 1px colours.$text-colour; h1 { padding: 10px; - - em { - display: block; - } } .primary-nav { @@ -225,16 +174,13 @@ body.socials { } .note { - display: none; // TODO: find a way to incorporate it + background-color: colours.$background-light-colour; + margin: 0; + padding: 12px 40px; } } - // TABLET & SMALLER LAPTOPS @media only screen and (width >= 768px) { - body { - display: block - } - .page { width: 220px; height: 100vh; @@ -258,7 +204,6 @@ body.socials { margin-bottom: 20px; em { - display: block; font-size: 2em; } } @@ -270,11 +215,7 @@ body.socials { .listings { overflow: auto; - - li { - display: list-item; - box-shadow: 0 1px 0 #e4e4e4; - } + display: block; .note { padding: 30px 15px 20px; diff --git a/app/assets/stylesheets/website/_map_info_windows.scss b/app/assets/stylesheets/website/_map_info_windows.scss new file mode 100644 index 00000000..12cc4a00 --- /dev/null +++ b/app/assets/stylesheets/website/_map_info_windows.scss @@ -0,0 +1,51 @@ +@use "../shared/colours"; + +body.classes, +body.socials { + ul.info-listings { + margin-top: 15px; + + li { + /* padding to allow for the bottom border applied to the link it contains on hover */ + padding-bottom: 1px; + } + + .info-listing { + display: flex; + gap: 10px; + margin-bottom: 8px; + } + + .social_date { + font-weight: bold; + min-width: 80px; + max-width: 30%; + } + + .event_details { + flex-grow: 1; + } + + .day { + font-weight: bold; + margin-right: 5px; + } + + .new-label { + color: white; + background-color: colours.$text-colour; + padding: 0.3em 0.6em; + margin-right: 0.2em; + position: relative; + bottom: 0.1em; + text-transform: uppercase; + font-size: 0.8em; + } + } + + .nota_bene { + margin: 15px 0 0; + font-size: 0.9em; + color: colours.$greybrown; + } +} From e58c9c4bdc5f4249568328e23acdc184b5bfb373 Mon Sep 17 00:00:00 2001 From: Duncan Stuart Date: Sun, 14 Apr 2024 01:47:47 +0200 Subject: [PATCH 3/7] Responsive fixes for scrolling date list The date list wasn't scrolling on mobile landscape because it didn't have an explicit height. Make it position absolute so it feels like a dropdown menu, and tweak the box shadows. --- app/assets/stylesheets/website/_map.scss | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/website/_map.scss b/app/assets/stylesheets/website/_map.scss index a9af7c99..6deacc1b 100644 --- a/app/assets/stylesheets/website/_map.scss +++ b/app/assets/stylesheets/website/_map.scss @@ -1,6 +1,8 @@ @use "borders"; @use "../shared/colours"; +$map-shadow: 0 9px 12px rgba(50, 50, 50, 0.75); + .map-container { height: 100%; display: flex; @@ -49,7 +51,6 @@ body.socials { header { height: 130px; width: 100%; - box-shadow: 0 9px 12px rgba(50, 50, 50, 0.75); font-size: 0.7em; h1 { @@ -87,6 +88,7 @@ body.socials { font-size: 14px; overflow: auto; display: none; + background: colours.$background-colour; li { text-align: center; @@ -122,6 +124,7 @@ body.socials { @media only screen and (width <= 767px) { .page { position: relative; // otherwise it doesn't show the block-shadow + box-shadow: $map-shadow; } header { @@ -160,6 +163,13 @@ body.socials { } } + .listings { + max-height: 75vh; // without a height or max-height, the list doesn't scroll on mobile (landscape) + position: absolute; // position: absolute makes the menu expand over the top of the map rather than pushing it down + border-top: borders.$thin-border; + box-shadow: $map-shadow; // the page's shadow isn't shown because position:absolute removes this element from the flow + } + .currently-shown { border: none; border-left: 1px solid colours.$text-colour; @@ -189,7 +199,7 @@ body.socials { left: 0; display: flex; flex-direction: column; - box-shadow: 9px 9px 12px rgba(50, 50, 50, 0.75), inset 0 18px 20px -20px rgba(50, 50, 50, 0.75); + box-shadow: 9px 9px 12px rgba(50, 50, 50, 0.75); } #map { @@ -199,6 +209,8 @@ body.socials { header { font-size: 0.9em; padding: 20px 0; + box-shadow: $map-shadow; + position: relative; // otherwise it doesn't show the block-shadow h1 { margin-bottom: 20px; From 51b7f16029e7dca3918f7d767adc87d0ec4ccc5c Mon Sep 17 00:00:00 2001 From: Duncan Stuart Date: Sun, 14 Apr 2024 02:01:12 +0200 Subject: [PATCH 4/7] Map dropdowns don't take up 100% of width --- app/assets/stylesheets/website/_map.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/website/_map.scss b/app/assets/stylesheets/website/_map.scss index 6deacc1b..7bb9cc24 100644 --- a/app/assets/stylesheets/website/_map.scss +++ b/app/assets/stylesheets/website/_map.scss @@ -87,7 +87,6 @@ body.socials { .listings { font-size: 14px; overflow: auto; - display: none; background: colours.$background-colour; li { @@ -117,7 +116,6 @@ body.socials { &.open { display: block; - width: 100%; } } @@ -164,8 +162,11 @@ body.socials { } .listings { + display: none; max-height: 75vh; // without a height or max-height, the list doesn't scroll on mobile (landscape) position: absolute; // position: absolute makes the menu expand over the top of the map rather than pushing it down + right: 0; + width: 230px; border-top: borders.$thin-border; box-shadow: $map-shadow; // the page's shadow isn't shown because position:absolute removes this element from the flow } @@ -186,7 +187,7 @@ body.socials { .note { background-color: colours.$background-light-colour; margin: 0; - padding: 12px 40px; + padding: 20px 30px; } } From dd02e2a665c356337868d8ece3385faea510cbda Mon Sep 17 00:00:00 2001 From: Duncan Stuart Date: Sun, 14 Apr 2024 02:10:32 +0200 Subject: [PATCH 5/7] Include "All" links in maps date/day list --- app/views/maps/classes.html.erb | 8 ++++++++ app/views/maps/socials.html.erb | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/app/views/maps/classes.html.erb b/app/views/maps/classes.html.erb index d26e10ba..fd9595fc 100644 --- a/app/views/maps/classes.html.erb +++ b/app/views/maps/classes.html.erb @@ -26,6 +26,14 @@ ) %> <% end %> +
  • + <%= map_update_control_link( + "All", + "#", + selected: @day.blank?, + url: map_classes_path(format: :json) + ) %> +

    • Unless otherwise stated all classes are primarily Lindy Hop diff --git a/app/views/maps/socials.html.erb b/app/views/maps/socials.html.erb index 260f505c..e0be534f 100644 --- a/app/views/maps/socials.html.erb +++ b/app/views/maps/socials.html.erb @@ -30,5 +30,13 @@ ) %> <% end %> +

  • + <%= map_update_control_link( + "All", + "#", + selected: @map_dates.selected_date.blank?, + url: map_socials_path(format: :json) + ) %> +
    • <% end %> From e5b9facf1ae91c2778d08ccca1d8997db5ea0d99 Mon Sep 17 00:00:00 2001 From: Duncan Stuart Date: Sun, 14 Apr 2024 04:03:07 +0200 Subject: [PATCH 6/7] Float map sidebar over the map On larger monitors, or just for the classes menu, it doesn't reach the bottom of the page, so rather than having a big old empty sidebar we can have the sidebar float over the top of the map. There are a few things we need to do to compensate: - the bounding box for markers needs to be offset so that the center of the map is where it was before (relative to the sidebar) - If the sidebar actually _is_ larger than the viewport then we want it to scroll, not overflow the page. Pass the offset as a function, so that the Map can calculate the offset dynamically whenever it sets bounds padding but doesn't need to be concerned with how it's calculated. This messes with the initial center of the map which we set, since we can't really account for that: it would depend how much of the map is showing. But the user basically never sees those coordinates anyway: only if they jump to eg. a day or date on which there are no events, in which case we don't care so much? --- app/assets/stylesheets/website/_map.scss | 6 +----- app/javascript/controllers/map_controller.js | 16 +++++++++++++++- app/javascript/maps/map.js | 19 ++++++++++++++++--- app/views/layouts/map.html.erb | 2 +- 4 files changed, 33 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/website/_map.scss b/app/assets/stylesheets/website/_map.scss index 7bb9cc24..36dd044d 100644 --- a/app/assets/stylesheets/website/_map.scss +++ b/app/assets/stylesheets/website/_map.scss @@ -194,7 +194,7 @@ body.socials { @media only screen and (width >= 768px) { .page { width: 220px; - height: 100vh; + max-height: 100vh; position: absolute; top: 0; left: 0; @@ -203,10 +203,6 @@ body.socials { box-shadow: 9px 9px 12px rgba(50, 50, 50, 0.75); } - #map { - margin-left: 220px; - } - header { font-size: 0.9em; padding: 20px 0; diff --git a/app/javascript/controllers/map_controller.js b/app/javascript/controllers/map_controller.js index 6e705e8d..7bf8ae0d 100644 --- a/app/javascript/controllers/map_controller.js +++ b/app/javascript/controllers/map_controller.js @@ -3,7 +3,7 @@ import { Map } from '../maps/map' // Connects to data-controller="map" export default class extends Controller { - static targets = [ "map" ] + static targets = [ "map", "sidebar" ] static values = { apiKey: String, mapId: String, @@ -19,6 +19,7 @@ export default class extends Controller { mapId: this.mapIdValue, config: this.configValue, initialMarkers: this.markersValue.map(this._markerData), + boundsOffsetX: this._sidebarWidth.bind(this), mapElement: this.mapTarget }) } @@ -54,4 +55,17 @@ export default class extends Controller { content: venue.infoWindowContent } } + + _sidebarWidth() { + if (this._sidebarVisible()) { + return this.sidebarTarget.offsetWidth + } else { + return 0; + } + } + + _sidebarVisible() { + const style = window.getComputedStyle(this.sidebarTarget); + return style.display !== 'none' + } } diff --git a/app/javascript/maps/map.js b/app/javascript/maps/map.js index 491b7aa1..f54878b8 100644 --- a/app/javascript/maps/map.js +++ b/app/javascript/maps/map.js @@ -1,10 +1,11 @@ import { Loader } from "@googlemaps/js-api-loader" export class Map { - constructor({ apiKey, mapId, config, initialMarkers, mapElement }) { + constructor({ apiKey, mapId, config, initialMarkers, boundsOffsetX, mapElement }) { this.apiKey = apiKey; this.mapId = mapId; this.config = config; + this.boundsOffsetX = boundsOffsetX; this.mapElement = mapElement; const loader = new Loader({ @@ -13,10 +14,11 @@ export class Map { }); loader.load().then(async () => { + this.#mapInstance = await this._createMap() + const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker"); this.AdvancedMarkerElement = AdvancedMarkerElement; this.PinElement = PinElement; - this.#mapInstance = await this._createMap() this._createMarkers(initialMarkers) }) } @@ -42,7 +44,8 @@ export class Map { bounds.extend(position) }) - this.#mapInstance.fitBounds(bounds); + const padding = this._boundsPadding() + this.#mapInstance.fitBounds(bounds, padding) } async _createMarker({ position, title, highlighted, content }) { @@ -74,6 +77,16 @@ export class Map { return pin.element } + _boundsPadding() { + const padding = 45 // if we don't pass any padding, GoogleMaps sets 45px + return { + left:(padding + this.boundsOffsetX()), + right:padding, + top:padding, + bottom:padding + } + } + _clearAllMarkers() { this.#markers.forEach(this._clearMarker) } diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb index 7e1cb890..06383993 100644 --- a/app/views/layouts/map.html.erb +++ b/app/views/layouts/map.html.erb @@ -32,7 +32,7 @@ -
    +
    <%= yield :listings %>
    From aa6076004883920c989fff353aceb85e779aac50 Mon Sep 17 00:00:00 2001 From: Duncan Stuart Date: Sun, 14 Apr 2024 04:38:42 +0200 Subject: [PATCH 7/7] Use Threads rather than Twitter link The bird is dead. --- app/views/layouts/website.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/layouts/website.html.erb b/app/views/layouts/website.html.erb index 7771e2d7..bf9a85fb 100644 --- a/app/views/layouts/website.html.erb +++ b/app/views/layouts/website.html.erb @@ -31,7 +31,7 @@ <%= render 'layouts/website/navigation', :nav_id => 'footer_nav', nav_class: "navigation secondary-nav", links: main_navigation_links << privacy_policy_link %>
    Site by - <%= link_to "@dgmstuart", "https://twitter.com/dgmstuart" %>. + <%= link_to "@dgmstuart", "https://www.threads.net/@dgmstuart" %>.

    Map icon by icons8