Merge branch 'user-results'
Svein-Tore Griff With
commit
bcedede174
|
|
@ -0,0 +1,255 @@
|
|||
var H5PDataView = (function ($) {
|
||||
|
||||
/**
|
||||
* Initialize a new H5P data view.
|
||||
*
|
||||
* @class
|
||||
* @param {Object} container
|
||||
* Element to clear out and append to.
|
||||
* @param {String} source
|
||||
* URL to get data from. Data format: {num: 123, rows:[[1,2,3],[2,4,6]]}
|
||||
* @param {Array} headers
|
||||
* List with column headers. Can be strings or objects with options like
|
||||
* "text" and "sortable". E.g.
|
||||
* [{text: 'Col 1', sortable: true}, 'Col 2', 'Col 3']
|
||||
* @param {Object} l10n
|
||||
* Localization / translations. e.g.
|
||||
* {
|
||||
* loading: 'Loading data.',
|
||||
* ajaxFailed: 'Failed to load data.',
|
||||
* noData: "There's no data available that matches your criteria.",
|
||||
* currentPage: 'Page $current of $total',
|
||||
* nextPage: 'Next page',
|
||||
* previousPage: 'Previous page',
|
||||
* search: 'Search'
|
||||
* }
|
||||
* @param {Object} classes
|
||||
* Custom html classes to use on elements.
|
||||
* e.g. {tableClass: 'fixed'}.
|
||||
* @param {Array} filters
|
||||
* Make it possible to filter/search in the given column.
|
||||
* e.g. [null, true, null, null] will make it possible to do a text
|
||||
* search in column 2.
|
||||
* @param {Function} loaded
|
||||
* Callback for when data has been loaded.
|
||||
*/
|
||||
function H5PDataView(container, source, headers, l10n, classes, filters, loaded) {
|
||||
var self = this;
|
||||
|
||||
self.$container = $(container).addClass('h5p-data-view').html('');
|
||||
|
||||
self.source = source;
|
||||
self.headers = headers;
|
||||
self.l10n = l10n;
|
||||
self.classes = (classes === undefined ? {} : classes);
|
||||
self.filters = (filters === undefined ? [] : filters);
|
||||
self.loaded = loaded;
|
||||
|
||||
self.limit = 20;
|
||||
self.offset = 0;
|
||||
self.filterOn = [];
|
||||
|
||||
self.loadData();
|
||||
}
|
||||
|
||||
/**
|
||||
* Load data from source URL.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
H5PDataView.prototype.loadData = function () {
|
||||
var self = this;
|
||||
|
||||
// Throbb
|
||||
self.setMessage(H5PUtils.throbber(self.l10n.loading));
|
||||
|
||||
// Create URL
|
||||
var url = self.source;
|
||||
url += (url.indexOf('?') === -1 ? '?' : '&') + 'offset=' + self.offset + '&limit=' + self.limit;
|
||||
|
||||
// Add sorting
|
||||
if (self.sortBy !== undefined && self.sortDir !== undefined) {
|
||||
url += '&sortBy=' + self.sortBy + '&sortDir=' + self.sortDir;
|
||||
}
|
||||
|
||||
// Add filters
|
||||
var filtering;
|
||||
for (var i = 0; i < self.filterOn.length; i++) {
|
||||
if (self.filterOn[i] === undefined) {
|
||||
continue;
|
||||
}
|
||||
|
||||
filtering = true;
|
||||
url += '&filters[' + i + ']=' + encodeURIComponent(self.filterOn[i]);
|
||||
}
|
||||
|
||||
// Fire ajax request
|
||||
$.ajax({
|
||||
dataType: 'json',
|
||||
cache: true,
|
||||
url: url
|
||||
}).fail(function () {
|
||||
// Error handling
|
||||
self.setMessage($('<p/>', {text: self.l10n.ajaxFailed}));
|
||||
}).done(function (data) {
|
||||
if (!data.rows.length) {
|
||||
self.setMessage($('<p/>', {text: filtering ? self.l10n.noData : self.l10n.empty}));
|
||||
}
|
||||
else {
|
||||
// Update table data
|
||||
self.updateTable(data.rows);
|
||||
}
|
||||
|
||||
// Update pagination widget
|
||||
self.updatePagination(data.num);
|
||||
|
||||
if (self.loaded !== undefined) {
|
||||
self.loaded();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Display the given message to the user.
|
||||
*
|
||||
* @public
|
||||
* @param {jQuery} $message wrapper with message
|
||||
*/
|
||||
H5PDataView.prototype.setMessage = function ($message) {
|
||||
var self = this;
|
||||
|
||||
if (self.table === undefined) {
|
||||
self.$container.html('').append($message);
|
||||
}
|
||||
else {
|
||||
self.table.setBody($message);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Update table data.
|
||||
*
|
||||
* @public
|
||||
* @param {Array} rows
|
||||
*/
|
||||
H5PDataView.prototype.updateTable = function (rows) {
|
||||
var self = this;
|
||||
|
||||
if (self.table === undefined) {
|
||||
// Clear out container
|
||||
self.$container.html('');
|
||||
|
||||
// Add filters
|
||||
self.addFilters();
|
||||
|
||||
// Create new table
|
||||
self.table = new H5PUtils.Table(self.classes, self.headers);
|
||||
self.table.setHeaders(self.headers, function (col, dir) {
|
||||
// Sorting column or direction has changed callback.
|
||||
self.sortBy = col;
|
||||
self.sortDir = dir;
|
||||
self.loadData();
|
||||
});
|
||||
self.table.appendTo(self.$container);
|
||||
}
|
||||
|
||||
// Add/update rows
|
||||
self.table.setRows(rows);
|
||||
};
|
||||
|
||||
/**
|
||||
* Update pagination widget.
|
||||
*
|
||||
* @public
|
||||
* @param {Number} num size of data collection
|
||||
*/
|
||||
H5PDataView.prototype.updatePagination = function (num) {
|
||||
var self = this;
|
||||
|
||||
if (self.pagination === undefined) {
|
||||
// Create new widget
|
||||
var $pagerContainer = $('<div/>', {'class': 'h5p-pagination'});
|
||||
self.pagination = new H5PUtils.Pagination(num, self.limit, function (offset) {
|
||||
// Handle page changes in pagination widget
|
||||
self.offset = offset;
|
||||
self.loadData();
|
||||
}, self.l10n);
|
||||
|
||||
self.pagination.appendTo($pagerContainer);
|
||||
self.table.setFoot($pagerContainer);
|
||||
}
|
||||
else {
|
||||
// Update existing widget
|
||||
self.pagination.update(num, self.limit);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Add filters.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
H5PDataView.prototype.addFilters = function () {
|
||||
var self = this;
|
||||
|
||||
for (var i = 0; i < self.filters.length; i++) {
|
||||
if (self.filters[i] === true) {
|
||||
// Add text input filter for col i
|
||||
self.addTextFilter(i);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Add text filter for given col num.
|
||||
|
||||
* @public
|
||||
* @param {Number} col
|
||||
*/
|
||||
H5PDataView.prototype.addTextFilter = function (col) {
|
||||
var self = this;
|
||||
|
||||
/**
|
||||
* Find input value and filter on it.
|
||||
* @private
|
||||
*/
|
||||
var search = function () {
|
||||
var filterOn = $input.val().replace(/^\s+|\s+$/g, '');
|
||||
if (filterOn === '') {
|
||||
filterOn = undefined;
|
||||
}
|
||||
if (filterOn !== self.filterOn[col]) {
|
||||
self.filterOn[col] = filterOn;
|
||||
self.loadData();
|
||||
}
|
||||
};
|
||||
|
||||
// Add text field for filtering
|
||||
var typing;
|
||||
var $input = $('<input/>', {
|
||||
type: 'text',
|
||||
placeholder: self.l10n.search,
|
||||
on: {
|
||||
'blur': function () {
|
||||
clearTimeout(typing);
|
||||
search();
|
||||
},
|
||||
'keyup': function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
clearTimeout(typing);
|
||||
search();
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
clearTimeout(typing);
|
||||
typing = setTimeout(function () {
|
||||
search();
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}).appendTo(self.$container);
|
||||
};
|
||||
|
||||
return H5PDataView;
|
||||
})(H5P.jQuery);
|
||||
351
js/h5p-utils.js
351
js/h5p-utils.js
|
|
@ -64,7 +64,7 @@ var H5PUtils = H5PUtils || {};
|
|||
|
||||
return $field;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Replaces placeholder fields in translation strings
|
||||
*
|
||||
|
|
@ -130,4 +130,353 @@ var H5PUtils = H5PUtils || {};
|
|||
return $container;
|
||||
};
|
||||
|
||||
/**
|
||||
* Generic table class with useful helpers.
|
||||
*
|
||||
* @class
|
||||
* @param {Object} classes
|
||||
* Custom html classes to use on elements.
|
||||
* e.g. {tableClass: 'fixed'}.
|
||||
*/
|
||||
H5PUtils.Table = function (classes) {
|
||||
var numCols;
|
||||
var sortByCol;
|
||||
var $sortCol;
|
||||
var sortCol;
|
||||
var sortDir;
|
||||
|
||||
// Create basic table
|
||||
var tableOptions = {};
|
||||
if (classes.table !== undefined) {
|
||||
tableOptions['class'] = classes.table;
|
||||
}
|
||||
var $table = $('<table/>', tableOptions);
|
||||
var $thead = $('<thead/>').appendTo($table);
|
||||
var $tfoot = $('<tfoot/>').appendTo($table);
|
||||
var $tbody = $('<tbody/>').appendTo($table);
|
||||
|
||||
/**
|
||||
* Add columns to given table row.
|
||||
*
|
||||
* @private
|
||||
* @param {jQuery} $tr Table row
|
||||
* @param {(String|Object)} col Column properties
|
||||
* @param {Number} id Used to seperate the columns
|
||||
*/
|
||||
var addCol = function ($tr, col, id) {
|
||||
var options = {
|
||||
on: {}
|
||||
};
|
||||
|
||||
if (!(col instanceof Object)) {
|
||||
options.text = col;
|
||||
}
|
||||
else {
|
||||
if (col.text !== undefined) {
|
||||
options.text = col.text;
|
||||
}
|
||||
if (col.class !== undefined) {
|
||||
options.class = col.class;
|
||||
}
|
||||
|
||||
if (sortByCol !== undefined && col.sortable === true) {
|
||||
// Make sortable
|
||||
options.role = 'button';
|
||||
options.tabIndex = 1;
|
||||
|
||||
// This is the first sortable column, use as default sort
|
||||
if (sortCol === undefined) {
|
||||
sortCol = id;
|
||||
sortDir = 0;
|
||||
options['class'] = 'h5p-sort';
|
||||
}
|
||||
|
||||
options.on.click = function () {
|
||||
sort($th, id);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Append
|
||||
var $th = $('<th>', options).appendTo($tr);
|
||||
if (sortCol === id) {
|
||||
$sortCol = $th; // Default sort column
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates the UI when a column header has been clicked.
|
||||
* Triggers sorting callback.
|
||||
*
|
||||
* @private
|
||||
* @param {jQuery} $th Table header
|
||||
* @param {Number} id Used to seperate the columns
|
||||
*/
|
||||
var sort = function ($th, id) {
|
||||
if (id === sortCol) {
|
||||
// Change sorting direction
|
||||
if (sortDir === 0) {
|
||||
sortDir = 1;
|
||||
$th.addClass('h5p-reverse');
|
||||
}
|
||||
else {
|
||||
sortDir = 0;
|
||||
$th.removeClass('h5p-reverse');
|
||||
}
|
||||
}
|
||||
else {
|
||||
// Change sorting column
|
||||
$sortCol.removeClass('h5p-sort').removeClass('h5p-reverse');
|
||||
$sortCol = $th.addClass('h5p-sort');
|
||||
sortCol = id;
|
||||
sortDir = 0;
|
||||
}
|
||||
|
||||
sortByCol(sortCol, sortDir);
|
||||
};
|
||||
|
||||
/**
|
||||
* Set table headers.
|
||||
*
|
||||
* @public
|
||||
* @param {Array} cols
|
||||
* Table header data. Can be strings or objects with options like
|
||||
* "text" and "sortable". E.g.
|
||||
* [{text: 'Col 1', sortable: true}, 'Col 2', 'Col 3']
|
||||
* @param {Function} sort Callback which is runned when sorting changes
|
||||
*/
|
||||
this.setHeaders = function (cols, sort) {
|
||||
numCols = cols.length;
|
||||
sortByCol = sort;
|
||||
|
||||
// Create new head
|
||||
var $newThead = $('<thead/>');
|
||||
var $tr = $('<tr/>').appendTo($newThead);
|
||||
for (var i = 0; i < cols.length; i++) {
|
||||
addCol($tr, cols[i], i);
|
||||
}
|
||||
|
||||
// Update DOM
|
||||
$thead.replaceWith($newThead);
|
||||
$thead = $newThead;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set table rows.
|
||||
*
|
||||
* @public
|
||||
* @param {Array} rows Table rows with cols: [[1,'hello',3],[2,'asd',6]]
|
||||
*/
|
||||
this.setRows = function (rows) {
|
||||
var $newTbody = $('<tbody/>');
|
||||
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
var $tr = $('<tr/>').appendTo($newTbody);
|
||||
|
||||
for (var j = 0; j < rows[i].length; j++) {
|
||||
$('<td>', {
|
||||
html: rows[i][j]
|
||||
}).appendTo($tr);
|
||||
}
|
||||
}
|
||||
|
||||
$tbody.replaceWith($newTbody);
|
||||
$tbody = $newTbody;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set custom table body content. This can be a message or a throbber.
|
||||
* Will cover all table columns.
|
||||
*
|
||||
* @public
|
||||
* @param {jQuery} $content Custom content
|
||||
*/
|
||||
this.setBody = function ($content) {
|
||||
var $newTbody = $('<tbody/>');
|
||||
var $tr = $('<tr/>').appendTo($newTbody);
|
||||
$('<td>', {
|
||||
colspan: numCols
|
||||
}).append($content).appendTo($tr);
|
||||
$tbody.replaceWith($newTbody);
|
||||
$tbody = $newTbody;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set custom table foot content. This can be a pagination widget.
|
||||
* Will cover all table columns.
|
||||
*
|
||||
* @public
|
||||
* @param {jQuery} $content Custom content
|
||||
*/
|
||||
this.setFoot = function ($content) {
|
||||
var $newTfoot = $('<tfoot/>');
|
||||
var $tr = $('<tr/>').appendTo($newTfoot);
|
||||
$('<td>', {
|
||||
colspan: numCols
|
||||
}).append($content).appendTo($tr);
|
||||
$tfoot.replaceWith($newTfoot);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Appends the table to the given container.
|
||||
*
|
||||
* @public
|
||||
* @param {jQuery} $container
|
||||
*/
|
||||
this.appendTo = function ($container) {
|
||||
$table.appendTo($container);
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Generic pagination class. Creates a useful pagination widget.
|
||||
*
|
||||
* @class
|
||||
* @param {Number} num Total number of items to pagiate.
|
||||
* @param {Number} limit Number of items to dispaly per page.
|
||||
* @param {Function} goneTo
|
||||
* Callback which is fired when the user wants to go to another page.
|
||||
* @param {Object} l10n
|
||||
* Localization / translations. e.g.
|
||||
* {
|
||||
* currentPage: 'Page $current of $total',
|
||||
* nextPage: 'Next page',
|
||||
* previousPage: 'Previous page'
|
||||
* }
|
||||
*/
|
||||
H5PUtils.Pagination = function (num, limit, goneTo, l10n) {
|
||||
var current = 0;
|
||||
var pages = Math.ceil(num / limit);
|
||||
|
||||
// Create components
|
||||
|
||||
// Previous button
|
||||
var $left = $('<button/>', {
|
||||
html: '<',
|
||||
'class': 'button',
|
||||
title: l10n.previousPage
|
||||
}).click(function () {
|
||||
goTo(current - 1);
|
||||
});
|
||||
|
||||
// Current page text
|
||||
var $text = $('<span/>').click(function () {
|
||||
$input.width($text.width()).show().val(current + 1).focus();
|
||||
$text.hide();
|
||||
});
|
||||
|
||||
// Jump to page input
|
||||
var $input = $('<input/>', {
|
||||
type: 'number',
|
||||
min : 1,
|
||||
max: pages,
|
||||
on: {
|
||||
'blur': function () {
|
||||
gotInput();
|
||||
},
|
||||
'keyup': function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
gotInput();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}).hide();
|
||||
|
||||
// Next button
|
||||
var $right = $('<button/>', {
|
||||
html: '>',
|
||||
'class': 'button',
|
||||
title: l10n.nextPage
|
||||
}).click(function () {
|
||||
goTo(current + 1);
|
||||
});
|
||||
|
||||
/**
|
||||
* Check what page the user has typed in and jump to it.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
var gotInput = function () {
|
||||
var page = parseInt($input.hide().val());
|
||||
if (!isNaN(page)) {
|
||||
goTo(page - 1);
|
||||
}
|
||||
$text.show();
|
||||
};
|
||||
|
||||
/**
|
||||
* Update UI elements.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
var updateUI = function () {
|
||||
var next = current + 1;
|
||||
|
||||
// Disable or enable buttons
|
||||
$left.attr('disabled', current === 0);
|
||||
$right.attr('disabled', next === pages);
|
||||
|
||||
// Update counter
|
||||
$text.html(l10n.currentPage.replace('$current', next).replace('$total', pages));
|
||||
};
|
||||
|
||||
/**
|
||||
* Try to go to the requested page.
|
||||
*
|
||||
* @private
|
||||
* @param {Number} page
|
||||
*/
|
||||
var goTo = function (page) {
|
||||
if (page === current || page < 0 || page >= pages) {
|
||||
return; // Invalid page number
|
||||
}
|
||||
current = page;
|
||||
|
||||
updateUI();
|
||||
|
||||
// Fire callback
|
||||
goneTo(page * limit);
|
||||
};
|
||||
|
||||
/**
|
||||
* Update number of items and limit.
|
||||
*
|
||||
* @public
|
||||
* @param {Number} newNum Total number of items to pagiate.
|
||||
* @param {Number} newLimit Number of items to dispaly per page.
|
||||
*/
|
||||
this.update = function (newNum, newLimit) {
|
||||
if (newNum !== num || newLimit !== limit) {
|
||||
// Update num and limit
|
||||
num = newNum;
|
||||
limit = newLimit;
|
||||
pages = Math.ceil(num / limit);
|
||||
$input.attr('max', pages);
|
||||
|
||||
if (current >= pages) {
|
||||
// Content is gone, move to last page.
|
||||
goTo(pages - 1);
|
||||
return;
|
||||
}
|
||||
|
||||
updateUI();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Append the pagination widget to the given container.
|
||||
*
|
||||
* @public
|
||||
* @param {jQuery} $container
|
||||
*/
|
||||
this.appendTo = function ($container) {
|
||||
$left.add($text).add($input).add($right).appendTo($container);
|
||||
};
|
||||
|
||||
// Update UI
|
||||
updateUI();
|
||||
};
|
||||
|
||||
})(H5P.jQuery);
|
||||
|
|
|
|||
45
js/h5p.js
45
js/h5p.js
|
|
@ -28,6 +28,9 @@ else if (document.documentElement.msRequestFullscreen) {
|
|||
H5P.fullScreenBrowserPrefix = 'ms';
|
||||
}
|
||||
|
||||
// Keep track of when the H5Ps where started
|
||||
H5P.opened = {};
|
||||
|
||||
/**
|
||||
* Initialize H5P content.
|
||||
* Scans for ".h5p-content" in the document and initializes H5P instances where found.
|
||||
|
|
@ -87,6 +90,16 @@ H5P.init = function () {
|
|||
}
|
||||
$actions.insertAfter($container);
|
||||
|
||||
// Keep track of when we started
|
||||
H5P.opened[contentId] = new Date();
|
||||
|
||||
// Handle events when the user finishes the content. Useful for logging exercise results.
|
||||
instance.$.on('finish', function (event) {
|
||||
if (event.data !== undefined) {
|
||||
H5P.setFinished(contentId, event.data.score, event.data.maxScore, event.data.time);
|
||||
}
|
||||
});
|
||||
|
||||
if (H5P.isFramed) {
|
||||
// Make it possible to resize the iframe when the content changes size. This way we get no scrollbars.
|
||||
var iframe = window.parent.document.getElementById('h5p-iframe-' + contentId);
|
||||
|
|
@ -963,16 +976,38 @@ H5P.shuffleArray = function (array) {
|
|||
};
|
||||
|
||||
/**
|
||||
* DEPRECATED! Do not use this function directly, trigger the finish event
|
||||
* instead.
|
||||
*
|
||||
* Post finished results for user.
|
||||
* TODO: Should we use events instead? That way the parent can handle the results of the child.
|
||||
*
|
||||
* @param {Number} contentId
|
||||
* @param {Number} points
|
||||
* @param {Number} maxPoints
|
||||
* @param {Number} score achieved
|
||||
* @param {Number} maxScore that can be achieved
|
||||
* @param {Number} time optional reported time usage
|
||||
*/
|
||||
H5P.setFinished = function (contentId, points, maxPoints) {
|
||||
H5P.setFinished = function (contentId, score, maxScore, time) {
|
||||
if (H5P.postUserStatistics === true) {
|
||||
H5P.jQuery.post(H5P.ajaxPath + 'setFinished', {contentId: contentId, points: points, maxPoints: maxPoints});
|
||||
/**
|
||||
* Return unix timestamp for the given JS Date.
|
||||
*
|
||||
* @param {Date} date
|
||||
* @returns {Number}
|
||||
*/
|
||||
var toUnix = function (date) {
|
||||
return Math.round(date.getTime() / 1000);
|
||||
};
|
||||
|
||||
// Post the results
|
||||
// TODO: Should we use a variable with the complete path?
|
||||
H5P.jQuery.post(H5P.ajaxPath + 'setFinished', {
|
||||
contentId: contentId,
|
||||
score: score,
|
||||
maxScore: maxScore,
|
||||
opened: toUnix(H5P.opened[contentId]),
|
||||
finished: toUnix(new Date()),
|
||||
time: time
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@
|
|||
border: none;
|
||||
}
|
||||
|
||||
.h5p-admin-table tr:nth-child(odd) {
|
||||
.h5p-admin-table tr:nth-child(odd),
|
||||
.h5p-data-view tr:nth-child(odd) {
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
.h5p-admin-table tbody tr:hover {
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
}
|
||||
|
||||
.h5p-admin-buttons-wrapper {
|
||||
white-space: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.h5p-admin-table.libraries button {
|
||||
|
|
@ -69,13 +70,13 @@
|
|||
}
|
||||
|
||||
.h5p-admin-upgrade-library {
|
||||
color: #339900;
|
||||
color: #339900;
|
||||
}
|
||||
.h5p-admin-view-library {
|
||||
color: #0066cc;
|
||||
color: #0066cc;
|
||||
}
|
||||
.h5p-admin-delete-library {
|
||||
color: #990000;
|
||||
color: #990000;
|
||||
}
|
||||
.h5p-admin-delete-library:disabled,
|
||||
.h5p-admin-upgrade-library:disabled {
|
||||
|
|
@ -86,9 +87,9 @@
|
|||
.h5p-library-info {
|
||||
padding: 1em 1em;
|
||||
margin: 1em 0;
|
||||
|
||||
|
||||
width: 350px;
|
||||
|
||||
|
||||
border: 1px solid #DDD;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
|
@ -118,14 +119,14 @@
|
|||
.h5p-content-search {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
|
||||
width: 100%;
|
||||
padding: 5px 0;
|
||||
margin-top: 10px;
|
||||
|
||||
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 3px;
|
||||
box-shadow: 2px 2px 5px #888888;
|
||||
box-shadow: 2px 2px 5px #888888;
|
||||
}
|
||||
.h5p-content-search:before {
|
||||
font-family: 'H5P';
|
||||
|
|
@ -219,7 +220,7 @@ button.h5p-admin.disabled:hover {
|
|||
.h5p-content-pager > .pager-info:hover {
|
||||
background-color: #555;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
.h5p-content-pager > .pager-info,
|
||||
.h5p-content-pager > .h5p-pager-goto {
|
||||
margin: 0 10px;
|
||||
|
|
@ -248,3 +249,37 @@ button.h5p-admin.disabled:hover {
|
|||
#h5p-admin-container .h5p-admin-center {
|
||||
text-align: center;
|
||||
}
|
||||
.h5p-pagination {
|
||||
text-align: center;
|
||||
}
|
||||
.h5p-pagination > span, .h5p-pagination > input {
|
||||
margin: 0 1em;
|
||||
}
|
||||
.h5p-data-view input[type="text"] {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.h5p-data-view input[type="text"]::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.h5p-data-view th[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
.h5p-data-view th[role="button"].h5p-sort:after,
|
||||
.h5p-data-view th[role="button"]:hover:after,
|
||||
.h5p-data-view th[role="button"].h5p-sort.h5p-reverse:hover:after {
|
||||
content: "\25BE";
|
||||
position: relative;
|
||||
left: 0.5em;
|
||||
top: -1px;
|
||||
}
|
||||
.h5p-data-view th[role="button"].h5p-sort.h5p-reverse:after,
|
||||
.h5p-data-view th[role="button"].h5p-sort:hover:after {
|
||||
content: "\25B4";
|
||||
top: -2px;
|
||||
}
|
||||
.h5p-data-view th[role="button"]:hover:after,
|
||||
.h5p-data-view th[role="button"].h5p-sort.h5p-reverse:hover:after,
|
||||
.h5p-data-view th[role="button"].h5p-sort:hover:after {
|
||||
color: #999;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue