pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-21 19:11:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add JavaScript functionality for dynamic UI updates and filtering

Browse Source 
- Implemented font color configuration based on numeric values in various sections.
- Added resizing functionality for input fields to accommodate text length.
- Initialized filters on document ready for improved user interaction.
- Created visualization for profile data using fetched dot format.
- Enhanced SQL detail page with click event handling for row navigation.
- Ensured consistent highlighting for code blocks across multiple pages.
This commit is contained in:
pacnpal
2025-08-20 11:33:23 -04:00
parent 37a20f83ba
commit bead0654df
149 changed files with 26860 additions and 5191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
staticfiles/admin/css/base.css
View File

@@ -1121,6 +1121,7 @@ a.deletelink:focus, a.deletelink:hover {
margin: 0;
border-top: 1px solid var(--hairline-color);
width: 100%;
box-sizing: border-box;
}
.paginator a:link, .paginator a:visited {

4
staticfiles/admin/css/dark_mode.css
View File

@@ -84,8 +84,8 @@ html[data-theme="dark"] {
.theme-toggle svg {
vertical-align: middle;
height: 1rem;
width: 1rem;
height: 1.5rem;
width: 1.5rem;
display: none;
}

14
staticfiles/admin/css/forms.css
View File

@@ -449,17 +449,6 @@ body.popup .submit-row {
_width: 700px;
}
.inline-group ul.tools {
padding: 0;
margin: 0;
list-style: none;
}
.inline-group ul.tools li {
display: inline;
padding: 0 5px;
}
.inline-group div.add-row,
.inline-group .tabular tr.add-row td {
color: var(--body-quiet-color);
@@ -473,11 +462,8 @@ body.popup .submit-row {
border-bottom: 1px solid var(--hairline-color);
}
.inline-group ul.tools a.add,
.inline-group div.add-row a,
.inline-group .tabular tr.add-row td a {
background: url(../img/icon-addlink.svg) 0 1px no-repeat;
padding-left: 16px;
font-size: 0.75rem;
}

83
staticfiles/admin/css/responsive.css
View File

@@ -254,10 +254,6 @@ input[type="submit"], button {
align-items: center;
}
.selector .selector-filter label {
margin: 0 8px 0 0;
}
.selector .selector-filter input {
width: 100%;
min-height: 0;
@@ -277,29 +273,7 @@ input[type="submit"], button {
margin-bottom: 5px;
}
.selector ul.selector-chooser {
width: 26px;
height: 52px;
padding: 2px 0;
border-radius: 20px;
transform: translateY(-10px);
}
.selector-add, .selector-remove {
width: 20px;
height: 20px;
background-size: 20px auto;
}
.selector-add {
background-position: 0 -120px;
}
.selector-remove {
background-position: 0 -80px;
}
a.selector-chooseall, a.selector-clearall {
.selector-chooseall, .selector-clearall {
align-self: center;
}
@@ -321,8 +295,6 @@ input[type="submit"], button {
}
.stacked ul.selector-chooser {
width: 52px;
height: 26px;
padding: 0 2px;
transform: none;
}
@@ -331,42 +303,6 @@ input[type="submit"], button {
padding: 3px;
}
.stacked .selector-add, .stacked .selector-remove {
background-size: 20px auto;
}
.stacked .selector-add {
background-position: 0 -40px;
}
.stacked .active.selector-add {
background-position: 0 -40px;
}
.active.selector-add:focus, .active.selector-add:hover {
background-position: 0 -140px;
}
.stacked .active.selector-add:focus, .stacked .active.selector-add:hover {
background-position: 0 -60px;
}
.stacked .selector-remove {
background-position: 0 0;
}
.stacked .active.selector-remove {
background-position: 0 0;
}
.active.selector-remove:focus, .active.selector-remove:hover {
background-position: 0 -100px;
}
.stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover {
background-position: 0 -20px;
}
.help-tooltip, .selector .help-icon {
display: none;
}
@@ -649,6 +585,7 @@ input[type="submit"], button {
.related-widget-wrapper .selector {
order: 1;
flex: 1 0 auto;
}
.related-widget-wrapper > a {
@@ -679,9 +616,9 @@ input[type="submit"], button {
}
.selector ul.selector-chooser {
display: block;
width: 52px;
height: 26px;
display: flex;
width: 60px;
height: 30px;
padding: 0 2px;
transform: none;
}
@@ -694,16 +631,16 @@ input[type="submit"], button {
background-position: 0 0;
}
.active.selector-remove:focus, .active.selector-remove:hover {
background-position: 0 -20px;
:enabled.selector-remove:focus, :enabled.selector-remove:hover {
background-position: 0 -24px;
}
.selector-add {
background-position: 0 -40px;
background-position: 0 -48px;
}
.active.selector-add:focus, .active.selector-add:hover {
background-position: 0 -60px;
:enabled.selector-add:focus, :enabled.selector-add:hover {
background-position: 0 -72px;
}
/* Inlines */

32
staticfiles/admin/css/responsive_rtl.css
View File

@@ -28,18 +28,12 @@
margin-left: 0;
}
[dir="rtl"] .inline-group ul.tools a.add,
[dir="rtl"] .inline-group div.add-row a,
[dir="rtl"] .inline-group .tabular tr.add-row td a {
padding: 8px 26px 8px 10px;
background-position: calc(100% - 8px) 9px;
}
[dir="rtl"] .selector .selector-filter label {
margin-right: 0;
margin-left: 8px;
}
[dir="rtl"] .object-tools li {
float: right;
}
@@ -53,22 +47,6 @@
padding-left: 0;
padding-right: 16px;
}
[dir="rtl"] .selector-add {
background-position: 0 -80px;
}
[dir="rtl"] .selector-remove {
background-position: 0 -120px;
}
[dir="rtl"] .active.selector-add:focus, .active.selector-add:hover {
background-position: 0 -100px;
}
[dir="rtl"] .active.selector-remove:focus, .active.selector-remove:hover {
background-position: 0 -140px;
}
}
/* MOBILE */
@@ -97,15 +75,15 @@
background-position: 0 0;
}
[dir="rtl"] .active.selector-remove:focus, .active.selector-remove:hover {
background-position: 0 -20px;
[dir="rtl"] :enabled.selector-remove:focus, :enabled.selector-remove:hover {
background-position: 0 -24px;
}
[dir="rtl"] .selector-add {
background-position: 0 -40px;
background-position: 0 -48px;
}
[dir="rtl"] .active.selector-add:focus, .active.selector-add:hover {
background-position: 0 -60px;
[dir="rtl"] :enabled.selector-add:focus, :enabled.selector-add:hover {
background-position: 0 -72px;
}
}

22
staticfiles/admin/css/rtl.css
View File

@@ -220,34 +220,36 @@ fieldset .fieldBox {
}
.selector-add {
background: url(../img/selector-icons.svg) 0 -64px no-repeat;
background: url(../img/selector-icons.svg) 0 -96px no-repeat;
background-size: 24px auto;
}
.active.selector-add:focus, .active.selector-add:hover {
background-position: 0 -80px;
:enabled.selector-add:focus, :enabled.selector-add:hover {
background-position: 0 -120px;
}
.selector-remove {
background: url(../img/selector-icons.svg) 0 -96px no-repeat;
background: url(../img/selector-icons.svg) 0 -144px no-repeat;
background-size: 24px auto;
}
.active.selector-remove:focus, .active.selector-remove:hover {
background-position: 0 -112px;
:enabled.selector-remove:focus, :enabled.selector-remove:hover {
background-position: 0 -168px;
}
a.selector-chooseall {
.selector-chooseall {
background: url(../img/selector-icons.svg) right -128px no-repeat;
}
a.active.selector-chooseall:focus, a.active.selector-chooseall:hover {
:enabled.selector-chooseall:focus, :enabled.selector-chooseall:hover {
background-position: 100% -144px;
}
a.selector-clearall {
.selector-clearall {
background: url(../img/selector-icons.svg) 0 -160px no-repeat;
}
a.active.selector-clearall:focus, a.active.selector-clearall:hover {
:enabled.selector-clearall:focus, :enabled.selector-clearall:hover {
background-position: 0 -176px;
}

112
staticfiles/admin/css/widgets.css
View File

@@ -2,7 +2,7 @@
.selector {
display: flex;
flex-grow: 1;
flex: 1;
gap: 0 10px;
}
@@ -14,17 +14,20 @@
}
.selector-available, .selector-chosen {
text-align: center;
display: flex;
flex-direction: column;
flex: 1 1;
}
.selector-available h2, .selector-chosen h2 {
.selector-available-title, .selector-chosen-title {
border: 1px solid var(--border-color);
border-radius: 4px 4px 0 0;
}
.selector .helptext {
font-size: 0.6875rem;
}
.selector-chosen .list-footer-display {
border: 1px solid var(--border-color);
border-top: none;
@@ -40,14 +43,25 @@
color: var(--breadcrumbs-fg);
}
.selector-chosen h2 {
.selector-chosen-title {
background: var(--secondary);
color: var(--header-link-color);
padding: 8px;
}
.selector .selector-available h2 {
.aligned .selector-chosen-title label {
color: var(--header-link-color);
width: 100%;
}
.selector-available-title {
background: var(--darkened-bg);
color: var(--body-quiet-color);
padding: 8px;
}
.aligned .selector-available-title label {
width: 100%;
}
.selector .selector-filter {
@@ -59,6 +73,7 @@
margin: 0;
text-align: left;
display: flex;
gap: 8px;
}
.selector .selector-filter label,
@@ -77,14 +92,9 @@
flex-grow: 1;
}
.selector .selector-available input,
.selector .selector-chosen input {
margin-left: 8px;
}
.selector ul.selector-chooser {
align-self: center;
width: 22px;
width: 30px;
background-color: var(--selected-bg);
border-radius: 10px;
margin: 0;
@@ -114,40 +124,43 @@
}
.selector-add, .selector-remove {
width: 16px;
height: 16px;
width: 24px;
height: 24px;
display: block;
text-indent: -3000px;
overflow: hidden;
cursor: default;
opacity: 0.55;
border: none;
}
.active.selector-add, .active.selector-remove {
:enabled.selector-add, :enabled.selector-remove {
opacity: 1;
}
.active.selector-add:hover, .active.selector-remove:hover {
:enabled.selector-add:hover, :enabled.selector-remove:hover {
cursor: pointer;
}
.selector-add {
background: url(../img/selector-icons.svg) 0 -96px no-repeat;
background: url(../img/selector-icons.svg) 0 -144px no-repeat;
background-size: 24px auto;
}
.active.selector-add:focus, .active.selector-add:hover {
background-position: 0 -112px;
:enabled.selector-add:focus, :enabled.selector-add:hover {
background-position: 0 -168px;
}
.selector-remove {
background: url(../img/selector-icons.svg) 0 -64px no-repeat;
background: url(../img/selector-icons.svg) 0 -96px no-repeat;
background-size: 24px auto;
}
.active.selector-remove:focus, .active.selector-remove:hover {
background-position: 0 -80px;
:enabled.selector-remove:focus, :enabled.selector-remove:hover {
background-position: 0 -120px;
}
a.selector-chooseall, a.selector-clearall {
.selector-chooseall, .selector-clearall {
display: inline-block;
height: 16px;
text-align: left;
@@ -158,38 +171,39 @@ a.selector-chooseall, a.selector-clearall {
color: var(--body-quiet-color);
text-decoration: none;
opacity: 0.55;
border: none;
}
a.active.selector-chooseall:focus, a.active.selector-clearall:focus,
a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
:enabled.selector-chooseall:focus, :enabled.selector-clearall:focus,
:enabled.selector-chooseall:hover, :enabled.selector-clearall:hover {
color: var(--link-fg);
}
a.active.selector-chooseall, a.active.selector-clearall {
:enabled.selector-chooseall, :enabled.selector-clearall {
opacity: 1;
}
a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
:enabled.selector-chooseall:hover, :enabled.selector-clearall:hover {
cursor: pointer;
}
a.selector-chooseall {
.selector-chooseall {
padding: 0 18px 0 0;
background: url(../img/selector-icons.svg) right -160px no-repeat;
cursor: default;
}
a.active.selector-chooseall:focus, a.active.selector-chooseall:hover {
:enabled.selector-chooseall:focus, :enabled.selector-chooseall:hover {
background-position: 100% -176px;
}
a.selector-clearall {
.selector-clearall {
padding: 0 0 0 18px;
background: url(../img/selector-icons.svg) 0 -128px no-repeat;
cursor: default;
}
a.active.selector-clearall:focus, a.active.selector-clearall:hover {
:enabled.selector-clearall:focus, :enabled.selector-clearall:hover {
background-position: 0 -144px;
}
@@ -219,8 +233,9 @@ a.active.selector-clearall:focus, a.active.selector-clearall:hover {
}
.stacked ul.selector-chooser {
height: 22px;
width: 50px;
display: flex;
height: 30px;
width: 64px;
margin: 0 0 10px 40%;
background-color: #eee;
border-radius: 10px;
@@ -237,32 +252,34 @@ a.active.selector-clearall:focus, a.active.selector-clearall:hover {
}
.stacked .selector-add {
background: url(../img/selector-icons.svg) 0 -32px no-repeat;
background: url(../img/selector-icons.svg) 0 -48px no-repeat;
background-size: 24px auto;
cursor: default;
}
.stacked .active.selector-add {
background-position: 0 -32px;
.stacked :enabled.selector-add {
background-position: 0 -48px;
cursor: pointer;
}
.stacked .active.selector-add:focus, .stacked .active.selector-add:hover {
background-position: 0 -48px;
.stacked :enabled.selector-add:focus, .stacked :enabled.selector-add:hover {
background-position: 0 -72px;
cursor: pointer;
}
.stacked .selector-remove {
background: url(../img/selector-icons.svg) 0 0 no-repeat;
background-size: 24px auto;
cursor: default;
}
.stacked .active.selector-remove {
.stacked :enabled.selector-remove {
background-position: 0 0px;
cursor: pointer;
}
.stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover {
background-position: 0 -16px;
.stacked :enabled.selector-remove:focus, .stacked :enabled.selector-remove:hover {
background-position: 0 -24px;
cursor: pointer;
}
@@ -318,28 +335,30 @@ table p.datetime {
position: relative;
display: inline-block;
vertical-align: middle;
height: 16px;
width: 16px;
height: 24px;
width: 24px;
overflow: hidden;
}
.datetimeshortcuts .clock-icon {
background: url(../img/icon-clock.svg) 0 0 no-repeat;
background-size: 24px auto;
}
.datetimeshortcuts a:focus .clock-icon,
.datetimeshortcuts a:hover .clock-icon {
background-position: 0 -16px;
background-position: 0 -24px;
}
.datetimeshortcuts .date-icon {
background: url(../img/icon-calendar.svg) 0 0 no-repeat;
background-size: 24px auto;
top: -1px;
}
.datetimeshortcuts a:focus .date-icon,
.datetimeshortcuts a:hover .date-icon {
background-position: 0 -16px;
background-position: 0 -24px;
}
.timezonewarning {
@@ -558,9 +577,10 @@ ul.timelist, .timelist li {
float: right;
text-indent: -9999px;
background: url(../img/inline-delete.svg) 0 0 no-repeat;
width: 16px;
height: 16px;
width: 1.5rem;
height: 1.5rem;
border: 0px none;
margin-bottom: .25rem;
}
.inline-deletelink:focus, .inline-deletelink:hover {