themes lib MDL-24895 Multiple fixes to better handle overflow.

Major tasks undertaken in this patch:
* New format_text argument, overflowdiv.
* New page layout Report.
* Review of all format_text calls.
* Added support for the report layout to all themes.
* Changed forum post display from tables to divs.
This commit is contained in:
Sam Hemelryk 2010-11-05 02:53:47 +00:00
parent 2412f8b882
commit 367a75fae4
125 changed files with 3366 additions and 2062 deletions

View file

@ -8,165 +8,154 @@
.pagelayout-admin,
.pagelayout-mydashboard,
.pagelayout-mypublic,
.pagelayout-login
{
background:url([[pix:theme|body]]) top left repeat-x #dcecf9;
.pagelayout-login,
.pagelayout-report {
background:url([[pix:theme|body]]) top left repeat-x #dcecf9;
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea
{
font-family:Arial, Helvetica, sans-serif;
color:#333;
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea {
font-family:Arial, Helvetica, sans-serif;
color:#333;
}
#wrapper
{
background:#fff;
margin:20px 5% 0px 5%;
padding:0px;
border:1px solid #c1bc9d;
#wrapper {
background:#fff;
margin:20px 5% 0px 5%;
padding:0px;
border:1px solid #c1bc9d;
}
#page-content-wrapper {
padding: 0px;
padding-top: 0px;
background: #ebf6f9;
border-top: 1px solid #ccc;
padding: 0px;
padding-top: 0px;
background: #ebf6f9;
border-top: 1px solid #ccc;
}
.pagelayout-frontpage #page-content #region-main-box #region-post-box {
padding-top: 0;
}
a:link, a:visited
{
color: #003466;
text-decoration: none;
a:link, a:visited {
color: #003466;
text-decoration: none;
}
a:hover, a:active, a:focus
{
color: #4785ac;
text-decoration: none;
a:hover, a:active, a:focus {
color: #4785ac;
text-decoration: none;
}
#region-main-box {
border: 0px none;
border: 0px none;
}
#newmessageoverlay {
background: #f9f9d4;
margin-left: 55px;
margin-top: 10px;
padding: 10px;
border-right: 2px solid #5ea4dc;
border-bottom: 2px solid #5ea4dc;
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
background: #f9f9d4;
margin-left: 55px;
margin-top: 10px;
padding: 10px;
border-right: 2px solid #5ea4dc;
border-bottom: 2px solid #5ea4dc;
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
#newmessageoverlay #newmessagelinks {
border-top: 1px dashed #ccc;
padding-top: 5px;
margin-top: 5px;
border-top: 1px dashed #ccc;
padding-top: 5px;
margin-top: 5px;
}
#newmessageoverlay a {
font-weight: bold;
font-style: italic;
font-weight: bold;
font-style: italic;
}
/* @end */
/* @group Header */
#page-header
{
background:#97d3f4 url([[pix:theme|header]]) no-repeat top right;
margin-bottom: 0px;
height: 80px;
border-bottom: 1px solid #fff;
}
#page-header .sitelogo {
#page-header {
background:#97d3f4 url([[pix:theme|header]]) no-repeat top right;
margin-bottom: 0px;
height: 80px;
border-bottom: 1px solid #fff;
}
.logo {
height: 50px;
float: left;
padding-left: 10px;
padding-top: 18px;
padding-right: 0px;
height: 50px;
float: left;
padding-left: 10px;
padding-top: 18px;
padding-right: 0px;
}
.headermain {
font-weight:normal;
margin:.8em 0.5em 0.75em;
font-weight:normal;
margin:.8em 0.5em 0.75em;
}
h1.headermain
{
color: #006699;
font-weight: normal;
font-size: 1.85em !important;
padding-left: 0px;
margin-top: 30px;
h1.headermain {
color: #006699;
font-weight: normal;
font-size: 1.85em !important;
padding-left: 0px;
margin-top: 30px;
}
h1.headerwlogo {
color: #006699;
font-weight: normal;
font-size: 1.45em !important;
display: block;
float: left;
margin-top: 35px;
color: #006699;
font-weight: normal;
font-size: 1.45em !important;
display: block;
float: left;
margin-top: 35px;
}
.tagline
{
color: #006699 !important;
padding-top: 7px;
font-size: .45em;
text-transform: uppercase;
.tagline {
color: #006699 !important;
padding-top: 7px;
font-size: .45em;
text-transform: uppercase;
}
.headermenu {
font-size: .9em;
font-size: .9em;
}
p.helplink {
text-align: center;
text-align: center;
}
/* @end */
/* @group Navbar */
.navbar {
background: #fff;
height: 20px;
padding-top: 5px;
padding-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
background: #fff;
height: 20px;
padding-top: 5px;
padding-bottom: 4px;
margin-left: 4px;
margin-right: 4px;
}
.breadcrumb {
text-transform: uppercase;
font-weight: bold;
font-size: .9em;
margin-left: 7px;
text-transform: uppercase;
font-weight: bold;
font-size: .9em;
margin-left: 7px;
}
.breadcrumb a {
color: #336699 !important;
color: #336699 !important;
}
.breadcrumb ul {
color: #666;
color: #666;
}
.arrow, .arrow_button input {
color: #aaa;
color: #aaa;
}
/* @end */
@ -174,79 +163,75 @@ p.helplink {
/* @group Blocks */
.block_action {
padding:0px;
padding:0px;
}
.block .content {
background:#c7eafd;
border:1px solid #867f6a;
background:#c7eafd;
border:1px solid #867f6a;
}
.block .minicalendar td,
.block .minicalendar th {
border: none;
border: none;
}
.block
{
border: 0px none;
.block {
border: 0px none;
}
.block .header
{
border: 1px solid #ccc;
background: #fff;
padding-left:5px;
.block .header {
border: 1px solid #ccc;
background: #fff;
padding-left:5px;
}
.block .title h2
{
text-transform: uppercase;
padding-bottom: 0px;
color: #336699;
font-size: .95em;
.block .title h2 {
text-transform: uppercase;
padding-bottom: 0px;
color: #336699;
font-size: .95em;
}
.block .content
{
background: #fff;
border: 1px solid #ccc;
padding: 10px;
margin-top: -2px;
.block .content {
background: #fff;
border: 1px solid #ccc;
padding: 10px;
margin-top: -2px;
}
.block_calendar_month table.minicalendar.calendartable td,.block_calendar_month table.minicalendar.calendartable th {
border: none !important;
border: none !important;
}
/* @end */
/* @group Course */
.headingblock {
border: 0px none;
border-bottom: 1px solid #98bcd6;
padding-bottom: 0px;
padding-top: 5px;
color: #336699;
font-size: 1.8em;
font-weight: normal;
border: 0px none;
border-bottom: 1px solid #98bcd6;
padding-bottom: 0px;
padding-top: 5px;
color: #336699;
font-size: 1.8em;
font-weight: normal;
}
.completionprogress {
color: #336699;
text-transform: uppercase;
font-size: .85em;
color: #336699;
text-transform: uppercase;
font-size: .85em;
}
.course-content ul.topics li.section,
.course-content ul.weeks li.section {
border: 1px solid #ccc;
margin-right: 20px;
border: 1px solid #ccc;
margin-right: 20px;
}
.path-course-view li.activity {
border-bottom: 1px dashed #c3daf9;
padding-top: 10px;
padding-bottom: 5px;
border-bottom: 1px dashed #c3daf9;
padding-top: 10px;
padding-bottom: 5px;
}
/* @end */
@ -254,98 +239,107 @@ p.helplink {
/* @group Dock */
body.has_dock {
margin:0;
margin:0;
}
#dock {
border-right: 0px none;
background: url([[pix:theme|dock]]) repeat-y top right #fff;
border-right: 0px none;
background: url([[pix:theme|dock]]) repeat-y top right #fff;
}
#dock .controls {
bottom:auto;
background-color:#5ea4dc;
bottom:auto;
background-color:#5ea4dc;
}
#dock .dockeditem {
background: url([[pix:theme|dock]]) repeat-y top right #fff;
padding:2px;
padding-right:0px;
background: url([[pix:theme|dock]]) repeat-y top right #fff;
padding:2px;
padding-right:0px;
}
#dock .dockedtitle {
border-width:0;
border-width:0;
}
#dock .dockedtitle h2 {
margin:0;
padding:10px 3px;
margin:0;
padding:10px 3px;
}
#dock .dockedtitle.activeitem {
background-color:#407ea8;
border-top: 1px solid #6f6856;
background-color:#407ea8;
border-top: 1px solid #6f6856;
}
#dockeditempanel {
background-color:#5ea4dc;
margin-left:0px;
border-left: none;
background-color:#5ea4dc;
margin-left:0px;
border-left: none;
}
#dockeditempanel .dockeditempanel_content {
border-color:#6f6856;
border-left: none;
border-color:#6f6856;
border-left: none;
}
#dockeditempanel .dockeditempanel_hd {
background: #407ea8;
border-width:0;
background: #407ea8;
border-width:0;
}
#dockeditempanel .dockeditempanel_hd h2 {
font-size:1em;
color:#fff;
font-size:1em;
color:#fff;
}
/* @end */
/* @group Footer */
#page-footer{
padding: 20px 0 30px;
clear: both;
background: url([[pix:theme|footer]]) no-repeat top right #dfdfdf;
margin-top: 0px;
border: 1px solid #98bcd6;
border-top: 5px solid #98bcd6;
height: 75px;
padding: 20px 0 30px;
clear: both;
background: url([[pix:theme|footer]]) no-repeat top right #dfdfdf;
margin-top: 0px;
border: 1px solid #98bcd6;
border-top: 5px solid #98bcd6;
height: 75px;
}
.footnote {
float: left;
padding-top: 80px;
padding-left: 20px;
float: left;
padding-top: 80px;
padding-left: 20px;
}
#page-footer .logininfo {
padding-top: 80px;
text-align: right;
padding-top: 80px;
text-align: right;
}
/* @end */
/* @group Forums */
.forumpost {
border: 1px solid #ccc;
border: 1px solid #ccc;
background: #c7eafd;
}
.forumpost .left {
background: #c7eafd;
background: #c7eafd;
}
.forumpost .topic {
border-bottom: 2px solid #94b9d3;
background: #d6e2f2;
.forumpost .header {
background: #d6e2f2;
}
.forumpost .no-overflow {
border-top: 2px solid #94b9d3;background: #FFF;
}
.forumpost .content .posting {
padding:4px;
}
.forumpost .options {
background: #FFF;
padding:4px;
}
@ -355,5 +349,4 @@ body.has_dock {
[[setting:customcss]]
/* @end */
/* @end */

View file

@ -2,93 +2,93 @@
/*********************************************************************************************
left column: 230px
right column: 330px
padding left/right column: 10px
padding center column: 30px
left column: 230px
right column: 330px
padding left/right column: 10px
padding center column: 30px
**********************************************************************************************/
body {
margin:auto 0px;
width:auto;
margin:auto 0px;
width:auto;
}
#page {
width:100%;
max-width: 1600px;
overflow:hidden;
width:100%;
max-width: 1600px;
overflow:hidden;
margin:0 auto;
}
#page-content {
clear: both;
overflow: hidden;
position: relative;
width: 100%;
clear: both;
overflow: hidden;
position: relative;
width: 100%;
}
/* @group Pre and Post */
#page-content #region-main-box {
float: left;
margin-left: -[[setting:regionwidth]];
position: relative;
width: 200%;
right: 100%;
float: left;
margin-left: -[[setting:regionwidth]];
position: relative;
width: 200%;
right: 100%;
}
#page-content #region-main-box #region-post-box {
float: left;
margin-left: -[[setting:regionwidth]];
width: 100%;
border-right: 2px solid #98bcd6;
background: url([[pix:theme|top_bg]]) repeat-x top #fff;
#page-content #region-post-box {
float: left;
margin-left: -[[setting:regionwidth]];
width: 100%;
border-right: 2px solid #98bcd6;
background: url([[pix:theme|top_bg]]) repeat-x top #fff;
}
#page-content #region-main-box #region-post-box #region-main-wrap {
float: left;
width: 50%;
margin-left: 20px;
#page-content #region-main-wrap {
float: left;
width: 50%;
}
#page-content #region-main-box #region-post-box #region-main-wrap #region-main {
overflow: hidden;
position: relative;
margin-left: [[setting:regionwidthdouble]];
left: 100%;
#page-content #region-main {
overflow: hidden;
position: relative;
margin-left: [[setting:regionwidthdouble]];
left: 100%;
}
#page-content #region-main-box #region-post-box #region-pre {
float: right;
position: relative;
left: [[setting:leftregionwidthmargin]];
width: [[setting:regionwidth]];
background: transparent;
#page-content #region-pre {
float: right;
position: relative;
left: [[setting:leftregionwidthmargin]];
width: [[setting:regionwidth]];
background: transparent;
}
#page-content #region-main-box #region-post-box #region-post {
float: right;
position: relative;
left: [[setting:rightregionwidthmargin]];
width: [[setting:regionwidth]];
background: transparent;
#page-content #region-post {
float: right;
position: relative;
left: [[setting:rightregionwidthmargin]];
width: [[setting:regionwidth]];
background: transparent;
}
#page-content #region-main-box #region-post-box #region-main-wrap #region-main .region-content {
overflow: hidden;
padding: 20px 40px 20px 0px;
#page-content #region-main .region-content {
overflow: hidden;
margin: 20px;
}
#page-content #region-main-box #region-post-box #region-pre .region-content,
#page-content #region-main-box #region-post-box #region-post .region-content {
overflow: hidden;
padding: 20px 10px;
#page-content #region-pre .region-content,
#page-content #region-post .region-content {
overflow: hidden;
padding: 20px 10px;
}
#page-footer {
clear: both;
float: left;
width: 100%;
clear: both;
float: left;
width: 100%;
}
@ -98,24 +98,24 @@ body {
/* @group Pre Side Only */
.side-pre-only #page-content #region-main-box {
margin-left: 0px;
margin-left: 0px;
}
.side-pre-only #page-content #region-main-box #region-post-box {
margin-left: -[[setting:regionwidth]];
.side-pre-only #page-content #region-post-box {
margin-left: -[[setting:regionwidth]];
}
.side-pre-only #page-content #region-main-box #region-post-box #region-main-wrap #region-main {
margin-left: [[setting:regionwidth]];
.side-pre-only #page-content #region-main {
margin-left: [[setting:regionwidth]];
}
.side-pre-only #page-content #region-main-box #region-post-box #region-pre {
left: [[setting:regionwidth]];
width: [[setting:regionwidth]];
.side-pre-only #page-content #region-pre {
left: [[setting:regionwidth]];
width: [[setting:regionwidth]];
}
.side-pre-only #page-content #region-main-box #region-post-box #region-post {
width: 0%;
.side-pre-only #page-content #region-post {
width: 0%;
}
@ -125,24 +125,24 @@ body {
/* @group Post Side Only */
.side-post-only #page-content #region-main-box {
margin-left: 0px;
margin-left: 0px;
}
.side-post-only #page-content #region-main-box #region-post-box {
margin-left: -[[setting:regionwidth]];
margin-left: -[[setting:regionwidth]];
}
.side-post-only #page-content #region-main-box #region-post-box #region-main-wrap #region-main {
margin-left: [[setting:regionwidth]];
margin-left: [[setting:regionwidth]];
}
.side-post-only #page-content #region-main-box #region-post-box #region-post {
left: [[setting:regionwidthdouble]];
width: [[setting:regionwidth]];
left: [[setting:regionwidthdouble]];
width: [[setting:regionwidth]];
}
.has_dock.side-post-only .page-middle #region-main-box #region-post-box #region-main-wrap #region-main {
margin-left: 200px;
margin-left: 200px;
}
@ -152,25 +152,31 @@ body {
/* @group No Blocks */
.content-only #page-content #region-main-box {
margin-left: 0px;
margin-left: 0px;
}
.content-only #page-content #region-main-box #region-post-box {
margin-left: 0px;
margin-left: 0px;
}
.content-only #page-content #region-main-box #region-post-box #region-main-wrap #region-main {
margin-left: 0px;
margin-left: 0px;
}
.content-only #page-content #region-main-box #region-post-box #region-pre {
width: 0px;
width: 0px;
}
.content-only #page-content #region-main-box #region-post-box #region-post {
width: 0px;
width: 0px;
}
/* @end */
/* @end */
.pagelayout-report #page-content #region-main {
overflow:auto;
}
.pagelayout-report #page-content #region-main .region-content {
overflow:visible;
}