Skip to content

GitLab

Commit 982916f1 authored by Naomi Guyer's avatar Naomi Guyer Committed by Aaron Wells
Browse files

Page builder and layout builder (bootstrap) 

Bug 1465107: Use Bootstrap CSS Framework

Change-Id: Ied9c4b98103677e4737ab0efe289b5c379a6156b
parent 74b5a5e0
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 207 additions and 145 deletions
htdocs/js/customlayout.js
View file @ 982916f1
......@@ -15,10 +15,11 @@
$(newrow).find('#selectcollayoutrow_' + numrows).val(currentcollayout);
$(newrow).find('#selectcollayoutrow_' + numrows).attr('id', 'selectcollayoutrow_' + (numrows + 1));
if ((oldremovebutton = $(newrow).find('button')).length != 0) {
oldremovebutton.attr('class', 'pull-left btn btn-default removecustomrow_' + (numrows + 1));
oldremovebutton.attr('class', 'pull-left btn btn-sm btn-default removecustomrow_' + (numrows + 1));
}
else {
$(newrow).append('<button name="removerow" class="pull-left btn btn-default removecustomrow_' + (numrows + 1) + '" onclick="CustomLayoutManager.customlayout_remove_row(this)"><span class="fa fa-lg fa-times text-danger prs"></span> ' + get_string('removethisrow', 'view') + '</button>');
// wanring: classes are modified above for any subsequent button instances
$(newrow).append('<button name="removerow" class="pull-left btn btn-sm btn-default removecustomrow_' + (numrows + 1) + '" onclick="CustomLayoutManager.customlayout_remove_row(this)"><span class="fa fa-lg fa-times text-danger"></span><span class="hidden-xs pls"> ' + get_string('removethisrow', 'view') + '</span></button>');
}
$('#customrow_' + numrows).after(newrow);
$('#viewlayout_customlayoutnumrows').val(numrows + 1);
......@@ -232,4 +233,4 @@
init();
});
}( window.CustomLayoutManager = window.CustomLayoutManager || {}, jQuery ));
\ No newline at end of file
}( window.CustomLayoutManager = window.CustomLayoutManager || {}, jQuery ));
htdocs/theme/bootstrap/artefact/file/blocktype/folder/templates/folder.tpl
View file @ 982916f1
{$html|safe}
{if $commentcount || $commentcount === '0'}
{$comments|safe}
{/if}
{if $html}{$html|safe}{/if}{if $commentcount || $commentcount === '0'}{$comments|safe}{/if}
htdocs/theme/bootstrap/file/blocktype/folder/templates/folder.tpl
View file @ 982916f1
......@@ -2,4 +2,3 @@
{if $commentcount || $commentcount === '0'}
{$comments|safe}
{/if}
htdocs/theme/bootstrap/pieforms/viewlayout.php
View file @ 982916f1
......@@ -59,8 +59,8 @@ $output .= '</div></fieldset></div>';
$output .= '<div id="viewlayout_adv_container" class="advancedlayoutfieldset form-group collapsible-group">';
$output .= '<fieldset class="pieform-fieldset advancedlayoutfieldset collapsible collapsed">'
. '<legend><h3><a href="#viewlayout_advancedlayoutselect_container" data-toggle="collapse" aria-expanded="false" aria-controls="#viewlayout_advancedlayoutselect_container" class="collapsed">'
. get_string('advancedoptions', 'view')
. '<legend><h3><a href="#viewlayout_advancedlayoutselect_container" data-toggle="collapse" aria-expanded="false" aria-controls="#viewlayout_advancedlayoutselect_container" class="collapsed">'
. get_string('advancedoptions', 'view')
. '<span class="fa fa-chevron-down pls collapse-indicator pull-right"> </span></a></h3></legend>';
$output .= '<div id="viewlayout_advancedlayoutselect_container" class="advancedlayoutselect fieldset-body collapse">';
......@@ -81,7 +81,7 @@ for ($row = 0; $row < $templatedata['maxrows']; $row++) {
$text = Pieform::hsc($data['columns']);
$output .= '<div class="layoutoption thumbnail pull-left text-center mlm">'
. '<label class="accessible-hidden sr-only" for="advancedlayout_' . Pieform::hsc($value) . '">' . $text . '</label>'
. ($description != '' ? '<div class="radio-description">' . $description . '</div>' : '')
. '<div class="layoutthumb">' . $data['layout'] . '</div>'
. '<input type="radio" name="advancedlayoutselect" id="advancedlayout_' . Pieform::hsc($value) . '"'
......@@ -95,8 +95,8 @@ for ($row = 0; $row < $templatedata['maxrows']; $row++) {
$output .= '</div>';
$output .= '</fieldset>';
$output .= '<fieldset class="pieform-fieldset cretelayoutfieldset collapsible collapsed last">'
. '<legend><h3><a href="#viewlayout_createcustomlayout_container" data-toggle="collapse" aria-expanded="false" aria-controls="#viewlayout_createcustomlayout_container" class="collapsed">'
. get_string('createcustomlayout', 'view')
. '<legend><h3><a href="#viewlayout_createcustomlayout_container" data-toggle="collapse" aria-expanded="false" aria-controls="#viewlayout_createcustomlayout_container" class="collapsed">'
. get_string('createcustomlayout', 'view')
. '<span class="fa fa-chevron-down pls collapse-indicator pull-right"> </span></a></h3></legend>';
$output .= '<div id="viewlayout_createcustomlayout_container" class="createcustomlayout fieldset-body collapse">';
......@@ -107,13 +107,17 @@ if (!isset($templatedata['clnumcolumnsoptions']) || !is_array($templatedata['cln
throw new PieformException('Custom layouts need a set of possible layout options.');
}
$output .= '<div id="createcustomlayoutpane">'
. '<div id="customrows">'
. '<div id="customrow_1" class="customrow form-group ptm five-across multi-label clearfix">'
$output .= '<div id="createcustomlayoutpane" class="row col-static">'
. '<div class="col-xs-3 col-sm-2">'
. '<div class="mbxl user-icon layoutthumb preview position-bottom"><div id="custompreview">' . $templatedata['customlayout'] . '</div><p class="metadata text-center">' . get_string('layoutpreview', 'view') .'</p></div>'
. '</div>'
. '<div id="customrows" class="col-xs-9 col-sm-10">'
. '<div id="customrow_1" class="customrow form-group five-across multi-label clearfix">'
. '<div class="customrowtitle pull-left field"><strong>' . get_string('Row', 'view') . ' 1</strong></div>'
. '<div class="pull-left field">'
. '<div class="pull-left field field-selectnumcols">'
. '<label for="selectnumcolsrow_1">' . get_string('numberofcolumns', 'view') . '</label>'
. '<select name="selectnumcols" id="selectnumcolsrow_1" class="selectnumcols" onchange="CustomLayoutManager.customlayout_change_numcolumns(this)">';
. '<select name="selectnumcols" id="selectnumcolsrow_1" class="selectnumcols input-sm" onchange="CustomLayoutManager.customlayout_change_numcolumns(this)">';
foreach ($templatedata['clnumcolumnsoptions'] as $value => $data) {
$output .= '<option value="' . $value . '" ' . (($templatedata['clnumcolumnsdefault'] == $value)? 'selected="selected"' : '') . '>' . $data . '</option>';
......@@ -122,7 +126,7 @@ $output .= '<div id="createcustomlayoutpane">'
$output .= '</select></div>'
. '<div class="pull-left field">'
. '<label for="selectcollayoutrow_1">' . get_string('columnlayout', 'view') . '</label>'
. '<select name="selectcollayout" id="selectcollayoutrow_1" class="selectcollayout" onchange="CustomLayoutManager.customlayout_change_column_layout()">';
. '<select name="selectcollayout" id="selectcollayoutrow_1" class="selectcollayout input-sm" onchange="CustomLayoutManager.customlayout_change_column_layout()">';
foreach ($templatedata['columnlayoutoptions'] as $value => $data) {
$numcols = count(explode('-', $data));
......@@ -137,26 +141,26 @@ $output .= '<div id="createcustomlayoutpane">'
}
$output .= '</select>'
. '</div>'
. '</div>'
. '</div>';
// 'Add row' button
$output .='<button type="button" name="addrow" class="btn btn-default mtm" id="addrow" onclick="CustomLayoutManager.customlayout_add_row()">'
$output .='<button type="button" name="addrow" class="btn btn-sm btn-default mtm" id="addrow" onclick="CustomLayoutManager.customlayout_add_row()">'
.'<span class="fa fa-lg fa-plus-circle prm text-primary"></span>'
. get_string('addarow', 'view')
.'</button>';
.'</button>'
. '</div>';
// close 'createcustomlayoutpane'
$output .= '</div>';
// preview pane
$output .= '<div id="previewcustomlayoutpane" class="panel-footer">'
. '<h5 class="mts lead">' . get_string('layoutpreview', 'view') . '</h5>'
. '<div id="custompreview" class="mbxl user-icon">' . $templatedata['customlayout'] . '</div>'
. '<button type="button" name="submitlayout" id="addlayout" class="btn btn-primary" onclick="CustomLayoutManager.customlayout_submit_layout()">'
.'<span class="fa fa-lg fa-check prs"></span>'
. get_string('createnewlayout', 'view')
. get_string('createnewlayout', 'view')
. '</button>'
. '</div>';
......
htdocs/theme/bootstrap/static/js/block.js
View file @ 982916f1
......@@ -3,31 +3,42 @@
jQuery(function($) {
"use strict";
// Load content into ajax blocks
function ajaxBlocks() {
// Load content into ajax blocks
var baseurl = $('head').attr('data-basehref'),
blocks,
i,
id;
var baseurl = $('head').attr('data-basehref'),
blocks,
i,
id;
if($('.block').is('[data-blocktype-ajax]')){
blocks = $('.block[data-blocktype-ajax]');
if($('.block').is('[data-blocktype-ajax]')){
blocks = $('.block[data-blocktype-ajax]');
for(i = 0; i < blocks.length; i = i + 1) {
id = $(blocks[i]).attr('data-blocktype-ajax');
for(i = 0; i < blocks.length; i = i + 1) {
id = $(blocks[i]).attr('data-blocktype-ajax');
$(blocks[i]).load(baseurl + "blocktype/blocktype.ajax.php?blockid="+ id, function(){
if ($(this).is(':empty')){
$(this).closest('.panel').addClass('hidden');
}
});
$(blocks[i]).load(baseurl + "blocktype/blocktype.ajax.php?blockid="+ id, function(){
if ($(this).is(':empty')){
$(this).closest('.panel').addClass('hidden');
}
});
}
}
}
// Hide empty panels
$('.block[data-blocktype-noajax]:empty').closest('.panel').addClass('hidden');
function hideEmptyBlocks() {
var blocks = $('.block[data-blocktype-noajax]'),
i;
for (i = 0; i < blocks.length; i = i + 1){
if($.trim($(blocks[i]).html()).length < 1) {
$(blocks[i]).closest('.panel').addClass('hidden');
}
}
}
// hack to fix issue with mochi kit js in inbox blocks
$('.mochi-collapse').on('click', function(){
......@@ -38,4 +49,7 @@ jQuery(function($) {
$(window).trigger('colresize');
});
ajaxBlocks();
hideEmptyBlocks();
});
htdocs/theme/bootstrap/static/sass/_custom.scss
View file @ 982916f1
......@@ -21,4 +21,10 @@
fill: #f2f2f2;
stroke: #ccc;
}
svg {
@media (max-width: $screen-sm-min) {
zoom: 0.8;
}
}
}
htdocs/theme/bootstrap/static/sass/components/_btn.scss
View file @ 982916f1
......@@ -2,7 +2,7 @@
vertical-align: baseline;
.customrow & {
margin-top: 26px; // layout builder button alignment
margin-top: 25px; // layout builder button alignment
}
}
......
htdocs/theme/bootstrap/static/sass/components/_user-icon.scss
View file @ 982916f1
......@@ -5,6 +5,7 @@
display: table;
border: 1px solid $panel-default-border;
overflow: hidden;
&.left {
position:absolute;
left: 5px;
......@@ -20,6 +21,11 @@
}
}
&.position-bottom {
position:absolute;
bottom:17%;
}
&.user-icon-larger{
width: 85px;
height: 85px;
......
htdocs/theme/bootstrap/static/sass/form/_form-group.scss
View file @ 982916f1
......@@ -194,7 +194,7 @@
input[type=password],
select {
@media (min-width: $screen-sm-min) {
width: 150px;
width: 155px;
}
@media (min-width: $screen-lg-min) {
width: 150px;
......@@ -206,8 +206,35 @@
label + select {
margin-left: 0px; // padding provided by label instead
}
&.multi-label > .field {
width: 200px;
&.multi-label {
&.customrow {
padding: 5px 0;
}
> .field {
width: 167px;
&.field-selectnumcols {
width: 123px;
}
.selectnumcols {
width: 107px;
}
select {
max-width: 90%;
}
label {
font-size: 0.8em;
color: #888;
}
&.customrowtitle {
width: 70px;
margin-top:30px;
}
}
}
}
......
htdocs/theme/bootstrap/static/sass/utilities/_classes.scss
View file @ 982916f1
......@@ -37,3 +37,12 @@
.fullwidth {
width: 100%;
}
// use to override relative positioning on bootstrap cols
.col-static {
position: relative;
min-height: 200px;
> [class^="col-"] {
position: static;
}
}
htdocs/theme/bootstrap/templates/artefact/artefact.tpl
View file @ 982916f1
{include file="header.tpl"}
<div class="row">
<div class="col-md-9">
{if $notrudeform}<div class="message deletemessage">{$notrudeform|safe}</div>{/if}
<h1 class="page-header">
{$view->display_title()|safe}
{foreach from=$artefactpath item=a}:
{if $a.url}<a href="{$a.url}">{/if}
{$a.title}
{if $a.url}</a>{/if}
{if $hasfeed}
<a href="{$feedlink}"><span class="fa-rss fa pull-right"></span></a>
{/if}
{/foreach}
</h1>
<div id="view" class="view-pane">
<div id="bottom-pane" class="panel panel-secondary">
<div id="column-container" class="no-heading">
{$artefact|safe}
</div>
</div>
</div>
<div class="viewfooter ptxl">
{if $feedback->count || $enablecomments}
<h4 class="title">{str tag="Comments" section="artefact.comment"}</h4>
<hr />
<div id="commentlist" class="commentlist">
{$feedback->tablerows|safe}
</div>
{$feedback->pagination|safe}
{/if}
<div id="viewmenu" class="view-menu">
{include file="view/viewmenuartefact.tpl"}
</div>
<div class="tab-content">
<div id="comment-form" role="tabpanel" class="tab-pane active">
{$addfeedbackform|safe}
</div>
<div id="report-form" role="tabpanel" class="tab-pane">
{$objectionform|safe}
</div>
</div>
</div>
</div>
<div class="col-md-9">
{if $notrudeform}<div class="message deletemessage">{$notrudeform|safe}</div>{/if}
<h1 class="page-header">
{$view->display_title()|safe}
{foreach from=$artefactpath item=a}:
{if $a.url}<a href="{$a.url}">{/if}
{$a.title}
{if $a.url}</a>{/if}
{if $hasfeed}
<a href="{$feedlink}"><span class="fa-rss fa pull-right"></span></a>
{/if}
{/foreach}
</h1>
<div id="view" class="view-pane">
<div id="bottom-pane" class="panel panel-secondary">
<div id="column-container" class="no-heading">
{$artefact|safe}
</div>
</div>
</div>
<div class="viewfooter ptxl">
{if $feedback->count || $enablecomments}
<h4 class="title">{str tag="Comments" section="artefact.comment"}</h4>
<hr />
<div id="commentlist" class="commentlist">
{$feedback->tablerows|safe}
</div>
{$feedback->pagination|safe}
{/if}
<div id="viewmenu" class="view-menu">
{include file="view/viewmenuartefact.tpl"}
</div>
<div class="tab-content">
<div id="comment-form" role="tabpanel" class="tab-pane active">
{$addfeedbackform|safe}
</div>
<div id="report-form" role="tabpanel" class="tab-pane">
{$objectionform|safe}
</div>
</div>
</div>
</div>
</div>
{include file="footer.tpl"}
htdocs/theme/bootstrap/templates/view/columnediting.tpl
View file @ 982916f1
<div id="row_{$row}_column_{$column}" class="column column-layout columns{$numcolumns}{if $column == 1} firstcolumn{/if}{if $column == $numcolumns} lastcolumn{/if}" {if $width}style="width:{if $width == 100} {$width }%;{elseif $width == 33}31.3%;{else}{$width - 2}%;{/if}"{/if}>
<div id="row_{$row}_column_{$column}" class="column column-layout columns{$numcolumns}{if $column == 1} firstcolumn{/if}{if $column == $numcolumns} lastcolumn{/if}" {if $width}style="width:{if $width == 100} {$width }%;{$width - 2}%;{/if}"{/if}>
{if $addremovecolumns}
<div class="btn-header btn-group mbl {if $column == 1}btn-three{else}btn-two{/if}">
{if $column == 1}
......
htdocs/theme/bootstrap/templates/view/columnviewing.tpl
View file @ 982916f1
<div id="row_{$row}_column_{$column}" class="column-layout columns{$numcolumns}{if $column == 1} first{/if}{if $column == $numcolumns} last{/if}" {if $width}style="width:{if $width == 100} {$width}%;{elseif $width == 33}31.3%;{else}{$width - 2}%;{/if}"{/if}>
<div id="row_{$row}_column_{$column}" class="column-layout columns{$numcolumns}{if $column == 1} first{/if}{if $column == $numcolumns} last{/if}" {if $width}style="width:{if $width == 100} {$width}%;{else}{$width - 2}%;{/if}"{/if}>
<div class="column-content">
{$blockcontent|safe}
</div>
......
htdocs/theme/bootstrap/templates/view/editviewtabs.tpl
View file @ 982916f1
<div class="toolbar mbxl pbxl">
<div class="btn-group btn-toolbar btn-group-top">
<a class="btn btn-default {if $selected == 'content'}active{/if}" href="{$WWWROOT}view/blocks.php?id={$viewid}{if $new}&new=1{/if}">
<span class="fa fa-lg fa-pencil prs"></span>
{str tag=editcontent section=view}
</a>
<a class="btn btn-default {if $selected == 'layout'}active{/if}" href="{$WWWROOT}view/layout.php?id={$viewid}{if $new}&new=1{/if}">
<span class="fa fa-lg fa-columns prs"></span>
{str tag=editlayout section=view}
</a>
{if !$issitetemplate && can_use_skins(null, false, $issiteview)}
<a class="btn btn-default {if $selected == 'skin'}active{/if}" href="{$WWWROOT}view/skin.php?id={$viewid}{if $new}&new=1{/if}">
<span class="fa fa-lg fa-paint-brush prs"></span>
{str tag=chooseskin section=skin}
</a>
{/if}
{if $edittitle}
<a class="btn btn-default {if $selected == 'title'}active{/if}" href="{$WWWROOT}view/edit.php?id={$viewid}{if $new}&new=1{/if}">
<span class="fa fa-lg fa-cogs prs"></span>
{str tag=edittitleanddescription section=view}
</a>
{/if}
</div>
{if !$issitetemplate}
<a class="text-small pull-left" href="{$displaylink}">
{str tag=displayview section=view}
</a>
{if $edittitle || $viewtype == 'profile'}
<a class="plm text-small pull-left" href="{$WWWROOT}view/access.php?id={$viewid}{if $new}&new=1{/if}">
<span class="fa fa-unlock-alt"></span>
{str tag=shareview section=view}
</a>
{/if}
{/if}
<div class="btn-group btn-toolbar btn-group-top">
<a class="btn btn-default {if $selected == 'content'}active{/if}" href="{$WWWROOT}view/blocks.php?id={$viewid}{if $new}&new=1{/if}">
<span class="fa fa-lg fa-pencil prs"></span>
<span class="hidden-xs">{str tag=editcontent section=view}</span>
</a>
<a class="btn btn-default {if $selected == 'layout'}active{/if}" href="{$WWWROOT}view/layout.php?id={$viewid}{if $new}&new=1{/if}">
<span class="fa fa-lg fa-columns prs"></span>
<span class="hidden-xs">{str tag=editlayout section=view}</span>
</a>
{if !$issitetemplate && can_use_skins(null, false, $issiteview)}
<a class="btn btn-default {if $selected == 'skin'}active{/if}" href="{$WWWROOT}view/skin.php?id={$viewid}{if $new}&new=1{/if}">
<span class="fa fa-lg fa-paint-brush prs"></span>
<span class="hidden-xs">{str tag=chooseskin section=skin}</span>
</a>
{/if}
{if $edittitle}
<a class="btn btn-default {if $selected == 'title'}active{/if}" href="{$WWWROOT}view/edit.php?id={$viewid}{if $new}&new=1{/if}">
<span class="fa fa-lg fa-cogs prs"></span>
<span class="hidden-xs">{str tag=edittitleanddescription section=view}</span>
</a>
{/if}
</div>
{if !$issitetemplate}
<a class="text-small pull-left" href="{$displaylink}">
{str tag=displayview section=view}
</a>
{if $edittitle || $viewtype == 'profile'}
<a class="plm text-small pull-left" href="{$WWWROOT}view/access.php?id={$viewid}{if $new}&new=1{/if}">
<span class="fa fa-unlock-alt"></span>
{str tag=shareview section=view}
</a>
{/if}
{/if}
</div>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment