diff --git a/source/main/views.py b/source/main/views.py index 1bd26d2..0c49e7d 100644 --- a/source/main/views.py +++ b/source/main/views.py @@ -13,10 +13,7 @@ def home(request): def search(request): - if request.GET.get("q"): - query = request.GET["q"] - else: - query = "" + query = request.GET.get('q', '') context = {"movies": Movie.objects.get_movies(query), "query": query} return render(request, "search.html", context) @@ -37,10 +34,10 @@ def bugs(request): def movie(request, id): - context = { - "movie": Movie.objects.get_movie_by_id(id), - "subs": Movie.objects.get_subs(id), - } + user = request.user + context = {"movie": Movie.objects.get_movie_by_id(id)} + if user.is_authenticated: + context['subs'] = Movie.objects.get_subs(id) return render(request, "movie.html", context) diff --git a/source/static/admin/css/base.css b/source/static/admin/css/base.css index 1cb3acd..72f4ae1 100644 --- a/source/static/admin/css/base.css +++ b/source/static/admin/css/base.css @@ -2,93 +2,90 @@ DJANGO Admin styles */ -@import url(fonts.css); - /* VARIABLE DEFINITIONS */ +html[data-theme="light"], :root { - --primary: #79aec8; - --secondary: #417690; - --accent: #f5dd5d; - --primary-fg: #fff; + --primary: #79aec8; + --secondary: #417690; + --accent: #f5dd5d; + --primary-fg: #fff; - --body-fg: #333; - --body-bg: #fff; - --body-quiet-color: #666; - --body-loud-color: #000; + --body-fg: #333; + --body-bg: #fff; + --body-quiet-color: #666; + --body-loud-color: #000; - --header-color: #ffc; - --header-branding-color: var(--accent); - --header-bg: var(--secondary); - --header-link-color: var(--primary-fg); + --header-color: #ffc; + --header-branding-color: var(--accent); + --header-bg: var(--secondary); + --header-link-color: var(--primary-fg); - --breadcrumbs-fg: #c4dce8; - --breadcrumbs-link-fg: var(--body-bg); - --breadcrumbs-bg: var(--primary); - - --link-fg: #447e9b; - --link-hover-color: #036; - --link-selected-fg: #5b80b2; - - --hairline-color: #e8e8e8; - --border-color: #ccc; - - --error-fg: #ba2121; - - --message-success-bg: #dfd; - --message-warning-bg: #ffc; - --message-error-bg: #ffefef; - - --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */ - --selected-bg: #e4e4e4; /* E.g. selected table cells */ - --selected-row: #ffc; - - --button-fg: #fff; - --button-bg: var(--primary); - --button-hover-bg: #609ab6; - --default-button-bg: var(--secondary); - --default-button-hover-bg: #205067; - --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */ - --close-button-hover-bg: #747474; - --delete-button-bg: #ba2121; - --delete-button-hover-bg: #a41515; - - --object-tools-fg: var(--button-fg); - --object-tools-bg: var(--close-button-bg); - --object-tools-hover-bg: var(--close-button-hover-bg); -} - -@media (prefers-color-scheme: dark) { - :root { - --primary: #264b5d; - --primary-fg: #eee; - - --body-fg: #eeeeee; - --body-bg: #121212; - --body-quiet-color: #e0e0e0; - --body-loud-color: #ffffff; - - --breadcrumbs-link-fg: #e0e0e0; + --breadcrumbs-fg: #c4dce8; + --breadcrumbs-link-fg: var(--body-bg); --breadcrumbs-bg: var(--primary); - --link-fg: #81d4fa; - --link-hover-color: #4ac1f7; - --link-selected-fg: #6f94c6; + --link-fg: #417893; + --link-hover-color: #036; + --link-selected-fg: #5b80b2; - --hairline-color: #272727; - --border-color: #353535; + --hairline-color: #e8e8e8; + --border-color: #ccc; - --error-fg: #e35f5f; - --message-success-bg: #006b1b; - --message-warning-bg: #583305; - --message-error-bg: #570808; + --error-fg: #ba2121; - --darkened-bg: #212121; - --selected-bg: #1b1b1b; - --selected-row: #00363a; + --message-success-bg: #dfd; + --message-warning-bg: #ffc; + --message-error-bg: #ffefef; - --close-button-bg: #333333; - --close-button-hover-bg: #666666; - } + --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */ + --selected-bg: #e4e4e4; /* E.g. selected table cells */ + --selected-row: #ffc; + + --button-fg: #fff; + --button-bg: var(--primary); + --button-hover-bg: #609ab6; + --default-button-bg: var(--secondary); + --default-button-hover-bg: #205067; + --close-button-bg: #747474; + --close-button-hover-bg: #333; + --delete-button-bg: #ba2121; + --delete-button-hover-bg: #a41515; + + --object-tools-fg: var(--button-fg); + --object-tools-bg: var(--close-button-bg); + --object-tools-hover-bg: var(--close-button-hover-bg); + + --font-family-primary: + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + system-ui, + Roboto, + "Helvetica Neue", + Arial, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji"; + --font-family-monospace: + ui-monospace, + Menlo, + Monaco, + "Cascadia Mono", + "Segoe UI Mono", + "Roboto Mono", + "Oxygen Mono", + "Ubuntu Monospace", + "Source Code Pro", + "Fira Mono", + "Droid Sans Mono", + "Courier New", + monospace, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji"; } html, body { @@ -98,8 +95,8 @@ html, body { body { margin: 0; padding: 0; - font-size: 14px; - font-family: "Roboto","Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif; + font-size: 0.875rem; + font-family: var(--font-family-primary); color: var(--body-fg); background: var(--body-bg); } @@ -151,12 +148,12 @@ h1,h2,h3,h4,h5 { h1 { margin: 0 0 20px; font-weight: 300; - font-size: 20px; + font-size: 1.25rem; color: var(--body-quiet-color); } h2 { - font-size: 16px; + font-size: 1rem; margin: 1em 0 .5em 0; } @@ -166,20 +163,20 @@ h2.subhead { } h3 { - font-size: 14px; + font-size: 0.875rem; margin: .8em 0 .3em 0; color: var(--body-quiet-color); font-weight: bold; } h4 { - font-size: 12px; + font-size: 0.75rem; margin: 1em 0 .8em 0; padding-bottom: 3px; } h5 { - font-size: 10px; + font-size: 0.625rem; margin: 1.5em 0 .5em 0; color: var(--body-quiet-color); text-transform: uppercase; @@ -196,8 +193,8 @@ li ul { } li, dt, dd { - font-size: 13px; - line-height: 20px; + font-size: 0.8125rem; + line-height: 1.25rem; } dt { @@ -223,7 +220,7 @@ fieldset { } blockquote { - font-size: 11px; + font-size: 0.6875rem; color: #777; margin-left: 2px; padding-left: 10px; @@ -231,9 +228,9 @@ blockquote { } code, pre { - font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace; + font-family: var(--font-family-monospace); color: var(--body-quiet-color); - font-size: 12px; + font-size: 0.75rem; overflow-x: auto; } @@ -255,22 +252,21 @@ hr { border: none; margin: 0; padding: 0; - font-size: 1px; line-height: 1px; } /* TEXT STYLES & MODIFIERS */ .small { - font-size: 11px; + font-size: 0.6875rem; } .mini { - font-size: 10px; + font-size: 0.625rem; } .help, p.help, form p.help, div.help, form div.help, div.help li { - font-size: 11px; + font-size: 0.6875rem; color: var(--body-quiet-color); } @@ -300,7 +296,7 @@ p img, h1 img, h2 img, h3 img, h4 img, td img { } .hidden { - display: none; + display: none !important; } /* TABLES */ @@ -311,8 +307,8 @@ table { } td, th { - font-size: 13px; - line-height: 16px; + font-size: 0.8125rem; + line-height: 1rem; border-bottom: 1px solid var(--hairline-color); vertical-align: top; padding: 8px; @@ -327,7 +323,7 @@ thead th, tfoot td { color: var(--body-quiet-color); padding: 5px 10px; - font-size: 11px; + font-size: 0.6875rem; background: var(--body-bg); border: none; border-top: 1px solid var(--hairline-color); @@ -437,7 +433,7 @@ table thead th.sorted .sortoptions a.sortremove:after { top: -6px; left: 3px; font-weight: 200; - font-size: 18px; + font-size: 1.125rem; color: var(--body-quiet-color); } @@ -476,9 +472,9 @@ input, textarea, select, .form-row p, form .button { margin: 2px 0; padding: 2px 3px; vertical-align: middle; - font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif; + font-family: var(--font-family-primary); font-weight: normal; - font-size: 13px; + font-size: 0.8125rem; } .form-row div.help { padding: 2px 3px; @@ -505,7 +501,7 @@ textarea:focus, select:focus, .vTextField:focus { } select { - height: 30px; + height: 1.875rem; } select[multiple] { @@ -541,7 +537,6 @@ a.button { } .button.default, input[type=submit].default, .submit-row input.default { - float: right; border: none; font-weight: 400; background: var(--default-button-bg); @@ -589,7 +584,7 @@ input[type=button][disabled].default { margin: 0; padding: 8px; font-weight: 400; - font-size: 13px; + font-size: 0.8125rem; text-align: left; background: var(--primary); color: var(--header-link-color); @@ -597,7 +592,7 @@ input[type=button][disabled].default { .module caption, .inline-group h2 { - font-size: 12px; + font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase; } @@ -616,12 +611,13 @@ ul.messagelist { ul.messagelist li { display: block; font-weight: 400; - font-size: 13px; + font-size: 0.8125rem; padding: 10px 10px 10px 65px; margin: 0 0 10px 0; background: var(--message-success-bg) url(../img/icon-yes.svg) 40px 12px no-repeat; background-size: 16px auto; color: var(--body-fg); + word-break: break-word; } ul.messagelist li.warning { @@ -635,7 +631,7 @@ ul.messagelist li.error { } .errornote { - font-size: 14px; + font-size: 0.875rem; font-weight: 700; display: block; padding: 10px 12px; @@ -656,7 +652,7 @@ ul.errorlist { } ul.errorlist li { - font-size: 13px; + font-size: 0.8125rem; display: block; margin-bottom: 4px; overflow-wrap: break-word; @@ -697,7 +693,7 @@ td ul.errorlist + input, td ul.errorlist + select, td ul.errorlist + textarea { } .description { - font-size: 12px; + font-size: 0.75rem; padding: 5px 0 0 12px; } @@ -753,7 +749,7 @@ a.deletelink:focus, a.deletelink:hover { /* OBJECT TOOLS */ .object-tools { - font-size: 10px; + font-size: 0.625rem; font-weight: bold; padding-left: 0; float: right; @@ -765,7 +761,7 @@ a.deletelink:focus, a.deletelink:hover { display: block; float: left; margin-left: 5px; - height: 16px; + height: 1rem; } .object-tools a { @@ -779,7 +775,7 @@ a.deletelink:focus, a.deletelink:hover { background: var(--object-tools-bg); color: var(--object-tools-fg); font-weight: 400; - font-size: 11px; + font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.5px; } @@ -808,14 +804,21 @@ a.deletelink:focus, a.deletelink:hover { /* OBJECT HISTORY */ -table#change-history { +#change-history table { width: 100%; } -table#change-history tbody th { +#change-history table tbody th { width: 16em; } +#change-history .paginator { + color: var(--body-quiet-color); + border-bottom: 1px solid var(--hairline-color); + background: var(--body-bg); + overflow: hidden; +} + /* PAGE STRUCTURE */ #container { @@ -842,6 +845,20 @@ table#change-history tbody th { max-width: 100%; } +.skip-to-content-link { + position: absolute; + top: -999px; + margin: 5px; + padding: 5px; + background: var(--body-bg); + z-index: 1; +} + +.skip-to-content-link:focus { + left: 0px; + top: 0px; +} + #content { padding: 20px 40px; } @@ -905,7 +922,7 @@ table#change-history tbody th { overflow: hidden; } -#header a:link, #header a:visited { +#header a:link, #header a:visited, #logout-form button { color: var(--header-link-color); } @@ -914,24 +931,25 @@ table#change-history tbody th { } #branding { - float: left; + display: flex; } #branding h1 { padding: 0; - margin: 0 20px 0 0; + margin: 0; + margin-inline-end: 20px; font-weight: 300; - font-size: 24px; - color: var(--accent); + font-size: 1.5rem; + color: var(--header-branding-color); } -#branding h1, #branding h1 a:link, #branding h1 a:visited { +#branding h1 a:link, #branding h1 a:visited { color: var(--accent); } #branding h2 { padding: 0 10px; - font-size: 14px; + font-size: 0.875rem; margin: -8px 0 8px 0; font-weight: normal; color: var(--header-color); @@ -941,25 +959,43 @@ table#change-history tbody th { text-decoration: none; } +#logout-form { + display: inline; +} + +#logout-form button { + background: none; + border: 0; + cursor: pointer; + font-family: var(--font-family-primary); +} + #user-tools { float: right; - padding: 0; margin: 0 0 0 20px; - font-weight: 300; - font-size: 11px; - letter-spacing: 0.5px; - text-transform: uppercase; text-align: right; } -#user-tools a { +#user-tools, #logout-form button{ + padding: 0; + font-weight: 300; + font-size: 0.6875rem; + letter-spacing: 0.5px; + text-transform: uppercase; +} + +#user-tools a, #logout-form button { border-bottom: 1px solid rgba(255, 255, 255, 0.25); } -#user-tools a:focus, #user-tools a:hover { +#user-tools a:focus, #user-tools a:hover, +#logout-form button:active, #logout-form button:hover { text-decoration: none; - border-bottom-color: var(--primary); - color: var(--primary); + border-bottom: 0; +} + +#logout-form button:active, #logout-form button:hover { + margin-bottom: 1px; } /* SIDEBAR */ @@ -979,7 +1015,7 @@ table#change-history tbody th { } #content-related h4 { - font-size: 13px; + font-size: 0.8125rem; } #content-related p { @@ -1003,7 +1039,7 @@ table#change-history tbody th { padding: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--hairline-color); - font-size: 18px; + font-size: 1.125rem; color: var(--body-fg); } @@ -1023,8 +1059,8 @@ table#change-history tbody th { .delete-confirmation form .cancel-link { display: inline-block; vertical-align: middle; - height: 15px; - line-height: 15px; + height: 0.9375rem; + line-height: 0.9375rem; border-radius: 4px; padding: 10px 15px; color: var(--button-fg); @@ -1050,3 +1086,53 @@ table#change-history tbody th { .popup #header { padding: 10px 20px; } + +/* PAGINATOR */ + +.paginator { + font-size: 0.8125rem; + padding-top: 10px; + padding-bottom: 10px; + line-height: 22px; + margin: 0; + border-top: 1px solid var(--hairline-color); + width: 100%; +} + +.paginator a:link, .paginator a:visited { + padding: 2px 6px; + background: var(--button-bg); + text-decoration: none; + color: var(--button-fg); +} + +.paginator a.showall { + border: none; + background: none; + color: var(--link-fg); +} + +.paginator a.showall:focus, .paginator a.showall:hover { + background: none; + color: var(--link-hover-color); +} + +.paginator .end { + margin-right: 6px; +} + +.paginator .this-page { + padding: 2px 6px; + font-weight: bold; + font-size: 0.8125rem; + vertical-align: top; +} + +.paginator a:focus, .paginator a:hover { + color: white; + background: var(--link-hover-color); +} + +.base-svgs { + display: none; +} diff --git a/source/static/admin/css/changelists.css b/source/static/admin/css/changelists.css index b4a1557..a754513 100644 --- a/source/static/admin/css/changelists.css +++ b/source/static/admin/css/changelists.css @@ -84,18 +84,18 @@ #toolbar form input { border-radius: 4px; - font-size: 14px; + font-size: 0.875rem; padding: 5px; color: var(--body-fg); } #toolbar #searchbar { - height: 19px; + height: 1.1875rem; border: 1px solid var(--border-color); padding: 2px 5px; margin: 0; vertical-align: top; - font-size: 13px; + font-size: 0.8125rem; max-width: 100%; } @@ -105,7 +105,7 @@ #toolbar form input[type="submit"] { border: 1px solid var(--border-color); - font-size: 13px; + font-size: 0.8125rem; padding: 4px 8px; margin: 0; vertical-align: middle; @@ -125,6 +125,10 @@ margin-right: 4px; } +#changelist-search .help { + word-break: break-word; +} + /* FILTER COLUMN */ #changelist-filter { @@ -136,7 +140,7 @@ } #changelist-filter h2 { - font-size: 14px; + font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 5px 15px; @@ -144,12 +148,35 @@ border-bottom: none; } -#changelist-filter h3 { +#changelist-filter h3, +#changelist-filter details summary { font-weight: 400; padding: 0 15px; margin-bottom: 10px; } +#changelist-filter details summary > * { + display: inline; +} + +#changelist-filter details > summary { + list-style-type: none; +} + +#changelist-filter details > summary::-webkit-details-marker { + display: none; +} + +#changelist-filter details > summary::before { + content: '→'; + font-weight: bold; + color: var(--link-hover-color); +} + +#changelist-filter details[open] > summary::before { + content: '↓'; +} + #changelist-filter ul { margin: 5px 0; padding: 0 15px 15px; @@ -169,8 +196,7 @@ #changelist-filter a { display: block; color: var(--body-quiet-color); - text-overflow: ellipsis; - overflow-x: hidden; + word-break: break-word; } #changelist-filter li.selected { @@ -190,83 +216,34 @@ } #changelist-filter #changelist-filter-clear a { - font-size: 13px; + font-size: 0.8125rem; padding-bottom: 10px; border-bottom: 1px solid var(--hairline-color); } /* DATE DRILLDOWN */ -.change-list ul.toplinks { - display: block; - float: left; - padding: 0; - margin: 0; - width: 100%; -} - -.change-list ul.toplinks li { - padding: 3px 6px; +.change-list .toplinks { + display: flex; + padding-bottom: 5px; + flex-wrap: wrap; + gap: 3px 17px; font-weight: bold; - list-style-type: none; - display: inline-block; } -.change-list ul.toplinks .date-back a { +.change-list .toplinks a { + font-size: 0.8125rem; +} + +.change-list .toplinks .date-back { color: var(--body-quiet-color); } -.change-list ul.toplinks .date-back a:focus, -.change-list ul.toplinks .date-back a:hover { +.change-list .toplinks .date-back:focus, +.change-list .toplinks .date-back:hover { color: var(--link-hover-color); } -/* PAGINATOR */ - -.paginator { - font-size: 13px; - padding-top: 10px; - padding-bottom: 10px; - line-height: 22px; - margin: 0; - border-top: 1px solid var(--hairline-color); - width: 100%; -} - -.paginator a:link, .paginator a:visited { - padding: 2px 6px; - background: var(--button-bg); - text-decoration: none; - color: var(--button-fg); -} - -.paginator a.showall { - border: none; - background: none; - color: var(--link-fg); -} - -.paginator a.showall:focus, .paginator a.showall:hover { - background: none; - color: var(--link-hover-color); -} - -.paginator .end { - margin-right: 6px; -} - -.paginator .this-page { - padding: 2px 6px; - font-weight: bold; - font-size: 13px; - vertical-align: top; -} - -.paginator a:focus, .paginator a:hover { - color: white; - background: var(--link-hover-color); -} - /* ACTIONS */ .filtered .actions { @@ -278,7 +255,13 @@ vertical-align: baseline; } -#changelist table tbody tr.selected { +/* Once the :has() pseudo-class is supported by all browsers, the tr.selected + selector and the JS adding the class can be removed. */ +#changelist tbody tr.selected { + background-color: var(--selected-row); +} + +#changelist tbody tr:has(.action-select:checked) { background-color: var(--selected-row); } @@ -287,22 +270,16 @@ background: var(--body-bg); border-top: none; border-bottom: none; - line-height: 24px; + line-height: 1.5rem; color: var(--body-quiet-color); width: 100%; } -#changelist .actions.selected { /* XXX Probably unused? */ - background: var(--body-bg); - border-top: 1px solid var(--body-bg); - border-bottom: 1px solid #edecd6; -} - #changelist .actions span.all, #changelist .actions span.action-counter, #changelist .actions span.clear, #changelist .actions span.question { - font-size: 13px; + font-size: 0.8125rem; margin: 0 0.5em; } @@ -312,11 +289,11 @@ #changelist .actions select { vertical-align: top; - height: 24px; + height: 1.5rem; color: var(--body-fg); border: 1px solid var(--border-color); border-radius: 4px; - font-size: 14px; + font-size: 0.875rem; padding: 0 0 0 4px; margin: 0; margin-left: 10px; @@ -329,17 +306,17 @@ #changelist .actions label { display: inline-block; vertical-align: middle; - font-size: 13px; + font-size: 0.8125rem; } #changelist .actions .button { - font-size: 13px; + font-size: 0.8125rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--body-bg); box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset; cursor: pointer; - height: 24px; + height: 1.5rem; line-height: 1; padding: 4px 8px; margin: 0; diff --git a/source/static/admin/css/dark_mode.css b/source/static/admin/css/dark_mode.css index 547717c..6d08233 100644 --- a/source/static/admin/css/dark_mode.css +++ b/source/static/admin/css/dark_mode.css @@ -31,3 +31,107 @@ --close-button-hover-bg: #666666; } } + + +html[data-theme="dark"] { + --primary: #264b5d; + --primary-fg: #f7f7f7; + + --body-fg: #eeeeee; + --body-bg: #121212; + --body-quiet-color: #e0e0e0; + --body-loud-color: #ffffff; + + --breadcrumbs-link-fg: #e0e0e0; + --breadcrumbs-bg: var(--primary); + + --link-fg: #81d4fa; + --link-hover-color: #4ac1f7; + --link-selected-fg: #6f94c6; + + --hairline-color: #272727; + --border-color: #353535; + + --error-fg: #e35f5f; + --message-success-bg: #006b1b; + --message-warning-bg: #583305; + --message-error-bg: #570808; + + --darkened-bg: #212121; + --selected-bg: #1b1b1b; + --selected-row: #00363a; + + --close-button-bg: #333333; + --close-button-hover-bg: #666666; +} + +/* THEME SWITCH */ +.theme-toggle { + cursor: pointer; + border: none; + padding: 0; + background: transparent; + vertical-align: middle; + margin-inline-start: 5px; + margin-top: -1px; +} + +.theme-toggle svg { + vertical-align: middle; + height: 1rem; + width: 1rem; + display: none; +} + +/* +Fully hide screen reader text so we only show the one matching the current +theme. +*/ +.theme-toggle .visually-hidden { + display: none; +} + +html[data-theme="auto"] .theme-toggle .theme-label-when-auto { + display: block; +} + +html[data-theme="dark"] .theme-toggle .theme-label-when-dark { + display: block; +} + +html[data-theme="light"] .theme-toggle .theme-label-when-light { + display: block; +} + +/* ICONS */ +.theme-toggle svg.theme-icon-when-auto, +.theme-toggle svg.theme-icon-when-dark, +.theme-toggle svg.theme-icon-when-light { + fill: var(--header-link-color); + color: var(--header-bg); +} + +html[data-theme="auto"] .theme-toggle svg.theme-icon-when-auto { + display: block; +} + +html[data-theme="dark"] .theme-toggle svg.theme-icon-when-dark { + display: block; +} + +html[data-theme="light"] .theme-toggle svg.theme-icon-when-light { + display: block; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + clip: rect(0,0,0,0); + white-space: nowrap; + border: 0; + color: var(--body-fg); + background-color: var(--body-bg); +} diff --git a/source/static/admin/css/dashboard.css b/source/static/admin/css/dashboard.css index 91d6efd..242b81a 100644 --- a/source/static/admin/css/dashboard.css +++ b/source/static/admin/css/dashboard.css @@ -1,4 +1,7 @@ /* DASHBOARD */ +.dashboard td, .dashboard th { + word-break: break-word; +} .dashboard .module table th { width: 100%; diff --git a/source/static/admin/css/forms.css b/source/static/admin/css/forms.css index 89b2270..e45abe1 100644 --- a/source/static/admin/css/forms.css +++ b/source/static/admin/css/forms.css @@ -5,7 +5,7 @@ .form-row { overflow: hidden; padding: 10px; - font-size: 13px; + font-size: 0.8125rem; border-bottom: 1px solid var(--hairline-color); } @@ -22,12 +22,21 @@ form .form-row p { padding-left: 0; } +.flex-container { + display: flex; + flex-wrap: wrap; +} + +.form-multiline > div { + padding-bottom: 10px; +} + /* FORM LABELS */ label { font-weight: normal; color: var(--body-quiet-color); - font-size: 13px; + font-size: 0.8125rem; } .required label, label.required { @@ -37,16 +46,19 @@ label { /* RADIO BUTTONS */ -form ul.radiolist li { - list-style-type: none; +form div.radiolist div { + padding-right: 7px; } -form ul.radiolist label { - float: none; - display: inline; +form div.radiolist.inline div { + display: inline-block; } -form ul.radiolist input[type="radio"] { +form div.radiolist label { + width: auto; +} + +form div.radiolist input[type="radio"] { margin: -2px 4px 0 0; padding: 0; } @@ -66,7 +78,6 @@ form ul.inline li { .aligned label { display: block; padding: 4px 10px 0 0; - float: left; width: 160px; word-wrap: break-word; line-height: 1; @@ -76,14 +87,15 @@ form ul.inline li { content: ''; display: inline-block; vertical-align: middle; - height: 26px; + height: 1.625rem; } -.aligned label + p, .aligned label + div.help, .aligned label + div.readonly { +.aligned label + p, .aligned .checkbox-row + div.help, .aligned label + div.readonly { padding: 6px 0; margin-top: 0; margin-bottom: 0; - margin-left: 170px; + margin-left: 0; + overflow-wrap: break-word; } .aligned ul label { @@ -105,7 +117,7 @@ form .aligned ul { padding-left: 10px; } -form .aligned ul.radiolist { +form .aligned div.radiolist { display: inline-block; margin: 0; padding: 0; @@ -113,16 +125,17 @@ form .aligned ul.radiolist { form .aligned p.help, form .aligned div.help { - clear: left; margin-top: 0; margin-left: 160px; padding-left: 10px; } -form .aligned label + p.help, -form .aligned label + div.help { +form .aligned p.date div.help.timezonewarning, +form .aligned p.datetime div.help.timezonewarning, +form .aligned p.time div.help.timezonewarning { margin-left: 0; padding-left: 0; + font-weight: normal; } form .aligned p.help:last-child, @@ -167,14 +180,7 @@ form .aligned table p { width: 610px; } -.checkbox-row p.help, -.checkbox-row div.help { - margin-left: 0; - padding-left: 0; -} - fieldset .fieldBox { - float: left; margin-right: 20px; } @@ -185,6 +191,7 @@ fieldset .fieldBox { } form .wide p, +form .wide ul.errorlist, form .wide input + p.help, form .wide input + div.help { margin-left: 200px; @@ -192,7 +199,7 @@ form .wide input + div.help { form .wide p.help, form .wide div.help { - padding-left: 38px; + padding-left: 50px; } form div.help ul { @@ -238,19 +245,21 @@ fieldset.collapsed .collapse-toggle { /* MONOSPACE TEXTAREAS */ fieldset.monospace textarea { - font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace; + font-family: var(--font-family-monospace); } /* SUBMIT ROW */ .submit-row { - padding: 12px 14px; + padding: 12px 14px 12px; margin: 0 0 20px; background: var(--darkened-bg); border: 1px solid var(--hairline-color); border-radius: 4px; - text-align: right; overflow: hidden; + display: flex; + gap: 10px; + flex-wrap: wrap; } body.popup .submit-row { @@ -258,32 +267,29 @@ body.popup .submit-row { } .submit-row input { - height: 35px; - line-height: 15px; - margin: 0 0 0 5px; + height: 2.1875rem; + line-height: 0.9375rem; +} + +.submit-row input, .submit-row a { + margin: 0; } .submit-row input.default { - margin: 0 0 0 8px; text-transform: uppercase; } -.submit-row p { - margin: 0.3em; -} - -.submit-row p.deletelink-box { - float: left; - margin: 0; +.submit-row a.deletelink { + margin-left: auto; } .submit-row a.deletelink { display: block; background: var(--delete-button-bg); border-radius: 4px; - padding: 10px 15px; - height: 15px; - line-height: 15px; + padding: 0.625rem 0.9375rem; + height: 0.9375rem; + line-height: 0.9375rem; color: var(--button-fg); } @@ -292,9 +298,8 @@ body.popup .submit-row { background: var(--close-button-bg); border-radius: 4px; padding: 10px 15px; - height: 15px; - line-height: 15px; - margin: 0 0 0 5px; + height: 0.9375rem; + line-height: 0.9375rem; color: var(--button-fg); } @@ -302,12 +307,14 @@ body.popup .submit-row { .submit-row a.deletelink:hover, .submit-row a.deletelink:active { background: var(--delete-button-hover-bg); + text-decoration: none; } .submit-row a.closelink:focus, .submit-row a.closelink:hover, .submit-row a.closelink:active { background: var(--close-button-hover-bg); + text-decoration: none; } /* CUSTOM FORM FIELDS */ @@ -349,10 +356,6 @@ body.popup .submit-row { width: 2.2em; } -.vTextField, .vUUIDField { - width: 20em; -} - .vIntegerField { width: 5em; } @@ -365,6 +368,10 @@ body.popup .submit-row { width: 5em; } +.vTextField, .vUUIDField { + width: 20em; +} + /* INLINES */ .inline-group { @@ -388,7 +395,7 @@ body.popup .submit-row { margin: 0; color: var(--body-quiet-color); padding: 5px; - font-size: 13px; + font-size: 0.8125rem; background: var(--darkened-bg); border-top: 1px solid var(--hairline-color); border-bottom: 1px solid var(--hairline-color); @@ -400,7 +407,7 @@ body.popup .submit-row { .inline-related h3 span.delete label { margin-left: 2px; - font-size: 11px; + font-size: 0.6875rem; } .inline-related fieldset { @@ -413,7 +420,7 @@ body.popup .submit-row { .inline-related fieldset.module h3 { margin: 0; padding: 2px 5px 3px 5px; - font-size: 11px; + font-size: 0.6875rem; text-align: left; font-weight: bold; background: #bcd; @@ -454,7 +461,7 @@ body.popup .submit-row { height: 1.1em; padding: 2px 9px; overflow: hidden; - font-size: 9px; + font-size: 0.5625rem; font-weight: bold; color: var(--body-quiet-color); _width: 700px; @@ -489,7 +496,7 @@ body.popup .submit-row { .inline-group .tabular tr.add-row td a { background: url(../img/icon-addlink.svg) 0 1px no-repeat; padding-left: 16px; - font-size: 12px; + font-size: 0.75rem; } .empty-form { @@ -507,8 +514,8 @@ body.popup .submit-row { } .related-lookup { - width: 16px; - height: 16px; + width: 1rem; + height: 1rem; background-image: url(../img/search.svg); } diff --git a/source/static/admin/css/login.css b/source/static/admin/css/login.css index 10d9d22..389772f 100644 --- a/source/static/admin/css/login.css +++ b/source/static/admin/css/login.css @@ -12,7 +12,8 @@ } .login #header h1 { - font-size: 18px; + font-size: 1.125rem; + margin: 0; } .login #header h1 a { diff --git a/source/static/admin/css/nav_sidebar.css b/source/static/admin/css/nav_sidebar.css index f3c2fd8..f76e6ce 100644 --- a/source/static/admin/css/nav_sidebar.css +++ b/source/static/admin/css/nav_sidebar.css @@ -16,7 +16,7 @@ border-right: 1px solid var(--hairline-color); background-color: var(--body-bg); cursor: pointer; - font-size: 20px; + font-size: 1.25rem; color: var(--link-fg); padding: 0; } @@ -59,14 +59,16 @@ content: '\00AB'; } +.main > #nav-sidebar { + visibility: hidden; +} + .main.shifted > #nav-sidebar { - left: 24px; margin-left: 0; + visibility: visible; } [dir="rtl"] .main.shifted > #nav-sidebar { - left: 0; - right: 24px; margin-right: 0; } @@ -118,3 +120,25 @@ max-width: 100%; } } + +#nav-filter { + width: 100%; + box-sizing: border-box; + padding: 2px 5px; + margin: 5px 0; + border: 1px solid var(--border-color); + background-color: var(--darkened-bg); + color: var(--body-fg); +} + +#nav-filter:focus { + border-color: var(--body-quiet-color); +} + +#nav-filter.no-results { + background: var(--message-error-bg); +} + +#nav-sidebar table { + width: 100%; +} diff --git a/source/static/admin/css/responsive.css b/source/static/admin/css/responsive.css index 8c6dd81..9ce4f67 100644 --- a/source/static/admin/css/responsive.css +++ b/source/static/admin/css/responsive.css @@ -14,11 +14,11 @@ input[type="submit"], button { td, th { padding: 10px; - font-size: 14px; + font-size: 0.875rem; } .small { - font-size: 12px; + font-size: 0.75rem; } /* Layout */ @@ -28,7 +28,7 @@ input[type="submit"], button { } #content { - padding: 20px 30px 30px; + padding: 15px 20px 20px; } div.breadcrumbs { @@ -45,7 +45,6 @@ input[type="submit"], button { #branding h1 { margin: 0 0 8px; - font-size: 20px; line-height: 1.2; } @@ -88,7 +87,7 @@ input[type="submit"], button { } td .changelink, td .addlink { - font-size: 13px; + font-size: 0.8125rem; } /* Changelist */ @@ -105,13 +104,13 @@ input[type="submit"], button { } #changelist-search label { - line-height: 22px; + line-height: 1.375rem; } #toolbar form #searchbar { flex: 1 0 auto; width: 0; - height: 22px; + height: 1.375rem; margin: 0 10px 0 6px; } @@ -131,10 +130,6 @@ input[type="submit"], button { padding: 15px 0; } - #changelist .actions.selected { - border: none; - } - #changelist .actions label { display: flex; } @@ -152,7 +147,7 @@ input[type="submit"], button { #changelist .actions span.clear, #changelist .actions span.question, #changelist .actions span.action-counter { - font-size: 11px; + font-size: 0.6875rem; margin: 0 10px 0 0; } @@ -176,7 +171,7 @@ input[type="submit"], button { /* Forms */ label { - font-size: 14px; + font-size: 0.875rem; } .form-row input[type=text], @@ -191,12 +186,12 @@ input[type="submit"], button { box-sizing: border-box; margin: 0; padding: 6px 8px; - min-height: 36px; - font-size: 14px; + min-height: 2.25rem; + font-size: 0.875rem; } .form-row select { - height: 36px; + height: 2.25rem; } .form-row select[multiple] { @@ -204,12 +199,6 @@ input[type="submit"], button { min-height: 0; } - fieldset .fieldBox { - float: none; - margin: 0 -10px; - padding: 0 10px; - } - fieldset .fieldBox + .fieldBox { margin-top: 10px; padding-top: 10px; @@ -232,10 +221,22 @@ input[type="submit"], button { margin-left: 15px; } - form .aligned ul.radiolist { + form .aligned div.radiolist { margin-left: 2px; } + .submit-row { + padding: 8px; + } + + .submit-row a.deletelink { + padding: 10px 7px; + } + + .button, input[type=submit], input[type=button], .submit-row input, a.button { + padding: 7px; + } + /* Related widget */ .related-widget-wrapper { @@ -383,22 +384,18 @@ input[type="submit"], button { display: none; } - form .form-row p.datetime { - width: 100%; - } - .datetime input { width: 50%; max-width: 120px; } .datetime span { - font-size: 13px; + font-size: 0.8125rem; } .datetime .timezonewarning { display: block; - font-size: 11px; + font-size: 0.6875rem; color: var(--body-quiet-color); } @@ -496,7 +493,7 @@ input[type="submit"], button { #content-related .module h2 { padding: 10px 15px; - font-size: 16px; + font-size: 1rem; } /* Changelist */ @@ -557,8 +554,6 @@ input[type="submit"], button { .aligned .form-row, .aligned .form-row > div { - display: flex; - flex-wrap: wrap; max-width: 100vw; } @@ -566,6 +561,10 @@ input[type="submit"], button { width: calc(100vw - 30px); } + .flex-container { + flex-flow: column; + } + textarea { max-width: none; } @@ -621,8 +620,7 @@ input[type="submit"], button { } .aligned p.file-upload { - margin-left: 0; - font-size: 13px; + font-size: 0.8125rem; } span.clearable-file-input { @@ -630,7 +628,7 @@ input[type="submit"], button { } span.clearable-file-input label { - font-size: 13px; + font-size: 0.8125rem; padding-bottom: 0; } @@ -645,17 +643,19 @@ input[type="submit"], button { padding: 0; } - form .aligned ul { + form .aligned ul, + form .aligned ul.errorlist { margin-left: 0; padding-left: 0; } - form .aligned ul.radiolist { + form .aligned div.radiolist { + margin-top: 5px; margin-right: 15px; margin-bottom: -3px; } - form .aligned ul.radiolist:not(.inline) li + li { + form .aligned div.radiolist:not(.inline) div + div { margin-top: 5px; } @@ -811,28 +811,23 @@ input[type="submit"], button { /* Submit row */ .submit-row { - padding: 10px 10px 0; + padding: 10px; margin: 0 0 15px; - display: flex; flex-direction: column; + gap: 8px; } - .submit-row > * { - width: 100%; - } - - .submit-row input, .submit-row input.default, .submit-row a, .submit-row a.closelink { - float: none; - margin: 0 0 10px; + .submit-row input, .submit-row input.default, .submit-row a { text-align: center; } .submit-row a.closelink { padding: 10px 0; + text-align: center; } - .submit-row p.deletelink-box { - order: 4; + .submit-row a.deletelink { + margin: 0; } /* Messages */ @@ -906,7 +901,7 @@ input[type="submit"], button { .errornote { margin: 0 0 20px; padding: 8px 12px; - font-size: 13px; + font-size: 0.8125rem; } /* Calendar and clock */ @@ -953,8 +948,8 @@ input[type="submit"], button { .calendar-shortcuts { padding: 10px 0; - font-size: 12px; - line-height: 12px; + font-size: 0.75rem; + line-height: 0.75rem; } .calendar-shortcuts a { @@ -986,7 +981,7 @@ input[type="submit"], button { /* History */ table#change-history tbody th, table#change-history tbody td { - font-size: 13px; + font-size: 0.8125rem; word-break: break-word; } @@ -997,7 +992,7 @@ input[type="submit"], button { /* Docs */ table.model tbody th, table.model tbody td { - font-size: 13px; + font-size: 0.8125rem; word-break: break-word; } } diff --git a/source/static/admin/css/responsive_rtl.css b/source/static/admin/css/responsive_rtl.css index 66d3c2f..639e20b 100644 --- a/source/static/admin/css/responsive_rtl.css +++ b/source/static/admin/css/responsive_rtl.css @@ -69,7 +69,8 @@ margin-right: 15px; } - [dir="rtl"] .aligned ul { + [dir="rtl"] .aligned ul, + [dir="rtl"] form .aligned ul.errorlist { margin-right: 0; } diff --git a/source/static/admin/css/rtl.css b/source/static/admin/css/rtl.css index 0447f89..53a6dd6 100644 --- a/source/static/admin/css/rtl.css +++ b/source/static/admin/css/rtl.css @@ -111,19 +111,11 @@ thead th.sorted .text { .aligned label { padding: 0 0 3px 1em; - float: right; } -.submit-row { - text-align: left -} - -.submit-row p.deletelink-box { - float: right; -} - -.submit-row input.default { +.submit-row a.deletelink { margin-left: 0; + margin-right: auto; } .vDateField, .vTimeField { @@ -134,13 +126,11 @@ thead th.sorted .text { margin-left: 5px; } -form .aligned p.help, form .aligned div.help { - clear: right; -} - form .aligned ul { margin-right: 163px; + padding-right: 10px; margin-left: 0; + padding-left: 0; } form ul.inline li { @@ -149,12 +139,39 @@ form ul.inline li { padding-left: 7px; } -input[type=submit].default, .submit-row input.default { - float: left; +form .aligned p.help, +form .aligned div.help { + margin-right: 160px; + padding-right: 10px; +} + +form div.help ul, +form .aligned .checkbox-row + .help, +form .aligned p.date div.help.timezonewarning, +form .aligned p.datetime div.help.timezonewarning, +form .aligned p.time div.help.timezonewarning { + margin-right: 0; + padding-right: 0; +} + +form .wide p.help, form .wide div.help { + padding-left: 0; + padding-right: 50px; +} + +form .wide p, +form .wide ul.errorlist, +form .wide input + p.help, +form .wide input + div.help { + margin-right: 200px; + margin-left: 0px; +} + +.submit-row { + text-align: right; } fieldset .fieldBox { - float: right; margin-left: 20px; margin-right: 0; } @@ -175,12 +192,24 @@ fieldset .fieldBox { top: 0; left: auto; right: 10px; + background: url(../img/calendar-icons.svg) 0 -30px no-repeat; +} + +.calendarbox .calendarnav-previous:focus, +.calendarbox .calendarnav-previous:hover { + background-position: 0 -45px; } .calendarnav-next { top: 0; right: auto; left: 10px; + background: url(../img/calendar-icons.svg) 0 0 no-repeat; +} + +.calendarbox .calendarnav-next:focus, +.calendarbox .calendarnav-next:hover { + background-position: 0 -15px; } .calendar caption, .calendarbox h2 { @@ -195,6 +224,38 @@ fieldset .fieldBox { text-align: right; } +.selector-add { + background: url(../img/selector-icons.svg) 0 -64px no-repeat; +} + +.active.selector-add:focus, .active.selector-add:hover { + background-position: 0 -80px; +} + +.selector-remove { + background: url(../img/selector-icons.svg) 0 -96px no-repeat; +} + +.active.selector-remove:focus, .active.selector-remove:hover { + background-position: 0 -112px; +} + +a.selector-chooseall { + background: url(../img/selector-icons.svg) right -128px no-repeat; +} + +a.active.selector-chooseall:focus, a.active.selector-chooseall:hover { + background-position: 100% -144px; +} + +a.selector-clearall { + background: url(../img/selector-icons.svg) 0 -160px no-repeat; +} + +a.active.selector-clearall:focus, a.active.selector-clearall:hover { + background-position: 0 -176px; +} + .inline-deletelink { float: left; } diff --git a/source/static/admin/css/widgets.css b/source/static/admin/css/widgets.css index c7d6456..5f7adcb 100644 --- a/source/static/admin/css/widgets.css +++ b/source/static/admin/css/widgets.css @@ -3,22 +3,21 @@ .selector { width: 800px; float: left; + display: flex; } .selector select { width: 380px; height: 17.2em; + flex: 1 0 auto; } .selector-available, .selector-chosen { - float: left; width: 380px; text-align: center; margin-bottom: 5px; -} - -.selector-chosen select { - border-top: none; + display: flex; + flex-direction: column; } .selector-available h2, .selector-chosen h2 { @@ -26,6 +25,21 @@ border-radius: 4px 4px 0 0; } +.selector-chosen .list-footer-display { + border: 1px solid var(--border-color); + border-top: none; + border-radius: 0 0 4px 4px; + margin: 0 0 10px; + padding: 8px; + text-align: center; + background: var(--primary); + color: var(--header-link-color); + cursor: pointer; +} +.selector-chosen .list-footer-display__clear { + color: var(--breadcrumbs-fg); +} + .selector-chosen h2 { background: var(--primary); color: var(--header-link-color); @@ -41,7 +55,7 @@ border-width: 0 1px; padding: 8px; color: var(--body-quiet-color); - font-size: 10px; + font-size: 0.625rem; margin: 0; text-align: left; } @@ -57,18 +71,20 @@ line-height: 1; } -.selector .selector-available input { +.selector .selector-available input, +.selector .selector-chosen input { width: 320px; margin-left: 8px; } .selector ul.selector-chooser { - float: left; + align-self: center; width: 22px; background-color: var(--selected-bg); border-radius: 10px; - margin: 10em 5px 0 5px; + margin: 0 5px; padding: 0; + transform: translateY(-17px); } .selector-chooser li { @@ -82,6 +98,15 @@ margin: 0 0 10px; border-radius: 0 0 4px 4px; } +.selector .selector-chosen--with-filtered select { + margin: 0; + border-radius: 0; + height: 14em; +} + +.selector .selector-chosen:not(.selector-chosen--with-filtered) .list-footer-display { + display: none; +} .selector-add, .selector-remove { width: 16px; @@ -168,6 +193,7 @@ a.active.selector-clearall:focus, a.active.selector-clearall:hover { .stacked { float: left; width: 490px; + display: block; } .stacked select { @@ -193,6 +219,7 @@ a.active.selector-clearall:focus, a.active.selector-clearall:hover { margin: 0 0 10px 40%; background-color: #eee; border-radius: 10px; + transform: none; } .stacked .selector-chooser li { @@ -250,8 +277,8 @@ a.active.selector-clearall:focus, a.active.selector-clearall:hover { .selector .search-label-icon { background: url(../img/search.svg) 0 0 no-repeat; display: inline-block; - height: 18px; - width: 18px; + height: 1.125rem; + width: 1.125rem; } /* DATE AND TIME */ @@ -267,7 +294,7 @@ p.datetime { .datetime span { white-space: nowrap; font-weight: normal; - font-size: 11px; + font-size: 0.6875rem; color: var(--body-quiet-color); } @@ -277,7 +304,7 @@ p.datetime { } table p.datetime { - font-size: 11px; + font-size: 0.6875rem; margin-left: 0; padding-left: 0; } @@ -311,7 +338,7 @@ table p.datetime { } .timezonewarning { - font-size: 11px; + font-size: 0.6875rem; color: var(--body-quiet-color); } @@ -322,7 +349,7 @@ p.url { margin: 0; padding: 0; color: var(--body-quiet-color); - font-size: 11px; + font-size: 0.6875rem; font-weight: bold; } @@ -337,14 +364,10 @@ p.file-upload { margin: 0; padding: 0; color: var(--body-quiet-color); - font-size: 11px; + font-size: 0.6875rem; font-weight: bold; } -.aligned p.file-upload { - margin-left: 170px; -} - .file-upload a { font-weight: normal; } @@ -355,7 +378,7 @@ p.file-upload { span.clearable-file-input label { color: var(--body-fg); - font-size: 11px; + font-size: 0.6875rem; display: inline; float: none; } @@ -364,7 +387,7 @@ span.clearable-file-input label { .calendarbox, .clockbox { margin: 5px auto; - font-size: 12px; + font-size: 0.75rem; width: 19em; text-align: center; background: var(--body-bg); @@ -398,7 +421,7 @@ span.clearable-file-input label { text-align: center; border-top: none; font-weight: 700; - font-size: 12px; + font-size: 0.75rem; color: #333; background: var(--accent); } @@ -408,14 +431,14 @@ span.clearable-file-input label { background: var(--darkened-bg); border-bottom: 1px solid var(--border-color); font-weight: 400; - font-size: 12px; + font-size: 0.75rem; text-align: center; color: var(--body-quiet-color); } .calendar td { font-weight: 400; - font-size: 12px; + font-size: 0.75rem; text-align: center; padding: 0; border-top: 1px solid var(--hairline-color); @@ -455,7 +478,7 @@ span.clearable-file-input label { } .calendarnav { - font-size: 10px; + font-size: 0.625rem; text-align: center; color: #ccc; margin: 0; @@ -470,8 +493,8 @@ span.clearable-file-input label { .calendar-shortcuts { background: var(--body-bg); color: var(--body-quiet-color); - font-size: 11px; - line-height: 11px; + font-size: 0.6875rem; + line-height: 0.6875rem; border-top: 1px solid var(--hairline-color); padding: 8px 0; } @@ -509,7 +532,7 @@ span.clearable-file-input label { .calendar-cancel { margin: 0; padding: 4px 0; - font-size: 12px; + font-size: 0.75rem; background: #eee; border-top: 1px solid var(--border-color); color: var(--body-fg); @@ -572,3 +595,9 @@ select + .related-widget-wrapper-link, .related-widget-wrapper-link + .related-widget-wrapper-link { margin-left: 7px; } + +/* GIS MAPS */ +.dj_map { + width: 600px; + height: 400px; +} diff --git a/source/static/admin/js/SelectBox.js b/source/static/admin/js/SelectBox.js index ace6d9d..3db4ec7 100644 --- a/source/static/admin/js/SelectBox.js +++ b/source/static/admin/js/SelectBox.js @@ -41,6 +41,10 @@ } SelectBox.redisplay(id); }, + get_hidden_node_count(id) { + const cache = SelectBox.cache[id] || []; + return cache.filter(node => node.displayed === 0).length; + }, delete_from_cache: function(id, value) { let delete_index = null; const cache = SelectBox.cache[id]; diff --git a/source/static/admin/js/SelectFilter2.js b/source/static/admin/js/SelectFilter2.js index 194c2db..9a4e0a3 100644 --- a/source/static/admin/js/SelectFilter2.js +++ b/source/static/admin/js/SelectFilter2.js @@ -78,7 +78,7 @@ Requires core.js and SelectBox.js. remove_link.className = 'selector-remove'; //
- const selector_chosen = quickElement('div', selector_div); + const selector_chosen = quickElement('div', selector_div, '', 'id', field_id + '_selector_chosen'); selector_chosen.className = 'selector-chosen'; const title_chosen = quickElement('h2', selector_chosen, interpolate(gettext('Chosen %s') + ' ', [field_name])); quickElement( @@ -93,9 +93,30 @@ Requires core.js and SelectBox.js. [field_name] ) ); + + const filter_selected_p = quickElement('p', selector_chosen, '', 'id', field_id + '_filter_selected'); + filter_selected_p.className = 'selector-filter'; + + const search_filter_selected_label = quickElement('label', filter_selected_p, '', 'for', field_id + '_selected_input'); + + quickElement( + 'span', search_filter_selected_label, '', + 'class', 'help-tooltip search-label-icon', + 'title', interpolate(gettext("Type into this box to filter down the list of selected %s."), [field_name]) + ); + + filter_selected_p.appendChild(document.createTextNode(' ')); + + const filter_selected_input = quickElement('input', filter_selected_p, '', 'type', 'text', 'placeholder', gettext("Filter")); + filter_selected_input.id = field_id + '_selected_input'; const to_box = quickElement('select', selector_chosen, '', 'id', field_id + '_to', 'multiple', '', 'size', from_box.size, 'name', from_box.name); to_box.className = 'filtered'; + + const warning_footer = quickElement('div', selector_chosen, '', 'class', 'list-footer-display'); + quickElement('span', warning_footer, '', 'id', field_id + '_list-footer-display-text'); + quickElement('span', warning_footer, ' (click to clear)', 'class', 'list-footer-display__clear'); + const clear_all = quickElement('a', selector_chosen, gettext('Remove all'), 'title', interpolate(gettext('Click to remove all chosen %s at once.'), [field_name]), 'href', '#', 'id', field_id + '_remove_all_link'); clear_all.className = 'selector-clearall'; @@ -106,6 +127,8 @@ Requires core.js and SelectBox.js. if (elem.classList.contains('active')) { move_func(from, to); SelectFilter.refresh_icons(field_id); + SelectFilter.refresh_filtered_selects(field_id); + SelectFilter.refresh_filtered_warning(field_id); } e.preventDefault(); }; @@ -121,14 +144,29 @@ Requires core.js and SelectBox.js. clear_all.addEventListener('click', function(e) { move_selection(e, this, SelectBox.move_all, field_id + '_to', field_id + '_from'); }); + warning_footer.addEventListener('click', function(e) { + filter_selected_input.value = ''; + SelectBox.filter(field_id + '_to', ''); + SelectFilter.refresh_filtered_warning(field_id); + SelectFilter.refresh_icons(field_id); + }); filter_input.addEventListener('keypress', function(e) { - SelectFilter.filter_key_press(e, field_id); + SelectFilter.filter_key_press(e, field_id, '_from', '_to'); }); filter_input.addEventListener('keyup', function(e) { - SelectFilter.filter_key_up(e, field_id); + SelectFilter.filter_key_up(e, field_id, '_from'); }); filter_input.addEventListener('keydown', function(e) { - SelectFilter.filter_key_down(e, field_id); + SelectFilter.filter_key_down(e, field_id, '_from', '_to'); + }); + filter_selected_input.addEventListener('keypress', function(e) { + SelectFilter.filter_key_press(e, field_id, '_to', '_from'); + }); + filter_selected_input.addEventListener('keyup', function(e) { + SelectFilter.filter_key_up(e, field_id, '_to', '_selected_input'); + }); + filter_selected_input.addEventListener('keydown', function(e) { + SelectFilter.filter_key_down(e, field_id, '_to', '_from'); }); selector_div.addEventListener('change', function(e) { if (e.target.tagName === 'SELECT') { @@ -146,6 +184,7 @@ Requires core.js and SelectBox.js. } }); from_box.closest('form').addEventListener('submit', function() { + SelectBox.filter(field_id + '_to', ''); SelectBox.select_all(field_id + '_to'); }); SelectBox.init(field_id + '_from'); @@ -163,6 +202,24 @@ Requires core.js and SelectBox.js. field.required = false; return any_selected; }, + refresh_filtered_warning: function(field_id) { + const count = SelectBox.get_hidden_node_count(field_id + '_to'); + const selector = document.getElementById(field_id + '_selector_chosen'); + const warning = document.getElementById(field_id + '_list-footer-display-text'); + selector.className = selector.className.replace('selector-chosen--with-filtered', ''); + warning.textContent = interpolate(ngettext( + '%s selected option not visible', + '%s selected options not visible', + count + ), [count]); + if(count > 0) { + selector.className += ' selector-chosen--with-filtered'; + } + }, + refresh_filtered_selects: function(field_id) { + SelectBox.filter(field_id + '_from', document.getElementById(field_id + "_input").value); + SelectBox.filter(field_id + '_to', document.getElementById(field_id + "_selected_input").value); + }, refresh_icons: function(field_id) { const from = document.getElementById(field_id + '_from'); const to = document.getElementById(field_id + '_to'); @@ -172,39 +229,47 @@ Requires core.js and SelectBox.js. // Active if the corresponding box isn't empty document.getElementById(field_id + '_add_all_link').classList.toggle('active', from.querySelector('option')); document.getElementById(field_id + '_remove_all_link').classList.toggle('active', to.querySelector('option')); + SelectFilter.refresh_filtered_warning(field_id); }, - filter_key_press: function(event, field_id) { - const from = document.getElementById(field_id + '_from'); + filter_key_press: function(event, field_id, source, target) { + const source_box = document.getElementById(field_id + source); // don't submit form if user pressed Enter if ((event.which && event.which === 13) || (event.keyCode && event.keyCode === 13)) { - from.selectedIndex = 0; - SelectBox.move(field_id + '_from', field_id + '_to'); - from.selectedIndex = 0; + source_box.selectedIndex = 0; + SelectBox.move(field_id + source, field_id + target); + source_box.selectedIndex = 0; event.preventDefault(); } }, - filter_key_up: function(event, field_id) { - const from = document.getElementById(field_id + '_from'); - const temp = from.selectedIndex; - SelectBox.filter(field_id + '_from', document.getElementById(field_id + '_input').value); - from.selectedIndex = temp; + filter_key_up: function(event, field_id, source, filter_input) { + const input = filter_input || '_input'; + const source_box = document.getElementById(field_id + source); + const temp = source_box.selectedIndex; + SelectBox.filter(field_id + source, document.getElementById(field_id + input).value); + source_box.selectedIndex = temp; + SelectFilter.refresh_filtered_warning(field_id); + SelectFilter.refresh_icons(field_id); }, - filter_key_down: function(event, field_id) { - const from = document.getElementById(field_id + '_from'); + filter_key_down: function(event, field_id, source, target) { + const source_box = document.getElementById(field_id + source); + // right key (39) or left key (37) + const direction = source === '_from' ? 39 : 37; // right arrow -- move across - if ((event.which && event.which === 39) || (event.keyCode && event.keyCode === 39)) { - const old_index = from.selectedIndex; - SelectBox.move(field_id + '_from', field_id + '_to'); - from.selectedIndex = (old_index === from.length) ? from.length - 1 : old_index; + if ((event.which && event.which === direction) || (event.keyCode && event.keyCode === direction)) { + const old_index = source_box.selectedIndex; + SelectBox.move(field_id + source, field_id + target); + SelectFilter.refresh_filtered_selects(field_id); + SelectFilter.refresh_filtered_warning(field_id); + source_box.selectedIndex = (old_index === source_box.length) ? source_box.length - 1 : old_index; return; } // down arrow -- wrap around if ((event.which && event.which === 40) || (event.keyCode && event.keyCode === 40)) { - from.selectedIndex = (from.length === from.selectedIndex + 1) ? 0 : from.selectedIndex + 1; + source_box.selectedIndex = (source_box.length === source_box.selectedIndex + 1) ? 0 : source_box.selectedIndex + 1; } // up arrow -- wrap around if ((event.which && event.which === 38) || (event.keyCode && event.keyCode === 38)) { - from.selectedIndex = (from.selectedIndex === 0) ? from.length - 1 : from.selectedIndex - 1; + source_box.selectedIndex = (source_box.selectedIndex === 0) ? source_box.length - 1 : source_box.selectedIndex - 1; } } }; diff --git a/source/static/admin/js/actions.js b/source/static/admin/js/actions.js index 2830e91..20a5c14 100644 --- a/source/static/admin/js/actions.js +++ b/source/static/admin/js/actions.js @@ -156,7 +156,7 @@ }); }); - document.querySelector('#changelist-form button[name=index]').addEventListener('click', function() { + document.querySelector('#changelist-form button[name=index]').addEventListener('click', function(event) { if (list_editable_changed) { const confirmed = confirm(gettext("You have unsaved changes on individual editable fields. If you run an action, your unsaved changes will be lost.")); if (!confirmed) { diff --git a/source/static/admin/js/admin/DateTimeShortcuts.js b/source/static/admin/js/admin/DateTimeShortcuts.js index 9bad0f5..aa1cae9 100644 --- a/source/static/admin/js/admin/DateTimeShortcuts.js +++ b/source/static/admin/js/admin/DateTimeShortcuts.js @@ -90,10 +90,9 @@ } message = interpolate(message, [timezoneOffset]); - const warning = document.createElement('span'); - warning.className = warningClass; + const warning = document.createElement('div'); + warning.classList.add('help', warningClass); warning.textContent = message; - inp.parentNode.appendChild(document.createElement('br')); inp.parentNode.appendChild(warning); }, // Add clock widget to a given field @@ -388,13 +387,7 @@ DateTimeShortcuts.calendars[num].drawNextMonth(); }, handleCalendarCallback: function(num) { - let format = get_format('DATE_INPUT_FORMATS')[0]; - // the format needs to be escaped a little - format = format.replace('\\', '\\\\') - .replace('\r', '\\r') - .replace('\n', '\\n') - .replace('\t', '\\t') - .replace("'", "\\'"); + const format = get_format('DATE_INPUT_FORMATS')[0]; return function(y, m, d) { DateTimeShortcuts.calendarInputs[num].value = new Date(y, m - 1, d).strftime(format); DateTimeShortcuts.calendarInputs[num].focus(); diff --git a/source/static/admin/js/admin/RelatedObjectLookups.js b/source/static/admin/js/admin/RelatedObjectLookups.js index 289e1ce..afb6b66 100644 --- a/source/static/admin/js/admin/RelatedObjectLookups.js +++ b/source/static/admin/js/admin/RelatedObjectLookups.js @@ -4,14 +4,43 @@ 'use strict'; { const $ = django.jQuery; + let popupIndex = 0; + const relatedWindows = []; + + function dismissChildPopups() { + relatedWindows.forEach(function(win) { + if(!win.closed) { + win.dismissChildPopups(); + win.close(); + } + }); + } + + function setPopupIndex() { + if(document.getElementsByName("_popup").length > 0) { + const index = window.name.lastIndexOf("__") + 2; + popupIndex = parseInt(window.name.substring(index)); + } else { + popupIndex = 0; + } + } + + function addPopupIndex(name) { + return name + "__" + (popupIndex + 1); + } + + function removePopupIndex(name) { + return name.replace(new RegExp("__" + (popupIndex + 1) + "$"), ''); + } function showAdminPopup(triggeringLink, name_regexp, add_popup) { - const name = triggeringLink.id.replace(name_regexp, ''); + const name = addPopupIndex(triggeringLink.id.replace(name_regexp, '')); const href = new URL(triggeringLink.href); if (add_popup) { href.searchParams.set('_popup', 1); } const win = window.open(href, name, 'height=500,width=800,resizable=yes,scrollbars=yes'); + relatedWindows.push(win); win.focus(); return false; } @@ -21,13 +50,17 @@ } function dismissRelatedLookupPopup(win, chosenId) { - const name = win.name; + const name = removePopupIndex(win.name); const elem = document.getElementById(name); if (elem.classList.contains('vManyToManyRawIdAdminField') && elem.value) { elem.value += ',' + chosenId; } else { document.getElementById(name).value = chosenId; } + const index = relatedWindows.indexOf(win); + if (index > -1) { + relatedWindows.splice(index, 1); + } win.close(); } @@ -52,13 +85,44 @@ } } + function updateRelatedSelectsOptions(currentSelect, win, objId, newRepr, newId) { + // After create/edit a model from the options next to the current + // select (+ or :pencil:) update ForeignKey PK of the rest of selects + // in the page. + + const path = win.location.pathname; + // Extract the model from the popup url '...//add/' or + // '...///change/' depending the action (add or change). + const modelName = path.split('/')[path.split('/').length - (objId ? 4 : 3)]; + // Exclude autocomplete selects. + const selectsRelated = document.querySelectorAll(`[data-model-ref="${modelName}"] select:not(.admin-autocomplete)`); + + selectsRelated.forEach(function(select) { + if (currentSelect === select) { + return; + } + + let option = select.querySelector(`option[value="${objId}"]`); + + if (!option) { + option = new Option(newRepr, newId); + select.options.add(option); + return; + } + + option.textContent = newRepr; + option.value = newId; + }); + } + function dismissAddRelatedObjectPopup(win, newId, newRepr) { - const name = win.name; + const name = removePopupIndex(win.name); const elem = document.getElementById(name); if (elem) { const elemName = elem.nodeName.toUpperCase(); if (elemName === 'SELECT') { elem.options[elem.options.length] = new Option(newRepr, newId, true, true); + updateRelatedSelectsOptions(elem, win, null, newRepr, newId); } else if (elemName === 'INPUT') { if (elem.classList.contains('vManyToManyRawIdAdminField') && elem.value) { elem.value += ',' + newId; @@ -74,11 +138,15 @@ SelectBox.add_to_cache(toId, o); SelectBox.redisplay(toId); } + const index = relatedWindows.indexOf(win); + if (index > -1) { + relatedWindows.splice(index, 1); + } win.close(); } function dismissChangeRelatedObjectPopup(win, objId, newRepr, newId) { - const id = win.name.replace(/^edit_/, ''); + const id = removePopupIndex(win.name.replace(/^edit_/, '')); const selectsSelector = interpolate('#%s, #%s_from, #%s_to', [id, id, id]); const selects = $(selectsSelector); selects.find('option').each(function() { @@ -86,18 +154,23 @@ this.textContent = newRepr; this.value = newId; } - }); + }).trigger('change'); + updateRelatedSelectsOptions(selects[0], win, objId, newRepr, newId); selects.next().find('.select2-selection__rendered').each(function() { // The element can have a clear button as a child. // Use the lastChild to modify only the displayed value. this.lastChild.textContent = newRepr; this.title = newRepr; }); + const index = relatedWindows.indexOf(win); + if (index > -1) { + relatedWindows.splice(index, 1); + } win.close(); } function dismissDeleteRelatedObjectPopup(win, objId) { - const id = win.name.replace(/^delete_/, ''); + const id = removePopupIndex(win.name.replace(/^delete_/, '')); const selectsSelector = interpolate('#%s, #%s_from, #%s_to', [id, id, id]); const selects = $(selectsSelector); selects.find('option').each(function() { @@ -105,6 +178,10 @@ $(this).remove(); } }).trigger('change'); + const index = relatedWindows.indexOf(win); + if (index > -1) { + relatedWindows.splice(index, 1); + } win.close(); } @@ -115,17 +192,23 @@ window.dismissAddRelatedObjectPopup = dismissAddRelatedObjectPopup; window.dismissChangeRelatedObjectPopup = dismissChangeRelatedObjectPopup; window.dismissDeleteRelatedObjectPopup = dismissDeleteRelatedObjectPopup; + window.dismissChildPopups = dismissChildPopups; // Kept for backward compatibility window.showAddAnotherPopup = showRelatedObjectPopup; window.dismissAddAnotherPopup = dismissAddRelatedObjectPopup; + window.addEventListener('unload', function(evt) { + window.dismissChildPopups(); + }); + $(document).ready(function() { + setPopupIndex(); $("a[data-popup-opener]").on('click', function(event) { event.preventDefault(); opener.dismissRelatedLookupPopup(window, $(this).data("popup-opener")); }); - $('body').on('click', '.related-widget-wrapper-link', function(e) { + $('body').on('click', '.related-widget-wrapper-link[data-popup="yes"]', function(e) { e.preventDefault(); if (this.href) { const event = $.Event('django:show-related', {href: this.href}); diff --git a/source/static/admin/js/autocomplete.js b/source/static/admin/js/autocomplete.js index c55eee1..d3daeab 100644 --- a/source/static/admin/js/autocomplete.js +++ b/source/static/admin/js/autocomplete.js @@ -1,28 +1,22 @@ 'use strict'; { const $ = django.jQuery; - const init = function($element, options) { - const settings = $.extend({ - ajax: { - data: function(params) { - return { - term: params.term, - page: params.page, - app_label: $element.data('app-label'), - model_name: $element.data('model-name'), - field_name: $element.data('field-name') - }; - } - } - }, options); - $element.select2(settings); - }; - $.fn.djangoAdminSelect2 = function(options) { - const settings = $.extend({}, options); + $.fn.djangoAdminSelect2 = function() { $.each(this, function(i, element) { - const $element = $(element); - init($element, settings); + $(element).select2({ + ajax: { + data: (params) => { + return { + term: params.term, + page: params.page, + app_label: element.dataset.appLabel, + model_name: element.dataset.modelName, + field_name: element.dataset.fieldName + }; + } + } + }); }); return this; }; @@ -33,9 +27,7 @@ $('.admin-autocomplete').not('[name*=__prefix__]').djangoAdminSelect2(); }); - $(document).on('formset:added', (function() { - return function(event, $newFormset) { - return $newFormset.find('.admin-autocomplete').djangoAdminSelect2(); - }; - })(this)); + document.addEventListener('formset:added', (event) => { + $(event.target).find('.admin-autocomplete').djangoAdminSelect2(); + }); } diff --git a/source/static/admin/js/core.js b/source/static/admin/js/core.js index 3a2e4aa..0344a13 100644 --- a/source/static/admin/js/core.js +++ b/source/static/admin/js/core.js @@ -1,4 +1,4 @@ -// Core javascript helper functions +// Core JavaScript helper functions 'use strict'; // quickElement(tagType, parentReference [, textInChildNode, attribute, attributeValue ...]); @@ -119,11 +119,11 @@ function findPosY(obj) { let result = '', i = 0; while (i < format.length) { if (format.charAt(i) === '%') { - result = result + fields[format.charAt(i + 1)]; + result += fields[format.charAt(i + 1)]; ++i; } else { - result = result + format.charAt(i); + result += format.charAt(i); } ++i; } diff --git a/source/static/admin/js/filters.js b/source/static/admin/js/filters.js index ba691ac..f5536eb 100644 --- a/source/static/admin/js/filters.js +++ b/source/static/admin/js/filters.js @@ -11,7 +11,7 @@ } Object.entries(filters).forEach(([key, value]) => { - const detailElement = document.querySelector(`[data-filter-title='${key}']`); + const detailElement = document.querySelector(`[data-filter-title='${CSS.escape(key)}']`); // Check if the filter is present, it could be from other view. if (detailElement) { diff --git a/source/static/admin/js/nav_sidebar.js b/source/static/admin/js/nav_sidebar.js index 261a9d4..7e735db 100644 --- a/source/static/admin/js/nav_sidebar.js +++ b/source/static/admin/js/nav_sidebar.js @@ -2,47 +2,24 @@ { const toggleNavSidebar = document.getElementById('toggle-nav-sidebar'); if (toggleNavSidebar !== null) { - const navLinks = document.querySelectorAll('#nav-sidebar a'); - function disableNavLinkTabbing() { - for (const navLink of navLinks) { - navLink.tabIndex = -1; - } - } - function enableNavLinkTabbing() { - for (const navLink of navLinks) { - navLink.tabIndex = 0; - } - } - function disableNavFilterTabbing() { - document.getElementById('nav-filter').tabIndex = -1; - } - function enableNavFilterTabbing() { - document.getElementById('nav-filter').tabIndex = 0; - } - + const navSidebar = document.getElementById('nav-sidebar'); const main = document.getElementById('main'); let navSidebarIsOpen = localStorage.getItem('django.admin.navSidebarIsOpen'); if (navSidebarIsOpen === null) { navSidebarIsOpen = 'true'; } - if (navSidebarIsOpen === 'false') { - disableNavLinkTabbing(); - disableNavFilterTabbing(); - } main.classList.toggle('shifted', navSidebarIsOpen === 'true'); + navSidebar.setAttribute('aria-expanded', navSidebarIsOpen); toggleNavSidebar.addEventListener('click', function() { if (navSidebarIsOpen === 'true') { navSidebarIsOpen = 'false'; - disableNavLinkTabbing(); - disableNavFilterTabbing(); } else { navSidebarIsOpen = 'true'; - enableNavLinkTabbing(); - enableNavFilterTabbing(); } localStorage.setItem('django.admin.navSidebarIsOpen', navSidebarIsOpen); main.classList.toggle('shifted'); + navSidebar.setAttribute('aria-expanded', navSidebarIsOpen); }); } diff --git a/source/static/admin/js/theme.js b/source/static/admin/js/theme.js new file mode 100644 index 0000000..794cd15 --- /dev/null +++ b/source/static/admin/js/theme.js @@ -0,0 +1,56 @@ +'use strict'; +{ + window.addEventListener('load', function(e) { + + function setTheme(mode) { + if (mode !== "light" && mode !== "dark" && mode !== "auto") { + console.error(`Got invalid theme mode: ${mode}. Resetting to auto.`); + mode = "auto"; + } + document.documentElement.dataset.theme = mode; + localStorage.setItem("theme", mode); + } + + function cycleTheme() { + const currentTheme = localStorage.getItem("theme") || "auto"; + const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; + + if (prefersDark) { + // Auto (dark) -> Light -> Dark + if (currentTheme === "auto") { + setTheme("light"); + } else if (currentTheme === "light") { + setTheme("dark"); + } else { + setTheme("auto"); + } + } else { + // Auto (light) -> Dark -> Light + if (currentTheme === "auto") { + setTheme("dark"); + } else if (currentTheme === "dark") { + setTheme("light"); + } else { + setTheme("auto"); + } + } + } + + function initTheme() { + // set theme defined in localStorage if there is one, or fallback to auto mode + const currentTheme = localStorage.getItem("theme"); + currentTheme ? setTheme(currentTheme) : setTheme("auto"); + } + + function setupTheme() { + // Attach event handlers for toggling themes + const buttons = document.getElementsByClassName("theme-toggle"); + Array.from(buttons).forEach((btn) => { + btn.addEventListener("click", cycleTheme); + }); + initTheme(); + } + + setupTheme(); + }); +} diff --git a/source/static/admin/js/urlify.js b/source/static/admin/js/urlify.js index 61dedb2..9fc0409 100644 --- a/source/static/admin/js/urlify.js +++ b/source/static/admin/js/urlify.js @@ -163,8 +163,7 @@ s = s.replace(/^\s+|\s+$/g, ''); // trim leading/trailing spaces s = s.replace(/[-\s]+/g, '-'); // convert spaces to hyphens s = s.substring(0, num_chars); // trim to first num_chars chars - s = s.replace(/-+$/g, ''); // trim any trailing hyphens - return s; + return s.replace(/-+$/g, ''); // trim any trailing hyphens } window.URLify = URLify; } diff --git a/source/static/admin/js/vendor/jquery/jquery.js b/source/static/admin/js/vendor/jquery/jquery.js index fc6c299..7f35c11 100644 --- a/source/static/admin/js/vendor/jquery/jquery.js +++ b/source/static/admin/js/vendor/jquery/jquery.js @@ -1,5 +1,5 @@ /*! - * jQuery JavaScript Library v3.6.0 + * jQuery JavaScript Library v3.6.4 * https://jquery.com/ * * Includes Sizzle.js @@ -9,7 +9,7 @@ * Released under the MIT license * https://jquery.org/license * - * Date: 2021-03-02T17:08Z + * Date: 2023-03-08T15:28Z */ ( function( global, factory ) { @@ -23,7 +23,7 @@ // (such as Node.js), expose a factory as module.exports. // This accentuates the need for the creation of a real `window`. // e.g. var jQuery = require("jquery")(window); - // See ticket #14549 for more info. + // See ticket trac-14549 for more info. module.exports = global.document ? factory( global, true ) : function( w ) { @@ -151,7 +151,7 @@ function toType( obj ) { var - version = "3.6.0", + version = "3.6.4", // Define a local copy of jQuery jQuery = function( selector, context ) { @@ -522,14 +522,14 @@ function isArrayLike( obj ) { } var Sizzle = /*! - * Sizzle CSS Selector Engine v2.3.6 + * Sizzle CSS Selector Engine v2.3.10 * https://sizzlejs.com/ * * Copyright JS Foundation and other contributors * Released under the MIT license * https://js.foundation/ * - * Date: 2021-02-16 + * Date: 2023-02-14 */ ( function( window ) { var i, @@ -633,7 +633,7 @@ var i, whitespace + "+$", "g" ), rcomma = new RegExp( "^" + whitespace + "*," + whitespace + "*" ), - rcombinators = new RegExp( "^" + whitespace + "*([>+~]|" + whitespace + ")" + whitespace + + rleadingCombinator = new RegExp( "^" + whitespace + "*([>+~]|" + whitespace + ")" + whitespace + "*" ), rdescend = new RegExp( whitespace + "|>" ), @@ -850,7 +850,7 @@ function Sizzle( selector, context, results, seed ) { // as such selectors are not recognized by querySelectorAll. // Thanks to Andrew Dupont for this technique. if ( nodeType === 1 && - ( rdescend.test( selector ) || rcombinators.test( selector ) ) ) { + ( rdescend.test( selector ) || rleadingCombinator.test( selector ) ) ) { // Expand context for sibling selectors newContext = rsibling.test( selector ) && testContext( context.parentNode ) || @@ -1174,6 +1174,24 @@ setDocument = Sizzle.setDocument = function( node ) { !el.querySelectorAll( ":scope fieldset div" ).length; } ); + // Support: Chrome 105 - 110+, Safari 15.4 - 16.3+ + // Make sure the the `:has()` argument is parsed unforgivingly. + // We include `*` in the test to detect buggy implementations that are + // _selectively_ forgiving (specifically when the list includes at least + // one valid selector). + // Note that we treat complete lack of support for `:has()` as if it were + // spec-compliant support, which is fine because use of `:has()` in such + // environments will fail in the qSA path and fall back to jQuery traversal + // anyway. + support.cssHas = assert( function() { + try { + document.querySelector( ":has(*,:jqfake)" ); + return false; + } catch ( e ) { + return true; + } + } ); + /* Attributes ---------------------------------------------------------------------- */ @@ -1440,6 +1458,17 @@ setDocument = Sizzle.setDocument = function( node ) { } ); } + if ( !support.cssHas ) { + + // Support: Chrome 105 - 110+, Safari 15.4 - 16.3+ + // Our regular `try-catch` mechanism fails to detect natively-unsupported + // pseudo-classes inside `:has()` (such as `:has(:contains("Foo"))`) + // in browsers that parse the `:has()` argument as a forgiving selector list. + // https://drafts.csswg.org/selectors/#relational now requires the argument + // to be parsed unforgivingly, but browsers have not yet fully adjusted. + rbuggyQSA.push( ":has" ); + } + rbuggyQSA = rbuggyQSA.length && new RegExp( rbuggyQSA.join( "|" ) ); rbuggyMatches = rbuggyMatches.length && new RegExp( rbuggyMatches.join( "|" ) ); @@ -1452,7 +1481,14 @@ setDocument = Sizzle.setDocument = function( node ) { // As in, an element does not contain itself contains = hasCompare || rnative.test( docElem.contains ) ? function( a, b ) { - var adown = a.nodeType === 9 ? a.documentElement : a, + + // Support: IE <9 only + // IE doesn't have `contains` on `document` so we need to check for + // `documentElement` presence. + // We need to fall back to `a` when `documentElement` is missing + // as `ownerDocument` of elements within `