- 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>
- Drop changing the history as even without it, back/forward work just fine.
- Drop debouncing as there was a bug that prevented it from working. Since we
have a small number of tags, running the operations immediately seems to work
fine.
- Update incorrect docstring.
- Flatten and isolate the event handlers code further for readability.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
- Use CSS based styling instead of styling based on bootstrap classes.
- Add a placeholder for the input box to easily locate it and convey what it
does.
- Drop dead code for '.tag-input .tag'.
- Drop some repeated data- attributes by using DOM navigation.
- Drop redundant styling.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
- Add tags to Info component of apps. Use only English tags for all operations.
Localized tags are used for presentation to the user only. Add tags to all the
apps. Conventions (English):
1. Tags describing use cases should be in kebab case.
2. Protocols in tag names should be in their canonical format.
3. Tags needn't be 100% technically correct. This can get in the way of
comparing apps using a tag. Words that describe use cases that users can
easily understand should be preferred over being pedantic.
4. Tags should be short, ideally not more than 2 words. Avoid conjunctions
like "and", "or" in tags.
5. Avoid redundant words like "server", or "web-clients". Most apps on
FreedomBox are either servers or web clients.
6. Keep your nouns singular in tags.
- Use query
params to filter the Apps page by tags. When all tags are removed, redirect to /apps.
- Add UI elements to add and remove tag filters in the Apps page. Make the UI
similar to GitLab issue tags. Since there are 40 apps, there will be at least 40
tags. Selecting a tag from a dropdown will be difficult on mobile devices. A
fuzzy search is useful to find tags to add to the filter. Allow user to find the
best match for the search term and highlight it visually. The user can then
press Enter to select the highlighted tag. Make tag search case-insensitive.
Make the dropdown menu scrollable with a fixed size. User input is debounced by
300 ms during search.
- tests: Add missing mock in test_module_loader.py
- Add functional tests
[sunil]
- 'list' can be used instead of 'List' for typing in recent Python versions.
- Reserve tripe-quoted strings for docstrings.
- Undo some changes in module initialization, use module_name for logging
errors.
- isort and yapf changes.
- Encode parameters before adding them to the URL.
Tests:
- Tested the functionality of filtering by tag with one tag and two tags.
Signed-off-by: Joseph Nuthalapati <njoseph@riseup.net>
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
Fix the following:
- In mobile layout, the logout button has incorrect text color and when
hovering, wrong background color.
- In mobile layout, when user menu is expanded, there is no spacing between the
end of the menu and the border for the expanded menu items.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Only item in the navbar present during first boot in mobile layout is the
toggler. Set its height such that it maintains the height of the entire navbar.
Tests:
- After the account setup screen, switch to mobile layout. Notice that the
navbar is no longer tiny but the usual height.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Fixes#2456.
- Replace the first setup wait message with a spinner. This is sufficient to let
the user know that they have to wait.
- The message does not convey anything more.
Tests:
- Remove /var/lib/plinth/plinth.sqlite3 and start the service. After the service
starts listening visit the web interface and notice that the first setup screen
shows up. The size and position of the spinner are as expected.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Fixes: #888.
- Suggest all the steps that a typical user should likely take.
- Custom styling to make the page look good.
- Open the links in new windows as this page can't be reached again.
- Add a button for software updates as this can be done easily and the most
important step.
Tests:
- Trigger first setup by removing plinth.sqlite3. Notice the improved setup
complete page. Text and icons are as expected. Links work and open in a new
window. Clicking on 'Update now' button opens a page to software updates with
manual upgrade triggered.
- Mobile view looks good.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- The library performs a large number of tests to determine if various features
are available in the browser. In Debian most tests seem to be present unlike
other methods of distribution where users select which tests they want and build
a customized library for their app. This leads to increased page load time.
- The only functionality we use from Modernizr library are the .js and .no-js
classes we use in our CSS styling. Modernizr is not needed by Bootstrap library.
We don't use 'Modernizr.' properties in Javascript.
- A bug in the test to determine if an <input> element with type="number" allows
localization or not causes the page to scroll down to the end. This behavior
appeared in version 3.x of modernizr and despite the bug report and the fix, it
is not gone. Dropping modernizr fixes this issue.
Tests:
- The logout link in the header bar is visible only when Javascript is disabled.
- The dropdown icons next to header menus only appear when Javascript is
enabled.
- For each feature detection provided by Modernizr library, search if our
project is using that in CSS styling.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
Closes: #2161.
- Sections are ordered by importance on which administrator must act after
setting up the system.
- Consistent order across all the languages.
- Update the styling for the section hearers.
- For system section, make them compact.
- Make them look like a header text (with underline) rather than a
divider (like in a menu).
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
- This prevents CSRF attacks that allow adversarial websites from logging out
users from FreedomBox. Django itself has made this change in 4.x releases.
Tests:
- Logout works with the menu item in drop-down when Javascript is enabled. The
menu item appears similar to other drop-down menu items.
- Logout works with the menu item when JavaScript is disabled on the page. The
menu item appears similar to other menu items.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- This improves modularity. Each app brings its own icons in its directory
instead of a centralized directory.
Tests:
- Install an app and notice that the installation notification has the icon.
- Visit an app's page in Apps and System (cockpit) section and ensure that the
app's icon is being shown.
- Visit the Apps and System section and notice that apps' icons are being shown.
- Visit the home page and notice that shortcuts' icons are being shown.
- Visit the URL /plinth/api/0/shortcuts and notice that the URLs for icons are
accessible and lead to proper icon files.
- Build developer documentation and notice that Tutorial -> View and Reference >
Menu pages show the expected updates.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
[sunil: Update description for simplicity, group info]
[sunil: Indentation fixes]
[sunil: End all URLs with a slash]
[sunil: Update frontpage shortcut to be a simple one]
[sunil: Enable single-sign-on for main interface only]
[sunil: In copyright file, merge with public-domain section]
[sunil: Simplify and vectorify the icon]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
Closes: #2228.
- Django 4.0 changed to using <div> instead of using <ul> and <li> for multiple
choice select fields. Update code for the select-all button to work with the new
HTML structure.
- Add styling to ensure that multiple choice select field appears similar to
previous <ul> and <li> based style.
- This patch assumes that django-bootstrap-form has support for Django 4.0 as
seen in https://github.com/tzangms/django-bootstrap-form/pull/110 .
Tests:
- Radio select seem to have no issues. Checked in networks -> connection type
page.
- Open Backups -> Create backup page and ensure that select all button works
and appears same on testing (Django 3.2) and unstable (Django 4.0).
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
- Add basic video room based on demo.
- Set port range to use for RTP.
- coturn: Add component for time-limited TURN configuration.
Signed-off-by: James Valleroy <jvalleroy@mailbox.org>
[sunil: Don't error out when coturn is not installed/configured]
[sunil: Prepend data- to custom attribute in HTML]
[sunil: Convert SVG with embedded bitmap to vector graphics]
[sunil: Hide Javascript license information in footer]
[sunil: Minor changes to comments for styling]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
Closes: #2157.
Original author of the app J. Carlos Romero <juancarlos.romero@gmail.com> has
been contacted to see if there is interest in continuing to maintain the app.
There has been no response.
Since the app is not available even in the current stable (Bullseye), few users
are presumably using it on a supported FreedomBox distribution. Any users are
advised to maintain the manually instead of relying on FreedomBox for it.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
