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 @@
$(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);
......
{$html|safe}
{if $commentcount || $commentcount === '0'}
{$comments|safe}
{/if}
{if $html}{$html|safe}{/if}{if $commentcount || $commentcount === '0'}{$comments|safe}{/if}
......@@ -2,4 +2,3 @@
{if $commentcount || $commentcount === '0'}
{$comments|safe}
{/if}
......@@ -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,23 +141,23 @@ $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')
......
......@@ -3,6 +3,7 @@
jQuery(function($) {
"use strict";
function ajaxBlocks() {
// Load content into ajax blocks
var baseurl = $('head').attr('data-basehref'),
......@@ -24,10 +25,20 @@ jQuery(function($) {
}
}
}
function hideEmptyBlocks() {
var blocks = $('.block[data-blocktype-noajax]'),
i;
// Hide empty panels
$('.block[data-blocktype-noajax]:empty').closest('.panel').addClass('hidden');
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();
});
......@@ -21,4 +21,10 @@
fill: #f2f2f2;
stroke: #ccc;
}
svg {
@media (max-width: $screen-sm-min) {
zoom: 0.8;
}
}
}
......@@ -2,7 +2,7 @@
vertical-align: baseline;
.customrow & {
margin-top: 26px; // layout builder button alignment
margin-top: 25px; // layout builder button alignment
}
}
......
......@@ -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;
......
......@@ -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;
}
}
}
}
......
......@@ -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;
}
}
<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}
......
<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>
......
......@@ -3,27 +3,27 @@
<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}
<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>
{str tag=editlayout section=view}
<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>
{str tag=chooseskin section=skin}
<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>
{str tag=edittitleanddescription section=view}
<span class="hidden-xs">{str tag=edittitleanddescription section=view}</span>
</a>
{/if}
......
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