Skip to content
GitLab
Commit 047daf48 authored by Pat Kira's avatar Pat Kira Committed by Robert Lyon
Browse files

Changing the table markup on edit collection page to divs 



Note: There are 2 templates that are identical and ideally
it should be replaced with a template include

Change-Id: I8a5814cc8bdfec23967fd2ba71a06549692c0e11
Signed-off-by: default avatarPat Kira <pat.kira@catalyst.net.nz>
parent a8cfe85b
Hide whitespace changes
Inline Side-by-side
htdocs/collection/views.json.php
View file @ 047daf48
......@@ -126,6 +126,7 @@ $views = $collection->get('views');
if ($views) {
foreach ($views['views'] as &$v) {
$v->remove = pieform(array(
'renderer' => 'div',
'name' => 'removeview_' . $v->view,
'successcallback' => 'removeview_submit',
'elements' => array(
......
htdocs/collection/views.php
View file @ 047daf48
......@@ -96,6 +96,7 @@ $views = $collection->views();
if ($views) {
foreach ($views['views'] as &$v) {
$v->remove = pieform(array(
'renderer' => 'div',
'name' => 'removeview_' . $v->view,
'successcallback' => 'removeview_submit',
'elements' => array(
......@@ -118,6 +119,7 @@ $viewsform = null;
if ($available = Collection::available_views($owner, $groupid, $institutionname)) {
foreach ($available as $a) {
$elements['view_'.$a->id] = array(
'renderer' => 'div',
'type' => 'checkbox',
'title' => $a->title,
);
......@@ -130,6 +132,7 @@ if ($available = Collection::available_views($owner, $groupid, $institutionname)
$viewsform = pieform(array(
'name' => 'addviews',
'renderer' => 'div',
'plugintype' => 'core',
'pluginname' => 'collection',
'autofocus' => false,
......@@ -140,16 +143,16 @@ if ($available = Collection::available_views($owner, $groupid, $institutionname)
$noviewsavailable = get_string('noviewsavailable', 'collection');
$inlinejs .= <<<EOF
\$j(function() {
var fixhelper = function(e, tr) {
var originals = tr.children();
var helper = tr.clone();
var fixhelper = function(e, div) {
var originals = div.children();
var helper = div.clone();
helper.children().each(function(index) {
\$j(this).width(originals.eq(index).width());
});
return helper;
};
var updaterows = function(viewid) {
var sortorder = \$j('#collectionviews tbody').sortable('serialize');
var sortorder = \$j('#collectionviews').sortable('serialize');
\$j.post(config['wwwroot'] + "collection/views.json.php", { sesskey: '$sesskey', id: $id, direction: sortorder })
.done(function(data) {
// update the page with the new table
......@@ -159,7 +162,7 @@ $inlinejs .= <<<EOF
\$j('#addviews_view_' + viewid + '_container').remove();
// check if we have just removed the last option leaving
// only the add pages button
if (\$j("#addviews tbody").children().length <= 1) {
if (\$j("#addviews .checkbox").children().length <= 1) {
\$j("#addviews").remove();
\$j("#pagestoadd").append('$noviewsavailable');
}
......@@ -175,32 +178,33 @@ $inlinejs .= <<<EOF
};
var wiresortables = function() {
\$j('#collectionviews tbody').sortable({
items: 'tr',
\$j('#collectionviews').sortable({
items: '> div',
cursor: 'move',
opacity: 0.6,
helper: fixhelper,
placeholder: "highlight",
over: function(e, ui) {
if (ui.placeholder[0].tagName == 'LABEL') {
var tr = \$j('#collectionviews tbody tr:first');
var label = \$j('#collectionviews tbody label.highlight');
label.css('width', tr.width());
label.css('height', tr.height());
label.css('display', 'table-row');
if (ui.placeholder[0].tagName == 'DIV') {
var container = \$j('#collectionviews');
var div = \$j('#collectionviews div.highlight');
div.css('width', container.width());
div.css('height', '30px');
}
},
stop: function(e, ui) {
var labelfor = ui.item.attr('for');
// Get label within the div using children
var labelfor = ui.item.children().attr('for');
if (typeof labelfor !== 'undefined' && labelfor !== false) {
var viewid = ui.item.attr('for').replace(/[^\d.]/g,''); // remove all but the digits
ui.item.replaceWith('<tr id="row_' + viewid + '" class="dropped-in-row"><td colspan="3">' + ui.item.html() + '</td></tr>');
// remove all but the digits
var viewid = ui.item.children().attr('for').replace(/[^\d.]/g,'');
ui.item.replaceWith('<div id="row_' + viewid + '" class="dropped-in-row">' + ui.item.html() + '</div>');
updaterows(viewid);
}
else {
}
else {
updaterows(false);
}
},
}
}
})
.disableSelection()
.hover(function() {
......@@ -209,8 +213,8 @@ $inlinejs .= <<<EOF
};
var wireaddrow = function() {
\$j('#addviews label').draggable({
connectToSortable: '#collectionviews tbody',
\$j('#addviews div').draggable({
connectToSortable: '#collectionviews',
cursor: 'move',
revert: 'invalid',
helper: 'clone',
......@@ -220,7 +224,7 @@ $inlinejs .= <<<EOF
};
var wireaddnewrow = function() {
\$j('#addviews label').draggable({
\$j('#addviews > div').draggable({
cursor: 'move',
revert: 'invalid',
helper: 'clone',
......@@ -237,12 +241,13 @@ $inlinejs .= <<<EOF
var wiredrop = function() {
\$j('#collectionpages .message').droppable({
accept: "label",
accept: "div",
drop: function (e, ui) {
var labelfor = ui.draggable.attr('for');
var labelfor = ui.draggable.children().attr('for');
if (typeof labelfor !== 'undefined' && labelfor !== false) {
var viewid = ui.draggable.attr('for').replace(/[^\d.]/g,''); // remove all but the digits
\$j('#collectionpages .message').replaceWith('<table id="collectionviews"><tbody><tr id="row_' + viewid + '"><td colspan="3">' + ui.draggable.html() + '</td></tr></tbody></table>');
// 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>');
wiresortables();
updaterows(viewid);
}
......@@ -265,7 +270,7 @@ $inlinejs .= <<<EOF
};
// init
if (\$j('#collectionviews tbody').length > 0) {
if (\$j('#collectionviews > div').length > 0) {
wireaddrow();
wiresortables();
}
......
htdocs/theme/raw/static/style/style.css
View file @ 047daf48
......@@ -2976,15 +2976,21 @@ ul.favorskins {
margin: 0 0 5px 0;
float: right;
}
#collectionviews td {
vertical-align: middle;
#collectionviews .removepage {
margin: 3px 5px;
}
#collectionviews td form table td {
padding: 0;
#collectionviews .displayordercontrols {
float: left;
margin: 3px 0 0 5px;
}
.displayordercontrols div.justdown {
#collectionviews .displayordercontrols div.justdown {
padding-left: 35px;
}
.collectionpage strong {
margin-left: 10px;
line-height: 2.5;
height: 30px;
}
#collectionviews form input.submit {
background: url(../images/btn_deleteremove.png) no-repeat 0 0;
border: 0;
......@@ -3018,19 +3024,16 @@ fieldset#pagestoadd legend {
position: absolute;
top: -25px;
}
fieldset#pagestoadd table {
margin: 0;
width: 100%;
}
fieldset#pagestoadd .pieform tr.checkbox th {
padding: 1px 5px 1px 0;
fieldset#pagestoadd .pieform .checkbox {
padding: 1px 5px 2px 0;
}
fieldset#pagestoadd .pieform tr.checkbox td {
fieldset#pagestoadd .pieform div.checkbox input {
vertical-align: middle;
padding: 5px 0;
width: 24px;
}
fieldset#pagestoadd .pieform tr.checkbox th label {
display: block;
fieldset#pagestoadd .pieform div.checkbox label {
display: inline-block;
background: #f7f7f7;
border: 1px solid #dadada;
color: #333333;
......@@ -3039,8 +3042,9 @@ fieldset#pagestoadd .pieform tr.checkbox th label {
-moz-border-radius: 3px;
border-radius: 3px;
font-weight: normal;
width:78%;
}
fieldset#pagestoadd .pieform tr.checkbox th label.ui-draggable-dragging {
fieldset#pagestoadd .pieform .ui-draggable-dragging label {
width: 205px !important;
background: #989898;
border-color: #989898;
......@@ -3048,22 +3052,16 @@ fieldset#pagestoadd .pieform tr.checkbox th label.ui-draggable-dragging {
z-index: 1;
position: relative;
}
fieldset#pagestoadd .pieform .ui-draggable-dragging input {
display: none;
}
#collectionviews label.ui-sortable-placeholder {
min-height: 30px;
display: block;
}
#collectionviews tr.dropped-in-row td {
background: #f5f5f5;
min-height: 30px;
padding: 8px 10px;
}
fieldset#pagestoadd .pieform tr.checkbox th {
vertical-align: middle;
}
fieldset#pagestoadd tr#addviews_submit_container th,
fieldset#pagestoadd tr#addviews_submit_container td {
float: left;
padding: 10px 0 0 0;
fieldset#pagestoadd #addviews_submit_container {
margin-top: 10px;
}
fieldset#pagesadded {
-webkit-box-shadow: 0 0 1px 1px #888888;
......
htdocs/theme/raw/templates/collection/views.json.tpl
View file @ 047daf48
<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 btns2">
{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>
<div id="collectionviews" class="fullwidth grid">
{foreach from=$views.views item=view}
<div class="{cycle values='r0,r1'} collectionpage" id="row_{$view->view}">
{if $views.count > 1}
<div class="displayordercontrols btns2">
{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}
<td>&nbsp;</td>
<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><label><a href="{$view->fullurl}">{$view->title}</a></label></td>
<td><div class="fr">{$view->remove|safe}</div></td>
</tr>
{/foreach}
</tbody>
</table>
</div>
{else}
<span>&nbsp;</span>
{/if}
<strong>
<a href="{$view->fullurl}">
{$view->title}
</a>
</strong>
<div class="fr removepage">
{$view->remove|safe}
</div>
</div>
{/foreach}
</div>
htdocs/theme/raw/templates/collection/views.tpl
View file @ 047daf48
......@@ -19,12 +19,11 @@
{if !$views}
<div class="message">{str tag=noviews section=collection}</div>
{else}
<table id="collectionviews" class="fullwidth grid">
<tbody>
<div id="collectionviews" class="fullwidth grid">
{foreach from=$views.views item=view}
<tr class="{cycle values='r0,r1'}" id="row_{$view->view}">
<div class="{cycle values='r0,r1'} collectionpage" id="row_{$view->view}">
{if $views.count > 1}
<td class="displayordercontrols btns2">
<div class="displayordercontrols btns2">
{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>
......@@ -39,16 +38,21 @@
<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>
</div>
{else}
<td>&nbsp;</td>
<span>&nbsp;</span>
{/if}
<td><strong><a href="{$view->fullurl}">{$view->title}</a></strong></td>
<td><div class="fr">{$view->remove|safe}</div></td>
</tr>
<strong>
<a href="{$view->fullurl}">
{$view->title}
</a>
</strong>
<div class="fr removepage">
{$view->remove|safe}
</div>
</div>
{/foreach}
</tbody>
</table>
</div>
{/if}
</fieldset>
<div class="cb"></div>
......
Supports Markdown
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