Commit 87cd215b authored by Liam Sharpe's avatar Liam Sharpe Committed by Aaron Wells
Browse files

Collections (bootstrap)

Bug 1465107: Use Bootstrap CSS Framework

Change-Id: I3f79ff19d94e52c15607b761bde94bad78ba1cac
parent e28ef768
...@@ -35,6 +35,7 @@ $searchform = pieform(array( ...@@ -35,6 +35,7 @@ $searchform = pieform(array(
'defaultvalue' => $query, 'defaultvalue' => $query,
), ),
'submit' => array( 'submit' => array(
'class' => 'btn btn-success',
'type' => 'submit', 'type' => 'submit',
'value' => get_string('search'), 'value' => get_string('search'),
), ),
......
...@@ -127,6 +127,7 @@ if ($views) { ...@@ -127,6 +127,7 @@ if ($views) {
foreach ($views['views'] as &$v) { foreach ($views['views'] as &$v) {
$v->remove = pieform(array( $v->remove = pieform(array(
'renderer' => 'div', 'renderer' => 'div',
'class' => 'form-as-button pull-right',
'name' => 'removeview_' . $v->view, 'name' => 'removeview_' . $v->view,
'successcallback' => 'removeview_submit', 'successcallback' => 'removeview_submit',
'elements' => array( 'elements' => array(
...@@ -135,10 +136,11 @@ if ($views) { ...@@ -135,10 +136,11 @@ if ($views) {
'value' => $v->view, 'value' => $v->view,
), ),
'submit' => array( 'submit' => array(
'type' => 'submit', 'type' => 'button',
'usebuttontag' => true,
'class' => 'btn btn-link btn-sm',
'confirm' => get_string('viewconfirmremove', 'collection'), 'confirm' => get_string('viewconfirmremove', 'collection'),
'value' => get_string('remove'), 'value' => '<span class="fa fa-times text-danger"><span class="sr-only">' . get_string('remove') . '</span></span>' ),
),
), ),
)); ));
} }
......
...@@ -97,6 +97,7 @@ if ($views) { ...@@ -97,6 +97,7 @@ if ($views) {
foreach ($views['views'] as &$v) { foreach ($views['views'] as &$v) {
$v->remove = pieform(array( $v->remove = pieform(array(
'renderer' => 'div', 'renderer' => 'div',
'class' => 'form-as-button pull-right',
'name' => 'removeview_' . $v->view, 'name' => 'removeview_' . $v->view,
'successcallback' => 'removeview_submit', 'successcallback' => 'removeview_submit',
'elements' => array( 'elements' => array(
...@@ -105,9 +106,11 @@ if ($views) { ...@@ -105,9 +106,11 @@ if ($views) {
'value' => $v->view, 'value' => $v->view,
), ),
'submit' => array( 'submit' => array(
'type' => 'submit', 'type' => 'button',
'usebuttontag' => true,
'class' => 'btn btn-link btn-sm',
'confirm' => get_string('viewconfirmremove', 'collection'), 'confirm' => get_string('viewconfirmremove', 'collection'),
'value' => get_string('remove'), 'value' => '<span class="fa fa-times text-danger"><span class="sr-only">' . get_string('remove') . '</span></span>',
), ),
), ),
)); ));
...@@ -119,15 +122,17 @@ $viewsform = null; ...@@ -119,15 +122,17 @@ $viewsform = null;
if ($available = Collection::available_views($owner, $groupid, $institutionname)) { if ($available = Collection::available_views($owner, $groupid, $institutionname)) {
foreach ($available as $a) { foreach ($available as $a) {
$elements['view_'.$a->id] = array( $elements['view_'.$a->id] = array(
'class' => 'btn btn-default',
'renderer' => 'div', 'renderer' => 'div',
'type' => 'checkbox', 'type' => 'checkbox',
'title' => $a->title, 'title' => $a->title,
); );
} }
$elements['submit'] = array( $elements['submit'] = array(
'class' => 'btn btn-primary pull-right input-with-icon icon-arrow-right', 'class' => 'btn btn-primary pull-right mtl',
'type' => 'submit', 'type' => 'button',
'value' => get_string('addviews','collection'), 'usebuttontag' => true,
'value' => '<span class="fa fa-arrow-right prs"></span>' . get_string('addviews','collection'),
'goto' => get_config('wwwroot') . 'collection/views.php?id='.$id, 'goto' => get_config('wwwroot') . 'collection/views.php?id='.$id,
); );
...@@ -159,13 +164,14 @@ $inlinejs .= <<<EOF ...@@ -159,13 +164,14 @@ $inlinejs .= <<<EOF
// update the page with the new table // update the page with the new table
if (data.returnCode == '0') { if (data.returnCode == '0') {
\$j('#collectionviews').replaceWith(data.message.html); \$j('#collectionviews').replaceWith(data.message.html);
if (viewid) { if (viewid) {
\$j('#addviews_view_' + viewid + '_container').remove(); \$j('#addviews_view_' + viewid + '_container').remove();
// check if we have just removed the last option leaving // check if we have just removed the last option leaving
// only the add pages button // only the add pages button
if (\$j("#addviews .checkbox").children().length <= 1) { if (\$j("#addviews .checkbox").children().length <= 1) {
\$j("#addviews").remove(); \$j("#addviews").remove();
\$j("#pagestoadd").append('$noviewsavailable'); \$j("#pagestoadd .panel-body").append('$noviewsavailable');
} }
} }
if (data.message.message) { if (data.message.message) {
...@@ -241,14 +247,14 @@ $inlinejs .= <<<EOF ...@@ -241,14 +247,14 @@ $inlinejs .= <<<EOF
}; };
var wiredrop = function() { var wiredrop = function() {
\$j('#collectionpages .message').droppable({ \$j('#collectionpages .dropzone-previews').droppable({
accept: "div", accept: "div",
drop: function (e, ui) { drop: function (e, ui) {
var labelfor = ui.draggable.children().attr('for'); var labelfor = ui.draggable.children().attr('for');
if (typeof labelfor !== 'undefined' && labelfor !== false) { if (typeof labelfor !== 'undefined' && labelfor !== false) {
// remove all but the digits // remove all but the digits
var viewid = ui.draggable.children().attr('for').replace(/[^\d.]/g,''); var viewid = ui.draggable.children().attr('for').replace(/[^\d.]/g,'');
\$j('#collectionpages .message').replaceWith('<div id="collectionviews"><div id="row_' + viewid + '">' + ui.draggable.html() + '</div></div>'); \$j('#collectionpages .dropzone-previews').replaceWith('<div id="collectionviews"><div id="row_' + viewid + '">' + ui.draggable.html() + '</div></div>');
wiresortables(); wiresortables();
updaterows(viewid); updaterows(viewid);
} }
...@@ -271,7 +277,7 @@ $inlinejs .= <<<EOF ...@@ -271,7 +277,7 @@ $inlinejs .= <<<EOF
}; };
// init // init
if (\$j('#collectionviews > div').length > 0) { if (\$j('#collectionviews > li').length > 0) {
wireaddrow(); wireaddrow();
wiresortables(); wiresortables();
} }
......
...@@ -8,10 +8,3 @@ ...@@ -8,10 +8,3 @@
* @copyright For copyright information on Mahara, please see the README file distributed with this software. * @copyright For copyright information on Mahara, please see the README file distributed with this software.
* *
*/ */
var styleNode = createDOM('link', {
'rel' : 'stylesheet',
'type': 'text/css',
'href': config['theme']['style/js.css']
});
appendChildNodes(getFirstElementByTagAndClassName('head'), styleNode);
...@@ -117,7 +117,7 @@ if ($body) { ...@@ -117,7 +117,7 @@ if ($body) {
} }
echo '<div id="includefeedback" class="form-group checkbox">'; echo '<div id="includefeedback" class="form-group checkbox">';
echo $elements['includefeedback']['html'] . ' <span class="mll">' . $elements['includefeedback']['labelhtml'] .'</span>'; echo $elements['includefeedback']['html'] . ' <span class="">' . $elements['includefeedback']['labelhtml'] .'</span>';
echo '<div class="description">' . $elements['includefeedback']['description'] . '</div>'; echo '<div class="description">' . $elements['includefeedback']['description'] . '</div>';
echo '</div>'; echo '</div>';
echo '<div id="export_submit_container">'; echo '<div id="export_submit_container">';
......
...@@ -29,11 +29,17 @@ ...@@ -29,11 +29,17 @@
} }
} }
.block-placeholder {
.block-placeholder,
.highlight {
@extend .dropzone-previews; @extend .dropzone-previews;
width: 100%; width: 100%;
padding: 20px; padding: 20px;
margin-bottom: 20px; margin-bottom: 20px;
background-color: $panel-warning-heading-bg; background-color: $panel-warning-heading-bg;
border: 2px dashed darken( $panel-warning-border, 10%); border: 2px dashed darken( $panel-warning-border, 10%);
}
.highlight {
margin:0;
} }
\ No newline at end of file
...@@ -42,3 +42,7 @@ ...@@ -42,3 +42,7 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.folderhover td{
background-color: $state-warning-bg;
}
// remove styles on outer element as class is duplicated to form element // remove styles on outer element as class is duplicated to form element
.form-group.btn, .form-group.btn:not(.checkbox),
.form-group-inline.btn { .form-group-inline.btn {
background: none; background: none;
border: none; border: none;
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
} }
} }
.form-group { .form-group:not(.ui-draggable) {
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
margin: 0; margin: 0;
padding: 20px 0; padding: 20px 0;
...@@ -84,6 +84,7 @@ ...@@ -84,6 +84,7 @@
} }
.checkbox { .checkbox {
display: inline-block; display: inline-block;
position: relative;
} }
input[type=checkbox] { input[type=checkbox] {
margin-left: 0; margin-left: 0;
......
.ui-draggable:not(.submit):not(.btn) { .ui-draggable.form-group:not(.button) {
@extend .fa; @extend .fa;
background-color: $brand-default;
min-height: 30px; min-height: 30px;
float: none; float: none;
clear: both; clear: both;
...@@ -8,11 +7,11 @@ ...@@ -8,11 +7,11 @@
padding-left: 50px; padding-left: 50px;
line-height: 30px; line-height: 30px;
display: block; display: block;
text-align: left;
&:before { &:before {
background: #333;
box-sizing: border-box; box-sizing: border-box;
color: rgba(#fff, 0.7); color: rgba(#777, 0.7);
content: "\f047"; content: "\f047";
display: block; display: block;
height: 100%; height: 100%;
...@@ -29,7 +28,15 @@ ...@@ -29,7 +28,15 @@
top: 5px; top: 5px;
} }
} }
.draggable {
z-index: 1;
position: relative;
}
.droppable {
z-index: 0;
position: relative;
}
// This is a different case wheree we can use the icon itself // This is a different case wheree we can use the icon itself
.icon-drag:before{ .icon-drag:before{
display: block; display: block;
...@@ -45,9 +52,6 @@ ...@@ -45,9 +52,6 @@
min-width: 200px; min-width: 200px;
} }
.folderhover td{
background-color: $state-warning-bg;
}
.ui-draggable-dragging { .ui-draggable-dragging {
.blocktype-drag { .blocktype-drag {
......
...@@ -38,12 +38,7 @@ $robotoslab: ( ...@@ -38,12 +38,7 @@ $robotoslab: (
@each $fontname, $style in $robotoslab { @each $fontname, $style in $robotoslab {
@font-face { @font-face {
font-family: 'Roboto Slab'; font-family: 'Roboto Slab';
src: url('../fonts/robotoslab/#{$fontname}.eot'); src: url('../fonts/robotoslab/#{$fontname}.ttf') format('truetype');
src: url('../fonts/robotoslab/#{$fontname}.eot') format('embedded-opentype'),
url('../fonts/robotoslab/#{$fontname}.woff2') format('woff2'),
url('../fonts/robotoslab/#{$fontname}.woff') format('woff'),
url('../fonts/robotoslab/#{$fontname}.ttf') format('truetype'),
url('../fonts/robotoslab/#{$fontname}.svg##{$fontname}') format('svg');
font-weight: nth($style, 1); font-weight: nth($style, 1);
font-style: nth($style, 2); font-style: nth($style, 2);
} }
......
This diff is collapsed.
This diff is collapsed.
...@@ -13,11 +13,11 @@ ...@@ -13,11 +13,11 @@
{/if} {/if}
<td>{$group->visibility}</td> <td>{$group->visibility}</td>
<td class="right"> <td class="right">
<a title="{str tag="groupmanage" section="admin"}" href="{$WWWROOT}admin/groups/manage.php?id={$group->id}"> <a class="mrl" title="{str tag="groupmanage" section="admin"}" href="{$WWWROOT}admin/groups/manage.php?id={$group->id}">
<img src="{theme_url filename="images/btn_configure.png"}" alt="{str(tag=groupmanagespecific section=admin arg1=$group->name)|escape:html|safe}"> <span class="fa fa-cog mrs"></span>{str(tag=groupmanagespecific section=admin arg1=$group->name)|escape:html|safe}
</a> </a>
<a title="{str tag="delete"}" href="{$WWWROOT}admin/groups/delete.php?id={$group->id}"> <a title="{str tag="delete"}" href="{$WWWROOT}admin/groups/delete.php?id={$group->id}">
<img src="{theme_url filename="images/btn_deleteremove.png"}" alt="{str(tag=deletespecific arg1=$group->name)|escape:html|safe}"> <span class="fa fa-trash text-danger prs"></span>{str(tag=deletespecific arg1=$group->name)|escape:html|safe}
</a> </a>
</td> </td>
</tr> </tr>
......
<table id="collectionviews" class="fullwidth grid"> <ol class="list-group" id="collectionviews">
<tbody>
{foreach from=$views.views item=view} {foreach from=$views.views item=view}
<tr class="{cycle values='r0,r1'}" id="row_{$view->view}"> <li class="list-group-item" id="row_{$view->view}">
{if $views.count > 1} {if $views.count > 1}
<td class="displayordercontrols control-buttons"> {if $view->displayorder == $views.min}
{if $view->displayorder == $views.min}
<div id="viewdisplayorder_{$view->view}" class="justdown"> <a href="{$displayurl}&amp;view={$view->view}&amp;direction=down">
<a href="{$displayurl}&amp;view={$view->view}&amp;direction=down"><img src="{theme_url filename='images/btn_movedown.png'}" alt="{str tag=moveitemdown}" ></a> <span class="fa fa-long-arrow-down prs"></span>
</div> </a>
{elseif $view->displayorder == $views.max}
<div id="viewdisplayorder_{$view->view}" class="justup"> {elseif $view->displayorder == $views.max}
<a href="{$displayurl}&amp;view={$view->view}&amp;direction=up"><img src="{theme_url filename='images/btn_moveup.png'}" alt="{str tag=moveitemup}" ></a>
</div> <a href="{$displayurl}&amp;view={$view->view}&amp;direction=up">
{else} <span class="fa fa-long-arrow-up prs"></span>
<div id="viewdisplayorder_{$view->view}"> </a>
<a href="{$displayurl}&amp;view={$view->view}&amp;direction=up"><img src="{theme_url filename='images/btn_moveup.png'}" alt="{str tag=moveitemup}" ></a>
<a href="{$displayurl}&amp;view={$view->view}&amp;direction=down"><img src="{theme_url filename='images/btn_movedown.png'}" alt="{str tag=moveitemdown}" ></a> {else}
</div>
{/if} <a href="{$displayurl}&amp;view={$view->view}&amp;direction=up">
</td> <span class="fa fa-long-arrow-up prs"></span>
{else} </a>
<td>&nbsp;</td> <a href="{$displayurl}&amp;view={$view->view}&amp;direction=down">
{/if} <span class="fa fa-long-arrow-down "></span>
<td><label><a href="{$view->fullurl}">{$view->title}</a></label></td> </a>
<td><div class="fr">{$view->remove|safe}</div></td> {/if}
</tr> {/if}
{/foreach} <strong>
</tbody> <a href="{$view->fullurl}" class="text-link">
</table> {$view->title}
</a>
</strong>
{$view->remove|safe}
</li>
{/foreach}
</ol>
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<p class="lead">{str tag=collectiondragupdate1 section=collection}</p> <p class="lead">{str tag=collectiondragupdate1 section=collection}</p>
</div> </div>
<div class="col-md-12"> <div class="col-md-12">
<fieldset class="panel panel-default panel-half first" id="pagestoadd"> <fieldset class="panel panel-default panel-half first draggable" id="pagestoadd">
<h3 class="panel-heading"> <h3 class="panel-heading">
{str tag=addviewstocollection section=collection} {str tag=addviewstocollection section=collection}
</h3> </h3>
...@@ -25,47 +25,52 @@ ...@@ -25,47 +25,52 @@
{/if} {/if}
</div> </div>
</fieldset> </fieldset>
<fieldset class="panel panel-default panel-half" id="pagesadded"> <fieldset class="panel panel-default panel-half droppable" id="pagesadded">
<h3 class="panel-heading">{str tag=viewsincollection section=collection}</h3> <h3 class="panel-heading">{str tag=viewsincollection section=collection}</h3>
{if !$views} {if !$views}
<div class="panel-body"> <div class="message dropzone-previews full-width">
<div class="message dropzone-previews full-width"> <div class="dz-message">
<div class="dz-message"> {str tag=noviews section=collection}
{str tag=noviews section=collection}
</div>
</div> </div>
</div> </div>
{else} {else}
<table id="collectionviews" class="table"> <ol class="list-group" id="collectionviews">
<tbody> {foreach from=$views.views item=view}
{foreach from=$views.views item=view} <li class="list-group-item" id="row_{$view->view}">
<tr class="{cycle values='r0,r1'}" id="row_{$view->view}"> {if $views.count > 1}
{if $views.count > 1} {if $view->displayorder == $views.min}
<td class="displayordercontrols control-buttons">
{if $view->displayorder == $views.min} <a href="{$displayurl}&amp;view={$view->view}&amp;direction=down">
<div id="viewdisplayorder_{$view->view}" class="justdown"> <span class="fa fa-long-arrow-down prs"></span>
<a href="{$displayurl}&amp;view={$view->view}&amp;direction=down"><img src="{theme_url filename='images/btn_movedown.png'}" alt="{str tag=moveitemdown}" ></a> </a>
</div>
{elseif $view->displayorder == $views.max} {elseif $view->displayorder == $views.max}
<div id="viewdisplayorder_{$view->view}" class="justup">
<a href="{$displayurl}&amp;view={$view->view}&amp;direction=up"><img src="{theme_url filename='images/btn_moveup.png'}" alt="{str tag=moveitemup}" ></a> <a href="{$displayurl}&amp;view={$view->view}&amp;direction=up">
</div> <span class="fa fa-long-arrow-up prs"></span>
{else} </a>
<div id="viewdisplayorder_{$view->view}">
<a href="{$displayurl}&amp;view={$view->view}&amp;direction=up"><img src="{theme_url filename='images/btn_moveup.png'}" alt="{str tag=moveitemup}" ></a> {else}
<a href="{$displayurl}&amp;view={$view->view}&amp;direction=down"><img src="{theme_url filename='images/btn_movedown.png'}" alt="{str tag=moveitemdown}" ></a>
</div> <a href="{$displayurl}&amp;view={$view->view}&amp;direction=up">
{/if} <span class="fa fa-long-arrow-up prs"></span>
</td> </a>
{else} <a href="{$displayurl}&amp;view={$view->view}&amp;direction=down">
<td>&nbsp;</td> <span class="fa fa-long-arrow-down "></span>
{/if} </a>
<td><strong><a href="{$view->fullurl}">{$view->title}</a></strong></td> {/if}
<td><div class="fr">{$view->remove|safe}</div></td> {/if}
</tr> <strong>
{/foreach} <a href="{$view->fullurl}" class="text-link">
</tbody> {$view->title}
</table> </a>
</strong>
{$view->remove|safe}
</li>
{/foreach}
</ol>
{/if} {/if}
</fieldset> </fieldset>
</div> </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