* Hides the welcome banner search in mobile, it's not necessary
since there is the header search
* Fix an issue where the positioning of the search input for
the header on mobile was affecting welcome banner search
* Make the welcome font a bit smaller and with less padding so
it takes up less room on mobile
---------
Co-authored-by: Jordan Vidrine <jordan@jordanvidrine.com>
This eliminates the `/mobile` and `/desktop` `header.scss` files and
moves the relevant CSS under `common/header.scss` using `.mobile-view`
and breakpoints.
I was also able to eliminate some redundant and unused styles in the
process and move a couple more general styles to `discourse.scss`
### Changes made
#### Styling
1. added `4px` spacing between search input and cancel button
2. increased cancel button size (with padding) to match input height
3. decreased search panel padding by 1/2 from 16px to 8px
4. animation show/hide changed (from vertical to horizontal) and made it
quicker (300ms->200ms)
5. set html unscrollable when search panel is open
#### Dev
1. changed `data-test-` value to be consistent with other element's
attrs values
2. clear search action tag changed from `<a>` to `<DButton>`
The `DMultiSelect` component provides a customizable multi-select
dropdown with support for both mouse and keyboard interactions.
### Parameters
#### `@loadFn` (required)
An async function that returns the data to populate the dropdown
options.
```javascript
const loadFn = async () => {
return [
{ id: 1, name: "Option 1" },
{ id: 2, name: "Option 2" },
];
};
```
#### `@compareFn`
A function used to determine equality between items. This is
particularly useful when working with complex objects. By default, `id`
will be used.
```javascript
const compareFn = (a, b) => {
return a.name === b.name;
};
```
#### `@selection`
An array of pre-selected items that will be displayed as selected when
the component renders.
```javascript
const selection = [
{ id: 1, name: "Option 1" },
{ id: 2, name: "Option 2" },
];
```
#### `@label`
Text label displayed in the trigger element when no items are selected.
```javascript
@label="Select options"
```
### Named Blocks
#### :selection
Block for customizing how selected items appear in the trigger.
```javascript
<:selection as |result|>{{result.name}}</:selection>
```
#### :result
Block for customizing how items appear in the dropdown list.
```javascript
<:result as |result|>{{result.name}}</:result>
```
#### :result
Block for customizing how errors appear in the component.
```javascript
<:error as |error|>{{error}}</:error>
```
### Example Usage
```javascript
<DMultiSelect
@loadFn={{this.loadOptions}}
@selection={{this.selectedItems}}
@compareFn={{this.compareItems}}
@label="Select options">
<:selection as |result|>{{result.name}}</:selection>
<:result as |result|>{{result.name}}</:result>
<:error as |error|>{{error}}</:error>
</DMultiSelect>
```
Co-Authored-By: Jordan Vidrine
<30537603+jordanvidrine@users.noreply.github.com>
---------
Co-authored-by: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
This makes two tweaks to the setup wizard:
1. Move the branding (site logo) step to after styling (look & feel).
2. Remove the corporate (your organization) step.
Continues the work done on
https://github.com/discourse/discourse/pull/30815.
Adds a `footnote` node, parser, `^[inline]` input rule, toolbar button
item, and serializer.
Also adds a NodeView with an internal ProseMirror editor to edit the
footnote content.
## Requirements
Initially defined in
https://meta.discourse.org/t/software-engineer-frontend-ember-js-yuriy-kurant/353612/14?u=yaran.
1. On mobile devices and tablets, users can open the search input field
by tapping the search icon
2. When opened, the search input takes over the entire header area:
- Users can tap the sliders icon to navigate to the advanced search page
(/search)
- Users can tap Cancel to close search input
3. After submitting a search, results area will take over the entire
screen:
- Users can tap the X icon to clear the search term from the input field
- Users can tap Cancel to close search results area and return to their
previous page (i.e. search area overlays content)
## Implementation
1. When opened, the search input takes over the entire header area:
- changed panel width from `90vw` to `100vw`
- on initial render (when search input is empty), search panel hovers over the header section only (doesn't cover main content below)
- quick tip and recent searches lists are not displayed on mobile view
2. Tap on the sliders icon navigates to the advanced search page
(`/search`)
3. Tap on the **Cancel** button:
- closes search menu
- if the search term is present, it is cleared
4. Tap on the left-hand side **Search** icon triggers a topics search
## Dev notes
1. Added `// TODO` questioning `search` service `noResults` default value of `false`
2. Added animation on toggling header search panel (created `delayed-destroy` custom modifier)
3. Extracted in-context search filters into a standalone component `search-menu/active-filters`:
- mobile: active filters below search input
- desktop: active filters inside search input
3. Removed unnecessary top padding when search results are empty
4. Added `data-test-` attrs for Ember tests. Benefits:
- semantically `data-test-` attrs indicate that these parts of the layout are covered with tests
- decouples selector dependency on `id/class` names for testing purposes - eliminates risk of broken tests due to `id/class` name changes
This fixes a bug on Safari where, for some reason, it was leaking to
affect the rich editor list item rendering. When typing, the current
list item was breaking to a next line.
With this change, it doesn't happen anymore, and the more specific `svg`
target will serve the same purpose as it's currently defined on
`InputTip`.
Follow-up to https://github.com/discourse/discourse/pull/31887
This commit introduces a new design for the components listing page, which
is not linked from anywhere in the UI at the moment, but it can be
accessed by heading to the `/admin/config/customize/components` path
directly. We'll make this new design available from the sidebar and
remove the old page once we've tested and validated the new design
internally.
Internal topic: t/146007.
---------
Co-authored-by: Ella <ella.estigoy@gmail.com>
When running specs I noticed this mixed-decls Sass deprecation warning:
> Deprecation Warning [mixed-decls]: Sass's behavior for declarations
that appear after nested
> rules will be changing to match the behavior specified by CSS in an
upcoming
> version. To keep the existing behavior, move the declaration above the
nested
> rule. To opt into the new behavior, wrap the declaration in & {}.
>
> More info: https://sass-lang.com/d/mixed-decls
This change address that issue.
Follow up to: 928f9175f05413289c45d3fd6424f62956ea0944
New configure fonts section was added. Because now we have two sections
completed (logos and fonts), new /branding page was introduced and old
/logo and /font pages was removed.
When text size is changed, modal is displayed to ask if preferences of
existing users should be retrospectively updated.
https://github.com/user-attachments/assets/f6b0c92a-117f-4064-bd76-30fa05acc6d3
---------
Co-authored-by: Ella <ella.estigoy@gmail.com>
Co-authored-by: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Fixing hashtag text glued to the icon, and updated some related properties to using better units.
---------
Co-authored-by: Martin Brennan <martin@discourse.org>
We now have 3 search UX variations:
* Header search
* Welcome banner search
* Icon search
And within each of these there is a `<SearchMenu />`
component with an input that needs to be focused based
on either Ctrl+F or `/` shortcuts. This commit makes
sure that each has a unique ID, and moves the functionality
of determining the "current" input ID and focusing the
input to the search service.
This fixes issues like where pressing Ctrl+F twice on
the header search would not reveal the regular browser
search.
Elements with position: fixed are taken out of the rendering context, so we can't easily make the banner the width of the main container using CSS. We tried a CSS hack, but that doesn't scale to larger screens, and probably breaks in some themes.
This is a simple JavaScript implementation that matches the width of the main container.
This change forces consistency around code font in Discourse once the
new
rich-editor is enabled
- This means all code blocks in Discourse will render with this font
- Additionally the markdown mode composer will render with this font
Additionally we make 3 small adjustments:
1. We disable ligatures which conflict with typographer
2. We add support for custom ligature settings
3. We adjust down font size, cause 14px ends up matching visually with a
16px non monospace font, this change is already in place previously on
posts
Example:
