Fix text alignment on date and time inputs on iOS #144
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Casual thought, what about creating a pseudo selector so we could do something like |
|
Updated this to use |
javierjulio
added a commit
to activeadmin/activeadmin
that referenced
this pull request
Nov 22, 2023
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
javierjulio
added a commit
to activeadmin/activeadmin
that referenced
this pull request
Nov 22, 2023
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
javierjulio
added a commit
to activeadmin/activeadmin
that referenced
this pull request
Nov 30, 2023
* 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.
This was referenced May 18, 2024
This was referenced May 25, 2024
This was referenced May 27, 2024
This was referenced May 29, 2024
This was referenced Oct 6, 2024
This was referenced Oct 15, 2024
This was referenced Oct 22, 2024
This was referenced Oct 29, 2024
This was referenced Nov 5, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Currently date and time inputs on iOS are centered:
This PR updates these inputs to be left-aligned so that they are consistent with the rest of the form inputs:
The implementation
Changing the text alignment on the input itself doesn't work on iOS. The only way to fix this is using the
-webkit-date-and-time-valuepseudo element:And while this totally works, it does come at the cost of users no longer being able to change the text alignment on date and time inputs using a utility class. However, they already couldn't on iOS, so this still feels like a good change.