Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Prep Tailwind CSS migration part 6 (#8139)
* Add form errors and hints for UI dev * Use antialiased text on body * Add radio styles, set base for form controls * Disable old form SCSS styles * Add form styles * Remove old fieldset inputs style * Remove comment-form fieldset inputs style This is no longer needed now since we removed the initial selector that added default padding. * Increase input vertical spacing from 2.5 to 3 Since this adds top and bottom padding, this would be the equal spacing as using gap-6 but using spacing around the container. The overall spacing here is nicer and easier to call out the grouped inputs. * Add explicit filters, use check_boxes We need more variety for UI testing so some of these filters instead of select's use check boxes instead. * Update filter form label style Use the label class here so when using check boxes for a filter, this only applies to the filter label (group), not the label for each checkbox. * Remove hard coded space from filter checkbox input * Add filter form checkboxes style * Use consistent Sign-In/Out language This changes "Login" text to "Sign in". We have other places in the locale (links) where we actually use "Sign in" so we should stay consistent. Also apparent with "Log out" instead of "Sign out". Devise is consistent with using both "sign in/out" in its messages so we should be consistent as well. * Disable old main structure styles * Add default viewport meta tag for mobile support Using latest value per HTML5 Boilerplate https://github.com/h5bp/html5-boilerplate/blob/main/src/index.html * Permit ngrok-free.app in dev hosts This is helpful when testing the local dev app on a mobile device. * Update date input pseudo styles This resolves a few issues with date inputs on Mac and iOS. Defaults to left alignment (inherit). tailwindlabs/tailwindcss-forms#144 Removes top and bottom padding on each of the datetime edit fields so with this the field will now match the same height as other inputs. tailwindlabs/tailwindcss-forms#146 tailwindlabs/tailwindcss-forms#95 tailwindlabs/tailwindcss-forms#109 * Increase footer top margin * Remove panel from show page attributes_table This is redundant with the page title above it. Common to see admins without this redundant title. This makes it better as a default and also to accommodate others that want to customize the layout. * Devise pages and form actions styles The form actions styles overlapped with the Devise page updates so I've applied these here. The login button (and for other Devise pages) is full width but because of Formtastic's semantic structure, the actions were laid out horizontally using flex. We only apply flex now if there are multiple actions. This way, on the Devise pages, the action can go full width. * Update create-another checkbox styles I prefer the original input+label layout but since Formtastic enforces the nested input within label which we already have styled (despite it being more problematic) this now looks much better. * Remove columns component I've decided that there is no point in keeping this and with the move to making the admin more mobile friendly, its just all around easier to replace these with div's and Tailwind classes for the right columns at the right viewport. * Update blank_slate component Now just a simple div component with a default CSS class. The content provided can be anything now and isn't built using html_safe, unless given in that form. * Always use grid for page content container Even if it's a single column, we always want to use grid here so we can apply the gap if a sidebar is added which is conditional. * Update templates with Tailwind classes * Set table actions default style Easiest to just space these out at the container level for a suitable default. * Update dropdown styles This sets the list to a min full width which will at least match the size of the button if the list content is shorter which is often the case with our defaults. Add a larger shadow to separate popup from content underneath. Add text color styles to offset the default anchor color. * Add filter with combined ransack predicate * Disable more SASS partials that have been migrated * Disable breadcrumbs SASS (migrated) This includes an update to a feature test because it was using an old CSS class name for a negated test. * Disable sortable handle This no longer works since we removed jQuery UI. Our upgrade guide will call out that has-many-sortable isn't implemented in v4 and will require community contribution. * Add has-many form styles * Disable forms SASS partial completely This has been fully migrated now. From here we can remove sass all together.
- Loading branch information
1 parent
ccdf0d7
commit c0d31cd