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

Implementation of customisation settings secondary navbar #384

Merged
merged 2 commits into from
Feb 24, 2025
Merged

Implementation of customisation settings secondary navbar #384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
372b198
implement customisation settings secondary navbar
DavidLungu Feb 19, 2025
45e0b57
implement customisable url redirect
DavidLungu Feb 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 165 additions & 2 deletions wp-content/themes/engage-2-x/acf-json/group_67994fb691c82.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"class": "",
"id": ""
},
"layout": "block",
"layout": "row",
"sub_fields": [
{
"key": "field_679a6479f28c8",
Expand Down Expand Up @@ -76,6 +76,169 @@
"allow_in_bindings": 0
}
]
},
{
"key": "field_67acd0114e2c3",
"label": "Navigation Settings",
"name": "navigation_settings",
"aria-label": "",
"type": "group",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"layout": "row",
"sub_fields": [
{
"key": "field_67b3acea66ba4",
"label": "Link Color",
"name": "link_color",
"aria-label": "",
"type": "color_picker",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "#bf5700",
"enable_opacity": 0,
"return_format": "string",
"allow_in_bindings": 0
},
{
"key": "field_67b3bb55ef097",
"label": "Button Color",
"name": "button_color",
"aria-label": "",
"type": "color_picker",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "#bf5700",
"enable_opacity": 0,
"return_format": "string",
"allow_in_bindings": 0
},
{
"key": "field_67b4e05a12962",
"label": "Button Color (Dark)",
"name": "button_color_dark",
"aria-label": "",
"type": "color_picker",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "#993F00",
"enable_opacity": 0,
"return_format": "string",
"allow_in_bindings": 0
},
{
"key": "field_67b63b4f73685",
"label": "Brand Bar",
"name": "brand_bar",
"aria-label": "",
"type": "group",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"layout": "table",
"sub_fields": [
{
"key": "field_67b4e220f1926",
"label": "BrandBar Logo (UT)",
"name": "brandbar_logo_ut",
"aria-label": "",
"type": "image",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "array",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": "",
"max_height": "",
"max_size": "",
"mime_types": "",
"allow_in_bindings": 0,
"preview_size": "medium"
},
{
"key": "field_67b4e544521ea",
"label": "BrandBar Logo (Moody)",
"name": "brandbar_logo_moody",
"aria-label": "",
"type": "image",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "array",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": "",
"max_height": "",
"max_size": "",
"mime_types": "",
"allow_in_bindings": 0,
"preview_size": "medium"
},
{
"key": "field_67b63b7f73686",
"label": "BrandBar Redirect",
"name": "brandbar_redirect",
"aria-label": "",
"type": "url",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "https:\/\/moody.utexas.edu",
"allow_in_bindings": 0,
"placeholder": ""
}
]
}
]
}
],
"location": [
Expand All @@ -96,5 +259,5 @@
"active": true,
"description": "",
"show_in_rest": 0,
"modified": 1738173507
"modified": 1739996649
}
8 changes: 4 additions & 4 deletions wp-content/themes/engage-2-x/assets/scss/components/_vertical.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,17 +41,17 @@
}

