Skip to content
GitLab
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
Expand all Hide whitespace changes
Inline Side-by-side
htdocs/admin/site/options.php
View file @ 5fba0303
......@@ -316,6 +316,7 @@ $siteoptionform = array(
'defaultvalue' => get_config('institutionexpirynotification'),
'help' => true,
'disabled' => in_array('institutionexpirynotification', $OVERRIDDEN),
'class' => 'double'
),
'institutionautosuspend' => array(
'type' => 'switchbox',
......@@ -351,6 +352,7 @@ $siteoptionform = array(
'defaultvalue' => get_config('defaultregistrationexpirylifetime'),
'help' => false,
'disabled' => in_array('defaultregistrationexpirylifetime', $OVERRIDDEN),
'class' => 'double'
),
'defaultaccountlifetime' => array(
'type' => 'expiry',
......@@ -359,6 +361,7 @@ $siteoptionform = array(
'defaultvalue' => get_config('defaultaccountlifetime'),
'help' => true,
'disabled' => in_array('defaultaccountlifetime', $OVERRIDDEN),
'class' => 'double'
),
'defaultaccountlifetimeupdate' => array(
'type' => 'radio',
......@@ -380,6 +383,7 @@ $siteoptionform = array(
'defaultvalue' => get_config('defaultaccountinactiveexpire'),
'help' => true,
'disabled' => in_array('defaultaccountinactiveexpire', $OVERRIDDEN),
'class' => 'double'
),
'defaultaccountinactivewarn' => array(
'type' => 'expiry',
......@@ -388,6 +392,7 @@ $siteoptionform = array(
'defaultvalue' => get_config('defaultaccountinactivewarn'),
'help' => true,
'disabled' => in_array('defaultaccountinactivewarn', $OVERRIDDEN),
'class' => 'double'
),
),
),
......@@ -751,6 +756,7 @@ $siteoptionform = array(
'defaultvalue' => get_config('eventlogexpiry'),
'help' => false,
'disabled' => in_array('eventlogexpiry', $OVERRIDDEN),
'class' => 'double'
),
),
),
......
htdocs/theme/bootstrap/static/sass/components/_form-group.scss 0 → 100644
View file @ 5fba0303
// 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;
}
}
}
}
htdocs/theme/bootstrap/static/sass/components/_forms.scss
View file @ 5fba0303
.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,
.pseudolabel {
@extend .control-label;
min-width: 230px;
min-width: 265px;
max-width: 100%;
padding-right: 10px;
font-weight:normal;
......@@ -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 {
font-weight: normal;
}
......@@ -65,206 +25,42 @@ select {
@extend .form-control;
}
.form-group {
border-bottom: 1px solid #f0f0f0;
margin: 0;
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;
}
}
label.sr-only + div.mce-tinymce {
max-width: 100%;
width: 100%;
}
.help {
position: absolute;
right: 0;
top: 50%;
margin-top:-20px;
}
.pseudolabel {
vertical-align: top;
padding-right: 10px;
display: inline-block;
}
.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;
}
.stacked-label {
display: inline-block;
@media (min-width: $screen-sm-min) {
width:200px;
}
}
.description {
@extend .align-with-input;
color: $gray-light;
font-style: italic;
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;
}
.message {
font-size: 0.9em;
color: $gray;
margin-left: 20px;
}
@media (min-width: $screen-sm-min) {
&.input-small {
max-width: 100%;
width: 25%;
.input-small {
margin:0;
}
}
.pieform-fieldset {
.html {
@include clearfix;
}
}
// 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;
}
.as-panel form {
margin-top:0;
}
.form-group-inline {
&.select,
&.text {
margin-right: 10px;
}
.main table form {
margin:0;
}
.wysiwyg label,
......@@ -277,6 +73,8 @@ select {
.tab-content legend {
display: none;
}
.radio-aligned {
display: inline-block;
}
......@@ -299,7 +97,7 @@ select {
display: inline-block;
margin-left: 0;
@media (min-width: $screen-sm-min) {
margin-left: 230px;
margin-left: 265px;
}
}
......@@ -309,20 +107,6 @@ select {
}
}
.calendar .calendar,
.tag .description,
.form-group .description {
@extend .align-with-input;
color: $gray-light;
font-size: $font-size-base - 1;
display: block;
padding-top: 10px;
@media (min-width: $screen-md-min) {
margin-left: 230px;
}
}
.resizable-textarea {
display: inline-block;
width: 85%;
......@@ -364,12 +148,6 @@ select {
}
}
.form-notifications {
.form-group .select {
width: 250px;
}
}
.form-inline {
&.form-select-filter {
......@@ -418,3 +196,5 @@ select {
.btn input {
margin-top: 0;
}
htdocs/theme/bootstrap/static/sass/components/_typography.scss
View file @ 5fba0303
// Basic type related customisation
body, p {
font-weight: 400;
}
h1 {
@extend .page-header;
border-bottom: none;
......