discourse/app/assets/stylesheets/mobile.scss

@import "common";
@import "mobile/_index";

// Import all component-specific files
@import "mobile/components/_index";
@import "mobile/select-kit/_index";
@import "mobile/float-kit/_index";
@import "mobile/form-kit/_index";
Allow importing Discourse styles in custom stylesheets to modify vars. 2014-03-08 21:25:03 +08:00			`@import "common";`
DEV: Use indexes when importing SCSS from a folder (#11591) By default, SCSS does not support globbing. This removes our magic and uses index files to import all files in a folder. 2020-12-31 04:29:10 +08:00			`@import "mobile/_index";`
Improved Plugins SCSS management - Moves the import of plugins for both mobile and desktop from common after discourse loading, allowing plugins to overwrite - Make desktop-option behave like the mobile-option: SCSS/CSS marked with that option will only be loaded for desktop from now on and ignored in mobile - Add variables-keyword, allowing plugins to ship and overwrite variables before they get imported by discourse (great for theming) 2014-04-25 16:26:37 +08:00
Extracted/DRYed user-stream-item component CSS from user.css into own files - Renamed 'stream-item' component to 'user-stream-item' - Replaced generic 'item' class with clearer 'user-stream-item' class - Retained 'item' class for backward compatibility, marked as 'DEPRECATED' - Extracted CSS pertaining 'user-stream-item' component to component CSS files - Removed unnecessary duplication from 'user-stream-item' CSS - Removed unnecessary nesting from 'user-stream-item' CSS 2017-08-25 09:04:19 +08:00			`// Import all component-specific files`
DEV: Use indexes when importing SCSS from a folder (#11591) By default, SCSS does not support globbing. This removes our magic and uses index files to import all files in a folder. 2020-12-31 04:29:10 +08:00			`@import "mobile/components/_index";`
			`@import "mobile/select-kit/_index";`
UX: shows the bookmark menu improvements This commit adds a new option `@modalForMobile` for `<DMenu />` which allows to display a `<DModal />` when expanding a menu on mobile. This commit also adds a `@views` options to toasts which is an array accepting `['mobile', 'desktop']` and will control if the toast is show on desktop and/or mobile. Finally this commit allows to hide the progressBar even if the toast is set to `@autoClose=true`. This is controlled through the `@showProgressBar` option. 2024-04-08 14:18:50 +08:00			`@import "mobile/float-kit/_index";`
DEV: form-kit This PR introduces FormKit, a component-based form library designed to simplify form creation and management. This library provides a single `Form` component, various field components, controls, validation mechanisms, and customization options. Additionally, it includes helpers to facilitate testing and writing specifications for forms. 1. Form Component: - The main component that encapsulates form logic and structure. - Yields various utilities like `Field`, `Submit`, `Alert`, etc. Example Usage: ```gjs import Form from "discourse/form"; <template> <Form as \|form\|> <form.Field @name="username" @title="Username" @validation="required" as \|field\| > <field.Input /> </form.Field> <form.Field @name="age" @title="Age" as \|field\|> <field.Input @type="number" /> </form.Field> <form.Submit /> </Form> </template> ``` 2. Validation: - Built-in validation rules such as `required`, `number`, `length`, and `url`. - Custom validation callbacks for more complex validation logic. Example Usage: ```javascript validateUsername(name, value, data, { addError }) { if (data.bar / 2 === value) { addError(name, "That's not how maths work."); } } ``` ```hbs <form.Field @name="username" @validate={{this.validateUsername}} /> ``` 3. Customization: - Plugin outlets for extending form functionality. - Styling capabilities through propagated attributes. - Custom controls with properties provided by `form` and `field`. Example Usage: ```hbs <Form class="my-form" as \|form\|> <form.Field class="my-field" as \|field\|> <MyCustomControl id={{field.id}} @onChange={{field.set}} /> </form.Field> </Form> ``` 4. Helpers for Testing: - Test assertions for form and field validation. Example usage: ```javascript assert.form().hasErrors("the form shows errors"); assert.form().field("foo").hasValue("bar", "user has set the value"); ``` - Helper for interacting with he form Example usage: ```javascript await formKit().field("foo").fillIn("bar"); ``` 5. Page Object for System Specs: - Page objects for interacting with forms in system specs. - Methods for submitting forms, checking alerts, and interacting with fields. Example Usage: ```ruby form = PageObjects::Components::FormKit.new(".my-form") form.submit expect(form).to have_an_alert("message") ``` Field Interactions: ```ruby field = form.field("foo") expect(field).to have_value("bar") field.fill_in("bar") ``` 6. Collections handling: - A specific component to handle array of objects Example Usage: ```gjs <Form @data={{hash foo=(array (hash bar=1) (hash bar=2))}} as \|form\|> <form.Collection @name="foo" as \|collection\|> <collection.Field @name="bar" @title="Bar" as \|field\|> <field.Input /> </collection.Field> </form.Collection> </Form> ``` 2024-07-17 17:59:35 +08:00			`@import "mobile/form-kit/_index";`