Skip to content

Commit

Permalink
portal: major UI overhaul
Browse files Browse the repository at this point in the history
  • Loading branch information
tschaume committed Aug 11, 2021
1 parent 0e981c7 commit e561248
Show file tree
Hide file tree
Showing 12 changed files with 286 additions and 386 deletions.
10 changes: 5 additions & 5 deletions mpcontribs-portal/mpcontribs/portal/assets/css/main.scss
@@ -1,8 +1,5 @@
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
@import "~select2/dist/css/select2.min.css";
@import "~@fortawesome/fontawesome-free/css/all.css";
@import '~handsontable/dist/handsontable.full.css';

$family-sans-serif: "Nunito", sans-serif;
$tooltip-background-opacity: 1;
Expand Down Expand Up @@ -48,9 +45,10 @@ $checkradio-focus: none;
@import "~bulma/sass/utilities/mixins";
@import "~bulma-tooltip/src/sass/index";
@import "~bulma-checkradio/src/sass/index";
@import "~bulma-tagsinput/src/sass/index";
@import "~highlight.js/styles/stackoverflow-dark";
@import "select2";
@import "~select2/src/scss/core";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~handsontable/dist/handsontable.full.css";

.has-loading {
&.is-loading {
Expand Down Expand Up @@ -105,3 +103,5 @@ pre code.hljs { padding: 0px; }
}

tr.htHover:hover td { background-color: $old-grey-light; }

span.dotted { border-bottom: 1px dotted $grey-darker; }
116 changes: 43 additions & 73 deletions mpcontribs-portal/mpcontribs/portal/assets/js/apply.js
@@ -1,76 +1,46 @@
import 'jquery-form';
import 'jquery-validation';
import 'czmore';
import * as bulmaTagsinput from 'bulma-tagsinput/dist/js/bulma-tagsinput';
import "parsley";

function prepareRequest(formData, jqForm, options) {
$('#apply-button').addClass('is-loading');
$('#apply-response').addClass('is-hidden');
var start = 6;
var nrefs_str = formData.splice(start, 1)[0]['value'];
var nrefs = parseInt(nrefs_str);
if (nrefs < 1) {
$('#apply-response .message-body').html('Please add references.');
$('#apply-response').removeClass('is-hidden');
return false;
}
var urls = {name: 'references', value: []};
for (var i = 0; i < nrefs; i++) {
var key_url = formData.splice(start, 2);
urls['value'].push({
"label": key_url[0]['value'],
"url": key_url[1]['value']
})
}
formData.push(urls);
return true;
}

function processJson(data) { // 'data' is the json object returned from the server
var msg = `Thank you for submitting your project application. Please check your inbox (and spam) for an
e-mail asking you to subscribe for MPContribs notifications. Once your e-mail address is
confirmed we will notify you if/when your project has been accepted for dissemination.`
$('#apply-response .message-body').html(msg);
$('#apply-response').removeClass('is-danger').addClass('is-success').removeClass('is-hidden');
$('#apply-button').removeClass('is-loading');
}

function processError(data) {
$('#apply-response .message-body').html(data.responseText);
$('#apply-response').removeClass('is-success').addClass('is-danger').removeClass('is-hidden');
$('#apply-button').removeClass('is-loading');
}
const form = $("#apply-form");

$(document).ready(function () {
bulmaTagsinput.attach('[type="tags"]');
var li = $('#apply-toggle').parent();
li.siblings().removeClass('is-active');
li.addClass('is-active');

$.validator.addMethod("alphanumeric", function(value, element) {
return this.optional(element) || /^[\w_]+$/i.test(value);
}, "Please use letters, numbers, and underscores only.");

$('#apply-form').validate({
rules: {
name: {alphanumeric: true}, url_1: {url: true, required: true},
url_2: {url: true}, url_3: {url: true}, url_4: {url: true}, url_5: {url: true}
},
highlight: function (element) {
$(element).parent().children().removeClass('is-success').addClass('is-danger');
},
unhighlight: function (element) {
$(element).parent().children().removeClass('is-danger').addClass('is-success');
},
errorElement: 'p', errorClass: 'help',
errorPlacement: function(error, element) { element.parent().append(error); },
submitHandler: function(form) { $(form).ajaxSubmit({
beforeSubmit: prepareRequest, success: processJson, error: processError,
url: window.api['host'] + 'projects/', headers: window.api['headers'],
type: 'POST', dataType: 'json', requestFormat: 'json'
}); }
if (form.length) {
form.parsley({
errorClass: "is-danger", successClass: "is-primary",
errorsWrapper: '<ul class="parsley-errors-list is-size-7"></ul>'
});

$("#czContainer").czMore({max: 5, styleOverride: true});
$('.btnPlus').click();
});
form.on("submit", function(e) {
e.preventDefault();
$('#apply-button').addClass('is-loading');
$('#apply-response').addClass('is-hidden');
var data = Object.fromEntries(new FormData(e.target).entries());
data["owner"] = $("#owner").val();
data["references"] = [
{"label": data["ref_label"], "url": data["ref_url"]}
]
delete data["ref_label"];
delete data["ref_url"];
$.post({
url: window.api['host'] + 'projects/',
headers: window.api['headers'],
data: JSON.stringify(data),
dataType: "json", contentType: 'application/json',
success: function(response) {
var msg = `Thank you for submitting your project application. Please check your
inbox (and spam) for an e-mail asking you to subscribe for MPContribs
notifications. Once your e-mail address is confirmed we will notify you if/when
your project has been accepted for dissemination.`;
$('#apply-response .message-body').html(msg);
$('#apply-response').removeClass('is-danger').addClass('is-success').removeClass('is-hidden');
$('#apply-button').removeClass('is-loading');
},
error: function(response) {
var msg;
if (response.responseJSON) { msg = response.responseJSON["error"]; }
else { msg = response.responseText; }
$('#apply-response .message-body').html(msg);
$('#apply-response').removeClass('is-success').addClass('is-danger').removeClass('is-hidden');
$('#apply-button').removeClass('is-loading');
}
});
return false;
});
}
99 changes: 52 additions & 47 deletions mpcontribs-portal/mpcontribs/portal/assets/js/browse.js
@@ -1,9 +1,6 @@
import Handsontable from "handsontable";

$("#table_filter").addClass('is-loading');
var li = $('#browse-toggle').parent();
li.siblings().removeClass('is-active');
li.addClass('is-active');

const main_columns = ["title", "public", "author"];
const stats_columns = ["columns", "contributions", "structures", "tables", "attachments"];
Expand Down Expand Up @@ -39,52 +36,60 @@ $.get({
}).done(function(response) {
var data = [];
var rlen = response.data.length;
for (var r = 0; r < rlen; r++) {
var doc = response['data'][r];
var d = ["<a class='has-text-weight-bold' href='/projects/"];
d[0] += doc["name"] + "'>" + doc["title"] + "</a>";
d.push(doc["is_public"] ? "Yes" : "No");
var author = doc["authors"].split(",")[0].substring(0,30);
var owner = doc["owner"].split(":")[1];
var mailto = 'mailto:' + owner + ',contribs@materialsproject.org';
var at = '<a href="' + mailto + '">';
at += '<span class="icon-text"><span class="icon"><i class="fas fa-envelope"></i></span><span>';
at += author + '</span></span></a>';
d.push(at);
for (var c = 0; c < stats_columns.length; c++) {
var col = stats_columns[c];
d.push(doc["stats"][col]);
if (rlen < 1) {
$("<div/>", {
class: "notification is-warning is-marginless",
html: "No public projects available. Please log in to view accessible projects."
}).insertAfter(".navbar.is-fixed-top");
} else {
for (var r = 0; r < rlen; r++) {
var doc = response['data'][r];
var d = ["<a class='has-text-weight-bold' href='/projects/"];
d[0] += doc["name"] + "'>" + doc["title"] + "</a>";
d.push(doc["is_public"] ? "Yes" : "No");
var author = doc["authors"].split(",")[0].substring(0,30);
var owner = doc["owner"].split(":")[1];
var mailto = 'mailto:' + owner + ',contribs@materialsproject.org';
var at = '<a href="' + mailto + '">';
at += '<span class="icon-text"><span class="icon"><i class="fas fa-envelope"></i></span><span>';
at += author + '</span></span></a>';
d.push(at);
for (var c = 0; c < stats_columns.length; c++) {
var col = stats_columns[c];
d.push(doc["stats"][col]);
}
data.push(d);
}
data.push(d);
data.push([]);
nrows = data.length;
hot = new Handsontable(container, {
data,
colHeaders: colHeaders,
columns: columns,
columnSummary: columnSummary,
dropdownMenu: ['filter_by_condition', 'filter_action_bar'],
filters: true,
hiddenRows: {indicators: true, rows: []},
rowHeaders: false,
width: '100%',
stretchH: 'all',
preventOverflow: 'horizontal',
licenseKey: 'non-commercial-and-evaluation',
disableVisualSelection: true,
className: "htCenter htMiddle",
//columnSorting: {initialConfig: {column: 4, sortOrder: 'desc'}}
});
hot.addHook('afterOnCellMouseOver', function(e, coords, TD) {
var row = coords["row"];
if (row > 0) { $(TD).parent().addClass("htHover"); }
});
hot.addHook('afterOnCellMouseOut', function(e, coords, TD) {
var row = coords["row"];
if (row > 0) { $(TD).parent().removeClass("htHover"); }
});
$("#table_filter").removeClass('is-loading');
$("#browse").removeClass("is-hidden");
}
data.push([]);
nrows = data.length;
hot = new Handsontable(container, {
data,
colHeaders: colHeaders,
columns: columns,
columnSummary: columnSummary,
dropdownMenu: ['filter_by_condition', 'filter_action_bar'],
filters: true,
hiddenRows: {indicators: true, rows: []},
rowHeaders: false,
width: '100%',
stretchH: 'all',
preventOverflow: 'horizontal',
licenseKey: 'non-commercial-and-evaluation',
disableVisualSelection: true,
className: "htCenter htMiddle",
//columnSorting: {initialConfig: {column: 4, sortOrder: 'desc'}}
});
hot.addHook('afterOnCellMouseOver', function(e, coords, TD) {
var row = coords["row"];
if (row > 0) { $(TD).parent().addClass("htHover"); }
});
hot.addHook('afterOnCellMouseOut', function(e, coords, TD) {
var row = coords["row"];
if (row > 0) { $(TD).parent().removeClass("htHover"); }
});
$("#table_filter").removeClass('is-loading');
});

$('#table_filter').on('click', function(e) {
Expand Down
4 changes: 0 additions & 4 deletions mpcontribs-portal/mpcontribs/portal/assets/js/search.js
Expand Up @@ -149,10 +149,6 @@ function search(event) {
}

$(document).ready(function () {
var li = $('#search-toggle').parent();
li.siblings().removeClass('is-active');
li.addClass('is-active');

$.each(fields, function(idx, field) {
$('#'+field+'s_list').select2({
placeholder: 'Select '+field+'(s) ...',
Expand Down

0 comments on commit e561248

Please sign in to comment.