- Latest version of libjs-bootstrap5 depends on
node-popper2. However, version in Debian bookworm still continue to have
incorrect dependency. So, add explicit dependency on node-popper2 until we stop
supporting Bookworm.
Tests:
- In stable and testing VMs, install node-popper2 and notices that the following
work as expected:
- User menu dropdown in desktop and mobile layouts.
- Help menu dropdown in desktop and mobile layouts.
- Notification dropdown.
- App extra actions dropdown.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Closes: #2488.
This is due to outdated django-bootstrap-form package that does not set
.form-select class on dropdowns as needed by Bootstrap 5.
Tests:
- On stable and testing VMs, dropdowns in the 'Add backup location' page show
arrows.
- On a mobile layout, the overflowing text does not overlap onto the dropdown
arrow.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Due to their fixed widths they were causing the drop down navigation bar to
placed incorrectly in mobile view.
Tests:
- In mobile view in home, apps, system, and help pages the navbar dropdown
button is placed correctly.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Most notable of the problems is the missing hover color on cards.
Tests:
- Cards have a gray hover color.
- Forms with errors have input boxes with red borders and help text with red
color.
- Select all button in created backup has a border.
- UI is consistent across stable and testing for tested cases.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Currently, there is a bug with section header with Bootstrap 5 migration in
stable. It causes the section headers not to have underline in Debian stable but
only in Debian testing. This is due to the variable --bs-secondar-border-subtle
being defined only in Bootstrap 5.3 (testing) but not in Bootstrap 5.2 (stable).
- The removal of the border is actually reducing visual noise. So, commit to it
by removing the border even on testing. To Increase contrast to the section
headers, increase their font size (but reduce font weight).
Tests:
- In testing and stable VMs, the style is same and as expected.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- This extra margin was accidentally introduced when migrating to Bootstrap 5
and a generic rule was introduced to add spacing before each section that is not
the first one.
Tests:
- In app pages, icon and title are at the same level.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Fixes#2460
Signed-off-by: Joseph Nuthalapati <njoseph@riseup.net>
[sunil: Update the style to provide spacing after tags lines]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
- Instead of showing traceback details only for action exceptions, show them for
normal exceptions also.
- Also adjust the gap between the error message and the preformatted text to
make it appear better.
Tests:
- Alter code to raise an exception with the utility. See that details are as
expected.
- Raise an exception in a privileged action, ensure that the details shown as
before.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Don't show them on section pages: home, apps, system and help pages.
- Tweak the appearance so that home icon is bigger, spacing between crumbs is
larger and to use '>' as separator.
- Change the name of the help menu item to show the value in breadcrumbs.
- Change the URLs for anchors in the help page so that they don't appear as part
of the breadcrumbs.
Tests:
- Section pages: home, apps, system and help pages don't have breadcrumbs.
- Visit various pages. Breadcrumbs are shown and all the links in the
breadcrumbs work as expected.
- Mobile view looks good.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- During the placement computation for the drop down menu, the height of the
dropdown-menu is very high and that leads to it getting placed at the top of the
page instead of the below the search element.
- To avoid the problem, cap the height of the dropdown. Somehow, the original
calculation for the height using CSS calc() does not seem to working as
expected.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- 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>
- 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>
- 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, 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>
- 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>
- 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>
- 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>
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>
- On a page without tags, tags.js still loads and initializes. When a tag input
search bar does not exist on the page, this leads to a harmless exception
getting printed on the browser console.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- Drop the box shadow around a card item. Applies to home, apps, system, and
help pages.
- Replace the box shadow on hover with gray background. This gives the card a
much flatter look.
- Drop the top and bottom padding for app title as this is no longer necessary
as the white space around the icon/text is not overwhelming.
- Add top padding for app titles to make them level with icon tops.
- Drop the margin around the cards as it is not needed anymore. This completely
removes non-clickable area between the cards (which is unnecessary).
- Increase the padding to compensate for the reduction in the total gap
between the cards.
- In system page, increase in top margin for the section title is needed to
compensate for the loss of bottom margin for cards.
- In system page, increase in the total width of the card is necessary to make
the total row size the size of the container.
Tests:
- In apps and system pages, gap between the section title and cards in the
previous row is sufficient.
- In system page, 4 cards fit exactly in each row given the screen is large
enough.
- In apps page, app titles margins appear pleasant.
- In system page, the app titles align with icon tops.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- When the box shadows are dropped, the cards overlay on those backgrounds is
not pleasant.
Tests:
- MediaWiki functional tests pass.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Make a separate image for 'FreedomBox Powered'.
- Link to the now publicly available about page.
Tests:
- Clicking on the new 'Powered' image leads to about page which is available to
logged in and logged out users.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Fixes: #2464.
- This page will act as replacement for the footer links in the home page.
- Remove link to FreedomBox Foundation and add link to Weblate project. We
already have a donate link to the foundation website.
Tests:
- About page is shown as expected. Old 'Learn more' button is no more. So is the
last paragraph.
- Styling is as expected. All the section have equal width.
- All links work.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- The container border is, strictly speaking, no longer required as the background and
content container don't have different styles.
- This makes the mobile and desktop interfaces a lot more similar.
- Don't change any margins and padding for the content container.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Update the mediawiki functional tests which were using this image.
- Slightly increase the darkness of the shadow around the cards to compensate
for the loss of the contrast with the noise background.
Tests:
- Re-run mediawiki functional tests.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Fixes: #2418.
- This resolves a issue that icons being misaligned when the name of the app
flows into multiple lines. The increase in size of the card is not very
bothering as long as icons are not still aligning. If the noise background is
removed (to be proposed later), the increased size of the icon is even less
bothering.
- The other options would have been to reflect the increased size of the tile to
neighboring apps in that row (does not seem possible with CSS) or ellipsize the
title when it overflows.
- Redo all the spacing in spacing inside the card to better match the new
layout. The height of the card reduces slightly due this change, which looks
better and closer to other icons grids in other UIs.
Tests:
- In index, apps, and help:index pages, the title has change location. Spacings
are as expected and appealing. System page is unaffected.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Making most of text that is read in a page bold is useless. Emphasis should
instead be used for some text that should stand out of the rest of the text.
- The need to make the text bold goes away if the text color is not such a
lighter shade of gray. Reset this to the regular text color.
Tests:
- Observe changes in home, apps, system, and help index pages.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
Fixes: #2179.
Tests:
- Set language to Magyar (hu). Test that items in the system page are large enough to
accommodate most names/descriptions.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Increase the width of the containers that hold home cards, app cards, system
cards, and help cards. This helps in:
- Showing system page layout better with wider cards for each item.
- Showing more apps in the app page. This does not decrease the readability in
the same way that increasing the size of the paragraph does beyond a certain
point.
- Also increase the width of the navbar to make it appear consistent.
- Other containers such as content container remain at the same width.
Increasing this width would make a reading a paragraph harder.
- Behavior is mobile layouts is unchanged.
Tests:
- Test that apps, system, home and help views show cards in a wider layout.
- Success/error messages shown in apps, system, home and help views are narrow
and are not effected.
- In home and help:index pages (reached when clicking help icon without JS), the
icons are wide but the content is narrow.
- Individual app pages, confirmation pages, and help pages remain at the older
width.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Sort tags in the dropdown using user's locale.
- Fix localized tags being used for filtering. This happens when the application
freshly starts and list_tags() is called using user's non-default locale.
- Avoid using element.textContent in JS. Instead use datasets.
- Add functional test for checking localization issues.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
