Skip to content

Commit

Permalink
Merge pull request #29 from andreyzb/main
Browse files Browse the repository at this point in the history
fix: LB Locations bugfix
  • Loading branch information
podarok authored May 10, 2023
2 parents 85cb7d0 + 5e6a4d3 commit 237a60b
Show file tree
Hide file tree
Showing 10 changed files with 970 additions and 234 deletions.
359 changes: 209 additions & 150 deletions modules/openy_map_lb/assets/css/openy-map-lb.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion modules/openy_map_lb/assets/js/map.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion modules/openy_map_lb/assets/js/map.js.map

Large diffs are not rendered by default.

638 changes: 611 additions & 27 deletions modules/openy_map_lb/assets/src/js/map.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion modules/openy_map_lb/assets/src/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "map.js",
"version": "1.0.0",
"version": "1.0.1",
"description": "Open Y LB map library",
"main": "map.js",
"scripts": {
Expand Down
140 changes: 106 additions & 34 deletions modules/openy_map_lb/assets/src/scss/openy-map-lb.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@import "_variables";

.block-openy-map {
font-family: var(--ylb-font-family-cachet);
.openy-map-wrapper {
margin-bottom: 40px;
}
Expand All @@ -17,7 +18,7 @@
background-color: #0060AF;
color: #ffffff;
padding: 40px 0 20px;
@include media-breakpoint-up('md'){
@include media-breakpoint-up(md){
padding: 20px 0;
}

Expand Down Expand Up @@ -45,7 +46,7 @@
}
}
.tags-and-amenities {
@include media-breakpoint-down('md'){
@include media-breakpoint-down(sm){
margin-top: 40px;
.tags-filters-col {
border-bottom: 1px solid #ffffff;
Expand All @@ -58,9 +59,10 @@

.tag_filters {
.btn {
font-size: 18px;
padding: 6px 20px;
margin-right: 30px;
@include media-breakpoint-down('md'){
@include media-breakpoint-down(sm){
margin-bottom: 20px;
}
color: #ffffff;
Expand Down Expand Up @@ -96,31 +98,50 @@
}

#amenities-filter {
font-family: var(--ylb-font-family-medium);
width: 100%;
z-index: 10;
background-color: #ffffff;
color: #000000;
.row {
padding: 40px 0;
@include media-breakpoint-down('md'){
padding-bottom: 0;
@include media-breakpoint-down(sm){
padding: 0;
}
}
.amenities-plain-list {
display: table-column;
list-style: none;
padding: 0;
columns: 5;
@include media-breakpoint-down(sm){
columns: 1;
}
}
.amenities-group {
@include media-breakpoint-down('md'){
@include media-breakpoint-down(sm){
border-bottom: 1px solid #231F204C;
padding-left: 30px;
}
.group-header {
text-transform: uppercase;
font-size: 16px;
line-height: 26px;
margin-bottom: 21px;
}
ul {
margin-bottom: 20px;
}

header {
position: relative;
@include media-breakpoint-up('md'){
@include media-breakpoint-up(md){
margin-bottom: 20px;
i {
display: none;
}
}

@include media-breakpoint-down('md'){
@include media-breakpoint-down(sm){
padding: 20px 0;
i {
display: block;
Expand All @@ -130,21 +151,59 @@
}
}
}

ul {
padding: 0;
margin: 0;
list-style: none;
li {
}
ul {
padding: 0;
margin: 0;
list-style: none;
li {
label {
cursor: pointer;
padding-left: 33px;
position: relative;
@include media-breakpoint-down(sm){
margin-bottom: 20px;
}
input[type="checkbox"] {
margin-right: 5px;
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border: 1px solid #231F2066;
border-radius: 3px;
&:after {
content: "";
position: absolute;
display: none;
left: 9px;
top: 2px;
width: 7px;
height: 15px;
border: solid #2F2F2F;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
}
/* Show the checkmark when checked */
input:checked ~ .checkmark:after {
display: block;
}

}
}
}

}
.selected-amenities {
padding: 0 10px;
.btn {
margin-right: 25px;
line-height: 28px;
Expand All @@ -167,7 +226,7 @@
}
.views-row {
.node {
font-family: var(--ylb-font-family-cachet);
font-size: 18px;
border-radius: 8px;
background-color: #FFFFFF;
box-shadow: 0 0 11px 0 rgba(0,0,0,0.15);
Expand All @@ -187,24 +246,37 @@
margin-right: 10px;
}
}
.directions {
margin-bottom: 20px;
}
.phone {
font-size: 18px;
line-height: 28px;
letter-spacing: -1px;
.field-location-phone {
display: inline;
a {
font-weight: normal;
.node__content {
a {
text-decoration: underline;
}
address {
margin-bottom: 0;
.fa-map-marker-alt {
display: none;
}
}
}
.hours {}
.field-branch-hours {
h4 {
display: none;

.directions {
margin-bottom: 20px;
padding-left: 25px;
}
.phone {
font-size: 18px;
line-height: 28px;
letter-spacing: -1px;
.field-location-phone {
display: inline;
a {
font-weight: normal;
}
}
}
.hours {}
.field-branch-hours {
h4 {
display: none;
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion modules/openy_map_lb/openy_map_lb.info.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ name: Y Layout Builder - Open Y Map
type: module
description: Renders a map with locations. Provides Layout Builder block for Locations page.
core_version_requirement: ^8.8 || ^9 || ^10
version: 1.0.0
version: 1.0.1
package: 'YMCA Website Services'
dependencies:
- openy_map:openy_map
Expand Down
2 changes: 1 addition & 1 deletion modules/openy_map_lb/openy_map_lb.libraries.yml
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
openy_map:
version: 1.0
version: 1.0.1
js:
assets/js/map.js: { preprocess: true }
css:
Expand Down
24 changes: 16 additions & 8 deletions modules/openy_map_lb/src/Plugin/Block/LocationFinder.php
Original file line number Diff line number Diff line change
Expand Up @@ -153,21 +153,29 @@ protected function getFinderView() {
* @return array
*/
protected function getAmenities() {
$result = [];
$result = [
'type' => 'plain',
'items' => [],
];
$terms = $this->taxonomyStorage->loadTree(self::AMENITIES_VOCABULARY, 0, 2, TRUE);
$max_depth = max(array_column($terms, 'depth'));
if ($max_depth > 0) {
$result['type'] = 'groups';
}

foreach ($terms as $term) {
/** @var \Drupal\taxonomy\Entity\Term $term */
if ( $term->depth === 0 ) {
$result[$term->id()] = [
'group_name' => $term->label(),
'items' => [],
$result['items'][$term->id()] = [
'item' => $term,
'children' => [],
];
}
}
foreach ($terms as $term) {
if ($term->depth === 1) {
else {
$parent = array_shift($term->parents);
$result[$parent]['items'][$term->id()] = $term->label();
$result['items'][$parent]['children'][$term->id()] = [
'item' => $term
];
}
}
return $result;
Expand Down
33 changes: 23 additions & 10 deletions modules/openy_map_lb/templates/openy-map-lb.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -49,17 +49,30 @@
<div class="position-absolute amenities-filter collapse" id="amenities-filter">
<div class="container">
<div class="row">
{% for group_term_id, group in element['#amenities'] %}
<div class="col-md-2 col-lg-2 amenities-group" data-total="{{ group['items']|length }}">
<div class="d-none d-md-block"><strong>{{ group['group_name'] }}</strong></div>
<header class="d-block d-md-none" data-toggle="collapse" href="#group-{{ group['group_name']|clean_id }}" role="button" aria-expanded="false" aria-controls="group-{{ group['group_name']|clean_id }}"><strong>{{ group['group_name'] }}</strong><i class="fas fa-plus"></i></header>
<ul class="collapse d-md-block" id="group-{{ group['group_name']|clean_id }}">
{% for item_id, item_label in group['items'] %}
<li><label><input type="checkbox" name="field_location_amenities_target_id[{{ item_id }}]" value="{{ item_id }}">{{ item_label }}</label></li>
{% endfor %}
{% if element['#amenities']['type'] == 'plain' %}
<ul class="amenities-plain-list">
{% for item_id, item in element['#amenities']['items'] %}
<li>
<label>{{ item['item'].label() }}<input type="checkbox" name="field_location_amenities_target_id[{{ item_id }}]" value="{{ item_id }}"><span class="checkmark"></span></label>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
{% elseif element['#amenities']['type'] == 'groups' %}
{% for term_id, group in element['#amenities']['items'] %}
{% set label = group['item'].label() %}
<div class="col-md-3 col-lg-2 amenities-group" data-total="{{ group['children']|length }}">
<div class="group-header d-none d-md-block"><strong>{{ label }}</strong></div>
<header class="d-block d-md-none" data-toggle="collapse" href="#group-{{ label|clean_id }}" role="button" aria-expanded="false" aria-controls="group-{{ label|clean_id }}"><strong>{{ label }}</strong><i class="fas fa-plus"></i></header>
<ul class="collapse d-md-block" id="group-{{ label|clean_id }}">
{% for item_id, item in group['children'] %}
<li>
<label>{{ item['item'].label() }}<input type="checkbox" name="field_location_amenities_target_id[{{ item_id }}]" value="{{ item_id }}"><span class="checkmark"></span></label>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
{% endif %}
</div>
</div>
</div>
Expand Down

0 comments on commit 237a60b

Please sign in to comment.