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

Collections (bootstrap)

Bug 1465107: Use Bootstrap CSS Framework

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