Commit 184d4b42 authored by alexpott's avatar alexpott

Issue #2173527 by idflood, scresante, rpayanm, mgifford, Sam152, Wim Leers:...

Issue #2173527 by idflood, scresante, rpayanm, mgifford, Sam152, Wim Leers: The Menu-Toolbar area should be refactored so that Tray items are nested in the same container as their associated parent Toolbar item
parent c1b4c032
......@@ -150,7 +150,7 @@
}
@media only screen and (min-width: 16.5em) {
.toolbar .toolbar-bar .toolbar-icon {
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
margin-left: 0;
margin-right: 0;
padding-left: 0;
......@@ -158,36 +158,42 @@
text-indent: -9999px;
width: 4em;
}
.toolbar .toolbar-bar .toolbar-icon:before {
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
background-size: 42% auto;
left: 0; /* LTR */
width: 100%;
}
[dir="rtl"] .toolbar .toolbar-bar .toolbar-icon:before {
.no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
background-size: auto auto;
}
[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
left: auto;
right: 0;
}
}
@media only screen and (min-width: 36em) {
.toolbar .toolbar-bar .toolbar-icon {
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
background-position: left center; /* LTR */
padding-left: 2.75em; /* LTR */
padding-right: 1.3333em; /* LTR */
text-indent: 0;
width: auto;
}
[dir="rtl"] .toolbar .toolbar-bar .toolbar-icon {
[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
background-position: right center;
padding-left: 1.3333em;
padding-right: 2.75em;
}
.toolbar .toolbar-bar .toolbar-icon:before {
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
background-size: 100% auto;
left: 0.6667em; /* LTR */
width: 20px;
}
[dir="rtl"] .toolbar .toolbar-bar .toolbar-icon:before {
.no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
background-size: auto auto;
}
[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
left: 0;
right: 0.6667em;
}
......
......@@ -170,6 +170,11 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
left: auto;
right: 0;
}
/* Layer the links just above the toolbar-tray. */
.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon{
position: relative;
z-index: 502;
}
/* Hide secondary menus when the tray is horizontal. */
.toolbar-oriented .toolbar-tray-horizontal .menu-item ul {
display: none;
......
......@@ -238,13 +238,13 @@
adjustPlacement: function () {
var $trays = this.$el.find('.toolbar-tray');
if (!this.model.get('isOriented')) {
$trays.css('padding-top', 0);
$trays.css('margin-top', 0);
$trays.removeClass('toolbar-tray-horizontal').addClass('toolbar-tray-vertical');
}
else {
// The toolbar container is invisible. Its placement is used to
// determine the container for the trays.
$trays.css('padding-top', this.$el.find('.toolbar-bar').outerHeight());
$trays.css('margin-top', this.$el.find('.toolbar-bar').outerHeight());
}
},
......
......@@ -25,23 +25,22 @@
<div{{ attributes.addClass('toolbar') }}>
<nav{{ toolbar_attributes.addClass('toolbar-bar') }}>
<h2 class="visually-hidden">{{ toolbar_heading }}</h2>
{% for tab in tabs %}
<div{{ tab.attributes.addClass('toolbar-tab') }}>{{ tab.link }}</div>
{% for key, tab in tabs %}
{% set tray = trays[key] %}
<div{{ tab.attributes.addClass('toolbar-tab') }}>
{{ tab.link }}
{% spaceless %}
<div{{ tray.attributes }}>
<nav class="toolbar-lining clearfix" role="navigation">
{% if tray.label %}
<h3 class="toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
{% endif %}
{{ tray.links }}
</nav>
</div>
{% endspaceless %}
</div>
{% endfor %}
</nav>
{% for tray in trays %}
{% spaceless %}
<div{{ tray.attributes }}>
{% if tray.label %}
<nav class="toolbar-lining" role="navigation" aria-label="{{ tray.label }}">
<h3 class="toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
{% else %}
<nav class="toolbar-lining" role="navigation">
{% endif %}
{{ tray.links }}
</nav>
</div>
{% endspaceless %}
{% endfor %}
{{ remainder }}
</div>
......@@ -23,23 +23,22 @@
<div{{ attributes.addClass('toolbar') }}>
<nav{{ toolbar_attributes.addClass('toolbar-bar', 'clearfix') }}>
<h2 class="visually-hidden">{{ toolbar_heading }}</h2>
{% for tab in tabs %}
<div{{ tab.attributes.addClass('toolbar-tab') }}>{{ tab.link }}</div>
{% for key, tab in tabs %}
{% set tray = trays[key] %}
<div{{ tab.attributes.addClass('toolbar-tab') }}>
{{ tab.link }}
{% spaceless %}
<div{{ tray.attributes }}>
<nav class="toolbar-lining clearfix" role="navigation">
{% if tray.label %}
<h3 class="toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
{% endif %}
{{ tray.links }}
</nav>
</div>
{% endspaceless %}
</div>
{% endfor %}
</nav>
{% for tray in trays %}
{% spaceless %}
<div{{ tray.attributes }}>
{% if tray.label %}
<nav class="toolbar-lining clearfix" role="navigation" aria-label="{{ tray.label }}">
<h3 class="toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
{% else %}
<nav class="toolbar-lining clearfix" role="navigation">
{% endif %}
{{ tray.links }}
</nav>
</div>
{% endspaceless %}
{% endfor %}
{{ remainder }}
</div>
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