Skip to content

GitLab

Commit bda47682 authored by Ken Hawkins's avatar Ken Hawkins
Browse files

Hotfixes for alpha mega menu demo and underlines 

- component links
- demo mega menu content
- mega men tab underlines
parent 2fdff722
Pipeline #215900 passed with stages
in 9 minutes and 1 second
Hide whitespace changes
Inline Side-by-side
Showing with 50 additions and 38 deletions
components/vf-mega-menu/vf-mega-menu.njk
View file @ bda47682
......@@ -14,13 +14,13 @@
<ul class="vf-navigation__list | vf-list | vf-cluster__inner">
<li class="vf-navigation__item">
<a class="vf-navigation__link vf-mega-menu__link vf-mega-menu__link--has-section"
data-vf-js-mega-menu-section-id="topics-content-section" href="/topics">
data-vf-js-mega-menu-section-id="demo-topics-content-section" href="/topics">
Topics
</a>
</li>
<li class="vf-navigation__item">
<a class="vf-navigation__link vf-mega-menu__link vf-mega-menu__link--has-section"
data-vf-js-mega-menu-section-id="organization-content-section" href="/organization">
data-vf-js-mega-menu-section-id="demo-organization-content-section" href="/organization">
Organization structure
</a>
</li>
......@@ -31,7 +31,7 @@
<a href="http://www.embl.org/about" class="vf-navigation__link">About us</a>
</li>
<li class="vf-navigation__item">
<a class="vf-navigation__link vf-mega-menu__link" data-vf-js-mega-menu-section-id="search-content-section" href="/search">
<a class="vf-navigation__link vf-mega-menu__link" data-vf-js-mega-menu-section-id="demo-search-content-section" href="/search">
Search
</a>
</li>
......@@ -40,19 +40,16 @@
</header>
<div class="vf-mega-menu__content">
<div class="vf-mega-menu__content__section" data-vf-js-mega-menu-section="topics-content-section" role="menu" aria-hidden="true">
<div class="vf-mega-menu__content__section" data-vf-js-mega-menu-section="demo-topics-content-section" role="menu" aria-hidden="true">
<section class="vf-summary-container | embl-grid">
<div class="vf-section-header">
<h2 class="vf-section-header__heading">EMBL topics</h2>
<p class="vf-section-header__subheading">A unique approach to scientific services in Europe</p>
<p class="vf-section-header__text">A unique approach to scientific services in Europe</p>
</div>
<div class="vf-section-content | vf-grid vf-grid__col-3">
<div>
<nav class="vf-navigation vf-navigation--main">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner">
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link" aria-current="page">Home</a>
</li>
<ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
</li>
......@@ -70,10 +67,7 @@
</div>
<div>
<nav class="vf-navigation vf-navigation--main">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner">
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link" aria-current="page">Home</a>
</li>
<ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
</li>
......@@ -100,10 +94,7 @@
</div>
<div>
<nav class="vf-navigation vf-navigation--main">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner">
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link" aria-current="page">Home</a>
</li>
<ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
</li>
......@@ -131,22 +122,21 @@
</div>
</section>
</div>
<div class="vf-mega-menu__content__section" data-vf-js-mega-menu-section="organization-content-section" role="menu" aria-hidden="true">
<div class="vf-mega-menu__content__section" data-vf-js-mega-menu-section="demo-organization-content-section" role="menu" aria-hidden="true">
<section class="vf-summary-container | embl-grid">
<div class="vf-section-header">
<h2 class="vf-section-header__heading">Our organization</h2>
<p>
<strong>We have strong organization here, like, really really strong
one</strong>
</p>
<p class="vf-section-header__text">About our org</p>
</div>
<div class="vf-section-content | vf-grid vf-grid__col-3">
<div>
<nav class="vf-navigation vf-navigation--main">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner">
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link" aria-current="page">Home</a>
</li>
<ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
{% render '@vf-section-header', {
"section_title": "A header",
"id": "",
"href": ""
} %}
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
</li>
......@@ -173,10 +163,12 @@
</div>
<div>
<nav class="vf-navigation vf-navigation--main">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner">
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link" aria-current="page">Home</a>
</li>
<ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
{% render '@vf-section-header', {
"section_title": "A header",
"id": "",
"href": ""
} %}
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
</li>
......@@ -203,10 +195,12 @@
</div>
<div>
<nav class="vf-navigation vf-navigation--main">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner">
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link" aria-current="page">Home</a>
</li>
<ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
{% render '@vf-section-header', {
"section_title": "A header",
"id": "",
"href": ""
} %}
<li class="vf-navigation__item">
<a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
</li>
......@@ -234,7 +228,7 @@
</div>
</section>
</div>
<div class="vf-mega-menu__content__section" data-vf-js-mega-menu-section="search-content-section" role="menu" aria-hidden="true">
<div class="vf-mega-menu__content__section" data-vf-js-mega-menu-section="demo-search-content-section" role="menu" aria-hidden="true">
<form action="#" class="vf-form vf-form--search vf-form--search--responsive | vf-sidebar vf-sidebar--end">
<div class="vf-sidebar__inner">
<div class="vf-form__item">
......
components/vf-mega-menu/vf-mega-menu.scss
View file @ bda47682
......@@ -42,11 +42,26 @@
}
display: flex;
&:focus,
&:hover,
&.is-expanded,
&.is-expanded:hover {
text-shadow: 1px 0 0 currentColor; // faux bold so there won't be any layout shift
text-decoration: underline;
text-decoration-thickness: 4px;
text-decoration-color: interactive-color(default);
text-underline-offset: .5em;
text-underline-position: under;
}
&:hover {
color: interactive-color(default);
}
&.is-expanded,
&.is-expanded:hover {
color: unset;
}
}
.vf-mega-menu__link--has-section:after {
......
tools/vf-component-library/src/site/_includes/layouts/base.njk
View file @ bda47682
......@@ -190,7 +190,7 @@
{%- for item in fractalEnvironment.localComponents | sort(false, true, 'title') %}
{%- if item.isHidden == false and item.variants.items[0].context['component-type'] == "container" %}
<li class="vf-navigation__item">
<a class="vf-navigation__link" href="{{ item.handle}}">{{ item.title }}</a>
<a class="vf-navigation__link" href="/components/{{ item.handle}}">{{ item.title }}</a>
</li>
{% endif %}
{% endfor -%}
......@@ -206,7 +206,7 @@
{%- for item in fractalEnvironment.localComponents | sort(false, true, 'title') %}
{%- if item.isHidden == false and item.variants.items[0].context['component-type'] == type %}
<li class="vf-navigation__item">
<a class="vf-navigation__link" href="{{ item.handle}}">{{ item.title }}</a>
<a class="vf-navigation__link" href="/components/{{ item.handle}}">{{ item.title }}</a>
</li>
{% endif %}
{% endfor -%}
......@@ -223,7 +223,7 @@
{%- for item in fractalEnvironment.localComponents | sort(false, true, 'title') %}
{%- if item.isHidden == false and item.variants.items[0].context['component-type'] == type %}
<li class="vf-navigation__item">
<a class="vf-navigation__link" href="{{ item.handle}}">{{ item.title }}</a>
<a class="vf-navigation__link" href="/components/{{ item.handle}}">{{ item.title }}</a>
</li>
{% endif %}
{% endfor -%}
......@@ -236,9 +236,12 @@
{% set context = { "section_title": "Forms", "href": "/components#form" } %}
{% include "vf-core-components/vf-section-header/vf-section-header.njk" %}
<div><hr class="vf-divider"></div>
{% set context = { "section_title": "Utility", "href": "/components#utility" } %}
{% include "vf-core-components/vf-section-header/vf-section-header.njk" %}
<div><hr class="vf-divider"></div>
{% set context = { "section_title": "Tools", "href": "/components#tools" } %}
{% include "vf-core-components/vf-section-header/vf-section-header.njk" %}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment