summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorDries2013-02-16 18:33:45 (GMT)
committerDries2013-02-16 18:33:45 (GMT)
commit7b58b93bc965bc98a10505bb8a84072f4f8e89d3 (patch)
tree375f652c3eff2d196fe17c26510021b0a3051518
parente1ade1928685ef2f5fb028a69af18190a5d8f151 (diff)
Issue #1838156 by ry5n, swentel, sannejanssen: Implement the two-column layout for the new create content page.
-rw-r--r--core/modules/node/lib/Drupal/node/NodeFormController.php1
-rw-r--r--core/modules/node/node.edit.admin.css69
-rw-r--r--core/modules/node/node.module5
-rw-r--r--core/modules/node/templates/node-edit-form.tpl.php27
-rw-r--r--core/modules/overlay/images/close-rtl.pngbin368 -> 0 bytes
-rw-r--r--core/modules/overlay/images/close.pngbin344 -> 2971 bytes
-rw-r--r--core/modules/overlay/overlay-child-rtl.css10
-rw-r--r--core/modules/overlay/overlay-child.css8
-rw-r--r--core/themes/seven/ie.css32
-rw-r--r--core/themes/seven/style-rtl.css19
-rw-r--r--core/themes/seven/style.css172
-rw-r--r--core/themes/seven/template.php5
12 files changed, 331 insertions, 17 deletions
diff --git a/core/modules/node/lib/Drupal/node/NodeFormController.php b/core/modules/node/lib/Drupal/node/NodeFormController.php
index 8082322..104c335 100644
--- a/core/modules/node/lib/Drupal/node/NodeFormController.php
+++ b/core/modules/node/lib/Drupal/node/NodeFormController.php
@@ -56,6 +56,7 @@ class NodeFormController extends EntityFormController {
* 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'])) {
diff --git a/core/modules/node/node.edit.admin.css b/core/modules/node/node.edit.admin.css
new file mode 100644
index 0000000..1f92354
--- /dev/null
+++ b/core/modules/node/node.edit.admin.css
@@ -0,0 +1,69 @@
+/**
+ * @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;
+ }
+}
diff --git a/core/modules/node/node.module b/core/modules/node/node.module
index f2206a0..b169499 100644
--- a/core/modules/node/node.module
+++ b/core/modules/node/node.module
@@ -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',
+ ),
);
}
diff --git a/core/modules/node/templates/node-edit-form.tpl.php b/core/modules/node/templates/node-edit-form.tpl.php
new file mode 100644
index 0000000..7b76683
--- /dev/null
+++ b/core/modules/node/templates/node-edit-form.tpl.php
@@ -0,0 +1,27 @@
+<?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>
diff --git a/core/modules/overlay/images/close-rtl.png b/core/modules/overlay/images/close-rtl.png
deleted file mode 100644
index ae05d11..0000000
--- a/core/modules/overlay/images/close-rtl.png
+++ /dev/null
Binary files differ
diff --git a/core/modules/overlay/images/close.png b/core/modules/overlay/images/close.png
index 436985e..44d2b6b 100644
--- a/core/modules/overlay/images/close.png
+++ b/core/modules/overlay/images/close.png
Binary files differ
diff --git a/core/modules/overlay/overlay-child-rtl.css b/core/modules/overlay/overlay-child-rtl.css
index eeff66c..4195530 100644
--- a/core/modules/overlay/overlay-child-rtl.css
+++ b/core/modules/overlay/overlay-child-rtl.css
@@ -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;
}
/**
diff --git a/core/modules/overlay/overlay-child.css b/core/modules/overlay/overlay-child.css
index 48f217d..aa0effc 100644
--- a/core/modules/overlay/overlay-child.css
+++ b/core/modules/overlay/overlay-child.css
@@ -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;
}
/**
diff --git a/core/themes/seven/ie.css b/core/themes/seven/ie.css
index 21252de..df7056e 100644
--- a/core/themes/seven/ie.css
+++ b/core/themes/seven/ie.css
@@ -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
diff --git a/core/themes/seven/style-rtl.css b/core/themes/seven/style-rtl.css
index f31d1d3..4b676e0 100644
--- a/core/themes/seven/style-rtl.css
+++ b/core/themes/seven/style-rtl.css
@@ -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);
+ }
+}
diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index 8e128d2..856037d 100644
--- a/core/themes/seven/style.css
+++ b/core/themes/seven/style.css
@@ -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;
+ }
}
diff --git a/core/themes/seven/template.php b/core/themes/seven/template.php
index ae9120d..5e59526 100644
--- a/core/themes/seven/template.php
+++ b/core/themes/seven/template.php
@@ -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',