Skip to content

Commit

Permalink
Merge pull request #384 from engagingnewsproject/feature-nav-color
Browse files Browse the repository at this point in the history 
Implementation of customisation settings secondary navbar
  • Loading branch information
@luukee
luukee authored Feb 24, 2025
2 parents 7624643 + 45e0b57 commit fa9f2b7
Show file tree
Hide file tree
Showing 7 changed files with 222 additions and 30 deletions.
167 changes: 165 additions & 2 deletions wp-content/themes/engage-2-x/acf-json/group_67994fb691c82.json
View file
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
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

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

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion wp-content/themes/engage-2-x/templates/menu.twig
View file
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
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
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>

0 comments on commit fa9f2b7

Please sign in to comment.