Commit 7b58b93b authored by Dries's avatar Dries

Issue #1838156 by ry5n, swentel, sannejanssen: Implement the two-column layout...

Issue #1838156 by ry5n, swentel, sannejanssen: Implement the two-column layout for the new create content page.
parent e1ade192
......@@ -56,6 +56,7 @@ protected function prepareEntity(EntityInterface $node) {
* Overrides Drupal\Core\Entity\EntityFormController::form().
*/
public function form(array $form, array &$form_state, EntityInterface $node) {
$user_config = config('user.settings');
// Some special stuff when previewing a node.
if (isset($form_state['node_preview'])) {
......
/**
* @file
* Styles for administration pages.
*/
/**
* Node add/edit form layout
*/
/* Narrow screens */
.layout-region {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Wide screens */
@media
screen and (min-width: 780px),
(orientation: landscape) and (min-device-height: 780px) {
.layout-region-node-main,
.layout-region-node-footer {
float: left; /* LTR */
width: 65%;
padding-right: 2em;
}
.layout-region-node-secondary {
float: right; /* LTR */
width: 35%;
}
/* @todo File an issue to add a standard class to all text-like inputs */
.layout-region-node-secondary .form-autocomplete,
.layout-region-node-secondary .form-text,
.layout-region-node-secondary .form-tel,
.layout-region-node-secondary .form-email,
.layout-region-node-secondary .form-url,
.layout-region-node-secondary .form-search,
.layout-region-node-secondary .form-number,
.layout-region-node-secondary .form-color,
.layout-region-node-secondary textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
}
/**
* The vertical toolbar mode gets triggered for narrow screens, which throws off
* the intent of media queries written for the viewport width. When the vertical
* toolbar is on, we need to suppress layout for the original media width + the
* toolbar width (240px). In this case, 240px + 780px.
*/
@media
screen and (max-width: 1020px),
(orientation: landscape) and (max-device-height: 1020px) {
.toolbar-vertical .layout-region-node-main,
.toolbar-vertical .layout-region-node-footer,
.toolbar-vertical .layout-region-node-secondary {
float: none;
width: auto;
padding-right: 0;
}
}
......@@ -171,6 +171,11 @@ function node_theme() {
'node_recent_content' => array(
'variables' => array('node' => NULL),
),
'node_edit_form' => array(
'render element' => 'form',
'path' => drupal_get_path('module', 'node') . '/templates',
'template' => 'node-edit-form',
),
);
}
......
<?php
/**
* @file
* Two column template for the node add/edit form.
*
* Available variables:
* - $form: The actual form to print.
*/
hide($form['advanced']);
hide($form['actions']);
?>
<div class="layout-node-form clearfix">
<div class="layout-region layout-region-node-main">
<?php print drupal_render_children($form); ?>
</div>
<div class="layout-region layout-region-node-secondary">
<?php print render($form['advanced']); ?>
</div>
<div class="layout-region layout-region-node-footer">
<?php print render($form['actions']); ?>
</div>
</div>
core/modules/overlay/images/close.png

344 Bytes | W: | H:

core/modules/overlay/images/close.png

2.9 KB | W: | H:

core/modules/overlay/images/close.png
core/modules/overlay/images/close.png
core/modules/overlay/images/close.png
core/modules/overlay/images/close.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -22,8 +22,16 @@ html {
}
#overlay-close,
#overlay-close:hover {
background: transparent url(images/close-rtl.png) no-repeat;
background: transparent url(images/close.png) no-repeat;
border-top-right-radius: 0;
-webkit-border-top-left-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-bottomleft: 12px;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
background-color: #ffffff;
}
/**
......
......@@ -77,6 +77,14 @@
/* Replace with position:fixed to get a scrolling close button. */
position: absolute;
width: 26px;
-webkit-border-top-right-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
-moz-border-radius-topright: 12px;
-moz-border-radius-bottomright: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
background-color: #ffffff;
}
/**
......
......@@ -4,3 +4,35 @@ pre,
kbd {
font-size: 1em;
}
/* Node Add/Edit Page Layout */
.layout-node-form {
overflow: hidden;
}
.overlay .node-actions {
margin-bottom: 1em;
}
.node-main-content,
.node-actions {
padding: 0.5em 1.5em 0 1.5em;
}
/**
* 1. Applies the Position Is Everything technique for equal-height columns;
* @see http://www.positioniseverything.net/articles/onetruelayout/equalheight
* 2. When animating the height of elements within this region, prevent
* vertical jittering of elements further down in the document flow.
*/
.node-advanced-settings {
margin-bottom: -999em;
padding-bottom: 999em;
display: table;
-moz-box-shadow: inset 0.1em -1em 0.6em rgba(100, 100, 100, .1);
-webkit-box-shadow: inset 0.1em -1em 0.6em rgba(100, 100, 100, .1);
box-shadow: inset 0.1em -1em 0.6em rgba(100, 100, 100, .1);
border: none;
}
\ No newline at end of file
......@@ -205,3 +205,22 @@ div.add-or-remove-shortcuts {
}
/* @end */
/**
* Node Add/Edit Page Layout
*/
/* Narrow screens */
/*.overlay .layout-region-secondary {
-moz-box-shadow: inset -0.15em 0.3em .5em rgba(0, 0, 0, .1);
-webkit-box-shadow: inset -0.15em 0.3em .5em rgba(0, 0, 0, .1);
box-shadow: inset -0.15em 0.3em .5em rgba(0, 0, 0, .1);
}*/
/* Wide screens */
@media only screen and (min-width: 780px) {
.overlay [id="edit-additional-settings"] {
-webkit-box-shadow: inset -3px 3px 5px rgba(0, 0, 0, .15);
box-shadow: inset -3px 3px 5px rgba(0, 0, 0, .15);
}
}
......@@ -182,9 +182,10 @@ pre {
position: relative;
background-color: #e0e0d8;
}
#branding .breadcrumb {
.breadcrumb {
font-size: 0.846em;
padding-bottom: 5px;
line-height: 1em;
padding: 0;
}
/**
......@@ -674,6 +675,9 @@ input.form-color,
input.form-file,
textarea.form-textarea,
select.form-select {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 2px;
border: 1px solid #ccc;
border-top-color: #999;
......@@ -682,6 +686,7 @@ select.form-select {
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
max-width: 100%;
}
input.form-text:focus,
input.form-tel:focus,
......@@ -807,6 +812,9 @@ select.form-select:focus {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#dblog-filter-form .form-actions {
float: none;
......@@ -978,6 +986,7 @@ body.in-maintenance #branding .step-indicator {
.overlay #branding {
background-color: #fff;
padding-top: 15px;
padding-bottom: 15px;
}
.overlay #branding h1.page-title,
.overlay #left,
......@@ -1462,16 +1471,14 @@ details.fieldset-no-legend {
/* @end */
/* @end */
/**
* Entity meta settings.
*/
.entity-meta {
background-color: #e2e2e2;
background-color: #ececec;
border-bottom: 0;
border-left: 1px solid #a5a5a5;
border-right: 1px solid #a5a5a5;
border-left: 1px solid #bfbfbf;
border-right: 1px solid #bfbfbf;
border-top: 0;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
......@@ -1480,13 +1487,16 @@ details.fieldset-no-legend {
}
.entity-meta-header,
.entity-meta details {
background-color: #f2f2f2;
border-top: 1px solid #a5a5a5;
border-bottom: 1px solid #a5a5a5;
background-color: #f7f7f7;
border-top: 1px solid #bfbfbf;
border-bottom: 1px solid #bfbfbf;
}
.entity-meta-header {
padding: 1em 1.5em;
}
.entity-meta-header .form-item {
margin: .25em 0;
}
.entity-meta-header .published {
font-size: 1.231em;
font-weight: bold;
......@@ -1498,15 +1508,15 @@ details.fieldset-no-legend {
.entity-meta details {
border-left: 0;
border-right: 0;
border-top: 1px solid #fff;
border-top: 1px solid #ffffff;
margin: 0;
}
.entity-meta details[open] {
background-color: transparent;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .15), transparent 5px);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .15), transparent 5px);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, .15), transparent 5px);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .15), transparent 5px);
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .125), transparent 4px);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .125), transparent 4px);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, .125), transparent 4px);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .125), transparent 4px);
border-top-width: 0;
padding-top: 1px;
}
......@@ -1523,7 +1533,137 @@ details.fieldset-no-legend {
text-shadow: 0 1px 0 white;
}
.entity-meta details .summary {
display: none; /* Hide JS summaries. @todo Rethink summaries. */
display: none; /* Hide JS summaries. @todo Rethink summaries. */
}
.overlay .layout-region-node-footer {
padding-bottom: .5em;
}
/**
* Widescreen
*
* Both of the following media queries must *exactly* match what is in
* node.edit.admin.css. This is rather crazy.
*
* @todo Figure out how to reduce media query duplication across files
* and modules. Layout styles only allowed in themes?
*/
@media
screen and (min-width: 780px),
(orientation: landscape) and (min-device-height: 780px) {
[class*="page-node-add-"] #page,
.page-node-edit #page {
padding-top: 0;
margin-right: 0;
}
[class*="page-node-add-"] #console,
.page-node-edit #console {
margin-right: 2.5em;
}
.layout-node-form {
overflow: hidden;
position: relative;
}
/**
* Draw a bottom border on the meta settings region
* @todo Better ideas welcome.
*/
.layout-node-form:before {
content: '';
display: block;
height: 0;
width: 34.9%;
position: absolute;
bottom: 0;
right: 0;
border-top: 1px solid #bfbfbf;
}
.layout-region-node-secondary {
/**
* 1. Applies the Position Is Everything technique for equal-height columns;
* @see http://www.positioniseverything.net/articles/onetruelayout/equalheight
* 2. When animating the height of elements within this region, prevent
* vertical jittering of elements further down in the document flow.
*/
margin-bottom: -999em; /* 1 */
padding-bottom: 999em; /* 1 */
display: table; /* 2 */
background-color: #f7f7f7;
border-left: 1px solid #bfbfbf;
}
.entity-meta {
border-left: 0;
border-right: 0;
border-bottom: 1px solid #ffffff;
}
.entity-meta-header {
border-top: 0;
}
/* Additional overlay theming */
/**
* These are terrible selectors.
* @todo Add a proper class to the overlay for this page.
*/
.overlay[class*="page-node-add-"] #overlay-content,
.overlay.page-node-edit #overlay-content {
padding: 0;
}
.overlay[class*="page-node-add-"] #page,
.overlay.page-node-edit #page {
padding: 0;
}
.overlay[class*="page-node-add-"] #branding,
.overlay.page-node-edit #branding {
padding-left: 2em;
padding-right: 2em;
}
.overlay[class*="page-node-add-"] #console,
.overlay.page-node-edit #console {
margin: 0 2em;
}
.overlay[class*="page-node-add-"] .messages,
.overlay.page-node-edit .messages {
margin-bottom: 1em;
}
.overlay .layout-node-form {
border-top: 1px solid #bfbfbf;
}
.overlay .layout-node-form:before {
display: none;
}
.overlay .layout-region-node-main,
.overlay .layout-region-node-footer {
padding-left: 2em;
}
.overlay .layout-region-node-footer {
padding-bottom: 1.5em;
}
}
@media
screen and (max-width: 1020px),
(orientation: landscape) and (max-device-height: 1020px) {
.toolbar-vertical .layout-region-node-secondary {
margin-bottom: 0;
padding-bottom: 0;
display: block;
}
.toolbar-vertical .layout-region-node-secondary {
margin-bottom: 0;
padding-bottom: 0;
display: block;
}
.toolbar-vertical .layout-node-form:after {
display: none;
}
}
......
......@@ -120,6 +120,11 @@ function seven_preprocess_install_page(&$variables) {
function seven_form_node_form_alter(&$form, &$form_state) {
$node = $form_state['controller']->getEntity($form_state);
$form['#theme'] = array('node_edit_form');
$form['#attached'] = array(
'css' => array(drupal_get_path('module', 'node') . '/node.edit.admin.css'),
);
$form['advanced']['#type'] = 'container';
$form['meta'] = array (
'#type' => 'fieldset',
......
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