Commit 506c5805 authored by Pat Kira's avatar Pat Kira Committed by Aaron Wells

Forms and grid

Bug 1465107: Use Bootstrap CSS Framework
Styling forms
Bootstrap grid, respsonsive, menus

Change-Id: I3378f05bddf4636a8a02631919c23ca4b9dfb5df
parent 0cc32f9b
......@@ -189,9 +189,9 @@ $profileform = pieform(array(
'plugintype' => 'artefact',
'pluginname' => 'internal',
// will be uncommented when js for tabbed interface is called again after form submit
//'jsform' => true,
// 'jsform' => true,
'method' => 'post',
'renderer' => 'table', // don't change unless you also modify profile.js to not require tables.
'renderer' => 'div', // don't change unless you also modify tabs.js to not require tables.
'elements' => $elements,
'autofocus' => false,
));
......
......@@ -7,137 +7,3 @@
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL version 3 or later
* @copyright For copyright information on Mahara, please see the README file distributed with this software.
*/
// This will automatically turn the fieldsets of a form with class 'jstabs' into responsive tabs
(function() {
function addStyles(formid) {
// Add a stylesheet for styling in JS only
// See http://www.phpied.com/dynamic-script-and-style-elements-in-ie/
var styleNode = createDOM('style', {'type': 'text/css'});
var rule = '#' + formid + ' { visibility: hidden; position: absolute; top: 0; }';
// Stupid IE workaround
if (document.all && !window.opera) {
styleNode.styleSheet.cssText = rule;
}
else {
appendChildNodes(styleNode, rule);
}
appendChildNodes(getFirstElementByTagAndClassName('head'), styleNode);
}
addLoadEvent(function() {
var formelement = getFirstElementByTagAndClassName('form', 'jstabs');
if (!formelement) {
return;
}
var formid = formelement.getAttribute('id');
addStyles(formid);
insertSiblingNodesAfter(formid, DIV({'id': formid + '-loading'}, IMG({'src': config.theme['images/loading.gif'], 'alt': ''}), ' ', get_string('loading')));
var fieldsets = getElementsByTagAndClassName('fieldset', null, formid);
// Grab the legends
var legends = getElementsByTagAndClassName('legend', null, formid);
var isOpen = 0;
var tabs = [];
forEach(legends, function(legend) {
var a = A({'href': ''}, scrapeText(legend));
var accessibleText = SPAN({'class':'accessible-hidden'}, '(' + get_string('tab') + ')');
appendChildNodes(a, accessibleText);
legend.parentNode.tabLink = a;
legend.parentNode.tabAccessibleText = accessibleText;
// Pieforms is unhelpful with legend/fieldset ids; get it from children
var fsid = 'general';
var row = getFirstElementByTagAndClassName('tr', 'html', legend.parentNode);
if (row) {
fsid = getNodeAttribute(row, 'id').replace(new RegExp('^' + formid + '_(.*)description_container'), '$1');
}
a.id = fsid + '_a';
connect(a, 'onclick', function(e) {
forEach(fieldsets, function(fieldset) {
if (fieldset == legend.parentNode) {
addElementClass(fieldset.tabLink.parentNode, 'current-tab');
addElementClass(fieldset.tabLink, 'current-tab');
removeElementClass(fieldset, 'safe-hidden');
removeElementClass(fieldset, 'collapsed');
fieldset.tabAccessibleText.innerHTML = '(' + get_string('tab') + ' ' + get_string('selected') + ')';
$j(fieldset).find(':input').first().focus();
$(formid + '_fs').value = fsid;
}
else if (hasElementClass(fieldset.tabLink.parentNode, 'current-tab')) {
removeElementClass(fieldset.tabLink.parentNode, 'current-tab');
removeElementClass(fieldset.tabLink, 'current-tab');
addElementClass(fieldset, 'collapsed');
addElementClass(fieldset, 'safe-hidden');
fieldset.tabAccessibleText.innerHTML = '(' + get_string('tab') + ')';
}
});
if (isOpen == 1) {
removeElementClass(tabDIV, 'expand');
isOpen = 0;
}
e.stop();
});
tabs.push(LI(null, a));
});
var tabUL = UL({'class': 'in-page-tabs'}, tabs);
var tabTitleSpan = SPAN({'class': 'rd-tab'});
var tabTitleLink = A({'href': '#'}, get_string('tabs'), tabTitleSpan);
tabDIV = DIV({'id': 'in-page-tabs-wrap', 'class': 'tabswrap'}, H3({'class': 'rd-tab-title'}, tabTitleLink), tabUL);
connect(tabTitleLink, 'onclick', function(e) {
e.stop();
if (isOpen == 0) {
addElementClass(tabDIV, 'expand');
getFirstElementByTagAndClassName('a', null, tabUL).focus();
}
else {
removeElementClass(tabDIV, 'expand');
}
isOpen = 1 - isOpen;
});
forEach(fieldsets, function(fieldset) {
if (hasElementClass(fieldset, 'collapsed')) {
addElementClass(fieldset, 'safe-hidden');
}
else {
// not collapsed by default, probably was the default one to show
addElementClass(fieldset.tabLink.parentNode, 'current-tab');
addElementClass(fieldset.tabLink, 'current-tab');
fieldset.tabAccessibleText.innerHTML = '(' + get_string('tab') + ' ' + get_string('selected') + ')';
}
});
forEach(legends, function(legend) {
addElementClass(legend, 'hidden');
});
// Remove the top submit buttons
if ($(formid + '_topsubmit_container')) {
removeElement(formid + '_topsubmit_container');
}
// last part is the submit buttons
appendChildNodes(formid,
tabDIV, DIV({'class': 'tabbed-fieldsets subpage'}, fieldsets), getFirstElementByTagAndClassName('td', null, formid + '_submit_container').childNodes
);
removeElement(
getFirstElementByTagAndClassName('table', null, formid)
);
// Make the tabs responsive
if (typeof responsiveNav === 'function') {
responsiveNav($j('.tabswrap ul li'), $j('.tabswrap'));
}
// Now unhide the form
hideElement(formid + '-loading');
$(formid).style.position = 'static';
$(formid).style.visibility = 'visible';
});
})();
......@@ -2881,6 +2881,7 @@ function right_nav() {
'icon' => $THEME->get_image_url('settings'),
'alt' => '',
'weight' => 10,
'iconclass' => 'cog'
),
'inbox' => array(
'path' => 'inbox',
......@@ -2891,18 +2892,21 @@ function right_nav() {
'countclass' => 'unreadmessagecount',
'linkid' => 'mail',
'weight' => 20,
'iconclass' => 'envelope'
),
'settings/account' => array(
'path' => 'settings/account',
'url' => 'account/index.php',
'title' => get_config('dropdownmenu') ? get_string('general') : get_string('account'),
'weight' => 10,
'iconclass' => 'user'
),
'settings/notifications' => array(
'path' => 'settings/notifications',
'url' => 'account/activity/preferences/index.php',
'title' => get_string('notifications'),
'weight' => 30,
'iconclass' => 'flag'
),
);
......
/*
* Base structure
*/
/* Move down content because we have a fixed navbar that is 50px tall */
body {
max-width:100%;
overflow-x:hidden;
@media (min-width: 768px) {
padding-top: 65px;
}
}
// override some stuff from RAW @todo deleteonce we don't need this anymore
.header{
ul li {
margin: 0;
}
}
#site-logo {
margin: 0
}
#usf {
float: none;
clear: none;
}
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.main {
max-width: 100%;
overflow-x: hidden;
}
.content-main {
@media (min-width: 768px) {
margin-left: 250px;
}
}
.site-logo{
padding-top: 5px;
float: left;
padding-left: 5px;
}
/*
* Main content
*/
.main .page-header {
margin-top: 0;
}
.footer {
max-width:100%;
}
\ No newline at end of file
.pseudolabel {
// @extend label;
font-weight: bold;
vertical-align: top;
width: 200px;
display: inline-block;
}
.message {
font-size: 0.9em;
color: $gray;
margin-left: 20px;
}
.pieform-fieldset {
.html {
@include clearfix;
}
}
.main form {
margin:20px 0;
label,
.pseudolabel {
@extend .control-label;
@media (min-width: $screen-sm-min) {
width:200px;
}
}
.stacked-label {
display: inline-block;
@media (min-width: $screen-sm-min) {
width:200px;
}
}
div.html {
padding-bottom: 15px;
}
}
input + label {
font-weight: normal;
}
input[type=text],
input[type=password],
textarea,
select {
@extend .form-control;
}
.form-group {
@media (min-width: $screen-sm-min) {
&.input-small {
width: 25%;
.input-small {
margin:0;
}
}
}
&.radio,
&.checkbox {
@extend .radio-inline;
margin-left:0;
padding: 0 15px 20px 20px;
}
input[type=text],
input[type=password],
textarea,
select {
max-width: 85%;
display: inline-block;
@media (min-width: $screen-sm-min) {
width: 500px;
}
}
}
// remove styles on outer element as class is duplicated to form element
.form-group.btn {
background: none;
border: none;
padding-left: 0;
&:hover {
background: none;
border: none;
}
}
.wysiwyg label,
.textarea label {
vertical-align: top;
}
// hide unwanted elements
.nav-tabs + .submit,
.pieform-fieldset legend {
display: none;
}
.radio-aligned {
display: inline-block;
}
.no-radio {
margin-left: 19px;
}
.aligned-list {
display: block;
@media (min-width: $screen-sm-min) {
display: inline-block;
width: 500px;
}
}
.align-with-input {
display: inline-block;
margin-left: 0;
@media (min-width: $screen-sm-min) {
margin-left: 200px;
}
}
.requiredmarker {
color: $brand-danger;
}
.top-nav.navbar-nav {
float:right;
margin-right: 10%;
@media (min-width: 768px) {
clear:none;
float:none;
margin-right: 0;
}
>li {
display: inline-block;
float: left;
}
.has-icon {
.nav-title{
display:none; //if icon - hide title on mobile
@media (min-width: 768px) {
display:inline-block;
}
}
.glyphicon {
margin-right:5px;
}
}
}
.header.navbar {
margin-bottom:0;
padding: 5px 0;
border-bottom:1px solid #f0f0f0;
}
.navbar-fixed-top{
position:relative;
@media (min-width: 768px) {
position:fixed;
}
}
.navbar-nav {
font-size:14px;
}
.navbar-form {
height: 0;
visibility: hidden;
opacity:0;
@media (min-width: 768px) {
opacity:1;
visibility: visible;
height:auto;
@include transition-duration(0.3s);
}
input[type=submit] {
display:none;
}
}
.navbar-toggle {
width:42px;
}
.menu-toggle {
border-left: 0;
border-radius: 0 3px 3px 0;
&:before {
position:absolute;
left: 0;
top: 7px;
display:block;
content:"";
height:20px;
border-right:1px solid #ccc;
border-left:1px solid rgb(255, 255, 255);
}
}
.search-toggle {
color: rgb(119, 119, 119);
line-height: 13px;
height: 34px;
margin-right: 0;
border-right: 0;
border-radius: 3px 0 0 3px;
}
/*
* Top navigation
* Hide default border to remove 1px line.
*/
.navbar-fixed-top {
border: 0;
}
.navbar-form input {
@extend .form-control;
}
.navbar-nav {
margin: 7px -5px;
@media (min-width: 768px) {
margin: 7px -15px;
}
}
.nav>li>a {
padding: 10px 5px;
@media (min-width: 768px) {
padding: 10px 15px;
}
}
/*
* main-nav
*/
/* Hide for mobile, show later */
.main-nav.navbar-inverse {
@media (min-width: 768px) {
li {
margin: 0;
a {
color: rgba(#fff, 0.8);
}
}
.navbar-brand{
color:#fff;
}
}
}
.main-nav .nav > li > a {
padding: 15px 20px;
line-height: 20px;
}
.navbar-inverse.navbar-nav .active>a,
.navbar-inverse.navbar-nav li > a:hover,
.navbar-inverse.navbar-nav li >a:focus {
color: #fff;
background-color: #080808;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
color: #4F751F;
background-color: #fefefe;
}
\ No newline at end of file
// Basic type related customisation
\ No newline at end of file
// Basic type related customisation
h1 {
@extend .page-header;
}
table {
max-width:100%;
}
\ No newline at end of file
......@@ -74,14 +74,22 @@
// END bootstrap //
// General customisation and component files go here...
@import "utilities/classes"; // Custom utility classes
@import "utilities/whitespace"; // Custom utility classes
@import "components/typography";
@import "components/forms";
@import "components/js";
@import "components/layout";
@import "components/header";
@import "components/top-nav";
@import "components/tabs";
@import "components/navbar";
@import "components/secondary-nav";
@import "components/main-nav";
@import "components/toggles";
@import "components/contextual-help";
@import "components/fonts";
// Keep these files last to override all other style sheets
......
......@@ -55,7 +55,7 @@ $font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
$font-size-base: 16px !default;
$font-size-base: 14px !default;
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
......@@ -75,7 +75,7 @@ $line-height-computed: floor(($font-size-base * $line-height-base)) !default;
$headings-font-family: inherit !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.1 !default;
$headings-color: $mahara-green;
$headings-color: rgb(51, 51, 51);
//== Iconography
......@@ -365,7 +365,7 @@ $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2
$navbar-collapse-max-height: 340px !default;
$navbar-default-color: #777 !default;
$navbar-default-bg: #f8f8f8 !default;
$navbar-default-bg: #fff !default;