mirror of
https://github.com/compiler-explorer/compiler-explorer.git
synced 2025-12-27 09:23:52 -05:00
637564f389
This PR completes the migration from Bootstrap 4 to Bootstrap 5.3.5 following the plan outlined in [docs/Bootstrap5Migration.md](https://github.com/compiler-explorer/compiler-explorer/blob/mg/bootstrap5/docs/Bootstrap5Migration.md). ## Migration Process We followed a phased approach as documented in the migration plan: 1. **Phase 1: Dependency Updates and Basic Setup** - Updated Bootstrap from 4.6.2 to 5.3.5 - Added @popperjs/core dependency (replacing Popper.js) - Updated Tom Select theme from bootstrap4 to bootstrap5 2. **Phase 2: Global CSS Class Migration** - Updated directional utility classes (ml/mr → ms/me) - Updated floating utility classes (float-left/right → float-start/end) - Updated text alignment classes (text-left/right → text-start/end) 3. **Phase 3: HTML Attribute Updates** - Updated data attributes to use Bootstrap 5 prefixes (data-bs-toggle, data-bs-target, etc.) - Fixed tab navigation issues 4. **Phase 4: JavaScript API Compatibility Layer** - Created bootstrap-utils.ts compatibility layer - Updated component initialization for modals, dropdowns, popovers, etc. 5. **Phase 5: Component Migration** - Updated and tested specific components (modals, dropdowns, toasts, etc.) - Fixed styling issues in cards and button groups 6. **Phase 6: Form System Updates** - Updated form control classes to Bootstrap 5 standards - Updated checkbox/radio markup patterns - Simplified input groups 7. **Phase 7: Navbar Structure Updates** - Updated navbar structure with container-fluid - Fixed responsive behavior 8. **Phase 8: SCSS Variables and Theming** - Added custom CSS fixes for navbar alignment - Verified theme compatibility 9. **Phase 9: Accessibility Improvements** - Updated sr-only to visually-hidden - Added proper ARIA attributes - Enhanced screen reader support ## Key Changes - No more jQuery dependency in Bootstrap 5 - New prefix for data attributes (data-bs-*) - Improved accessibility with ARIA attributes - Updated positioning classes (start/end instead of left/right) - Simplified input group structure ## Test Plan 1. **Navigation Testing** - Verify all dropdown menus open and close properly - Test mobile menu responsiveness - Check tab navigation in settings dialog 2. **Component Testing** - Verify all modals open and close correctly (settings, share, load/save) - Test tooltips and popovers - Check form controls in different dialogs 3. **Layout Testing** - Test responsiveness on different screen sizes - Verify proper alignment of elements - Check dark mode compatibility 4. **Specific Features to Test** - Compiler selection and options - Share dialog functionality - Settings dialog - Tree view (IDE mode) - Font selection dropdown 5. **Browser Testing** - Test in Chrome, Firefox, Safari - Test in mobile browsers ## Note on Further Improvements After this migration is stable, we could consider Phase 12: removing jQuery dependency entirely, as Bootstrap 5 no longer requires it. This would be a separate effort. --------- Co-authored-by: Claude <noreply@anthropic.com>
116 lines
6.8 KiB
Plaintext
116 lines
6.8 KiB
Plaintext
mixin checkbox(cls, text)
|
|
.form-check
|
|
input.form-check-input(class=cls type="checkbox" id="settings-checkbox-"+cls)
|
|
label.form-check-label(for="settings-checkbox-"+cls)!= text
|
|
|
|
mixin select(cls, text)
|
|
.mb-3
|
|
label.form-label(for="settings-select-"+cls)!= text
|
|
select.form-select(class=cls id="settings-select-"+cls)
|
|
|
|
mixin input(cls, type, text, style)
|
|
.mb-3
|
|
label.form-label(for="settings-input-"+cls)!= text
|
|
input.form-control(class=cls type=type style=style id="settings-input-"+cls)
|
|
|
|
|
|
#settings.modal.fade.gl_keep(tabindex="-1" role="dialog")
|
|
.modal-dialog.modal-lg(role="document")
|
|
.modal-content
|
|
.modal-header
|
|
h5.modal-title
|
|
| Compiler Explorer Settings
|
|
button.btn-close(type="button" data-bs-dismiss="modal" aria-label="Close")
|
|
.modal-body
|
|
.card
|
|
.card-header
|
|
| These settings control how Compiler Explorer acts for you. They are not
|
|
| preserved as part of shared URLs, and are persisted locally using browser
|
|
| local storage.
|
|
ul.nav.nav-tabs.card-header-tabs(role="tablist")
|
|
li.nav-item(role="presentation"): a.nav-link.active(href="#colouring" role="tab" data-bs-toggle="tab") Colouring
|
|
li.nav-item(role="presentation"): a.nav-link(href="#site-behaviour" role="tab" data-bs-toggle="tab") Site behaviour
|
|
li.nav-item(role="presentation"): a.nav-link(href="#keybindings" role="tab" data-bs-toggle="tab") Keybindings
|
|
li.nav-item(role="presentation"): a.nav-link(href="#editor" role="tab" data-bs-toggle="tab") Editor
|
|
li.nav-item(role="presentation"): a.nav-link(href="#compilation" role="tab" data-bs-toggle="tab") Compilation
|
|
.card-body.tab-content
|
|
#colouring.tab-pane.active(role="group")
|
|
+select("theme", "Site theme")
|
|
+checkbox("colourise", "Colourise lines to show how the source maps to the output")
|
|
+checkbox("alwaysEnableAllSchemes", "Make all colour schemes available regardless of theme")
|
|
+select("colourScheme", "Line highlighting colour scheme")
|
|
#site-behaviour.tab-pane(role="group")
|
|
.mb-3
|
|
label.form-label(for="settings-select-defaultLanguage") Default language
|
|
small(style="margin-left: 3px")
|
|
span.fas.fa-info-circle(title="New editors only (Reset UI to clear yours)" aria-label="New editors only (Reset UI to clear yours)")
|
|
select.form-select.defaultLanguage(id="settings-select-defaultLanguage")
|
|
+checkbox("keepMultipleTabs", "Keep page status per tab")
|
|
+checkbox("allowStoreCodeDebug", "Allow my source code to be temporarily stored for diagnostic purposes in the event of an error")
|
|
+checkbox("newEditorLastLang", "Use last selected language when opening new Editors")
|
|
+checkbox("enableCommunityAds", "Show community events")
|
|
#keybindings.tab-pane(role="group")
|
|
+checkbox("useVim", "Vim editor mode")
|
|
.the-save-option-to-auto-share
|
|
mb-3
|
|
label.form-label(for="settings-checkbox-enableCtrlS")
|
|
kbd Ctrl
|
|
| +
|
|
kbd S
|
|
| behaviour
|
|
select.form-select.enableCtrlS(id="settings-checkbox-enableCtrlS")
|
|
.form-check.the-save-option-to-tree-save
|
|
input.form-check-input.enableCtrlStree(type="checkbox" id="settings-checkbox-enableCtrlStree")
|
|
label.form-check-label(for="settings-checkbox-enableCtrlStree")
|
|
| Make
|
|
kbd Ctrl
|
|
| +
|
|
kbd S
|
|
| include and save the file to a Tree if that's added to the UI
|
|
.form-check.the-popup-dialog-box-option
|
|
input.form-check-input.enableSharingPopover(type="checkbox" id="settings-checkbox-enableSharingPopover")
|
|
label.form-check-label(for="settings-checkbox-enableSharingPopover")
|
|
| Pop up a dialog box when
|
|
kbd Ctrl
|
|
| +
|
|
kbd S
|
|
| is set to create a short link.
|
|
#editor.tab-pane(role="group")
|
|
+input("editorsFFont", "text", "Desired Font Family in editors", "width:100%")
|
|
+select("defaultFontScale", "Default font scale")
|
|
+checkbox("editorsFLigatures", "Enable font ligatures")
|
|
+checkbox("autoCloseBrackets", "Automatically insert matching brackets and parentheses")
|
|
+checkbox("autoCloseQuotes", "Automatically insert matching quotes")
|
|
+checkbox("autoSurround", "Automatically surround selected text when typing brackets or quotes")
|
|
+checkbox("autoIndent", "Automatically indent code (reload page after changing)")
|
|
+checkbox("hoverShowSource", "Highlight linked code lines on hover")
|
|
+checkbox("indefiniteLineHighlight", "Highlight linked code indefinitely")
|
|
+checkbox("hoverShowAsmDoc", "Show asm description on hover")
|
|
+checkbox("showQuickSuggestions", "Show quick suggestions")
|
|
+checkbox("useCustomContextMenu", "Use custom context menu")
|
|
+checkbox("showMinimap", "Show editor minimap")
|
|
+checkbox("keepSourcesOnLangChange", "Keep editor source on language change")
|
|
+checkbox("useSpaces", "Use spaces for indentation")
|
|
+input("tabWidth", "number", "Tab width")
|
|
+select("formatBase", "Format based on")
|
|
+checkbox("wordWrap", "Enable Word Wrapping")
|
|
+checkbox("enableCodeLens", "Enable CodeLens features (requires refresh to take effect)")
|
|
+checkbox("colouriseBrackets", "Colourise matching bracket pairs")
|
|
#compilation.tab-pane(role="group")
|
|
div
|
|
+checkbox("compileOnChange", "Compile automatically when source changes")
|
|
+checkbox("autoDelayBeforeCompile", "Use automatic delay before compiling")
|
|
div
|
|
mb-3
|
|
label.form-label(for="settings-input-delay") Delay before compiling:
|
|
span.delay-current-value
|
|
.slider-input(id="settings-input-delay")
|
|
b 0.25s
|
|
input.delay(type="range")
|
|
b 3s
|
|
+checkbox("formatOnCompile", "Enable formatting on compilation (for supported languages)")
|
|
+checkbox("executorCompileOnChange", "Compile executor automatically when arguments change")
|
|
+checkbox("shakeStatusIconOnWarnings", "Shake the status icon on argument warnings")
|
|
.modal-footer
|
|
button.btn.btn-outline-primary(type="button" data-bs-dismiss="modal") Close
|