Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hard to map a field to correct column on large screen. #2507

Closed
2 tasks
emgk opened this issue Dec 12, 2017 · 12 comments
Closed
2 tasks

Hard to map a field to correct column on large screen. #2507

emgk opened this issue Dec 12, 2017 · 12 comments
Milestone
2.0

Comments

@emgk
Copy link
Contributor

emgk commented Dec 12, 2017

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.

screenshot-givecache20 local-2017-12-12-18-55-17-638

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
@DevinWalker DevinWalker added this to the 2.0.1 milestone Dec 12, 2017
@akashcsoni
Copy link
Contributor

@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
Copy link
Contributor

raftaar1191 commented Jan 4, 2018 •
edited

I like the background color option @akashsonic @DevinWalker

@DevinWalker
Copy link
Member

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
Copy link
Contributor Author

emgk commented Jan 5, 2018

@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.

screenshot-localhost-2018-01-05-19-16-23-642

@kevinwhoffman
Copy link
Contributor

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
Copy link
Member

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

@akashcsoni
Copy link
Contributor

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

@akashcsoni
Copy link
Contributor

@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
Copy link
Member

Yeah that looks good @akashsonic thanks 👍

akashcsoni added a commit to akashcsoni/Give that referenced this issue Jan 8, 2018
@akashcsoni
Issue impress-org#2507 Fix Hard to map a field to correct column on l…
5f7489d 
…arge screen issue
@ravinderk
Copy link
Collaborator

ravinderk commented Jan 9, 2018 •
edited

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

akashcsoni added a commit to akashcsoni/Give that referenced this issue Jan 9, 2018
@akashcsoni
Issue impress-org#2507 Fix Hard to map a field to correct column on l…
d70a0be 
…arge screen issue
@akashcsoni
Copy link
Contributor

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

Thanks.

@akashcsoni akashcsoni mentioned this issue Jan 10, 2018
Closed
akashcsoni added a commit to akashcsoni/Give that referenced this issue Jan 10, 2018
@akashcsoni
Issue impress-org#2507 Fix Hard to map a field to correct column on l…
acd65eb 
…arge screen issue
@akashcsoni
Copy link
Contributor

akashcsoni commented Jan 10, 2018 •
edited

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

Thanks.

DevinWalker pushed a commit that referenced this issue Jan 11, 2018
Merge pull request #2645 from akashsonic/issue/2507
31df2a0 
Issue #2507 Fix Hard to map a field to correct column on large screen
@akashcsoni akashcsoni mentioned this issue Jan 11, 2018
Merged
@DevinWalker DevinWalker modified the milestones: 2.0.1, 2.0 Jan 11, 2018
DevinWalker added a commit that referenced this issue Jan 11, 2018
@DevinWalker
Merge branch 'release/2.0' into issue/339
de1b67b 
* release/2.0:
  Add comment
  Remove error_log code
  Do not redirect admin to welcome page when do Ajax
  Update default non notification editable message
  Update notification_status_editable email notification config param
  Update priority to register log taxonomy and post type for backward compatibility
  Add helper fn to verify current setting page
  grammar/clarity cleanup.
  Issue #2507 Fix Hard to map a field to correct column on large screen issue
  Add $form id and $args to give_goal_output filter
  Update pre upgrade 2.0 cache delete logic
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
2.0
Development

No branches or pull requests
6 participants
@DevinWalker @ravinderk @kevinwhoffman @akashcsoni @emgk @raftaar1191