diff --git a/core/misc/collapse.js b/core/misc/collapse.js index 1a98dc0e04cd291d73a4b18ec4f227e9958c01b1..b736faf8f15e2a6d163ddc65c0e07d7311687f8f 100644 --- a/core/misc/collapse.js +++ b/core/misc/collapse.js @@ -9,6 +9,7 @@ Drupal.toggleFieldset = function (fieldset) { var $content = $('> .fieldset-wrapper', fieldset).hide(); $fieldset .removeClass('collapsed') + .addClass('expanded') .trigger({ type: 'collapsed', value: false }) .find('> legend span.fieldset-legend-prefix').html(Drupal.t('Hide')); $content.slideDown({ @@ -28,6 +29,7 @@ Drupal.toggleFieldset = function (fieldset) { $fieldset.trigger({ type: 'collapsed', value: true }); $('> .fieldset-wrapper', fieldset).slideUp('fast', function () { $fieldset + .removeClass('expanded') .addClass('collapsed') .find('> legend span.fieldset-legend-prefix').html(Drupal.t('Show')); fieldset.animating = false; diff --git a/core/modules/node/node.admin.css b/core/modules/node/node.admin.css index 04a37d00b927a4c925144b45516417dcbc40781f..4bdc76300095dcffd95e49b267401bd78afefa8f 100644 --- a/core/modules/node/node.admin.css +++ b/core/modules/node/node.admin.css @@ -1,8 +1,45 @@ - /** * @file * Styles for administration pages. */ + +/* + * Temp reset stuff + * ------------------------------------------------------------------------ + * These or some variation should probably be part of Drupal's core reset + */ + +/* https://github.com/necolas/normalize.css/blob/master/normalize.css */ +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} + +/* http://beckism.com/examples/display_block_legends.html */ +legend { + display: block; + float: left; + width: 100%; + white-space: normal; + *margin-left: -7px; +} + +label { + display: block; + /* shrink-wrap clickable labels so the clickable region doesn't extend way out */ + display: table; +} + +/* Labels with explicit associations are clickable */ +label[for] { + cursor: pointer; +} + +/* end temp resets ---------------------------------------------------------- */ + /** * Revisions overview screen. @@ -14,110 +51,203 @@ /** * Styles for the new node add/edit form. */ -#edit-primary { - float: left; - width: 66%; - margin-top: 3em; +#page { + padding-top: 0 !important; } +.overlay #page { + padding: 0 0 0 2.5% !important; +} + +#help, .edit-primary { + float: left; + width: 65.5%; +} + .overlay { background: #f00; } -#edit-secondary { +.overlay #branding { + position: absolute; + top: 0; + left: 0; + width: 60.5%; + padding-left: 2.5%; + padding-right: 2.5%; + z-index: 99; + background: transparent; +} + +.edit-primary { + margin-top: -2em; +} + +.overlay .edit-primary { + margin-top: 3em; +} + +.edit-secondary { + position: relative; width: 32%; - background-color: #FAFAFA; - top: 0; margin-left: 68%; - padding-top: 0; - background: -webkit-gradient(linear, left top, right top, from(#ebebeb), to(#fafafa)); - background: -webkit-linear-gradient(left, #ebebeb, #fafafa); - background: -moz-linear-gradient(left, #ebebeb, #fafafa); - background: -ms-linear-gradient(left, #ebebeb, #fafafa); - background: -o-linear-gradient(left, #ebebeb, #fafafa); + background-color: #eee; + margin-top: 2em; + border: 1px solid #dfdfdf; +/* + -webkit-box-shadow: inset 0 1px .5em rgba(0, 0, 0, .08); + -moz-box-shadow: inset 0 1px .5em rgba(0, 0, 0, .08); + box-shadow: inset 0 1px .5em rgba(0, 0, 0, .08); +*/ +} + +.overlay .edit-secondary { + margin-top: 0; + border: 0; +} + +/* Gradients on .edit-secondary look weird because they + get drawn over by the .collapsible borders. + Fix that with pseudo elements whose z-index we can + control. We can't use :after because it might interfere + with clearfix. */ +.overlay .edit-secondary:before, +.overlay .node-form > div:before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + pointer-events: none; /* let clicks through, though it's hardly necessary here. */ +} +.overlay .edit-secondary:before { + width: .75em; + left: 0; + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .05), transparent); + background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .05), transparent); + background-image: -ms-linear-gradient(left, rgba(0, 0, 0, .05), transparent); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, .05), transparent); + z-index: 3; +} +.overlay .node-form > div:before { + width: .25em; + border-right: .5em solid white; + right: 0; + background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, .15)); + background-image: -moz-linear-gradient(left, transparent, rgba(0, 0, 0, .15)); + background-image: -ms-linear-gradient(left, transparent, rgba(0, 0, 0, .15)); + background-image: -o-linear-gradient(left, transparent, rgba(0, 0, 0, .15)); + z-index: 2; +} + +.edit-secondary .collapsible { + padding: 1px 0; + border: 0; + background-color: #e2e2e2; + -webkit-box-shadow: inset 0 1px .5em rgba(0, 0, 0, .15); + -moz-box-shadow: inset 0 1px .5em rgba(0, 0, 0, .15); + box-shadow: inset 0 1px .5em rgba(0, 0, 0, .15); + -webkit-transition: background-color .1s; + -moz-transition: background-color .1s; + -ms-transition: background-color .1s; + -o-transition: background-color .1s; } -#edit-secondary fieldset .fieldset-legend { - margin-top: 0.9em; +.edit-secondary .collapsed { + padding: 0; + border-top: 1px solid #fdfdfd; + border-bottom: 1px solid #dedede; + border-left: 0px; + border-right: 0px; + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } -#edit-secondary .node-summary { - margin: 15px; +/* both expanded */ +.edit-secondary .collapsible + .collapsible { + padding-top: 0; + border-top: 1px solid #eee; } -#edit-secondary .button-duplicate { - margin-left: 10px; +/* expanded after a collapsed */ +.edit-secondary .collapsed + .collapsible { + border-top: 1px solid #bbb; } -.form-actions { - clear: both; +/* both collapsed */ +.edit-secondary .collapsed + .collapsed { + padding-top: 0; + border-top: 1px solid white; } -.description { - font-style: italic; - font-family: serif; +.edit-secondary .collapsible .fieldset-legend { + display: block; + position: relative; + left: 0; + right: 0; + margin: 0; + padding: 0 !important; /* override system */ + background: none !important; /* override system */ } -#edit-title { - width: 100%; +.edit-secondary .collapsible .fieldset-title { /* toggle anchor */ + display: block; + padding: .85em 1.25em; + background: url(../../misc/menu-expanded.png) no-repeat 95% 50%; /* LTR */ + text-transform: none; + font-weight: normal; + color: #004F80; +} +.overlay .edit-secondary .collapsible .fieldset-title { + background-position: 93% 50%; } -fieldset#edit-additional-settings { - padding: 0; - margin: 0; - /* border-top:1px solid #dedede; */ - border-bottom:1px solid #fdfdfd; - border-left:0px; - border-right:0px; - text-shadow: 0px 1px 0px rgba(255, 255, 255, .75); +.edit-secondary .collapsible .fieldset-wrapper { + clear: both; /* Legend is floated to force display: block; we need to clear it. */ + padding: 0 1em 1.25em !important; } -#edit-additional-settings fieldset.collapsed { - border-top:1px solid #fdfdfd; - border-bottom:1px solid #dedede; - border-left:0px; - border-right:0px; - background-color: transparent; - -moz-box-shadow: inset 0 0 0px #000000; - -webkit-box-shadow: inset 0 0 0px #000000; - box-shadow: inset 0 0 0px #000000; +.edit-secondary .collapsed .fieldset-title { + background-image: url(../../misc/menu-collapsed.png); + color: #0074BD; } -#edit-additional-settings fieldset { - padding: 3em 0 0 0; - background-color: #e2e2e2; - -moz-box-shadow: inset 0 0 10px #ccc; - -webkit-box-shadow: inset 0 0 10px #ccc; - box-shadow: inset 0 0 10px #ccc; +.edit-secondary .node-summary { + margin: 0 1.25em 1.25em 1.25em; + padding-top: .5em; + overflow: hidden; } -.fieldset-legend .summary { - display: none; +.edit-secondary .button-duplicate { + margin-left: 10px; } -.js fieldset.collapsible > legend .fieldset-legend { - background: url(../../misc/menu-expanded.png) 90% 65% no-repeat; /* LTR */ - padding-left: 15px; /* LTR */ - display: block; - width: 100%; +.form-actions { + clear: both; +} + +.description { + font-style: italic; + font-family: serif; } -.js fieldset.collapsed > legend .fieldset-legend { - background-image: url(../../misc/menu-collapsed.png); /* LTR */ - background-position: 90% 65%; /* LTR */ - display: block; + +#edit-title { width: 100%; } -.js fieldset.collapsed > legend .fieldset-legend a, -.js fieldset.collapsible > legend .fieldset-legend a { - display: block; - text-transform: none; - font-weight: bold; - width: 95%; +.fieldset-legend .summary { + display: none; } -.js fieldset.collapsed > legend .fieldset-legend a { - font-weight: normal; +#edit-additional-settings { + padding: 0; + margin: 0; + border-top: 0; + border-bottom: 1px solid #fdfdfd; + border-left: 0px; + border-right: 0px; + text-shadow: 0px 1px 0px rgba(255, 255, 255, .75); } fieldset .form-wrapper { @@ -141,21 +271,10 @@ ul.tips, div.description, .form-item div.description { padding: 0; } -.page-node-add #branding, -.page-node-edit #branding { - position: absolute; -} - .page-node-edit #help { margin-top: 0; } -#overlay #page, -#overlay #page { - padding: 0 0 0 20px; - background: none; -} - .node-summary { margin-top: 0; padding-top: 0; @@ -222,8 +341,8 @@ ul.tips, div.description, .form-item div.description { border: 1px solid #c8c8c8; font-family: serif; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; max-width: 100%; background: -webkit-gradient(linear, left top, left bottom, from(#ececec), to(#fafafa)); background: -webkit-linear-gradient(top, #ececec, #fafafa); @@ -247,16 +366,14 @@ ul.tips, div.description, .form-item div.description { .node-form input.form-search:focus, .node-form textarea.form-textarea:focus, .node-form select.form-select:focus { - padding: 9px; - border-width: 2px; border-color: #c8c8c8; - outline: none; + outline: 2px solid #c8c8c8; -webkit-transition: none; - -moz-transition: none; - transition: none; + -moz-transition: none; + transition: none; -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } .node-form .form-item label { @@ -265,15 +382,22 @@ ul.tips, div.description, .form-item div.description { } -.node-form #edit-secondary input.form-autocomplete, -.node-form #edit-secondary input.form-text, -.node-form #edit-secondary input.form-tel, -.node-form #edit-secondary input.form-email, -.node-form #edit-secondary input.form-url, -.node-form #edit-secondary input.form-search { +.node-form .edit-secondary input.form-autocomplete, +.node-form .edit-secondary input.form-text, +.node-form .edit-secondary input.form-tel, +.node-form .edit-secondary input.form-email, +.node-form .edit-secondary input.form-url, +.node-form .edit-secondary input.form-search { width: 100%; } +.node-form-revision-information { + border: 0; + background: none; + padding: 0; +} + +/* #edit-revision-information { border: none; background: -webkit-gradient(linear, left top, right top, from(#ebebeb), to(#fafafa)); @@ -295,3 +419,4 @@ fieldset#edit-revision-information { box-shadow: none; border: none; } +*/ diff --git a/core/modules/node/node.pages.inc b/core/modules/node/node.pages.inc index 17fcb382a78a9730d569f917aa0836012a9b33de..8427977fb768982d059b8b658c86a49df70e748e 100644 --- a/core/modules/node/node.pages.inc +++ b/core/modules/node/node.pages.inc @@ -122,7 +122,7 @@ function node_form($form, &$form_state, $node) { // Wrap main form components in a div $form['edit_primary'] = array( '#type' => 'markup', - '#prefix' => '
', + '#prefix' => '
', '#suffix' => '
', '#attached' => array( 'css' => array(drupal_get_path('module', 'node') . '/node.admin.css'), @@ -281,7 +281,7 @@ function node_form($form, &$form_state, $node) { $form['additional_settings'] = array( '#type' => 'fieldset', '#weight' => 99, - '#prefix' => '
' . $node_summary, + '#prefix' => '
' . $node_summary, '#suffix' => '
', );