Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

92 Describe all 3 days of predictions and distinguish current tab #65

Merged
merged 4 commits into from
Oct 24, 2024
Merged

92 Describe all 3 days of predictions and distinguish current tab #65

merged 4 commits into from
Oct 24, 2024

Commits on Oct 24, 2024

  1. Demonstrate that we see details for day after tomorrow

    @edavey
    edavey committed Oct 24, 2024
    Configuration menu
    Copy the full SHA
    dbca0a4 View commit details
    Browse the repository at this point in the history

  2. Add stimulus-rails for our JS 'sprinkles' 

    Hotwire includes the Stimulus project for JS "sprinkles".
See: https://stimulus.hotwired.dev

and https://stimulus.hotwired.dev/handbook/origin
for some background.

Our immediate task is to visually identify the active tab
(either today, tomorrow or the day after tomorrow). We'll
add an `.active` class to the appropriate tab,
e.g. `.tab.tomorrow.active`.

Let's see if we can do this in a low code way which is easy
to maintain using Stimulus...
    @edavey @patrickjfl
    edavey authored and patrickjfl committed Oct 24, 2024
    Configuration menu
    Copy the full SHA
    664c371 View commit details
    Browse the repository at this point in the history

  3. Set active class on current forecast tab 

    We define a JS TagController which is instantated 3
times, once for each tag.

There's some magic (or convention) being used here:

TARGET

`static targets = [ "day" ]` identifies the DOM element
to which we wish to bind: `"data-tab-target" = "day"`

We then refer to this element with `this.dayTarget`

CLASS HELPER

`static classes = [ "active" ]`

similar to the `dayTarget` we can now reference our active
class as `this.activeClass`

As we've now got 4 data attributes I've used the Rails
[`tag()` method][] so that we can group our data attributes
under the `data` key which I think helps readability:

```
<%= tag.div class: "tab py-4 ...",
data: {
  date: forecast.date.to_s,
  controller: "tab",
  "tab-active-class": "active",
  "tab-target": "day"
} do
%>
```

[`tag()` method][]:
https://apidock.com/rails/ActionView/Helpers/TagHelper/tag
    @edavey @patrickjfl
    edavey authored and patrickjfl committed Oct 24, 2024
    Configuration menu
    Copy the full SHA
    7de224d View commit details
    Browse the repository at this point in the history

  4. Use @apply directive to define custom 'active' style 

    https://tailwindcss.com/docs/functions-and-directives#apply

I have also changed made the text colour for the inactive tabs slightly darker so that it is more readable.
    @edavey @patrickjfl
    edavey authored and patrickjfl committed Oct 24, 2024
    Configuration menu
    Copy the full SHA
    72a0aa0 View commit details
    Browse the repository at this point in the history