Joffrey JAFFEUX
f7b73f3d70
UX: improves modal on mobile ( #26055 )
...
This commit mainly improves three things:
- slide up/down animation of the modals on mobile, also allowing swipe down to close the modal
- body scroll locked modals, it means that only the body of the modal can scroll
- a new `<:headerPrimaryAction>` block for `d-modal` which when present will move the cancel button to the left of the modal title, and this primary action to the right of the title
2024-03-22 16:29:32 +01:00
David Taylor
8b935e5b33
Revert "UX: Make input sizing consistent across all browsers ( #26159 )" ( #26295 )
...
This reverts commit d0d4a363d4https://meta.discourse.org/t/300374
2024-03-21 17:54:11 +00:00
David Taylor
d0d4a363d4
UX: Make input sizing consistent across all browsers ( #26159 )
...
Previously we had an iOS-specific sizing rule which would increase inputs to `1.07em`, which would bring them over the 16px 'zoom on focus' threshold in some (but technically, not all) situations.
This commit does two things:
1. Updates the sizing rule from `1.07em` to `max(1em, 16px)`. Essentially: use the cascaded font size, unless it is smaller than 16px
2. Applies that sizing rule on all platforms. This will make Discourse design/theming more consistent across different devices
It also removes some associated CSS rules which no longer make sense.
2024-03-20 16:23:44 +00:00
David Battersby
d5b944f1de
FEATURE: add chat direct message button to user profile ( #26135 )
...
This change adds the chat direct message button to user profiles, similarly to how we use it within the user card.
2024-03-18 11:17:37 +08:00
Kris
f65a5c5f02
UX: clean up invite buttons ( #26068 )
2024-03-07 10:50:11 -05:00
Kris
5c1147adf3
UX: Move top dismiss button from topics to d-navigation ( #26032 )
2024-03-05 15:43:07 -05:00
Kris
e408f4ff95
DEV: remove various unused CSS ( #25994 )
2024-03-01 16:51:26 -05:00
Kris
653b2e4678
DEV: remove unneeded buttons mobile CSS ( #25992 )
2024-03-01 16:42:02 -05:00
Kris
9421997866
DEV: remove old bootstrap alert CSS ( #25991 )
2024-03-01 16:03:34 -05:00
Kris
ccf0fdaa81
UX: improve group email setting wrap, cleanup styles ( #25985 )
2024-03-01 12:34:55 -05:00
Kris
8503d3afe1
UX: improve advanced search wrapping, remove mobile stylesheet ( #25975 )
2024-02-29 18:07:18 -05:00
Kris
40eea40d69
UX: clean up tag info styles, remove mobile stylesheet ( #25973 )
2024-02-29 17:48:47 -05:00
Kris
db2f5ae51b
UX: simplify styles for image uploader ( #25970 )
2024-02-29 14:39:00 -05:00
Kris
47b8e98cf7
UX: enable badge title on mobile, style cleanup ( #25968 )
2024-02-29 13:55:13 -05:00
chapoi
9ce2c20ab0
UX: make sure a-tag uses border radius var ( #25882 )
2024-02-26 16:17:04 +01:00
Isaac Janzen
21f23cc032
DEV: Convert header to glimmer ( #25214 )
...
Here is a breakdown of the changes that will be implemented in this PR.
# Widgets -> Glimmer
Obviously, the intention of the todo here is to convert the header from widgets to glimmer. This PR splits the respective widgets as so:
### widgets/site-header.js
```mermaid height=200
flowchart TB
A[widgets/site-header.js]
A-->B[components/glimmer-site-header.gjs]
```
### widgets/header.js and children
```mermaid height=200
flowchart TB
A[widgets/header.js]
A-->B[components/glimmer-header.gjs]
B-->C[glimmer-header/contents.gjs]
C-->D[./auth-buttons.gjs]
C-->E[./icons.gjs]
C-->F[./user-menu-wrapper.gjs]
C-->G[./hamburger-dropdown-wrapper.gjs]
C-->H[./user-menu-wrapper.gjs]
C-->I[./sidebar-toggle.gjs]
C-->J[./topic/info.gjs]
```
There are additional components rendered within the `glimmer-header/*` components, but I will leave those out for now. From this view you can see that we split apart the logic of `widgets/header.js` into 10+ components. Breaking apart these mega files has many benefits (readability, etc).
# Services
I have introduced a [header](cdb42caa04/app/assets/javascripts/discourse/app/services/header.jscdb42caa04/app/assets/javascripts/discourse/app/modifiers/close-on-click-outside.jshttps://github.com/discourse/discourse/blob/main/app/assets/javascripts/float-kit/addon/modifiers/close-on-click-outside.js ) that @jjaffeux built for float-kit. I think we could replace float-kit's implementation with mine and have it in a centralized location as they are extremely similar.
# Tests
Rewrote the existing header tests ([1](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/tests/integration/components/widgets/header-test.js ), [2](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js )) as system tests.
# Other
- Converted `widgets/user-status-bubble.js` to a gjs component
- Converted `widgets/sidebar-toggle.js` to a gjs component
- Converted `topicFeaturedLinkNode()` to a gjs component
- Deprecated the [docking mixin](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/mixins/docking.js )
2024-02-23 11:08:15 -07:00
Kris
1ac8922013
DEV: update classes, remove unused CSS ( #25825 )
2024-02-23 09:14:37 -05:00
Kris
9005a14508
UX: fix topic map link expansion hover ( #25822 )
2024-02-22 15:47:38 -05:00
chapoi
a9f8009801
UX: Modal mobile fixes ( #25788 )
...
* UX: remove discourse-touch class wrapper
* UX: keep modal close btn in right position
2024-02-21 13:49:42 +01:00
Krzysztof Kotlarek
ee393a7953
UX: hide the draggable icon in the sidebar form on mobile ( #25738 )
...
Drag and drop link works only on desktop. Therefore, the drag icon should be hidden on mobile.
2024-02-21 09:16:49 +11:00
Kris
52fb523bbb
UX: show the full mobile read-state indicator ( #25678 )
2024-02-14 15:52:02 -05:00
David Taylor
9883e6a0c8
UX: Add loading indicator when loading 'new or updated topics' ( #25649 )
...
Also improves error handling so that the action can be retried if the network request fails
2024-02-13 10:41:22 +00:00
Kris
59ccb69db0
FEATURE: show unread post indicator on mobile ( #25421 )
2024-02-06 11:50:49 -05:00
chapoi
fbfab92fce
UX: overflow fix for add participants to PM on mobile ( #25437 )
2024-01-26 09:26:25 +01:00
chapoi
d5f527ee37
UX: show the SSO options when creating an account on mobile ( #25260 )
2024-01-15 16:36:00 +01:00
Kris
7639591552
UX: cleaning up some invite page styles ( #25247 )
2024-01-12 17:15:01 -05:00
Jordan Vidrine
8dad9788a3
FIX: Drop down fix ( #25093 )
2024-01-03 08:02:32 -06:00
Sam
baa7c4cec7
FIX: allow styling of feedback on mobile ( #25072 )
...
(to test try using discourse-ai which displays feedback on mobile)
---------
Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
2023-12-30 08:57:16 +11:00
Kris
096e26d972
UX: adjust pm styles to enbubble controls ( #24996 )
2023-12-22 14:28:02 -05:00
chapoi
1f9e6425c6
UX: align topic notification button + text vertically ( #24948 )
2023-12-18 16:59:03 +01:00
Mark VanLandingham
223e413a6c
DEV: Render glimmer notification items for user notification list ( #24802 )
...
This removes the widget notifications list and renders the glimmer user menu notification items instead.
2023-12-11 11:04:43 -06:00
chapoi
e227008c65
UX: login modal sizing fixes ( #24794 )
2023-12-08 17:21:37 +01:00
Kris
c197f8c6ee
UX: make github onebox styles more responsive ( #24761 )
2023-12-06 17:45:56 -05:00
chapoi
ad77a6876c
UX: fix alignment ( #24718 )
2023-12-05 14:19:21 +01:00
Krzysztof Kotlarek
dc2a0854b0
UX: add gift emoji styling for new features ( #24523 )
...
When admin has unseen new feature, gift emoji is added to a link.
In addition, `/new-features` path was changed to `/whats-new`
2023-11-27 09:32:28 +11:00
chapoi
0b352ce7fb
UX: fix date time modal on mobile ( #24531 )
...
* UX: fix date time modal
2023-11-24 10:28:46 +01:00
Jordan Vidrine
e073f4e5a6
UX: Adjust topic progress wrapper border radius ( #24470 )
2023-11-21 09:15:20 -06:00
Penar Musaraj
36606a2157
FIX: Modals on Android when keyboard is visible ( #24442 )
2023-11-20 11:56:06 -05:00
chapoi
f2d3e3ed3f
UX: Fixes login/create modal ( #24457 )
...
* UX: fix > hide alt login method on mobile create acc
* UX: login modal > fix long names on login buttons
* UX: fix login overflow
2023-11-20 11:52:50 +01:00
Krzysztof Kotlarek
190a7f8c7a
UX: smaller new feature emoji ( #24454 )
...
Moved the new feature emoji to the left of the title and made it smaller.
2023-11-20 16:08:10 +11:00
Krzysztof Kotlarek
96c5a6c9ca
FEATURE: dedicated admin section for new features ( #24292 )
...
New tab in admin panel with list of new features. Presentation was enhanced by screenshot and markdown description.
Related PR https://github.com/discourse-org/discourse-new-features-feeds/pull/23
2023-11-20 09:59:04 +11:00
chapoi
cd183edad1
UX: modal > remove obsolete wrapper class ( #24381 )
2023-11-15 11:33:23 +00:00
chapoi
f72899401d
UX: refactor .d-modal to use BEM and improve styling ( #23967 )
...
This PR refactors the following:
* leaving all the CSS applied to the old `modal-body` classes in their respective files
* made new clean styling for `.d-modal` and refactored the template to use the new BEM classes
* `inner-`, `middle-`, `outer-` container classes are gone and replaced with simplified `wrapper` and `container` classes
* use standardised max-sizes with modifiers `-large` and `-max`
* lighter backdrop,
* min-width to prevent puny modals
* other styling changes regarding padding, close button,…
* pulled out all modal overrides into a general `modal-overrides` file + cleanup of outdated CSS
* pulled out login and create account modal styling into their own file, cause it's such a big override
* removed old general login.scss file for mobile & desktop
* only kept some remainders I don't want to touch in `app/assets/stylesheets/common/base/login.scss`
2023-11-15 10:14:47 +00:00
Kris
38e53b5e8e
UX: improve mobile user card button display ( #24311 )
2023-11-14 17:13:37 -05:00
Kris
797da5870b
FEATURE: remove category badge style options, set bullet style as default ( #24198 )
2023-11-13 10:46:15 -05:00
Jordan Vidrine
37fda6d479
FIX: Adjust border radius ( #24301 )
2023-11-08 18:36:30 -06:00
chapoi
fe0b0edf57
UX: Invite signup page styling + separation ( #24293 )
...
* UX: separate invite-signup styling
* UX: invite page centering
* remove old invites-show css
* UX: invite signup page – mobile
* remove class references in general file
* add styling for instructions
2023-11-08 12:57:06 +01:00
Jarek Radosz
351cbab1a8
DEV: Migrate create-account to the new modal API ( #24098 )
...
plugin/theme-breaking changes:
1. `controller:create-account` is gone (use `component:modal/create-account` in modifyClass, **if** absolutely necessary)
2. `create-account-body` css class is gone (target `.d-modal.create-account` or any of the inner classes: `.modal-outer-container`, `.modal-middle-container`, `.modal-inner-container`, or `.modal-body`)
2023-10-30 11:01:09 +01:00
Jarek Radosz
125ab9f31d
UX: Update user field styling in the create-account modal ( #24091 )
...
1. Removes accidental bold from `text` and `multiselect` labels/placeholders
2. Adds the animated label/placeholder combo to `multiselect`
3. Makes the `multiselect` placeholder lighter to match other fields
4. Makes the `dropdown` values darker to match other fields
5. Removes the extra 5px spacing before `confirmation` fields
2023-10-25 13:03:20 +02:00
Penar Musaraj
f9eec939e5
UX: Fixes for mobile "create account" modal ( #24043 )
...
- Don't include login buttons on mobile
- Fix padding/spacing
2023-10-23 10:48:46 -04:00
