- Custom CSS variables were declared with Bootstrap 4 since it did not use CSS
variables itself. In Boostrap 5, CSS variables are available. Use them to
eliminate custom color definitions. This means that when Bootstrap colors are
changed, custom colored elements will not look different.
- Use color utilities from Bootstratp instead of .processing, .warning, and
.normal.
- Collect more repeated colors into variables. This will make themeing easier.
- Using Bootstrap variables also makes implement dark mode easier.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- .nav-link classes are meant to be used in navbars and tab navigations. Don't
use them incorrectly in .card to avoid potential breakages and readability.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- This navigation item in the main header is only when Javascript is blocked.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Notifications dropdown is shown briefly before page load. After the page load,
it disappears. This is quite annoying and happens due to the following reason.
- We add .no-js class to <html> tag and later remove using Javascript.
- We load most of our Javascirpt using 'defer' attribute leading display of
layout of content before Javascript is loaded.
- We also wait for DOMContentLoaded event to fire before removing the .no-js
class on <html> element.
- Solve the problem by adding special class to notifications dropdown to ensure
that it is not shown even when Javascript is not available.
- There might be a better fix to the problem.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- In mobile view, when the burger menu is clicked on, the menu is expanded and
options are shown. In those options, notifications icon is shown while the menu
is expanding but not when it is fully expanded. To fix this, hide it while
expanding too.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- In Bootstrap 5, dropdown button and dropdown menu not being siblings does not
work like it did in Bootstrap 4.
- Use collapse component instead of dropdown. Collapse component does not have
the same limitations. Apply some of the styling from dropdown-menu to restore
previous appearance.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Workaround Debian bug #1087969. popper.js 2.x is needed for Bootstrap 5,
however, the current version on in Debian is 1.x. Implement a Popper 2.x method
that Bootstrap 5 is expecting and translate the call into Popper 1.x.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Drop menu_link and menu_link_active classes and use the bootstrap's default
classes.
- Override values for bootstrap variables instead of overriding the styles
themselves.
Tests:
- Test that navbar shows same colors as before in mobile view and desktop view.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Since django-bootstrap-form still generates styling for Bootstrap 3, we need
to adapt styling for Bootstrap 5 for it.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- In Bootstrap 5, .table-responsive does not seem to set 'width: 100%;'. This
leads to tables getting laid out between the disk name and disk free progress
bar since they are both floating elements. Fix this by using flex layout
instead.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- The new styling has much higher contrast compared to older styling.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Tags have important text that is too small and could cause problems with users
with limited vision. Make them regular buttons. Make the buttons shorter and
rounder to resemble previous styling.
- Drop underlining of text in the process.
- In code, don't call them 'badges' anymore.
Tests:
- Run functional tests for tags.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Bootstrap 5 underlines all links by default. Allow this change without
reverting as this is likely done to improve accessibility.
- In Networks diagram and firewall page, provide exception and remove the
underlining.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Bootstrap 5, unlike Bootstrap 4 overrides button styling when hovered on and
disabled. Provide the values for these overrides using CSS variables.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Styling for form-group has been removed in Bootstrap 5.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Wrap each app's results in a <section>. Style section to maintain gap with
previous sections.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- A 'row' class is more suitable when we want to use the Bootstrap's 'Grid'
system. Bootstrap 5 sets 'width: 100%' on all children of a .row. So, use a
simpler 'display: flex' instead.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- So much spacing is not required as we have remove the background and borders.
- This is similar in approach to Bootstrap 4/5 which does not provide top
margins for heading elements and instead provides them only when they are not
the first element.
- Increase the margin between the end of a section and beginning of the next
heading.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- <div> is not allowed inside a <p> tag. Browsers will close and reopen <p> if
one tries to place a <div> inside a <p>. Avoid this.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Also place the body content in <p> for improved semantics and suggested by
Bootstrap.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Without the change, the exception information formatted in <pre> overflows the
alert's boundaries and make a long line. With the change, it now sows a
horizontal scrollbar instead.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Same color as in Bootstrap 4 but removed in Bootstrap 5.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- This allows for system page to show 4 items in a row instead of 3.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Ensure that .sr-only is replaced with newer classes.
- Ensure that icons are present for all alerts.
- Use flex-box for display of icons on the left center of the alert.
- .close has been renamed to .btn-close.
- × is no longer required for close buttons.
Tests:
- Visually verify all the changes by triggering them with code changes.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- We no longer print any passwords in the logs. Remove the wording in the notice
that indicates that we do.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- When apps are available only on 'internal' zone, a warning message is shown on
the app's page. This is a routine warning that requires no action from the user.
It is quite annoying to see it on a page like Samba where it is even implied.
Hence reduce the severity of the alert to 'info' from 'warning'.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- The form does not have DNS-over-TLS field and trying to set initial value for
it fails.
Tests:
- Load the PPPoE creation form. Without the patch, it fails with an exception.
With the patch it succeeds.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Needed for many inline SVG images included by Bootstrap 5 using data: URLs.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Keep the badge-{severity} classes as they are meant for convenience of mapping
severity to style.
- Match bootstrap colors to maintain consistency and contrast.
Tests:
- Visually confirm that all the changes effective.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Check for availability of access_point.strength before using
access_point.strength.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Closes: #2322.
On Debian stable, mark deluge app as not available because deluge-web is not
working in this distribution.
- Default deluged configuration directory location changed. I didn't do
migration from the old location because deluge app hasn't been working on
Debian stable.
- Make deluge-web systemd service start after deluged service to prevent
Connection Manager popup in deluge-web after system reboot.
Tests performed:
- On Debian stable:
- Deluge app is not installable from the app page.
- All functional tests are skipped.
- On Debian testing:
- All tests pass.
- After reboot, deluge-web service started after deluge service and there
is no Connection Manager popup in deluge web UI.
- Changing torrent download directory works.
Signed-off-by: Veiko Aasa <veiko17@disroot.org>
[sunil: Add type signature to an overridden method]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
Fixes an issue where after clicking an app install button (that disables the
button), the app uninstall test is skipped because "App not available in
distribution".
Wait until the app install submit button is not present on the page after
clicking the install button.
Test performed:
- Increased sleep time to 10s in SetupView. The sharing app uninstall
functional test pass.
Signed-off-by: Veiko Aasa <veiko17@disroot.org>
[sunil: Use wait_for_page_update() instead of eventually]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
Fixes an issue where app tests teardown fails if app installation fails
or app is not available for distribution.
Tests:
- On Debian Bookworm, all miniflux functional tests are skipped and
there are no errors.
- After running gitweb metadata functional test, the app is disabled.
Signed-off-by: Veiko Aasa <veiko17@disroot.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
- Don't include the file if it does not exist to avoid a 404 error every time a
page it loaded.
- Load the file from a know path under the already known custom static path.
Tests:
- When the user.css file is created, it added to the web page. It is prioritized
over the main.css with CSS cascading rules.
- When the user.css file does not exist on the filesystem, it is not added to
the web page.
- When custom static directory (/var/www/plint) does not exist on the
filesystem, a debug log message is printed that this directory is not served.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Overall, this is something we can try out.
- This looks better in some cases
- Default large list of disabled apps
- Home page with very few icons
- Help index page /plinth/help
- Mobile views
- This looks somewhat worse in some cases
- Last row of a large list of apps, esp. when the number apps left is even and
the number of apps in the previous row is not (similarly with odd number of
apps).
- Mismatch between enabled/disabled app section.
Thanks to @Ged296123 and @fefekrzr for suggesting the change.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
