Form cleanup (bootstrap)

Bug 1465107: Use Bootstrap CSS Framework

Change-Id: I760a099bf0759cdf07a17bf599c43567b77b8c65

htdocs/admin/site/options.php

@@ -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

+// 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

 
-
-.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

 // Basic type related customisation
-
+body, p {
+    font-weight: 400;
+}
 h1 {
     @extend .page-header;
     border-bottom: none;

htdocs/theme/bootstrap/static/sass/style.scss

@@ -85,6 +85,7 @@