Givewp: Hard to map a field to correct column on large screen.

[emgk]

Issue Overview

Currently, in Tools > Import page in backend there is no horizontal line between the row field, so it makes confusion for admin to map a column to correct field.

Possible Solution

Add horizontal lines between table row.

Steps to Reproduce (for bugs)

1. Goto Tools > Import
2. Choose CSV to import and hit next button.

Todos

• [ ] Tests
• [ ] Documentation

[akashsonic]

@DevinWalker @raftaar1191

After adding a horizontal line between the settings, it looks not so good. Screenshot is available on http://nimb.ws/6Q7YG5

But if we adding background color in row odd/even then all settings looking more separately and clearly, You can check that on http://nimb.ws/gj18En

Let me know which design looks good here, I will send PR as per that.

Thanks.

[raftaar1191]

I like the background color option @akashsonic @DevinWalker

[DevinWalker]

I also like the varying background color option. @akashsonic's concept is a little bolder than I'd like to see the colors but still it looks nice. If we could tone down and soften those colors a bit I think it would look much improved.

[emgk]

@DevinWalker It looks good but how about if we use the default WordPress table row alternative CSS color? So, it makes more consistencies with WordPress.

[kevinwhoffman]

I think the WordPress alternating row styles work fine here. The main issue is proximity, not contrast. The field labels are currently much closer to each other than they are to the inputs they are labeling.

The first column could be given a max-width in order to keep the second column closer in proximity and therefore the relationship between label and input would be clarified.

[DevinWalker]

I agree with both @kevinwhoffman and @emgk - Let's use the WP colors and also tighten up that first column width.

[akashsonic]

@DevinWalker Okay, I am working on that. I will do WP colors and also tighten up that first column width in the setting option.

[akashsonic]

@DevinWalker I do WP colors and also tighten up that first column width 250px in the setting option. It's looking good check here http://nimb.ws/y0o8ix

Let me know if design looks good here, I will send PR as per that.

Thanks.

[DevinWalker]

Yeah that looks good @akashsonic thanks 👍

[ravinderk]

@akashsonic You can add image to github comment. Please follow it.

[akashsonic]

@ravinderk @DevinWalker I have resolved this issue in PR #2640

Thanks.

[akashsonic]

@DevinWalker I have updated my PR with only scss files changes, You can check that on #2645

Thanks.