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
...@@ -15,10 +15,11 @@ ...@@ -15,10 +15,11 @@
$(newrow).find('#selectcollayoutrow_' + numrows).val(currentcollayout); $(newrow).find('#selectcollayoutrow_' + numrows).val(currentcollayout);
$(newrow).find('#selectcollayoutrow_' + numrows).attr('id', 'selectcollayoutrow_' + (numrows + 1)); $(newrow).find('#selectcollayoutrow_' + numrows).attr('id', 'selectcollayoutrow_' + (numrows + 1));
if ((oldremovebutton = $(newrow).find('button')).length != 0) { 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 { 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); $('#customrow_' + numrows).after(newrow);
$('#viewlayout_customlayoutnumrows').val(numrows + 1); $('#viewlayout_customlayoutnumrows').val(numrows + 1);
...@@ -232,4 +233,4 @@ ...@@ -232,4 +233,4 @@
init(); init();
}); });
}( window.CustomLayoutManager = window.CustomLayoutManager || {}, jQuery )); }( window.CustomLayoutManager = window.CustomLayoutManager || {}, jQuery ));
\ No newline at end of file
{$html|safe} {if $html}{$html|safe}{/if}{if $commentcount || $commentcount === '0'}{$comments|safe}{/if}
{if $commentcount || $commentcount === '0'}
{$comments|safe}
{/if}
...@@ -2,4 +2,3 @@ ...@@ -2,4 +2,3 @@
{if $commentcount || $commentcount === '0'} {if $commentcount || $commentcount === '0'}
{$comments|safe} {$comments|safe}
{/if} {/if}
...@@ -59,8 +59,8 @@ $output .= '</div></fieldset></div>'; ...@@ -59,8 +59,8 @@ $output .= '</div></fieldset></div>';
$output .= '<div id="viewlayout_adv_container" class="advancedlayoutfieldset form-group collapsible-group">'; $output .= '<div id="viewlayout_adv_container" class="advancedlayoutfieldset form-group collapsible-group">';
$output .= '<fieldset class="pieform-fieldset advancedlayoutfieldset collapsible collapsed">' $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">' . '<legend><h3><a href="#viewlayout_advancedlayoutselect_container" data-toggle="collapse" aria-expanded="false" aria-controls="#viewlayout_advancedlayoutselect_container" class="collapsed">'
. get_string('advancedoptions', 'view') . get_string('advancedoptions', 'view')
. '<span class="fa fa-chevron-down pls collapse-indicator pull-right"> </span></a></h3></legend>'; . '<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">'; $output .= '<div id="viewlayout_advancedlayoutselect_container" class="advancedlayoutselect fieldset-body collapse">';
...@@ -81,7 +81,7 @@ for ($row = 0; $row < $templatedata['maxrows']; $row++) { ...@@ -81,7 +81,7 @@ for ($row = 0; $row < $templatedata['maxrows']; $row++) {
$text = Pieform::hsc($data['columns']); $text = Pieform::hsc($data['columns']);
$output .= '<div class="layoutoption thumbnail pull-left text-center mlm">' $output .= '<div class="layoutoption thumbnail pull-left text-center mlm">'
. '<label class="accessible-hidden sr-only" for="advancedlayout_' . Pieform::hsc($value) . '">' . $text . '</label>' . '<label class="accessible-hidden sr-only" for="advancedlayout_' . Pieform::hsc($value) . '">' . $text . '</label>'
. ($description != '' ? '<div class="radio-description">' . $description . '</div>' : '') . ($description != '' ? '<div class="radio-description">' . $description . '</div>' : '')
. '<div class="layoutthumb">' . $data['layout'] . '</div>' . '<div class="layoutthumb">' . $data['layout'] . '</div>'
. '<input type="radio" name="advancedlayoutselect" id="advancedlayout_' . Pieform::hsc($value) . '"' . '<input type="radio" name="advancedlayoutselect" id="advancedlayout_' . Pieform::hsc($value) . '"'
...@@ -95,8 +95,8 @@ for ($row = 0; $row < $templatedata['maxrows']; $row++) { ...@@ -95,8 +95,8 @@ for ($row = 0; $row < $templatedata['maxrows']; $row++) {
$output .= '</div>'; $output .= '</div>';
$output .= '</fieldset>'; $output .= '</fieldset>';
$output .= '<fieldset class="pieform-fieldset cretelayoutfieldset collapsible collapsed last">' $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">' . '<legend><h3><a href="#viewlayout_createcustomlayout_container" data-toggle="collapse" aria-expanded="false" aria-controls="#viewlayout_createcustomlayout_container" class="collapsed">'
. get_string('createcustomlayout', 'view') . get_string('createcustomlayout', 'view')
. '<span class="fa fa-chevron-down pls collapse-indicator pull-right"> </span></a></h3></legend>'; . '<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">'; $output .= '<div id="viewlayout_createcustomlayout_container" class="createcustomlayout fieldset-body collapse">';
...@@ -107,13 +107,17 @@ if (!isset($templatedata['clnumcolumnsoptions']) || !is_array($templatedata['cln ...@@ -107,13 +107,17 @@ if (!isset($templatedata['clnumcolumnsoptions']) || !is_array($templatedata['cln
throw new PieformException('Custom layouts need a set of possible layout options.'); throw new PieformException('Custom layouts need a set of possible layout options.');
} }
$output .= '<div id="createcustomlayoutpane">' $output .= '<div id="createcustomlayoutpane" class="row col-static">'
. '<div id="customrows">'
. '<div id="customrow_1" class="customrow form-group ptm five-across multi-label clearfix">' . '<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="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>' . '<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) { foreach ($templatedata['clnumcolumnsoptions'] as $value => $data) {
$output .= '<option value="' . $value . '" ' . (($templatedata['clnumcolumnsdefault'] == $value)? 'selected="selected"' : '') . '>' . $data . '</option>'; $output .= '<option value="' . $value . '" ' . (($templatedata['clnumcolumnsdefault'] == $value)? 'selected="selected"' : '') . '>' . $data . '</option>';
...@@ -122,7 +126,7 @@ $output .= '<div id="createcustomlayoutpane">' ...@@ -122,7 +126,7 @@ $output .= '<div id="createcustomlayoutpane">'
$output .= '</select></div>' $output .= '</select></div>'
. '<div class="pull-left field">' . '<div class="pull-left field">'
. '<label for="selectcollayoutrow_1">' . get_string('columnlayout', 'view') . '</label>' . '<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) { foreach ($templatedata['columnlayoutoptions'] as $value => $data) {
$numcols = count(explode('-', $data)); $numcols = count(explode('-', $data));
...@@ -137,26 +141,26 @@ $output .= '<div id="createcustomlayoutpane">' ...@@ -137,26 +141,26 @@ $output .= '<div id="createcustomlayoutpane">'
} }
$output .= '</select>' $output .= '</select>'
. '</div>'
. '</div>' . '</div>'
. '</div>'; . '</div>';
// 'Add row' button // '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>' .'<span class="fa fa-lg fa-plus-circle prm text-primary"></span>'
. get_string('addarow', 'view') . get_string('addarow', 'view')
.'</button>'; .'</button>'
. '</div>';
// close 'createcustomlayoutpane' // close 'createcustomlayoutpane'
$output .= '</div>'; $output .= '</div>';
// preview pane // preview pane
$output .= '<div id="previewcustomlayoutpane" class="panel-footer">' $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()">' . '<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>' .'<span class="fa fa-lg fa-check prs"></span>'
. get_string('createnewlayout', 'view') . get_string('createnewlayout', 'view')
. '</button>' . '</button>'
. '</div>'; . '</div>';
......
...@@ -3,31 +3,42 @@ ...@@ -3,31 +3,42 @@
jQuery(function($) { jQuery(function($) {
"use strict"; "use strict";
// Load content into ajax blocks function ajaxBlocks() {
// Load content into ajax blocks
var baseurl = $('head').attr('data-basehref'), var baseurl = $('head').attr('data-basehref'),
blocks, blocks,
i, i,
id; id;
if($('.block').is('[data-blocktype-ajax]')){ if($('.block').is('[data-blocktype-ajax]')){
blocks = $('.block[data-blocktype-ajax]'); blocks = $('.block[data-blocktype-ajax]');
for(i = 0; i < blocks.length; i = i + 1) { for(i = 0; i < blocks.length; i = i + 1) {
id = $(blocks[i]).attr('data-blocktype-ajax'); id = $(blocks[i]).attr('data-blocktype-ajax');
$(blocks[i]).load(baseurl + "blocktype/blocktype.ajax.php?blockid="+ id, function(){ $(blocks[i]).load(baseurl + "blocktype/blocktype.ajax.php?blockid="+ id, function(){
if ($(this).is(':empty')){ if ($(this).is(':empty')){
$(this).closest('.panel').addClass('hidden'); $(this).closest('.panel').addClass('hidden');
} }
}); });
}
} }
} }
// Hide empty panels function hideEmptyBlocks() {
$('.block[data-blocktype-noajax]:empty').closest('.panel').addClass('hidden'); 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 // hack to fix issue with mochi kit js in inbox blocks
$('.mochi-collapse').on('click', function(){ $('.mochi-collapse').on('click', function(){
...@@ -38,4 +49,7 @@ jQuery(function($) { ...@@ -38,4 +49,7 @@ jQuery(function($) {
$(window).trigger('colresize'); $(window).trigger('colresize');
}); });
ajaxBlocks();
hideEmptyBlocks();
}); });
...@@ -21,4 +21,10 @@ ...@@ -21,4 +21,10 @@
fill: #f2f2f2; fill: #f2f2f2;
stroke: #ccc; stroke: #ccc;
} }
svg {
@media (max-width: $screen-sm-min) {
zoom: 0.8;
}
}
} }
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
vertical-align: baseline; vertical-align: baseline;
.customrow & { .customrow & {
margin-top: 26px; // layout builder button alignment margin-top: 25px; // layout builder button alignment
} }
} }
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
display: table; display: table;
border: 1px solid $panel-default-border; border: 1px solid $panel-default-border;
overflow: hidden; overflow: hidden;
&.left { &.left {
position:absolute; position:absolute;
left: 5px; left: 5px;
...@@ -20,6 +21,11 @@ ...@@ -20,6 +21,11 @@
} }
} }
&.position-bottom {
position:absolute;
bottom:17%;
}
&.user-icon-larger{ &.user-icon-larger{
width: 85px; width: 85px;
height: 85px; height: 85px;
......
...@@ -194,7 +194,7 @@ ...@@ -194,7 +194,7 @@
input[type=password], input[type=password],
select { select {
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
width: 150px; width: 155px;
} }
@media (min-width: $screen-lg-min) { @media (min-width: $screen-lg-min) {
width: 150px; width: 150px;
...@@ -206,8 +206,35 @@ ...@@ -206,8 +206,35 @@
label + select { label + select {
margin-left: 0px; // padding provided by label instead margin-left: 0px; // padding provided by label instead
} }
&.multi-label > .field { &.multi-label {
width: 200px; &.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;
}
}
} }
} }
......
...@@ -37,3 +37,12 @@ ...@@ -37,3 +37,12 @@
.fullwidth { .fullwidth {
width: 100%; width: 100%;
} }
// use to override relative positioning on bootstrap cols
.col-static {
position: relative;
min-height: 200px;
> [class^="col-"] {
position: static;
}
}
{include file="header.tpl"} {include file="header.tpl"}
<div class="row"> <div class="row">
<div class="col-md-9"> <div class="col-md-9">
{if $notrudeform}<div class="message deletemessage">{$notrudeform|safe}</div>{/if} {if $notrudeform}<div class="message deletemessage">{$notrudeform|safe}</div>{/if}
<h1 class="page-header"> <h1 class="page-header">
{$view->display_title()|safe} {$view->display_title()|safe}
{foreach from=$artefactpath item=a}: {foreach from=$artefactpath item=a}:
{if $a.url}<a href="{$a.url}">{/if} {if $a.url}<a href="{$a.url}">{/if}
{$a.title} {$a.title}
{if $a.url}</a>{/if} {if $a.url}</a>{/if}
{if $hasfeed} {if $hasfeed}
<a href="{$feedlink}"><span class="fa-rss fa pull-right"></span></a> <a href="{$feedlink}"><span class="fa-rss fa pull-right"></span></a>
{/if} {/if}
{/foreach} {/foreach}
</h1> </h1>
<div id="view" class="view-pane"> <div id="view" class="view-pane">
<div id="bottom-pane" class="panel panel-secondary"> <div id="bottom-pane" class="panel panel-secondary">
<div id="column-container" class="no-heading"> <div id="column-container" class="no-heading">
{$artefact|safe} {$artefact|safe}
</div> </div>
</div> </div>
</div> </div>
<div class="viewfooter ptxl"> <div class="viewfooter ptxl">
{if $feedback->count || $enablecomments} {if $feedback->count || $enablecomments}
<h4 class="title">{str tag="Comments" section="artefact.comment"}</h4> <h4 class="title">{str tag="Comments" section="artefact.comment"}</h4>
<hr /> <hr />
<div id="commentlist" class="commentlist"> <div id="commentlist" class="commentlist">
{$feedback->tablerows|safe} {$feedback->tablerows|safe}
</div> </div>
{$feedback->pagination|safe} {$feedback->pagination|safe}
{/if} {/if}
<div id="viewmenu" class="view-menu"> <div id="viewmenu" class="view-menu">
{include file="view/viewmenuartefact.tpl"} {include file="view/viewmenuartefact.tpl"}
</div> </div>
<div class="tab-content"> <div class="tab-content">
<div id="comment-form" role="tabpanel" class="tab-pane active"> <div id="comment-form" role="tabpanel" class="tab-pane active">
{$addfeedbackform|safe} {$addfeedbackform|safe}
</div> </div>
<div id="report-form" role="tabpanel" class="tab-pane"> <div id="report-form" role="tabpanel" class="tab-pane">
{$objectionform|safe} {$objectionform|safe}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{include file="footer.tpl"} {include file="footer.tpl"}
<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} {if $addremovecolumns}
<div class="btn-header btn-group mbl {if $column == 1}btn-three{else}btn-two{/if}"> <div class="btn-header btn-group mbl {if $column == 1}btn-three{else}btn-two{/if}">
{if $column == 1} {if $column == 1}
......
<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"> <div class="column-content">
{$blockcontent|safe} {$blockcontent|safe}
</div> </div>
......
<div class="toolbar mbxl pbxl"> <div class="toolbar mbxl pbxl">
<div class="btn-group btn-toolbar btn-group-top"> <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}"> <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="fa fa-lg fa-pencil prs"></span>
{str tag=editcontent section=view} <span class="hidden-xs">{str tag=editcontent section=view}</span>
</a> </a>
<a class="btn btn-default {if $selected == 'layout'}active{/if}" href="{$WWWROOT}view/layout.php?id={$viewid}{if $new}&new=1{/if}"> <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="fa fa-lg fa-columns prs"></span>
{str tag=editlayout section=view} <span class="hidden-xs">{str tag=editlayout section=view}</span>
</a> </a>
{if !$issitetemplate && can_use_skins(null, false, $issiteview)} {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}"> <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="fa fa-lg fa-paint-brush prs"></span>
{str tag=chooseskin section=skin} <span class="hidden-xs">{str tag=chooseskin section=skin}</span>
</a> </a>
{/if} {/if}
{if $edittitle} {if $edittitle}
<a class="btn btn-default {if $selected == 'title'}active{/if}" href="{$WWWROOT}view/edit.php?id={$viewid}{if $new}&new=1{/if}"> <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="fa fa-lg fa-cogs prs"></span>
{str tag=edittitleanddescription section=view} <span class="hidden-xs">{str tag=edittitleanddescription section=view}</span>
</a> </a>
{/if} {/if}
</div> </div>
{if !$issitetemplate} {if !$issitetemplate}