shen/online-judge
1
0
Fork 0
mirror of https://github.com/DMOJ/online-judge.git synced 2024-11-25 16:32:37 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Create and use custom 'dmoj' select2 theme

Browse Source
This commit is contained in:
Evan 2023-02-06 01:46:46 +00:00 committed by Tudor Brindus
parent b3fe5bd302
commit 9066af6a5c
19 changed files with 61 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dmoj/settings.py
View File

@ -106,6 +106,7 @@ DMOJ_THEME_CSS = {
'light': 'style.css',
'dark': 'dark/style.css',
}
DMOJ_SELECT2_THEME = 'dmoj'
MARKDOWN_STYLES = {}
MARKDOWN_DEFAULT_STYLE = {}

1
judge/template_context.py
View File

@ -30,6 +30,7 @@ def get_resource(request):
'FONTAWESOME_CSS': settings.FONTAWESOME_CSS,
'DMOJ_SCHEME': scheme,
'DMOJ_CANONICAL': settings.DMOJ_CANONICAL,
'DMOJ_SELECT2_THEME': settings.DMOJ_SELECT2_THEME,
}

3
judge/widgets/select2.py
View File

@ -64,6 +64,7 @@ class Select2Mixin(object):
def build_attrs(self, base_attrs, extra_attrs=None):
"""Add select2 data attributes."""
attrs = super(Select2Mixin, self).build_attrs(base_attrs, extra_attrs)
attrs.setdefault('data-theme', settings.DMOJ_SELECT2_THEME)
if self.is_required:
attrs.setdefault('data-allow-clear', 'false')
else:
@ -102,7 +103,7 @@ class AdminSelect2Mixin(Select2Mixin):
def media(self):
return forms.Media(
js=['admin/js/jquery.init.js', settings.SELECT2_JS_URL, 'django_select2.js'],
css={'screen': [settings.SELECT2_CSS_URL]},
css={'screen': [settings.SELECT2_CSS_URL, 'select2-dmoj.css']},
)

2
make_style.sh
View File

@ -20,7 +20,7 @@ build_style() {
echo "Creating $1 style..."
cp resources/vars-$1.scss resources/vars.scss
sass resources:sass_processed
postcss sass_processed/style.css sass_processed/martor-description.css --verbose --use autoprefixer -d $2
postcss sass_processed/style.css sass_processed/martor-description.css sass_processed/select2-dmoj.css --verbose --use autoprefixer -d $2
}
build_style 'default' 'resources'

28
resources/select2/layout.scss → resources/select2-dmoj.scss
View File

