Commit Graph

1250 Commits

Author SHA1 Message Date
Kris c937b6dd36
FIX: set max-width on category logo img (#18703) 2022-10-21 12:01:26 -04:00
Kris 6b4b279141
UX: horitzontal scroll controls for new user nav (#18583) 2022-10-14 09:32:02 -04:00
Andrei Prigorshnev 98620f8e0e
FIX: status emoji was shown on the left on mobile (#18567) 2022-10-12 20:54:24 +04:00
chapoi 899ed039b7
FIX: typo (#18566) 2022-10-12 16:50:02 +02:00
Jarek Radosz 4170b9bb58
DEV: Use more css vars (#18561)
Followup to #18518

This time it's mostly line-height vars and a couple of other uncommon vars.
2022-10-12 16:05:42 +02:00
Jarek Radosz ea326906e3
DEV: Use css var font sizes (#18518)
For consistency and and the ability to change all font sizes at once in the dev tools
2022-10-12 15:31:59 +02:00
Kris 6d8405bbd0
UX: updated styles for user nav with sidebar (#18550) 2022-10-11 17:15:58 -04:00
Alan Guo Xiang Tan 14532ad425
DEV: Try out double nav for new experimental user page nav (#18495)
No tests and this redesign is still highly highly experimental
2022-10-07 12:20:39 +08:00
chapoi d507151508
UX: add more spacing to tab btns (#18506) 2022-10-06 23:53:06 +02:00
Alan Guo Xiang Tan de071fc1e8
DEV: Convert messages user page nav to experimental redesign (#18456)
No tests are written for now as we're still in a highly iterative stage
2022-10-04 12:05:09 +08:00
Kris afce65bb79
UX: fix post placeholder on mobile (#18442) 2022-09-30 14:51:44 -04:00
Rafael dos Santos Silva fb5695795f
UX: Fix composer position on Firefox for Android (#18403)
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2022-09-29 11:35:01 -03:00
Alan Guo Xiang Tan f1cbc23f1e
UX: Add icons to all section links in Sidebar (#18378)
This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. 

Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong.

Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 12:28:01 +08:00
Rafael dos Santos Silva ea3bc7d7dc
UX: Restore full sized composer on mobile (#18400) 2022-09-28 15:32:09 -03:00
Rafael dos Santos Silva ab58b0cffe
FIX: Better virtual keyboard detect on Android (#18298)
* FIX: Better virtual keyboard detect on Android

Firefox has a bug where *sometimes* the visualViewport.height won't be
updated when the keyboard pops up until you scroll, making our composer
stay hidden behind the keyboard. This commit uses both window.innerHeight
and  window.visualViewport.height using the minimum of both to check for
height changes.

For Chrome/Edge we feature detect the new VirtualKeyboard API and
opt-into it when the composer opens and use it to detect if a keyboard
is being draw. Opting into the API changes how the viewport is
calculated so we have to also change how the full height composer is
calculated. To minimize breakage we opt-out when the composer component
is destroyed.

This commit also moves the `--composer-ipad-padding` to only happen on
iPads.

Bug report at https://meta.discourse.org/t/-/228382
2022-09-26 17:35:58 -03:00
Kris a38e44fd5e
UX: truncate site text titles in a cleaner way (#18335) 2022-09-23 10:19:44 +08:00
Alan Guo Xiang Tan b066955838
DEV: Mobile layout support for experimental user nav (#18308) 2022-09-22 09:45:50 +08:00
Keegan George ea27079ffa
FIX: Sidebar scroll fade on older iOS (#18299)
* DEV: Use explicit transparent color rather than keyword
* DEV: Use variable for dark mode
* DEV: Add mobile style
2022-09-21 09:03:40 +10:00
Jarek Radosz 87f8bafa7e
DEV: Remove obsolete CSS prefixes (#18262) 2022-09-15 16:54:08 +02:00
Alan Guo Xiang Tan b18f1fefda
UX: Remove height CSS preventing sidebar touch scrolling on mobile (#18257) 2022-09-15 17:17:08 +08:00
Alan Guo Xiang Tan 2583d21aa7
UX: Improve styling of sidebar on mobile (#18246)
* Make sidebar footer is sticky
* Ensure that only the sidebar sections is scrollable
2022-09-15 11:35:33 +08:00
Kris c69473128b
UX: improve composer toolbar flexibility (#18195) 2022-09-13 14:20:33 -04:00
Keegan George a046f0306a
UX: Improve `max-height` value on toolbar popup menu (#18030)
* UX: Improve `max-height` value on toolbar popup menu

* UX: Popup menu based on new editor height property

* DEV: Update heights on resize

* DEV: Remove `--d-editor-height` property

* UX: Calculate max height based on composer type

* DEV: Remove event listener `willDestroyElement()` hook

* FIX: Remove unnecessary check and calculation

* DEV: Remove explicitly calling `updateHeightOnViewportResize()`

* UX: Update max-height

* UX: Different max-height values for reply/create

* DEV: Add comments for clarity

* DEV: Remove `updateHeightOnViewportResize()` event listener
2022-08-29 12:59:35 -07:00
Alan Guo Xiang Tan 48da481871
UX: Increase sidebar fontsize on mobile (#18100)
Font size was first increased in 9909d001c5 but regressed in
7a05a9d411
2022-08-29 10:27:58 +08:00
Kris 3068df4cea
UX: sidebar styling, spacing consistency, etc (#18059) 2022-08-24 09:33:15 +08:00
Alan Guo Xiang Tan 5990842dd9 UX: Revamp styling of sidebar
The following changes are made in this commit:

1. Move caret icon in sidebar section header to the right.
1. Each row in sidebar takes the full width which enables us to do a
full width highlight on hover and when sidebar link is active.
1. Ensure each row in Sidebar is of the same height.

Internal refs: /t/70546, /t/72196, /t/71820
2022-08-18 16:14:49 +08:00
Alan Guo Xiang Tan 7a05a9d411
UX: Make Sidebar more consistent with user menu on mobile (#17940)
Before this commit, we carried custom code and styles for the sidebar on
mobile. This meant the look and feel of bringing up the sidebar on
mobile was very different from the user menu resulting in a very
inconsistent experience on mobile. Also, we could not leverage on the
existing swipe to close support on mobile.

In this commit, we made it such that the sidebar dropdown is always
rendered on mobile and made the interaction with the dropdown more
consistent with the user menu. There is also more parity with the old
hamburger dropdown when the experimental sidebar is disabled.
2022-08-16 13:45:32 +08:00
Arpit Jalan 10a1b6b0a9
FEATURE: update bootstrap mode notice to add invite and wizard links (#17822)
* FEATURE: update bootstrap mode notice to add invite and wizard links

* Updates per feedback on PR

* Fix the wizard link not showing

* Remove unneeded function

* Remove router service injection
2022-08-10 00:13:42 +05:30
Kris 391c687afb
UX: sidebar focus styles, remove hover for touch (#17713) 2022-07-28 13:04:00 -04:00
Kris a23e934730
FIX: show button bar overflow on iPad & mobile (#17708) 2022-07-28 09:26:06 -04:00
Kris b5c1132546
UX: add bulk-select to mobile topic lists (#15386) 2022-07-26 15:36:35 -04:00
Alan Guo Xiang Tan 99073338de
FEATURE: Replace hamburger dropdown with Sidebar when undock (#17600)
When the experimental Sidebar is enabled, the hamburger drop down is replaced by a sidebar drop down. A user is given the ability to dock and undock the sidebar depending on their personal preference.

Do also note that the experimental sidebar is well, considered experimental at this point so I do not intend for the features here to be perfect. What I aim to do here is to ship the changes fast so that it can be used internally by the team to provide feedback. Custom links added by plugins and dark mode toggle has not been implemented as part of this commit as I aim to tackle it in another commit.

Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-07-22 13:06:47 +08:00
Osama Sayegh fac04f3e73
DEV: Introduce a basic version of the new notifications menu behind a feature flag (#17492) 2022-07-19 10:35:02 +08:00
Kris d8714facb6
FIX: can't hide overflow of d-editor-button-bar on mobile (#17563) 2022-07-18 20:43:05 -04:00
Kris 9909d001c5
UX: increase text size for mobile exp sidebar (#17521) 2022-07-15 17:44:44 -04:00
Kris 4c1b8e736d
UX: add border-box to stop padding from overflow (#17391) 2022-07-08 10:31:28 -04:00
Kris 59c8774957
UX: Prevent experimental sidebar scroll jumps (#17352) 2022-07-06 10:36:44 +08:00
Kris 56c0d8cf92
UX: mobile experimental sidebar improvement (#17302)
First pass at the mobile experimental sidebar improvement.

Co-authored-by: Alan Guo Xiang Tan <gxtan1990@gmail.com>
2022-07-05 11:45:02 +08:00
Kris 305c4750df
UX: allow more mobile topic elements to be tapped (#17234) 2022-06-24 15:55:52 -04:00
Jarek Radosz 36c2284dea
DEV: Fix typos "formated" -> "formatted" (#17156)
(nothing in all-the* relies on these)
2022-06-20 20:02:05 +02:00
Penar Musaraj 4be67ef9a7
UX: Larger images in mobile emoji picker (#17013) 2022-06-07 12:00:09 -04:00
Kris 4df4817e13
FIX: auto margins cause too-narrow content (#16725) 2022-05-12 08:13:53 +08:00
Kris 19677ce3f6
UX: fix various login modal issues on mobile (#16708) 2022-05-11 14:36:27 +10:00
Kris 8dd3d6cb97
UX: Larger clickable area for mobile topic list (#16473) 2022-04-26 15:01:43 -04:00
Kris 144b87b17a
UX: fix topic admin menu layout for short screens (#16565) 2022-04-26 10:27:45 -04:00
Kris f2468f1093
Revert: UX: Make full topic row clickable on mobile (#16440) (#16472) 2022-04-13 18:35:47 -04:00
Kris 0ff66b3b74
UX: minor mobile topic list alignment adjustments (#16470)
* UX: minor mobile topic list alignment adjustments

* use margin, not padding
2022-04-13 15:47:18 -04:00
Kris 0e88cffaf4
UX: Make full topic row clickable on mobile (#16440) 2022-04-12 09:44:20 -04:00
awesomerobot 264c8f5fd7 Improve docked progress position on mobile 2022-04-12 09:09:59 +08:00
Jordan Vidrine 2b974d4992
DEV: Add additional outlet to user-card next to `message` button (#16300) 2022-03-28 11:56:43 -05:00
Penar Musaraj 593f3e5dd8
UX: Styling changes to global banner (#16191) 2022-03-15 16:19:55 +01:00
Martin Brennan ff96d541e9
FEATURE: Add fullscreen button for code blocks (#16044)
This commit extends the original copy-codeblocks initializer,
renaming it to codeblock-buttons, and adding another button
to make the code block fullscreen in a modal window. The fullscreen
code is then run through highlight.js.

This commit also moves much of the code out of the initializer
and into a reusable CodeblockButtons class, so it can also be used
in the fullscreen code modal for the copy + paste button.

The fullscreen button will not be shown if there is no scroll overflow
in the code block, nor will it be shown on mobile. This commit also
changes the fullscreen table button to not show on mobile.

This will make long lines of code much easier to read and interact
with. This is gated behind the same `show_copy_button_on_codeblocks`
site setting.
2022-03-01 08:37:24 +10:00
Ella E baa4bcda23
FIX: on mobile, overflow on post controls if there are many buttons (#16054) 2022-02-25 15:03:58 -07:00
Kris c9419b51a3
UX: prevent user menu overflow on tiny screens (#15964) 2022-02-15 20:13:11 -05:00
Jordan Vidrine 7223d5e012
UX: Fix login header z-index (#15848) 2022-02-07 13:31:03 -06:00
Jarek Radosz 692b6543ff
FIX: Composer fields on small desktop sizes (#15729) 2022-02-01 21:33:06 +01:00
Kris c4e8ba3965
UX: post action spacing refactor & consistency (#15403) 2022-01-04 09:44:54 -05:00
Meghna f6db99b56a
UX: improved invite accept page layout (#15418) 2021-12-29 09:12:18 +05:30
Jarek Radosz 0b34d5ac6c
UX: Maximize the preview space in composer (#15188)
A follow-up to #15117 and #15141. Applies the previous changes to PM-specific fields, makes the preview area take the all the available height of the composer, and unifies more spacing between composer elements.
2021-12-24 12:38:33 +01:00
Kris 07436e9d8c
UX: update navigation-container scaling & wrapping (#15372) 2021-12-20 17:08:03 -05:00
Kris 1c9a0fe18e
UX: let mobile post controls scroll on overflow (#15305) 2021-12-15 15:36:10 -05:00
Penar Musaraj f24027b453
UX: Fix topic status icon size in mobile search results (#15251) 2021-12-09 14:32:12 -05:00
Kris 6d2eae27a6
UX: reduce composer jumpiness on android (#15184) 2021-12-03 17:02:22 -05:00
Kris 657c137384
UX: Prevent overflow on mobile timeline dates (#15182) 2021-12-03 13:48:26 -05:00
Krzysztof Kotlarek 9cabd3721b
FEATURE: ability to add description to tags (#15125)
Ability to add description to tags, which will be displayed on hover.
2021-12-01 09:18:56 +11:00
Jarek Radosz 0bf30196c9
FIX: Broken css in #15141 (#15144) 2021-11-30 20:02:22 +01:00
Jarek Radosz feb9a3675d
UX: Tweak mobile composer styling (#15141)
A followup to #15117
2021-11-30 19:50:28 +01:00
Jarek Radosz ceed48f321
UX: Make banner full-width (#15038) 2021-11-22 19:43:45 +01:00
Kris 8b5dec4607
UX: mobile topic list fixes follow-up to 0e371d4 (#14959) 2021-11-15 21:07:32 -05:00
Jordan Vidrine 0e371d4c6d
SYNTAX: Use classes instead of html element targeting (#14890)
* SYNTAX: Use classes instead of html element targeting
2021-11-15 14:49:45 -06:00
Penar Musaraj ce91bf0775
Revert "FIX: Composer height issue in Safari on iOS 15 (#14282)" (#14847)
This reverts commit 0dab1634b0.
2021-11-09 13:10:07 -05:00
Penar Musaraj 51233ae349
UX: Fix several issues with topic progress refactor (#14790) 2021-11-02 13:45:40 -04:00
Penar Musaraj 724f1ee9d1
UX: Fix short post width on mobile (#14771) 2021-10-29 11:39:19 -04:00
Penar Musaraj 095421a1e1
REFACTOR: Use IntersectionObserver to calculate topic progress position (#14698) 2021-10-29 09:23:15 -04:00
janzenisaac dd5b0543c7
FEATURE: Add fullscreen-tables to post (#14709)
Overflown tables will have a "expand table" option added to open x table in a modal
2021-10-25 14:06:28 -05:00
Penar Musaraj 7c7dd2335b
FIX: Category and tag picker alignment on mobile (#14622) 2021-10-15 10:25:11 -04:00
Jordan Vidrine 6ab5f70090
UX: Change layout of invites page to match other user pages (#14520)
* UX: Change layout of invites page to match other user pages
2021-10-05 15:30:31 -05:00
Alan Guo Xiang Tan 9d5da2b383
PERF: Revert all inboxes from messages route. (#14445)
The all inboxes was introduced in
016efeadf6 but we decided to roll it back
for performance reasons. The main performance challenge here is that PG
has to basically loop through all the PMs that a user is allowed to view
before being able to order by `Topic#bumped_at`. The all inboxes was not
planned as part of the new/unread filter so we've decided not to tackle
the performance issue for the upcoming release.

Follow-up to 016efeadf6
2021-09-28 11:58:04 +08:00
Penar Musaraj 0b69675060
UX: Adjust mobile spacing for full page search (#14450) 2021-09-27 18:03:56 -04:00
Penar Musaraj 3e3043dbaa
UX: Add second Search button on mobile (#14404) 2021-09-21 13:02:00 -04:00
Penar Musaraj dfeca42bf8
FEATURE: user/category/tag results in full page search (#14346)
See PR for details, this commit also changes the layout of the full page search.
2021-09-20 10:01:11 -04:00
Penar Musaraj a736ff5f69
DEV: Clean up some styles (#14374) 2021-09-20 09:52:03 -04:00
Penar Musaraj 19b14d6ec2
UX: Fix tab groups editing layout issues on mobile (#14329) 2021-09-14 09:55:40 -04:00
Penar Musaraj a03d8a147f
UX: Fix mobile styling for admin color schemes (#14314) 2021-09-13 13:43:57 -04:00
Penar Musaraj 33fb3b7ec8
UX: Fix date input display in iOS (#14307) 2021-09-10 15:13:45 -04:00
Penar Musaraj 6c7f4e15b6
FIX: Mobile nav styling (#14309) 2021-09-10 15:13:26 -04:00
Penar Musaraj 24e71acf3f
UX: Normalize sizing for inputs, buttons, dropdowns (#14226)
See PR for details
2021-09-09 11:01:56 -04:00
Penar Musaraj 0dab1634b0
FIX: Composer height issue in Safari on iOS 15 (#14282) 2021-09-08 13:35:09 -04:00
Kris 94085d0996
UX: Select-kit update alignment fixes (#14199) 2021-08-31 17:44:11 +02:00
Joffrey JAFFEUX 14e92bb0ea
FIX: correctly apply unusual padding to profile dropdowns (#14172) 2021-08-27 10:03:59 +10:00
Joffrey JAFFEUX cb59681d86
DEV: select-kit third major update with focus on accessibility (#13303)
Major changes included:
- better support for screen readers
- trapping focus in modals
- better tabbing order in composer
- alerts on no content found/number of items found
- better autofocus in modals
- mini-tag-chooser is now a multi-select component
- each multi-select-component will now display selection on one row
2021-08-23 10:44:19 +02:00
Kris f848f6cbb6
UX: Fix mobile PM nav for regular users (#14007) 2021-08-11 12:47:03 -04:00
Alan Guo Xiang Tan 016efeadf6
FEATURE: New and Unread messages for user personal messages. (#13603)
* FEATURE: New and Unread messages for user personal messages.

Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2021-08-02 12:41:41 +08:00
Kris 00820f0fad
UX: History controls should use nav-pill styles (#13904) 2021-07-30 19:52:15 -04:00
Kris aa6daeaa3e
FEATURE: New style for personal messages (#13800) 2021-07-21 10:41:04 -04:00
Jarek Radosz a2425487b2
UX: Make sure there's always a margin on badges page (#13693) 2021-07-14 13:45:26 +08:00
Alan Guo Xiang Tan f57d49ed01
UX: Layout issues with topic last visit line. (#13655)
Remove the calculation of width and instead switch to small action class
that automatically sets the width based on the screen size.
2021-07-07 12:40:40 +08:00
Alan Guo Xiang Tan 37b8ce79c9
FEATURE: Add last visit indication to topic view page. (#13471)
This PR also removes grey old unread bubble from the topic badges by
dropping `TopicUser#highest_seen_post_number`.
2021-07-05 14:17:31 +08:00
Andrei Prigorshnev a2e0da16a7
FEATURE: use native file picker in composer (#13552)
We want to remove completely our custom modal for uploading files in composer and directly trigger the system file picker.

This PR makes it happen. The fix is pretty simple since we already weren't using our custom modal on mobile. We just need to start using the same hidden <input type="file"> that we already use on mobile.

It seems to be pretty tricky to test opening a system modal so I haven't added new tests. We already have other tests for file uploading though. We directly trigger jquery-File-Upload plugin hooks in those tests - 3dda926cb2/app/assets/javascripts/discourse/tests/acceptance/composer-attachment-test.js (L89).
2021-06-30 12:45:47 +04:00
awesomerobot 895df9c239 UX: margin improvement for mobile alerts 2021-06-25 09:18:06 +08:00