Commit Graph

1186 Commits

Author SHA1 Message Date
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