@ -1,6 +1,15 @@
.select2-container--default {
@import "single";
@import "multiple";
@import "vars";
/* Hack to make dropdown background follow theming */
.select2-dropdown {
background-color: $color_primary0 !important;
border: 1px solid $color_primary33 !important;
color: $color_primary100 !important;
}
.select2-container--dmoj {
@import "select2/single";
@import "select2/multiple";
&.select2-container--open.select2-container--above {
.select2-selection--single, .select2-selection--multiple {
@ -18,7 +27,9 @@
.select2-search--dropdown {
.select2-search__field {
border: 1px solid #aaa;
border: 1px solid $color_primary33;
background-color: $color_primary10;
color: $color_primary100;
}
}
@ -35,6 +46,7 @@
.select2-results > .select2-results__options {
max-height: 200px;
overflow-y: auto;
color: $color_primary100;
}
.select2-results__option {
@ -43,11 +55,11 @@
}
&[aria-disabled=true] {
color: #999;
color: $color_primary50;
}
&[aria-selected=true] {
background-color: #ddd;
background-color: $color_primary25;
}
.select2-results__option {
@ -85,8 +97,8 @@
}
.select2-results__option--highlighted[aria-selected] {
background-color: #5897fb;
color: white;
background-color: $highlight_blue;
color: $color_primary0;
}
.select2-results__group {

19
resources/select2/_multiple.scss vendored
View File

@ -1,6 +1,6 @@
.select2-selection--multiple {
background-color: white;
border: 1px solid #aaa;
background-color: $color_primary0;
border: 1px solid $color_primary33;
border-radius: 4px;
cursor: text;
@ -17,7 +17,7 @@
}
.select2-selection__placeholder {
color: #999;
color: $color_primary50;
margin-top: 5px;
@ -33,9 +33,10 @@
}
.select2-selection__choice {
background-color: #e4e4e4;
background-color: $color_primary10;
color: $color_primary100;
border: 1px solid #aaa;
border: 1px solid $color_primary33;
border-radius: 4px;
cursor: default;
@ -47,7 +48,7 @@
}
.select2-selection__choice__remove {
color: #999;
color: $color_primary50;
cursor: pointer;
display: inline-block;
@ -56,7 +57,7 @@
margin-right: 2px;
&:hover {
color: #333;
color: $color_primary75;
}
}
}
@ -81,14 +82,14 @@
&.select2-container--focus {
.select2-selection--multiple {
border: solid black 1px;
border: solid $color_primary100 1px;
outline: 0;
}
}
&.select2-container--disabled {
.select2-selection--multiple {
background-color: #eee;
background-color: $color_primary10;
cursor: default;
}

14
resources/select2/_single.scss vendored
View File

@ -1,10 +1,10 @@
.select2-selection--single {
background-color: #fff;
border: 1px solid #aaa;
background-color: $color_primary0;
border: 1px solid $color_primary33;
border-radius: 4px;
.select2-selection__rendered {
color: #444;
color: $color_primary75;
line-height: 28px;
}
@ -15,7 +15,7 @@
}
.select2-selection__placeholder {
color: #999;
color: $color_primary50;
}
.select2-selection__arrow {
@ -29,7 +29,7 @@
width: 20px;
b {
border-color: #888 transparent transparent transparent;
border-color: $color_primary50 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
@ -62,7 +62,7 @@
&.select2-container--disabled {
.select2-selection--single {
background-color: #eee;
background-color: $color_primary10;
cursor: default;
.select2-selection__clear {
@ -75,7 +75,7 @@
.select2-selection--single {
.select2-selection__arrow {
b {
border-color: transparent transparent #888 transparent;
border-color: transparent transparent $color_primary50 transparent;
border-width: 0 4px 5px 4px;
}
}

1
resources/style.scss
View File

@ -19,3 +19,4 @@
@import "submission";
@import "contest";
@import "misc";
@import "select2-dmoj";

1
resources/vars-dark.scss
View File

@ -6,6 +6,7 @@ $color_primary0: #000;
$color_primary5: #080808; // light background
$color_primary10: #111; // background
$color_primary25: #3b3b3b; // border
$color_primary33: #555; // widget
$color_primary50: #808080;
$color_primary66: #aaa; // tabs
$color_primary75: #ccc; // widget

1
resources/vars-default.scss
View File

@ -6,6 +6,7 @@ $color_primary0: #fff;
$color_primary5: #f8f8f8; // light background
$color_primary10: #eee; // background
$color_primary25: #ccc; // border
$color_primary33: #aaa; // widget
$color_primary50: #808080;
$color_primary66: #555; // tabs
$color_primary75: #3b3b3b; // widget

9
resources/widgets.scss
View File

@ -391,15 +391,6 @@ a.close {
text-align: right;
}
ul.select2-results__options {
color: black;
}
ul.select2-selection__rendered {
padding: 0 5px !important;
color: black;
}
.sidebox h3 {
margin: 0 -5px;
background: $color_primary75;

1
templates/contest/ranking.html
View File

@ -81,6 +81,7 @@
})).attr('placeholder');
$('#search-contest').select2({
theme: '{{ DMOJ_SELECT2_THEME }}',
placeholder: placeholder,
ajax: {
url: '{{ url('contest_user_search_select2_ajax', contest.key) }}'

1
templates/problem/data.html
View File

@ -20,6 +20,7 @@
style: 'width: 100%'
})).val();
$select.select2({
theme: '{{ DMOJ_SELECT2_THEME }}',
data: window.valid_files,
allowClear: true,
placeholder: ''

10
templates/problem/list.html
View File

@ -41,9 +41,13 @@
$form.submit();
}
$category.select2().css({'visibility': 'visible'}).change(clean_submit);
$('#types').select2({multiple: 1, placeholder: '{{ _('Filter by type...') }}'})
.css({'visibility': 'visible'});
$category.select2({
theme: '{{ DMOJ_SELECT2_THEME }}'
}).css({'visibility': 'visible'}).change(clean_submit);
$('#types').select2({
theme: '{{ DMOJ_SELECT2_THEME }}',
multiple: 1, placeholder: '{{ _('Filter by type...') }}'
}).css({'visibility': 'visible'});
// This is incredibly nasty to do but it's needed because otherwise the select2 steals the focus
$search.keypress(function (e) {

2
templates/problem/manage_submission.html
View File

@ -51,11 +51,13 @@
<script>
$(function () {
$('#by-lang-filter').select2({
theme: '{{ DMOJ_SELECT2_THEME }}',
multiple: true,
placeholder: '{{ _('Leave empty to not filter by language') }}'
});
$('#by-result-filter').select2({
theme: '{{ DMOJ_SELECT2_THEME }}',
multiple: true,
placeholder: '{{ _('Leave empty to not filter by result') }}'
});

1
templates/problem/submit.html
View File

@ -69,6 +69,7 @@
var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');
$("#id_language").select2({
theme: '{{ DMOJ_SELECT2_THEME }}',
templateResult: format,
templateSelection: formatSelection,
resultsAdapter: customAdapter

2
templates/submission/list.html
View File

@ -70,12 +70,14 @@
}
$('#status').select2({
theme: '{{ DMOJ_SELECT2_THEME }}',
multiple: 1,
placeholder: '{{ _('Filter by status...') }}',
matcher: idAndTextMatcher,
}).css({'visibility': 'visible'});
$('#language').select2({
theme: '{{ DMOJ_SELECT2_THEME }}',
multiple: 1,
placeholder: '{{ _('Filter by language...') }}',
matcher: idAndTextMatcher,

1
templates/ticket/list.html
View File

@ -102,6 +102,7 @@
};
var user_select2 = {
theme: '{{ DMOJ_SELECT2_THEME }}',
templateResult: function (data, container) {
return $('<span>')
.append($('<img>', {

1
templates/user/base-users.html
View File

@ -11,6 +11,7 @@
}));
var in_user_redirect = false;
$('#search-handle').select2({
theme: '{{ DMOJ_SELECT2_THEME }}',
placeholder: '{{ _('Search by handle...') }}',
ajax: {
url: '{{ url('user_search_select2_ajax') }}'