Mobile: Members page - user avatar is misaligned

Resources

FE @ClemMakesApps

Proposal

Original issue

In mobile, in the members page, the user avatar is too close to the dropdown and misaligned with the user name.

We could also improve this page since there is no action allowed either in the dropdown or text input.

Thanks @filipa! @hazelyang: would you be able to help out with this? Thanks!

@awhildy Sure!

Reassigned to @hazelyang

I am not sure the reason we removed the time on small screen. What about we can put it back?

I also changed the permission and expiration date dropdowns to the plain text, so people will not think they are clickable.

Mobile

Desktop

Makes sense! Looks great @hazelyang

@hazelyang What if an user have the permission to change the permission and expiry date and wants to change it from mobile?

@nmrony Permission and Expiration date will be dropdown.

added ~1434245 ~974571 and removed ~19492 labels

changed milestone to %Backlog

removed assignee

assigned to @annabeldunstone

removed assignee

added Accepting Merge Requests label

Would love to take a crack at this. :)

added Deliverable and removed Accepting Merge Requests labels

changed milestone to %9.4

@brianmcoates The goal for improving this is to use @hazelyang's design (https://gitlab.com/gitlab-org/gitlab-ce/issues/25103#note_19215788). Does that make sense?

@ClemMakesApps ok that makes sense I was getting kind of confused. I will start working on this then.

changed the description

assigned to @ClemMakesApps

@ClemMakesApps I have the dev reqs and environment is almost finished. I had to stand up a vm with linux.

No problem @brianmcoates, let me know if you need help!

@ClemMakesApps would you be able to help me with getting the dev environment installed I'm having a heck of a time.

What step are you stuck on @brianmcoates?

@ClemMakesApps step two of the ubuntu install. I setup a vm and install ubuntu zesty on it 17.04 i believe I checked and made sure it was supported by gitlab and it is. When I run

curl -sS https://packages.gitlab.com/install/repositories/gitlab/gitlab-ce/script.deb.sh | sudo bash

It acts like its downloading and it will then say that it's ready for install. I then run the next command.

sudo apt-get install gitlab-ce

but it says it can't find the files. I tried running the first line of code without the | sudo bash and it returns a error saying that it was

unable to download the repo config from "${apt_config_url}" This usually happens if the operating system is not support by packagecloud.io or this script's os detection failed.

It then tells you that you can override the script by manually putting in the os=ubuntu and dist=zesty but I couldn't get it to work at all.

as far as I can tell, @brianmcoates, it looks like you are trying to setup GitLab CE versus the development environment.

Do you have gitlab development kit setup? If not, here is the readme: https://gitlab.com/gitlab-org/gitlab-development-kit/blob/master/README.md

@ClemMakesApps I will try these options again I tried two of them but when I was looking for the vagrant instructions I thought I found an easier install turns out you are right it was just the CE version. I'm going to try the dev again and I will let you know where I get held up.

Yeah, you will need to setup GDK in order to develop on GitLab. Creating an actual gitlab CE install is like installing production

Looks like the UI has changed since this issue was created.

Currently looks like the following

Desktop	Mobile

Can I get some UX guidance for this? @hazelyang @sarrahvesselov

Looking this over @ClemMakesApps. The role does not currently stack with the spacing that @hazelyang specifies in her designs. Doing so will help make this look more polished.

The problem area comes in on the listing that shows it's you. The org name (a new feature since these designs were made) should stack below this label on mobile. All text should left-align properly as in Hazel's designs. I am not sure why your desktop view shows the gitlab.org on the second line in the admins details, it should not.

@hazelyang Can you add the organization name element to your designs so @ClemMakesApps is clear on what this should look like? Thanks in advance

@sarrahvesselov @ClemMakesApps Thanks!

Updated the design for mobile:

• Can we have the organization name be in the next line instead of cutting it if there is no enough space after the username?

@ClemMakesApps I got the vagrant install finished but the last step is to

After the installation is done, edit the 'gitlab-workhorse' line in your Procfile and change localhost:3000 to 0.0.0.0:3000.

Where would this be?

@ClemMakesApps I used the vagrant install found here https://gitlab.com/gitlab-org/gitlab-development-kit/blob/master/doc/vagrant.md#development it looks like it didn't install gitlab it tells me there should be gitlab files under ~/ but nothing.

@brianmcoates looks like the step Continue setup at Installation below. has a deadlink. I think thats what you are missing.

I think it points to https://gitlab.com/gitlab-org/gitlab-development-kit/blob/master/doc/set-up-gdk.md. I created https://gitlab.com/gitlab-org/gitlab-development-kit/issues/254 to track this discrepancy

changed the description

Thanks @hazelyang. Remember to update the description with the latest designs (I took care of it on this issue )

