Abstract Views Exposed Form styling out into a reusable class

No idea what this means but +1 for making things consistent and good looking out of the box.

We can do simply like

.views-exposed-form .form-item, .ltr-inline-item {
  /* Display exposed form elements horizontally. */
  float: left; /* LTR */
  margin-right: .25em; /* LTR */
}

[dir="rtl"] .views-exposed-form .form-item, .rtl-inline-item {
  float: right;
  margin-left: .25em;
}

By doing this we will not have to change the code where ever we using the .form-item class under .views-exposed-form and use ltr-inline-item and rtl-inline-item class where we want inline item left to right and right to left respectively.

Adding patch.

I'm going to add the class :D

Thank you so much tu @rteijeiro for helping me.

Sorry for uploading twice the patch...

As i'm not really sure what does the previous comment means I prefer release the issue. If I can understand better comment #8I'll try to afford the patch.

Ok, I think I got it.

Thank You so much for be so patiente.

:D

It's probably a bit brave, but It's the best solution I could find.

As margins don't affect to inline elements, the form was too much close to the view content:

So I was looking for any reusable class that adds vertical margins to the wrapper. I couldn't find it so I created one at core/modules/system/css/system.module.css

vertical-margin{
 margin: 1em 0;
}

To be honest I'm not really sure if it's the best name for the class and if it's a good idea define new classes at system.module.css.

Yes, if We use inline-block it looks better, but there is not a "inline-block-container" class (almost I didn't find it).

Awesome!!!

After applying the patch on #2226317: Divs in the container-inline wrapper should be inline-block instead of inline and the patch on this comment, the form looks like this:

Sorry,

my previous patch has a mistake.

Trying to pass the test, I think now the views.libraries.yml is ok.

Lewis point me to this issue while we were discussing #1963340: Change field UI so that adding a field is a separate task. The current patch there copies the CSS from views exposed filters and would benefit a lot from the reusable class introduced here :)

I realize this problem already exists, but the inlined form items look really crammed into each other. Should we increase the margin-right spacing a bit to 0.5em? I used 1em in #1963340: Change field UI so that adding a field is a separate task but that's because I have an element in between which contains only text (actually, two letters) so it might be too much for the default.

Patch #28 works fine this patch adds also the margin sugested by #29

Assuming that everyone agrees with the 0.5em spacing, I think this is ready.

Can we get a screenshot to compare the .25em with the .5em.

Also

  // Include basic theming for exposed forms.
  $form['#attached']['library'][] = 'views/views.exposed-form';

Is still in template_preprocess_views_exposed_form() even though the library does not exist with this patch.

This issue is a normal task so we need to outline how it fits within the allowable Drupal 8 beta criteria. Can someone add Drupal 8 beta phase evaluation template to the issue summary. This will be allowed because it is in the unfrozen category (CSS).

Here are the screenshots and the patch rerolled and with the #32 modification.

margin right 0.25em

margin right 0.5em

The new 0.5em spacing looks better to me but I'll let @LewisNyman make the final call :)

Now, we should be able to delete all the CSS in views.exposed_form.css and it should look the same as before. I'm not sure that' will happen right now.

It seems this change got lost along the way. The library declaration for views/views.exposed-form.css is deleted in views.libraries.yml, but the file is still there.

Also, there is an issue about the css for exposed filters in the Views preview section that overlaps with this patch and should probably be merged: #2396465: Views UI: Exposed Filter css is not applied

Can someone test that we've not broken #2396465: Views UI: Exposed Filter css is not applied now that that has landed :)

Further to #46, #1963340: Change field UI so that adding a field is a separate task landed some time ago so the patch needs to be updated to make FieldStorageAddForm use this new styling class.

@amateescu Thanks for the heads up, I updated the 'Field: add field' form with the new form--inline class.

I have added some screenshots in the attachments. For the sake of brevity I have not embedded them in the comment.

It looks perfect! RTBC++

Committed c741d42 and pushed to 8.0.x. Thanks!

Thanks for adding the beta evaluation to the issue summary.