92 Describe all 3 days of predictions and distinguish current tab #65
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
patrickjfl
force-pushed
the
92-migrate-air-quality-alert-integration-tests-to-new-design
branch
from
fc1e272
to
94640ba
Compare
edavey
changed the title
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...
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
patrickjfl
force-pushed
the
92-migrate-air-quality-alert-integration-tests-to-new-design
branch
from
94640ba
to
2e6154a
Compare
patrickjfl
approved these changes
Oct 24, 2024
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.
patrickjfl
force-pushed
the
92-migrate-air-quality-alert-integration-tests-to-new-design
branch
from
2e6154a
to
72a0aa0
Compare
edavey
deleted the
92-migrate-air-quality-alert-integration-tests-to-new-design
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In this PR with