&.btn--ghost {
border-color: map-get($verticalColors, $name);
color: map-get($verticalColors, $name);
fill: map-get($verticalColors, $name);
// border-color: map-get($verticalColors, $name);
// color: map-get($verticalColors, $name);
// fill: map-get($verticalColors, $name);

&:hover,
&:focus {
border-color: darken(map-get($verticalColors, $name), 10%);
}

&:active {
border-color: lighten(map-get($verticalColors, $name), 5%);
// border-color: lighten(map-get($verticalColors, $name), 5%);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion wp-content/themes/engage-2-x/dist/css/app.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion wp-content/themes/engage-2-x/dist/css/app.css.map
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion wp-content/themes/engage-2-x/templates/menu.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@
<ul class="menu__list">
{% for item in menu.items %}
<li {% if item.children %} tabindex="{{0}}" {% endif %} class="menu__item {{ item.classes | join(' ') }}">
<a class="menu__link" target="{{ item.target }}" {% if item.link %} href="{{ item.link }}" {% endif %}>{{ item.title }}</a>
<a class="menu__link" target="{{ item.target }}" {% if item.link %} href="{{ item.link }}"{% endif %} {% if item.classes[0] == "btn" %}style="color: {{ options.navigation_settings.link_color }}"{% endif %}
>{{ item.title }}</a>
{% if item.children %}
<ul class="menu__sublist {{ collapsable ? " collapsable" }}">
{% for child in item.children %}
Expand Down
45 changes: 24 additions & 21 deletions wp-content/themes/engage-2-x/templates/partial/brandbar.twig
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@DavidLungu Everything looks great! A couple small notes.

What about creating a ACF for the link URL for the Texas Moody logo in the brandbar?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, you might want to check the vertical alignment of the brandbar logos.

Screenshot 2025-02-19 at 11 01 50 AM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not too sure what's going on with the logo there. On my part, everything seems to be fine.
image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might be something on my install or logo images that are different. We can push it to the dev site and see how it looks. Thanks David 👍

Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,28 @@
This is the topbar with the "TEXAS Moody" link
#}
<div class="brandbar">
<a href="https://moody.utexas.edu" class="brandbar__link">
<span class="sr-text">University of Texas at Austin</span>
<span class="brandbar__logo">
<picture>
<source srcset="{{ theme.link }}/assets/img/brandbar/brandbar-logo.webp" type="image/webp">
<img src="{{ theme.link }}/assets/img/brandbar/brandbar-logo.png"
alt="University of Texas at Austin"
width="112"
height="27"
decoding="async">
</picture>
<picture>
<source srcset="{{ theme.link }}/assets/img/brandbar/brandbar-logo-2.webp" type="image/webp">
<img src="{{ theme.link }}/assets/img/brandbar/brandbar-logo-2.png"
alt="Moody College of Communication"
width="85"
height="27"
decoding="async">
</picture>
</span>
</a>

{% if options.navigation_settings.brand_bar %}
<a href="{{options.navigation_settings.brand_bar.brandbar_redirect}}" class="brandbar__link">
<span class="sr-text">University of Texas at Austin</span>
<span class="brandbar__logo">
<picture>
<source srcset="{{options.navigation_settings.brand_bar.brandbar_logo_ut.url}}" type="image/webp">
<img src="{{options.navigation_settings.brand_bar.brandbar_logo_ut.url}}"
alt="University of Texas at Austin"
width="112"
height="27"
decoding="async">
</picture>
<picture>
<source srcset="{{options.navigation_settings.brand_bar.brandbar_logo_moody.url}}" type="image/webp">
<img src="{{options.navigation_settings.brand_bar.brandbar_logo_moody.url}}"
alt="Moody College of Communication"
width="85"
height="27"
decoding="async">
</picture>
</span>
</a>
{% endif %}
</div>
25 changes: 25 additions & 0 deletions wp-content/themes/engage-2-x/templates/partial/search.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,29 @@
<label class="screen-reader-text" for="s">Search for:</label>
<input class="searchform__input" type="search" placeholder="Search" value="{{ function('get_search_query') }}" aria-label="Search" name="s" id="s"/>
<button class="btn--ghost btn--sm" type="submit" id="searchsubmit">Search</button>
{% if options.navigation_settings.button_color %}
<style>
.btn--ghost,
input.btn--ghost {
color: {{ options.navigation_settings.button_color }};
fill: {{ options.navigation_settings.button_color }};
border: 2px solid {{ options.navigation_settings.button_color }};
}
.btn--ghost:hover,
.btn--ghost:focus {
border-color: {{ options.navigation_settings.button_color_dark }};
color: {{ options.navigation_settings.button_color_dark }};
fill: {{ options.navigation_settings.button_color_dark }};
}
.btn--ghost:active {
border-color: {{ options.navigation_settings.button_color_dark }};
color: {{ options.navigation_settings.button_color_dark }};
fill: {{ options.navigation_settings.button_color_dark }};
}
</style>
{% endif %}
</form>