-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/tci 1221 location new hero banner (#888)
* initial commit * Initial Commit for location details page. Implemented hero section * Added Additional component section for hero. * Added a location details building image for demo. * Added css styling and removed obselete code in hero.twig from previous commit. * Deleted unused files. * Location details sections implementation. --------- Co-authored-by: Aditya R Joshi <aditya.joshi-t@jud.ca.gov>
- Loading branch information
1 parent
d09081c
commit d1cfc83
Showing
11 changed files
with
493 additions
and
5 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
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
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
117 changes: 117 additions & 0 deletions
117
source/_patterns/02-molecules/location-details/_location-details.scss
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| $_config_schemes: ( | ||
| base: ( | ||
| aside-title: primary-dark, | ||
| aside-dash-visibility: block, | ||
| aside-title-margin-top: 0, | ||
| ), | ||
| local: (), | ||
| pro: ( | ||
| aside-title: gray-warm-90, | ||
| aside-dash-visibility: none, | ||
| aside-title-margin-top: 1, | ||
| ), | ||
| ); | ||
|
|
||
| $_config: map-merge-by-keys($_config_schemes, base, $_config_schemes, $scheme); | ||
|
|
||
| .jcc-body__content.jcc-location-page{ | ||
| @include at-media(desktop) { | ||
| @include u-display(none); | ||
|
|
||
| } | ||
| } | ||
|
|
||
|
|
||
| .jcc-location_detail__content { | ||
| @include at-media(desktop) { | ||
| @include grid-row(); | ||
| @include grid-gap(4); | ||
| } | ||
| } | ||
|
|
||
| .jcc-location_detail__main { | ||
| @include at-media(desktop) { | ||
| @include grid-col(8); | ||
| } | ||
|
|
||
| .jcc-section-heading__lead, | ||
| .jcc-location_detail__main-text { | ||
| @include u-measure(6); | ||
| @include u-maxw(full); | ||
| } | ||
|
|
||
| .align-left { | ||
| @include u-float(left); | ||
| @include u-margin-right(3); | ||
| } | ||
|
|
||
| .align-right { | ||
| @include u-float(right); | ||
| @include u-margin-left(3); | ||
| } | ||
|
|
||
| &:only-child { | ||
| @include at-media(desktop) { | ||
| @include grid-col(12); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .jcc-location_detail__main-text { | ||
| @include u-padding-bottom(1); | ||
|
|
||
| .jcc-section-heading__title { | ||
| @include u-width(full); | ||
| @include u-overflow(hidden); | ||
| } | ||
| } | ||
|
|
||
| .jcc-location_detail__aside { | ||
| @include at-media(desktop) { | ||
| @include grid-col(4); | ||
| } | ||
|
|
||
| .jcc-location_detail__main + & { | ||
| @include at-media-max(desktop) { | ||
| @include u-margin-top(10); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .jcc-location_detail__aside-bar { | ||
| @include u-display($dash-color: map-get($_config, aside-dash-visibility)); | ||
| @include add-dash($dash-position: "above-center", $dash-width: 100%); | ||
| @include u-padding-top(4); | ||
| @include u-text-align(left); | ||
| } | ||
|
|
||
| .jcc-location_detail__aside-title { | ||
| @include u-margin-top(map-get($_config, aside-title-margin-top)); | ||
| @include u-color(map-get($_config, aside-title)); | ||
| @include u-font-size(location_detail, sm); | ||
| @include u-text(uppercase); | ||
| letter-spacing: 3.84615px; | ||
| } | ||
|
|
||
| .jcc-location_detail__aside-text { | ||
| @include u-color(base-dark); | ||
|
|
||
| p { | ||
| @include typeset(location_detail, xs, 6); | ||
| @include at-media(desktop) { | ||
| @include u-font-size(location_detail, sm); | ||
| } | ||
| @include u-margin-bottom(3); | ||
| @include u-margin-top(2); | ||
| } | ||
|
|
||
| h4 { | ||
| @extend .jcc-location_detail__aside-title; | ||
| @include u-margin-bottom(1); | ||
| @include u-margin-top(3); | ||
| } | ||
|
|
||
| ul li { | ||
| @include u-margin-top(1); | ||
| } | ||
| } |
65 changes: 65 additions & 0 deletions
65
source/_patterns/02-molecules/location-details/location-details.twig
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| {# | ||
| /** | ||
| * Available variables: | ||
| * - location_detail - primary variable | ||
| * - main: the main content | ||
| * - title: the title | ||
| * - lead: lead text | ||
| * - text: the text | ||
| * - aside: secondary content | ||
| * - title: the title | ||
| * - text: the text | ||
| * - classes: array of classes to add to component | ||
| */ | ||
| #} | ||
|
|
||
| {% set classes = [ | ||
| 'jcc-body', | ||
| ]|merge(location_detail.classes|default([''])) %} | ||
|
|
||
| {% set content %} | ||
| <div class="{{ classes|join(' ')|trim }}"> | ||
| <div class="jcc-body__content jcc-location-page"> | ||
| <div class="jcc-body__main"> | ||
| {% if location_details.main.title or location_details.main.lead %} | ||
| {% include "@molecules/section/section-heading.twig" with { | ||
| section_heading: { | ||
| title: location_details.main.title, | ||
| lead: location_details.main.lead, | ||
| width: "partial", | ||
| } | ||
| } %} | ||
| {% endif %} | ||
| {% if location_details.main.enteries %} | ||
| {% set sections = location_details.main %} | ||
| {% include '@organisms/sections/sections.twig' with { | ||
| sections: sections | ||
| } %} | ||
| {% endif %} | ||
| </div> | ||
|
|
||
| {% if location_details.aside.title or location_details.aside.text or location_details.aside.enteries %} | ||
| <aside class="jcc-body__aside"> | ||
| <div class="jcc-body__aside-bar jcc-location-page"></div> | ||
| {% if location_details.aside.title %} | ||
| <h4 class="jcc-body_detail__aside-title">{{ location_details.aside.title }}</h4> | ||
| {% endif %} | ||
|
|
||
| {% if location_details.aside.enteries %} | ||
| {% include "@organisms/sections/sections.twig" with { | ||
| sections: location_details.aside | ||
| } %} | ||
| {% endif %} | ||
| </aside> | ||
| {% endif %} | ||
| </div> | ||
| </div> | ||
| {% endset %} | ||
|
|
||
|
|
||
|
|
||
| {% include "@molecules/section/section.twig" with { | ||
| section: { | ||
| content: content | ||
| } | ||
| } %} |
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
Oops, something went wrong.