Commit d1b1cfc2 authored by effulgentsia's avatar effulgentsia
Browse files

Issue #3158854 by bnjmnm, lauriii, Gábor Hojtsy, KondratievaS, DyanneNova,...

Issue #3158854 by bnjmnm, lauriii, Gábor Hojtsy, KondratievaS, DyanneNova, anu.a_95, saschaeggi, katherined, ckrina, shaal, nod_, yoroy: Node form: address chasm between main form and meta
parent 743cb621
......@@ -79,6 +79,16 @@ libraries-override:
theme:
css/field_ui.admin.css: css/theme/field-ui.admin.css
node/drupal.node:
css:
layout:
css/node.module.css: false
node/form:
css:
layout:
css/node.module.css: false
views_ui/admin.styling:
css:
component:
......
......@@ -9,29 +9,53 @@
* Layout overrides for node add/edit form.
*/
.layout-region-node-footer__content {
margin-top: 1.5em;
.layout-region {
box-sizing: border-box;
}
.layout-region--node-footer .layout-region__content {
margin-top: 1.5rem;
}
/**
* Widescreen
*
* Both of the following media queries must *exactly* match what is in
* node.module.css. This is rather crazy.
*
* @todo Figure out how to reduce media query duplication across files
* and modules. Layout styles only allowed in themes?
* Wide screens
*/
@media
screen and (min-width: 780px), (orientation: landscape) and (min-device-height: 780px) {
.layout-region-node-footer__content {
margin-top: 0.5em;
@media screen and (min-width: 61rem) {
.layout-region--node-main,
.layout-region--node-footer {
float: left; /* LTR */
width: calc(100% - 22.5rem);
padding-right: 1.5rem; /* LTR */
}
[dir="rtl"] .layout-region--node-main,
[dir="rtl"] .layout-region--node-footer {
float: right;
padding-right: 0;
padding-left: 1.5rem;
}
}
/* Push sidebar down to horizontal align with form section */
.layout-region--node-main .layout-region__content,
.layout-region--node-footer .layout-region__content {
max-width: 48rem;
margin-right: auto;
margin-left: auto;
}
.layout-region-node-secondary {
margin-top: 1.5rem;
.layout-region--node-footer .layout-region__content {
margin-top: 0.5rem;
}
.layout-region--node-secondary {
float: right; /* LTR */
width: 22.5rem;
}
[dir="rtl"] .layout-region--node-secondary {
float: left;
}
/* Push sidebar down to horizontal align with form section */
.layout-region--node-secondary {
margin-top: 1.5rem;
}
}
......@@ -4,28 +4,56 @@
@import "../base/variables.pcss.css";
.layout-region-node-footer__content {
margin-top: 1.5em;
:root {
--node-meta-width: 22.5rem;
}
.layout-region {
box-sizing: border-box;
}
.layout-region--node-footer .layout-region__content {
margin-top: var(--space-l);
}
/**
* Widescreen
*
* Both of the following media queries must *exactly* match what is in
* node.module.css. This is rather crazy.
*
* @todo Figure out how to reduce media query duplication across files
* and modules. Layout styles only allowed in themes?
* Wide screens
*/
@media
screen and (min-width: 780px),
(orientation: landscape) and (min-device-height: 780px) {
.layout-region-node-footer__content {
margin-top: 0.5em;
@media screen and (min-width: 61rem) {
.layout-region--node-main,
.layout-region--node-footer {
float: left; /* LTR */
width: calc(100% - var(--node-meta-width));
padding-right: var(--space-l); /* LTR */
}
[dir="rtl"] .layout-region--node-main,
[dir="rtl"] .layout-region--node-footer {
float: right;
padding-right: 0;
padding-left: var(--space-l);
}
}
/* Push sidebar down to horizontal align with form section */
.layout-region-node-secondary {
margin-top: var(--space-l);
.layout-region--node-main .layout-region__content,
.layout-region--node-footer .layout-region__content {
max-width: 48rem;
margin-right: auto;
margin-left: auto;
}
.layout-region--node-footer .layout-region__content {
margin-top: var(--space-xs);
}
.layout-region--node-secondary {
float: right; /* LTR */
width: var(--node-meta-width);
}
[dir="rtl"] .layout-region--node-secondary {
float: left;
}
/* Push sidebar down to horizontal align with form section */
.layout-region--node-secondary {
margin-top: var(--space-l);
}
}
......@@ -16,14 +16,18 @@
*/
#}
<div class="layout-node-form clearfix">
<div class="layout-region layout-region-node-main">
{{ form|without('advanced', 'footer', 'actions') }}
<div class="layout-region layout-region--node-main">
<div class="layout-region__content">
{{ form|without('advanced', 'footer', 'actions') }}
</div>
</div>
<div class="layout-region layout-region-node-secondary">
{{ form.advanced }}
<div class="layout-region layout-region--node-secondary">
<div class="layout-region__content">
{{ form.advanced }}
</div>
</div>
<div class="layout-region layout-region-node-footer">
<div class="layout-region-node-footer__content">
<div class="layout-region layout-region--node-footer">
<div class="layout-region__content">
<div class="divider"></div>
{{ form.footer }}
{{ form.actions }}
......
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