From 6c697e5d05934111e784c8bb242adb4726c03526 Mon Sep 17 00:00:00 2001 From: Jeremy Bridson Date: Thu, 5 Apr 2012 13:23:45 +1200 Subject: [PATCH] BUGFIX:SSF-38 - fixed the issue with the size of the popup being to large on-load - added overflow scroll. Altered the header and tabs to match the style of edit profile. --- admin/css/screen.css | 17 +++++++---------- admin/scss/_style.scss | 33 +++++++++++---------------------- 2 files changed, 18 insertions(+), 32 deletions(-) diff --git a/admin/css/screen.css b/admin/css/screen.css index 11f1a2fab..7cc0999cd 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -468,15 +468,16 @@ form.member-profile-form .ui-tabs-nav .ui-corner-all, form.member-profile-form . .cms .ui-dialog .ss-ui-dialog.ui-dialog-content { padding-top: 0px; } .ui-dialog { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; border: 3px solid #000 !important; border-radius: 8px; overflow: visible; padding: 0; } -.ui-dialog .ui-dialog-titlebar.ui-widget-header { font-size: 14px; padding: 4px 4px 4px 16px; border: none; background-color: transparent; background-image: url(../images/textures/cms_content_header.png); background-repeat: repeat; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; } -.ui-dialog .cms-dialog-content { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; padding-bottom: 8px; overflow: visible; } +.ui-dialog .ui-dialog-titlebar.ui-widget-header { font-size: 14px; padding: 0; border: none; background-color: transparent; background-image: url(../images/textures/cms_content_header.png); background-repeat: repeat; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px inset; } +.ui-dialog .ui-dialog-titlebar.ui-widget-header .ui-dialog-title { position: absolute; } +.ui-dialog .cms-dialog-content { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; padding-bottom: 8px; padding-top: 0px; } .ui-dialog .cms-dialog-content .Actions { overflow: auto; margin: 8px 0; padding-bottom: 8px; float: right; } .ui-dialog .cms-dialog-content .ss-tabset { -moz-border-radius: none; -webkit-border-radius: none; -o-border-radius: none; -ms-border-radius: none; -khtml-border-radius: none; border-radius: none; } .ui-dialog .cms-dialog-content .ss-tabset .tab { background: none; overflow-y: auto; } .ui-dialog .cms-dialog-content .ss-tabset.ui-tabs { background: none; } -.ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav { border: none; padding: 0 40px 0 0; float: right; margin-top: -44px; } -.ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav li { font-weight: bold; line-height: 16px; padding: 12px 12px 10px; border-bottom: 2px solid #B3B3B3; } -.ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: -1px; } +.ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav { border: none; padding: 0 40px 0 0; float: right; } +.ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav li { margin: 0; font-weight: bold; line-height: 16px; padding: 12px 12px 10px; border-bottom: 2px solid #B3B3B3; } +.ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: -1px; padding-bottom: 11px; } .ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav li:first-child { margin-left: 15px; } .ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav .ui-state-focus a { outline: none; } .ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav .ui-state-default, .ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-default, .ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav .ui-widget-header .ui-state-default { background-color: #b0bec7; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhjYTFhZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #8ca1ae)); background-image: -webkit-linear-gradient(#b0bec7, #8ca1ae); background-image: -moz-linear-gradient(#b0bec7, #8ca1ae); background-image: -o-linear-gradient(#b0bec7, #8ca1ae); background-image: -ms-linear-gradient(#b0bec7, #8ca1ae); background-image: linear-gradient(#b0bec7, #8ca1ae); border-right-color: #a6a6a6; border-left-color: #d9d9d9; border-bottom: none; border-top: none; text-shadow: white 0 1px 0; } @@ -484,16 +485,12 @@ form.member-profile-form .ui-tabs-nav .ui-corner-all, form.member-profile-form . .ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav .ui-state-active a, .ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav .ui-widget-content .ui-state-active a, .ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav .ui-widget-header .ui-state-active a { border-bottom: none; border-top: none; } .ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav .ui-corner-all, .ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav .ui-corner-top, .ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav .ui-corner-right, .ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav .ui-corner-tr { border-radius: 0; } .ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav .ui-corner-all, .ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav .ui-corner-top, .ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav .ui-corner-left, .ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-nav .ui-corner-tl { border-radius: 0; } -.ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-panel { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; overflow-x: hidden; } +.ui-dialog .cms-dialog-content .ss-tabset.ui-tabs .ui-tabs-panel { background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; overflow-x: hidden; clear: both; border-top: 1px solid #a6a6a6; } .ui-dialog .cms-dialog-content .clear { clear: both; } .ui-dialog.loading { background-image: url(../images/spinner.gif); background-position: 50% 50%; background-repeat: no-repeat; } body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_main_content.png") repeat left top #f0f3f4; } -.ui-dialog.edit-profile-popup .ui-dialog-titlebar { height: 0px; padding: 0 4px 0 16px; } -.ui-dialog.edit-profile-popup .ui-dialog-titlebar .ui-dialog-title { position: absolute; } -.ui-dialog.edit-profile-popup .ss-ui-dialog { padding-right: 0px; } - /** -------------------------------------------- "Insert X" forms -------------------------------------------- */ .htmleditorfield-linkform .step2 { margin-bottom: 16px; } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 1ccc851f7..e9bcaebe5 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -1176,11 +1176,11 @@ form.member-profile-form { border-radius: $grid-y; overflow: visible; padding: 0; - + // Titlebar for pop-up dialog. .ui-dialog-titlebar.ui-widget-header { font-size: $font-base-size+2; - padding: $grid-y/2 $grid-x/2 $grid-y/2 $grid-x*2; + padding: 0; border:none; background: { color:transparent; @@ -1188,12 +1188,15 @@ form.member-profile-form { repeat:repeat; } @include box-shadow($color-shadow-dark 0 0 ($grid-x / 2) inset); + .ui-dialog-title { + position:absolute; + } } .cms-dialog-content { background: url("../images/textures/bg_cms_main_content.png") repeat left top #F0F3F4; padding-bottom: $grid-y; - overflow:visible; + padding-top:0px; .Actions { overflow: auto; @@ -1216,12 +1219,13 @@ form.member-profile-form { .ui-tabs-nav { border: none; padding: 0 $grid-x*5 0 0; //allows for 40px gap to the right of tabs to match the tabs on main CMS - float: right; - margin-top:-44px; + float:right; li { + margin:0; &.ui-tabs-selected { margin-bottom: -1px; + padding-bottom:11px; } &:first-child { @@ -1288,6 +1292,8 @@ form.member-profile-form { .ui-tabs-panel { background: url("../images/textures/bg_cms_main_content.png") repeat left top #F0F3F4; overflow-x:hidden; + clear:both; + border-top: 1px solid darken($color-tab, 20%); } } } @@ -1309,23 +1315,6 @@ body.cms-dialog { background: url("../images/textures/bg_cms_main_content.png") repeat left top #F0F3F4; } -.ui-dialog.edit-profile-popup { - .ui-dialog-titlebar { - height:0px; //removes the header outside of the iframe on edit profile popup. - padding:0 4px 0 16px; - - .ui-dialog-title { - position:absolute; - } - } - .ss-ui-dialog { - padding-right:0px; - } -} - - - - /** -------------------------------------------- * "Insert X" forms * -------------------------------------------- */