@ClemMakesApps yep that would be what the issue is I will follow through these steps and hopefully get it done by the end of today.

Thanks @sarrahvesselov and @brianmcoates!

Let me know if you get stuck @brianmcoates. This issue is a weird situation where it was Accepting Merge Requests and then it got scheduled, so we are trying to get it in %9.4 (Before July 7th). If you are unable to get it, I can finish it up

@sarrahvesselov Thanks for the help!

@ClemMakesApps hey man still having issues after the instructions that you forwarded me. Go ahead and do it but if you can @ me on a new issue that would be great I'm still really wanting to contribute just having so many issues with the environment getting setup.

No problem @brianmcoates, thanks for giving a shot. Let's set aside some time for me to help you through that GDK setup

created branch 25103-mobile-members-page-user-avatar-is-misaligned

mentioned in merge request !12618 (merged)

closed via merge request !12618 (merged)

reopened

Not sure how this got merged by @smcgivern. Seems like an accident

mentioned in merge request !12619 (merged)

Could use some UX guidance here. This is what it looks like currently on master when you invite a user (that isn't signed up yet) using their email address

There appears to be a lot of extra space between the resend invite and trash icon on the invited user row. This space should be consistent with the line above, the G... dropdown should lengthen to fill in that bit of extra space. That still won't help much to make the dropdown and expiration text readable. Is there anything we can do to shorten that message? Do we really need to spell out Administrator, could we shorten it to Admin?

Also, the hour ago should left align with the rest of the text.

Feel free to ping me if you need more input @ClemMakesApps.

Admin

Thats just the name of the user which I guess sometimes could be short, sometimes could be long.

What if we move the resend button so that it's below the trash icon? Not ideal but the G dropdown is the same as the one above it (where it says Developer)

Thats just the name of the user which I guess sometimes could be short, sometimes could be long.

Makes total sense.

Based on the chat we had in slack about this:

1. This is only an issue in the large screen due to the 2 column layout

2. The message and expiration dates must remain

3. I don't believe we should drop the resend icon down

4. My suggestion is to make the Resend Invite an icon button with the tooltip being the current text. We could use the fa-paper-plane icon.

@tauriedavis, I know that you mentioned we are moving away from the two-column layout which will essentially make this a moot point, but I don't know when that will happen. Thoughts?

We'll be moving away from the two-column layout soon (currently working on general). Here is the meta issue https://gitlab.com/gitlab-org/gitlab-ce/issues/28451. I just created the issue specifically for the members page and assigned it to myself https://gitlab.com/gitlab-org/gitlab-ce/issues/34727

I'm not sure if that makes it a moot point. The original issue is at least still valid since the mobile view doesn't use a two-column layout.

I'm not sure if the problem that Clement is mentioning will still be an issue. It depends on the breakpoints. But it certainly would become less of a problem.

Changing the members page to one column would be very easy because it does not need to include the expand/collapse panels we are adding elsewhere. Perhaps we just address the issue description here and look at the other buttons when in non-mobile view during that change?

Here is an MR for removing the two columns on member settings https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/12663

Here's what it looks like when I add the paper-plane icon. Not sure if we wanted to keep the input and dropdown widths the same as the row before @tauriedavis @sarrahvesselov

Here is an MR for removing the two columns on member settings https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/12663

I propose we make that into %9.4, we can leave the resend invite buttons if we wish but that UI change seems like a step in the right direction

Sounds good, will assign to you for review once tests pass

If we keep the width of the dropdown and input fields, this is what we get. Is this what we desire? @tauriedavis @sarrahvesselov

It bothers me that the inputs don't align. Can we move the resend invite to the left so everything else is still aligned? See any issues with that @sarrahvesselov?

Is this what you were imagining @tauriedavis?

Nope, I think that works nicely @tauriedavis @ClemMakesApps.

How will this stack down to mobile? Right now it would be two buttons stacked (resend on top of delete). Will this move have repercussions for mobile?

How will this stack down to mobile? Right now it would be two buttons stacked (resend on top of delete). Will this move have repercussions for mobile?

We can always create 2 buttons and hide it based on screen size. There isn't a technical limitation here. Just mainly need a UX direction

Perfect @ClemMakesApps, just wanted to be sure we took it into account. Looks good!

So just to be clear, we want to do https://gitlab.com/gitlab-org/gitlab-ce/issues/25103#note_34281290 implementation?

We should also keep in mind that if you request access to a project, the checkmark is currently next to the trash icon.

So just to be clear, we want to do https://gitlab.com/gitlab-org/gitlab-ce/issues/25103#note_34281290 implementation?

Yep!

We should also keep in mind that if you request access to a project, the checkmark is currently next to the trash icon.

Thats okay. Everything within that table will be aligned since every user requesting access will have a checkmark

closed via merge request !12619 (merged)