15 Commits

Author SHA1 Message Date
Joseph Nuthalapati
cde3f151fb
tags: Add button to clear all tags
Signed-off-by: Joseph Nuthalapati <njoseph@riseup.net>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
2024-12-27 11:39:25 -08:00
Sunil Mohan Adapa
4fdf6a7ffe
ui: Fix placement of tags menu under tags input with Bootstrap 5
- 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>
2024-12-12 13:04:01 +02:00
Sunil Mohan Adapa
a4017b2bf2
ui: Restyle tags, remove underlining of text
- 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>
2024-12-12 12:56:37 +02:00
Sunil Mohan Adapa
95ecf36152
ui: Rename data- attributes to data-bs- for Bootstrap 5
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
2024-12-12 12:48:54 +02:00
Sunil Mohan Adapa
4d71e80b1e
ui: Drop use of badge-* utility classes for newer replacements
- 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>
2024-12-12 12:30:28 +02:00
Sunil Mohan Adapa
89781c8c88
tags: Localization fixes
- 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>
2024-10-16 21:08:29 -07:00
Sunil Mohan Adapa
5ce7385f60
tags: css: Minor styling cleanups
- 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>
2024-10-16 21:08:10 -07:00
Joseph Nuthalapati
e5b7ed4faf
*: Implements tags for apps
- 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>
2024-10-16 21:07:54 -07:00
Sunil Mohan Adapa
e89e2b4a2a
*.html: Use SPDX license identifier
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
2020-02-19 14:39:19 +02:00
Sunil Mohan Adapa
eb19c9a319
ui: Rename page specific CSS classes
Fixes #1349.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
2019-01-18 11:46:34 +05:30
Joseph Nuthalapati
daef528576
turbolinks: Replace style elements in head with blocks in body
Turbolinks cannot replace the styles in the head of the HTML document. Moved
them to the body by making the class of the body an overridable Django template
block.

Signed-off-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
2018-07-29 12:22:57 -04:00
Manish Tripathy
0932a07785
Apply new card based design
Signed-off-by: Manish Tripathy <manisht@thougtworks.com>
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
2018-06-18 20:18:37 +05:30
Sunil Mohan Adapa
dea4af17fb
Rename Plinth to FreedomBox in license headers
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
2018-02-16 20:10:09 -05:00
Joseph Nuthalpati
f069f663d0
UI: Make apps and configure pages responsive on small screens
- Hide the listing of apps and configuration options on small screens,
  so that the user doesn't have to navigate to the bottom of the page.
- Closes #921

Reviewed-by: Johannes Keyser <johanneskeyser@posteo.de>
2017-08-09 18:20:44 +02:00
Sunil Mohan Adapa
ee7cc98fee
apps, system: Remove modules and merge into main
- Remove apps and system modules and merge their views into main views.

- Move main_menu from cfg into menu.py.

- Remove dependencies of other modules on apps and system modules.

- Update tests.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
2017-05-05 22:31:45 -04:00