New UI for users and submissions

This commit is contained in:
cuom1999 2022-06-06 11:36:35 -05:00
parent d0ac92914d
commit 247e0e4740
12 changed files with 183 additions and 226 deletions

View file

@ -0,0 +1,60 @@
<script>
$(function () {
$('#search-handle').replaceWith($('<select>').attr({
id: 'search-handle',
name: 'handle',
onchange: 'form.submit()'
}));
var in_user_redirect = false;
$('#search-handle').select2({
placeholder: '{{ _('Search by handle...') }}',
ajax: {
url: '{{ url('user_search_select2_ajax') }}'
},
minimumInputLength: 1,
escapeMarkup: function (markup) {
return markup;
},
templateResult: function (data, container) {
return $('<span>')
.append($('<img>', {
'class': 'user-search-image', src: data.gravatar_url,
width: 24, height: 24
}))
.append($('<span>', {'class': data.display_rank + ' user-search-name'}).text(data.text))
.append($('<a>', {href: '/user/' + data.text, 'class': 'user-redirect'})
.append($('<i>', {'class': 'fa fa-mail-forward'}))
.mouseover(function () {
in_user_redirect = true;
}).mouseout(function () {
in_user_redirect = false;
}));
}
}).on('select2:selecting', function () {
return !in_user_redirect;
});
var $last = null;
$(window).on('hashchange', function () {
var hash = window.location.hash;
if (hash.startsWith('#!')) {
var $user = $('#user-' + hash.substring(2)).addClass('highlight');
if ($user) {
$(document).scrollTop($user.position().top - 50);
if ($last !== null) $last.removeClass('highlight');
$last = $user;
}
}
}).trigger('hashchange');
$('.about-td').on('click', function() {
var max_height = $(this).css('max-height');
if (max_height !== 'fit-content') {
$(this).css('max-height', 'fit-content');
}
else {
$(this).css('max-height', '45px');
}
})
});
</script>

View file

@ -2,66 +2,7 @@
{% block three_col_js %}
{% block users_js_media %}{% endblock %}
<script>
$(function () {
$('#search-handle').replaceWith($('<select>').attr({
id: 'search-handle',
name: 'handle',
onchange: 'form.submit()'
}));
var in_user_redirect = false;
$('#search-handle').select2({
placeholder: '{{ _('Search by handle...') }}',
ajax: {
url: '{{ url('user_search_select2_ajax') }}'
},
minimumInputLength: 1,
escapeMarkup: function (markup) {
return markup;
},
templateResult: function (data, container) {
return $('<span>')
.append($('<img>', {
'class': 'user-search-image', src: data.gravatar_url,
width: 24, height: 24
}))
.append($('<span>', {'class': data.display_rank + ' user-search-name'}).text(data.text))
.append($('<a>', {href: '/user/' + data.text, 'class': 'user-redirect'})
.append($('<i>', {'class': 'fa fa-mail-forward'}))
.mouseover(function () {
in_user_redirect = true;
}).mouseout(function () {
in_user_redirect = false;
}));
}
}).on('select2:selecting', function () {
return !in_user_redirect;
});
var $last = null;
$(window).on('hashchange', function () {
var hash = window.location.hash;
if (hash.startsWith('#!')) {
var $user = $('#user-' + hash.substring(2)).addClass('highlight');
if ($user) {
$(document).scrollTop($user.position().top - 50);
if ($last !== null) $last.removeClass('highlight');
$last = $user;
}
}
}).trigger('hashchange');
$('.about-td').on('click', function() {
var max_height = $(this).css('max-height');
if (max_height !== 'fit-content') {
$(this).css('max-height', 'fit-content');
}
else {
$(this).css('max-height', '45px');
}
})
});
</script>
{% include "user/base-users-js.html" %}
{% endblock %}
{% block three_col_media %}

View file

@ -2,66 +2,7 @@
{% block js_media %}
{% block users_js_media %}{% endblock %}
<script>
$(function () {
$('#search-handle').replaceWith($('<select>').attr({
id: 'search-handle',
name: 'handle',
onchange: 'form.submit()'
}));
var in_user_redirect = false;
$('#search-handle').select2({
placeholder: '{{ _('Search by handle...') }}',
ajax: {
url: '{{ url('user_search_select2_ajax') }}'
},
minimumInputLength: 1,
escapeMarkup: function (markup) {
return markup;
},
templateResult: function (data, container) {
return $('<span>')
.append($('<img>', {
'class': 'user-search-image', src: data.gravatar_url,
width: 24, height: 24
}))
.append($('<span>', {'class': data.display_rank + ' user-search-name'}).text(data.text))
.append($('<a>', {href: '/user/' + data.text, 'class': 'user-redirect'})
.append($('<i>', {'class': 'fa fa-mail-forward'}))
.mouseover(function () {
in_user_redirect = true;
}).mouseout(function () {
in_user_redirect = false;
}));
}
}).on('select2:selecting', function () {
return !in_user_redirect;
});
var $last = null;
$(window).on('hashchange', function () {
var hash = window.location.hash;
if (hash.startsWith('#!')) {
var $user = $('#user-' + hash.substring(2)).addClass('highlight');
if ($user) {
$(document).scrollTop($user.position().top - 50);
if ($last !== null) $last.removeClass('highlight');
$last = $user;
}
}
}).trigger('hashchange');
$('.about-td').on('click', function() {
var max_height = $(this).css('max-height');
if (max_height !== 'fit-content') {
$(this).css('max-height', 'fit-content');
}
else {
$(this).css('max-height', '45px');
}
})
});
</script>
{% include "user/base-users-js.html" %}
{% endblock %}
{% block media %}

View file

@ -1,4 +1,4 @@
{% extends "user/base-users.html" %}
{% extends "user/base-users-three-col.html" %}
{% block users_media %}
<style>
@ -18,14 +18,10 @@
{% block title_ruler %}{% endblock %}
{% block title_row %}
{% if request.GET.get('friend') == 'true'%}
{% set tab = 'friends' %}
{% else %}
{% set tab = 'list' %}
{% endif %}
{% set title = 'Leaderboard' %}
{% include "user/user-list-tabs.html" %}
{% block title_row %}{% endblock %}
{% block left_sidebar %}
{% include "user/user-left-sidebar.html" %}
{% endblock %}
{% block users_table %}

View file

@ -0,0 +1,8 @@
<div class="left-sidebar">
{{ make_tab_item('list', 'fa fa-trophy', url('user_list'), _('Leaderboard')) }}
{{ make_tab_item('friends', 'fa fa-users', url('user_list') + '?friend=true', _('Friends')) }}
{{ make_tab_item('organizations', 'fa fa-university', url('organization_list'), _('Groups')) }}
{% if request.user.is_superuser %}
{{ make_tab_item('import', 'fa fa-table', url('import_users'), _('Import')) }}
{% endif %}
</div>