Commit 5fba0303 authored by Naomi Guyer's avatar Naomi Guyer Committed by Aaron Wells
Browse files

Form cleanup (bootstrap)

Bug 1465107: Use Bootstrap CSS Framework

Change-Id: I760a099bf0759cdf07a17bf599c43567b77b8c65
parent 3015027a
...@@ -316,6 +316,7 @@ $siteoptionform = array( ...@@ -316,6 +316,7 @@ $siteoptionform = array(
'defaultvalue' => get_config('institutionexpirynotification'), 'defaultvalue' => get_config('institutionexpirynotification'),
'help' => true, 'help' => true,
'disabled' => in_array('institutionexpirynotification', $OVERRIDDEN), 'disabled' => in_array('institutionexpirynotification', $OVERRIDDEN),
'class' => 'double'
), ),
'institutionautosuspend' => array( 'institutionautosuspend' => array(
'type' => 'switchbox', 'type' => 'switchbox',
...@@ -351,6 +352,7 @@ $siteoptionform = array( ...@@ -351,6 +352,7 @@ $siteoptionform = array(
'defaultvalue' => get_config('defaultregistrationexpirylifetime'), 'defaultvalue' => get_config('defaultregistrationexpirylifetime'),
'help' => false, 'help' => false,
'disabled' => in_array('defaultregistrationexpirylifetime', $OVERRIDDEN), 'disabled' => in_array('defaultregistrationexpirylifetime', $OVERRIDDEN),
'class' => 'double'
), ),
'defaultaccountlifetime' => array( 'defaultaccountlifetime' => array(
'type' => 'expiry', 'type' => 'expiry',
...@@ -359,6 +361,7 @@ $siteoptionform = array( ...@@ -359,6 +361,7 @@ $siteoptionform = array(
'defaultvalue' => get_config('defaultaccountlifetime'), 'defaultvalue' => get_config('defaultaccountlifetime'),
'help' => true, 'help' => true,
'disabled' => in_array('defaultaccountlifetime', $OVERRIDDEN), 'disabled' => in_array('defaultaccountlifetime', $OVERRIDDEN),
'class' => 'double'
), ),
'defaultaccountlifetimeupdate' => array( 'defaultaccountlifetimeupdate' => array(
'type' => 'radio', 'type' => 'radio',
...@@ -380,6 +383,7 @@ $siteoptionform = array( ...@@ -380,6 +383,7 @@ $siteoptionform = array(
'defaultvalue' => get_config('defaultaccountinactiveexpire'), 'defaultvalue' => get_config('defaultaccountinactiveexpire'),
'help' => true, 'help' => true,
'disabled' => in_array('defaultaccountinactiveexpire', $OVERRIDDEN), 'disabled' => in_array('defaultaccountinactiveexpire', $OVERRIDDEN),
'class' => 'double'
), ),
'defaultaccountinactivewarn' => array( 'defaultaccountinactivewarn' => array(
'type' => 'expiry', 'type' => 'expiry',
...@@ -388,6 +392,7 @@ $siteoptionform = array( ...@@ -388,6 +392,7 @@ $siteoptionform = array(
'defaultvalue' => get_config('defaultaccountinactivewarn'), 'defaultvalue' => get_config('defaultaccountinactivewarn'),
'help' => true, 'help' => true,
'disabled' => in_array('defaultaccountinactivewarn', $OVERRIDDEN), 'disabled' => in_array('defaultaccountinactivewarn', $OVERRIDDEN),
'class' => 'double'
), ),
), ),
), ),
...@@ -751,6 +756,7 @@ $siteoptionform = array( ...@@ -751,6 +756,7 @@ $siteoptionform = array(
'defaultvalue' => get_config('eventlogexpiry'), 'defaultvalue' => get_config('eventlogexpiry'),
'help' => false, 'help' => false,
'disabled' => in_array('eventlogexpiry', $OVERRIDDEN), 'disabled' => in_array('eventlogexpiry', $OVERRIDDEN),
'class' => 'double'
), ),
), ),
), ),
......
// remove styles on outer element as class is duplicated to form element
.form-group.btn,
.form-group-inline.btn {
background: none;
border: none;
padding-left: 0;
&:hover {
background: none;
border: none;
}
}
.form-group {
border-bottom: 1px solid #f0f0f0;
margin: 0;
padding: 20px 0;
position: relative;
.form-notifications & {
.select {
width: 250px;
}
}
&.login {
input {
&[type=text],
&[type=password] {
max-width:100%;
}
}
}
&.input-small,
&:last-child {
border: 0;
}
&.tab-pane,
&.collapsible-group {
border: 0;
padding: 0;
}
&.checkbox {
label {
padding-left: 0;
}
.checkbox {
display: inline-block;
}
input[type=checkbox] {
margin-left: 0;
}
}
&.calendar {
.calendar {
margin-left: 0;
width: 165px;
}
}
// reset bootstrap button style for cancel button
&.submitcancel {
.cancel {
background-color: transparent;
border: none;
text-decoration: underline;
color: $link-color;
&:hover {
color: $link-hover-color;
}
}
}
&.filebrowser {
label {
vertical-align: top;
}
}
&.checkbox {
.description {
margin-left:0;
max-width: 700px;
}
}
&.tags {
.tag-wrapper {
display: block;
@media (min-width: $screen-sm-min) {
display: inline-block;
}
input {
max-width: 85%;
display: inline-block;
@media (min-width: $screen-sm-min) {
max-width: 100%;
}
}
}
}
&.double {
.description {
margin-left: 0;
max-width:90%;
}
input[type=text],
input[type=password],
select {
max-width: 45%;
display: inline-block;
@media (min-width: $screen-sm-min) {
width: 150px;
}
@media (min-width: $screen-lg-min) {
width: 150px;
}
}
}
h3 {
font-size: $font-size-large;
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 1px solid $gray-lighter;
}
.file-wrapper,
.tag-wrapper input,
.mce-tinymce,
.table-selectedlist,
.about-text,
input[type=text],
input[type=password],
input[type=file],
textarea,
select {
max-width: 85%;
display: inline-block;
@media (min-width: $screen-sm-min) {
width: 420px;
}
@media (min-width: $screen-lg-min) {
width: 500px;
}
}
.pseudolabel ~ .radio:not(.form-group){
&:nth-child(n+3) {
@extend .align-with-input;
}
}
.form-group.radio,
.radio {
@media (min-width: $screen-sm-min) {
margin-top: 0;
display: inline-block;
}
input[type=radio] {
margin-top: 5px;
margin-left: 0;
}
}
.help {
position: absolute;
right: 0;
top: 50%;
margin-top:-20px;
}
.errmsg {
@extend .align-with-input;
color: $brand-danger;
font-size: $font-size-base - 1;
display: block;
padding-top: 10px;
@media (min-width: $screen-md-min) {
margin-left: 230px;
}
}
.description:not(.html) {
color: $gray-light;
font-style: italic;
font-size: $font-size-base - 1;
max-width: 90%;
display: block;
padding-top: 10px;
}
.requiredmarker {
color: $brand-danger;
}
@media (min-width: $screen-sm-min) {
&.input-small {
max-width: 100%;
width: 25%;
.input-small {
margin:0;
}
}
}
}
.message {
font-size: 0.9em;
color: $gray;
margin-left: 20px;
}
.pieform-fieldset {
.html {
@include clearfix;
}
}
label.sr-only + div.mce-tinymce {
max-width: 100%;
width: 100%;
}
.pseudolabel {
vertical-align: top;
padding-right: 10px;
display: inline-block;
}
label, label,
.pseudolabel { .pseudolabel {
@extend .control-label; @extend .control-label;
min-width: 230px; min-width: 265px;
max-width: 100%; max-width: 100%;
padding-right: 10px; padding-right: 10px;
font-weight:normal; font-weight:normal;
...@@ -38,22 +14,6 @@ label, ...@@ -38,22 +14,6 @@ label,
} }
} }
.stacked-label {
display: inline-block;
@media (min-width: $screen-sm-min) {
width:200px;
}
}
.as-panel form {
margin-top:0;
}
.main table form {
margin:0;
}
input + label { input + label {
font-weight: normal; font-weight: normal;
} }
...@@ -65,206 +25,42 @@ select { ...@@ -65,206 +25,42 @@ select {
@extend .form-control; @extend .form-control;
} }
.form-group { label.sr-only + div.mce-tinymce {
border-bottom: 1px solid #f0f0f0; max-width: 100%;
margin: 0; width: 100%;
padding: 20px 0; }
position: relative;
&.login {
input {
&[type=text],
&[type=password] {
max-width:100%;
}
}
}
&.input-small,
&:last-child {
border: 0;
}
&.tab-pane,
&.collapsible-group {
border: 0;
padding: 0;
}
&.checkbox {
label {
padding-left: 0;
}
.checkbox {
display: inline-block;
}
input[type=checkbox] {
margin-left: 0;
}
}
&.calendar {
.calendar {
margin-left: 0;
width: 165px;
}
}
// reset bootstrap button style for cancel button
&.submitcancel {
.cancel {
background-color: transparent;
border: none;
text-decoration: underline;
color: $link-color;
&:hover {
color: $link-hover-color;
}
}
}
&.filebrowser {
label {
vertical-align: top;
}
}
&.checkbox {
.description {
margin-left:0;
max-width: 700px;
}
}
&.tags {
.tag-wrapper {
display: block;
@media (min-width: $screen-sm-min) {
display: inline-block;
}
input {
max-width: 85%;
display: inline-block;
@media (min-width: $screen-sm-min) {
max-width: 100%;
}
}
}
}
h3 {
font-size: $font-size-large;
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 1px solid $gray-lighter;
}
.file-wrapper,
.tag-wrapper input,
.mce-tinymce,
.table-selectedlist,
.about-text,
input[type=text],
input[type=password],
input[type=file],
textarea,
select {
max-width: 85%;
display: inline-block;
@media (min-width: $screen-sm-min) {
width: 420px;
}
@media (min-width: $screen-lg-min) {
width: 500px;
}
}
.pseudolabel ~ .radio:not(.form-group){
&:nth-child(n+3) {
@extend .align-with-input;
}
}
.form-group.radio,
.radio {
@media (min-width: $screen-sm-min) {
margin-top: 0;
display: inline-block;
}
input[type=radio] {
margin-top: 5px;
margin-left: 0;
}
}
.help { .pseudolabel {
position: absolute; vertical-align: top;
right: 0; padding-right: 10px;
top: 50%; display: inline-block;
margin-top:-20px; }
}
.errmsg { .stacked-label {
@extend .align-with-input; display: inline-block;
color: $brand-danger; @media (min-width: $screen-sm-min) {
font-size: $font-size-base - 1; width:200px;
display: block;
padding-top: 10px;
@media (min-width: $screen-md-min) {
margin-left: 230px;
}
} }
}
.description { .message {
@extend .align-with-input; font-size: 0.9em;
color: $gray-light; color: $gray;
font-style: italic; margin-left: 20px;
font-size: $font-size-base - 1; }
max-width: 500px;
display: block;
padding-top: 10px;
@media (min-width: $screen-md-min) {
margin-left: 230px;
}
@media (min-width: $screen-md-min) and (max-width: $screen-lg-min){
margin-left: 0;
}
}
.requiredmarker {
color: $brand-danger;
}
@media (min-width: $screen-sm-min) { .pieform-fieldset {
&.input-small { .html {
max-width: 100%; @include clearfix;
width: 25%;
.input-small {
margin:0;
}
}
} }
} }
// remove styles on outer element as class is duplicated to form element .as-panel form {
.form-group.btn, margin-top:0;
.form-group-inline.btn {
background: none;
border: none;
padding-left: 0;
&:hover {
background: none;
border: none;
}
} }
.form-group-inline { .main table form {
&.select, margin:0;
&.text {
margin-right: 10px;
}
} }
.wysiwyg label, .wysiwyg label,
...@@ -277,6 +73,8 @@ select { ...@@ -277,6 +73,8 @@ select {
.tab-content legend { .tab-content legend {
display: none; display: none;
} }
.radio-aligned { .radio-aligned {
display: inline-block; display: inline-block;
} }
...@@ -299,7 +97,7 @@ select { ...@@ -299,7 +97,7 @@ select {
display: inline-block; display: inline-block;
margin-left: 0; margin-left: 0;
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
margin-left: 230px; margin-left: 265px;
}