Flexibus/#381/team page design #465

deeps96 · 2018-01-29T21:48:41Z

Closes #381, also fixes #396.

Make sure to checkout flexibus/#381/team-page-design when reviewing since there exists a branch with a similar name.

…ing -> waiting for ticket #338 to be successfully completed. #381

…in, only. #381

…ple) selected participants. #381

…ont have that button anymore. #381

…lexibus/#381/team-page-design

…_modal' %> was before form tag. #381

…github.com/hpi-swt2/sport-portal into flexibus/#381/team-page-design

…#381

JakobEdding · 2018-01-30T20:20:17Z

I'm changing the name of PR #379 to clear that up a bit at least because this has confused me before as well...

lheilmann · 2018-01-30T21:17:08Z

@deeps96 Oh I am sorry! I misunderstood the scope of this issue/PR. I actually checked out the correct branch, but was focusing on the wrong pages. We use a different naming, e.g. teams index page, teams show page, teams edit page, ...

bakoe · 2018-02-01T23:00:09Z

Should the kinds of sport (“Sportarten”) section really be displayed if the team has none assigned? (as it is the case for the team displayed in the screenshot)
Isn't there a colon : missing after “… folgende Sportarten”? (compared to the mockup from the user story Flexibus/#381/team page design #465)

Response 1

The colon is missing because of uniformity and cleaner design. @zhamanakov are you ok with that?
Is it a good idea to letting a team having no kinds of sport? I can fix this easily, but just a thought...

ANSWER: pls just hide the whole section, if there are no sports selected. DONE!

The kinds of sport (“Sportarten”) section could need some padding on the left and right sides

Response 1

What do you mean exactly?

Response by @bakoe

Sorry—I have posted the wrong screenshot for the problem I described. However, the issue is rather unimportant: When there is a very long (and thus multi-line) text in the kinds of sport (“Sportarten”) section, the text has very little space (CSS: padding) to the left and right ends of the section.

The margin between the Select all and Select none button seems a bit small on tablet and desktop layouts

Response 1

@zhamanakov Is this important? If yes, how much margin do you want?

ANSWER: min 20px margin between buttons is important DONE

The Select none button is neither spaced in the same way as in the tablet/desktop layout nor right-aligned in the phone layout

Response 1

Will fix DONE

The Select all and Select none buttons should not be rendered when there are no checkboxes rendered

Response 1

Will fix that. But just for interest: When is this the case?

Response by @bakoe

Thanks! This situation is the case whenever you look at the team page of a (public) team you are not a member of.

DONE

The font sizes of the different button groups are considerably different from each other – in the mockup from the user story Flexibus/#381/team page design #465 they all look pretty much the same

Response 1

Will fix DONE

bakoe · 2018-02-01T23:02:41Z

@deeps96 Is the design of the “Invite users by e-mail” in the scope of this issue as well?

bakoe · 2018-02-01T23:08:08Z

The hover font color of the “Leave team” button has almost no contrast to the background – maybe use something lighter than black? However, white is already “reserved” for the non-hovered button text. Maybe a light blue or something like that for the hover state would be better? cc @zhamanakov

ANSWER: light blue for hover will be ok! DONE

bakoe

I just skimmed the code changes since they contain a lot of HTML/CSS stuff for which – to my mind – always many “correct” solutions exist. What I looked into seemed very good. 👍

More intensively, I tested how the re-designed page looks and behaves on Chrome and Safari on macOS. Fortunately, I couldn't find any big bugs and only noticed some minor flaws as documented in the PR's comments section.

niconomaa · 2018-02-02T07:52:32Z

@bakoe to your q whether the email invitiation modal is part of the intended redesign: #381 does not seem to specify that explicitly, even though i'd personally find it bizarre to have this clearly unfinished element on the otherwise so nearly designed page.

Response 1

You are right - it was out of scrope for this story. Maybe it will get an own user story during the Kanban-week? @zhamanakov

ANSWER: It is ok.

@deeps96 even if the invitation part is out of scope for this issue, look at what happens to the top of the page after inviting a user to the team

ANSWER: notification re-design is already in progress in #501

JakobEdding · 2018-02-02T07:54:00Z

@tomkellog #501 addresses the second issue described by you, it's out of scope for this ticket.

niconomaa · 2018-02-02T07:58:04Z

could there be anything done about the persistent, rectangular highlighting of buttons after clicking on them?

Response 1

I think the easiest approach would be, to remove the blue border of this selection completly. @zhamanakov are you ok with that?

ANSWER: yes, just remove the blue border is ok. DONE

niconomaa · 2018-02-02T08:06:24Z

app/assets/stylesheets/teams.css

-  content: "*";
-  vertical-align: 0.5em;
-  font-size: 0.75em;
-  font-weight: normal;


the css you removed here affected the edit team page, adding an asterisk after required fields, as specified in #218.
please add again!

deeps96 · 2018-02-02T11:56:32Z

I wrote some answers into the comments. Waiting for @zhamanakov to reply - will fix everything in one go afterwards.
Also waiting for @bakoe to clarify some things.

…pi-swt2/sport-portal into flexibus/#381/team-page-design

deeps96 · 2018-02-03T14:58:29Z

@tomkellog @bakoe @zhamanakov I fixed all things mentioned. Please recheck!

bakoe · 2018-02-04T10:57:58Z

app/assets/stylesheets/teams.css

+}
+
+.genericButton, .genericButton:hover, .genericButton:focus {
+    outline: none !important;


To my mind, removing the :focus-outline property without adding another visual indication for focused elements is quite an anti-pattern since it reduces the accessibility of the website significantly. See http://www.outlinenone.com for further explanation.

Currently, the “Select all”, “Select none”, “Edit” and “Delete” buttons have a :focus state that looks exactly the same as the non-:focus state. You can inspect this e. g. by Tab-navigating (using the Tab key on you keyboard) over the Team page or by using the Chrome Developer Tools' “Force element state” panel in the Elements tab:

@deeps96 Please make the :focus states of the buttons used on the Team page distinguishable from the normal inactive state. A simple fast solution would be to extend the existing :hover property changes you introduced to changing not only the :hover state, but also the :focus states (e. g. by lightening up the buttons' background colors).

bakoe

@deeps96 Thanks for fixing the issues I mentioned! I took another look and can confirm that all the issues are fixed now.

However, I have a minor complaint about the :focus states of some buttons being indistinguishable from the non-focused standard state (see my comment above). Maybe you can talk back to you SM/PO about the importance of accessibility on the page and decide whether you're going to fix this or not.

Response 1

@zhamanakov Whats your opinion?
I would be happy to merge this, as soon as @tomkellog approves that the requested changes from his review has been implemeneted.

JakobEdding · 2018-02-04T16:23:34Z

I think @zhamanakov needs to decide on the :focus issue as it's a matter of accessibility and therefore product requirements. Personally, I can understand both the notion of a clean design as well as that of accessibility and supporting different methods of navigating a webpage. Unfortunately, the PO notes on non-functional requirements don't give any input on this either.

bakoe · 2018-02-05T14:08:19Z

@jak-ing @deeps96 @zhamanakov

Have you thought about the issue I mentioned in the user story?

#381 (comment)

While reviewing the PR, I noticed that there is no visual indication anymore about whether a team member is a team owner or not. Before the redesign, the user could somehow guess this based on the enabled/disabled state of the “Add ownership” and “Remove ownership” buttons – at least, if the user was the team owner.

Is it intended that there is absolutely no visual indication anymore showing which team member is a team owner?

Response 1

Still waiting for @zhamanakov response.

…pi-swt2/sport-portal into flexibus/#381/team-page-design

…lexibus/#381/team-page-design # Conflicts: # app/assets/stylesheets/teams.css # app/views/teams/show.html.erb

…ect as hovering. #381

deeps96 added 26 commits January 18, 2018 20:08

Created layout for team profile. #381

71aac54

Added kind of sports section. #381

b886773

Started to implement participants section. #381

3a59464

Completed participants info. Checkbox still missing. #381

325328d

Added select all/ select none buttons. #381

00e965c

Fixed participants listing. #381

6226ba7

Refactored javascript. #381

d0ea92c

Completed participants. (Actions for selected participants still miss…

f898268

…ing -> waiting for ticket #338 to be successfully completed. #381

Added last section with buttons to edit or delete a team. #381

e7e5f21

Optimized sections for mobile. #381

be4d6f4

Fixed behavior of team profile background. #381

4d4dfb3

Show delete membership button when user is member of team and signed …

c1180d4

…in, only. #381

Fixed bug as described in #396.

1e44887

Work in progress / help wanted for actions that get applied on (multi…

041807d

…ple) selected participants. #381

Remove WiP for now in order to continue work on mobile version. #381

b795376

Updated mobile optimizations according to most recent mock up. #381

62b2a6d

Fixed some tests for #381.

616c8e4

Added button for sending multiple emails. #381

638c0d7

Added buttons for multiple actions. Removed one view test, since we d…

1cb79f6

…ont have that button anymore. #381

Merge branch 'dev' of https://github.com/hpi-swt2/sport-portal into f…

02aa794

…lexibus/#381/team-page-design

Applied some mobile optimizations and change requests from PO. #381

afd3a3a

Fixed an weird bug, when <%= render :partial => 'invite_user_by_email…

b62e41d

…_modal' %> was before form tag. #381

Fixed avatars not being circle shaped. #381

8f5db7e

Merge branches 'dev' and 'flexibus/#381/team-page-design' of https://…

1ffd7de

…github.com/hpi-swt2/sport-portal into flexibus/#381/team-page-design

Added hover effect for delete and edit button. #381

17033d2

Rearrange "multipleAction" - buttons for tablets (now using 2x2 grid). …

5eb08f5

…#381

ghost assigned deeps96 Jan 29, 2018

ghost added the review label Jan 29, 2018

deeps96 requested review from a team and bakoe January 29, 2018 21:49

Leonardo Hübscher and others added 2 commits January 31, 2018 17:25

Merge branch 'dev' into flexibus/#381/team-page-design

e931323

Merge branch 'dev' into flexibus/#381/team-page-design

dc1bf7a

bakoe reviewed Feb 1, 2018

View reviewed changes

niconomaa requested changes Feb 2, 2018

View reviewed changes

deeps96 added 2 commits February 3, 2018 15:52

Fixed issues from PR. #381

dbf7753

Merge branch 'flexibus/#381/team-page-design' of https://github.com/h…

5309239

…pi-swt2/sport-portal into flexibus/#381/team-page-design

Merge branch 'dev' into flexibus/#381/team-page-design

9617fd0

bakoe reviewed Feb 4, 2018

View reviewed changes

Merge branch 'dev' into flexibus/#381/team-page-design

0c041de

bakoe approved these changes Feb 4, 2018

View reviewed changes

niconomaa approved these changes Feb 4, 2018

View reviewed changes

deeps96 added 5 commits February 5, 2018 20:00

Added captain badge. #381

17ba080

Merge branch 'flexibus/#381/team-page-design' of https://github.com/h…

c2b0a58

…pi-swt2/sport-portal into flexibus/#381/team-page-design

Merge branch 'dev' of https://github.com/hpi-swt2/sport-portal into f…

28601c5

…lexibus/#381/team-page-design # Conflicts: # app/assets/stylesheets/teams.css # app/views/teams/show.html.erb

Changing the behaviour of focussing buttons - it now has the same eff…

1d90907

…ect as hovering. #381

Fixed failing test. #381

e035ded

deeps96 merged commit d79ed0e into dev Feb 5, 2018

ghost removed the review label Feb 5, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Flexibus/#381/team page design #465

Flexibus/#381/team page design #465

deeps96 commented Jan 29, 2018 •

edited by JakobEdding

Loading

JakobEdding commented Jan 30, 2018 •

edited

Loading

lheilmann commented Jan 30, 2018

bakoe commented Feb 1, 2018 •

edited

Loading

bakoe commented Feb 1, 2018

bakoe commented Feb 1, 2018 •

edited by deeps96

Loading

bakoe left a comment

niconomaa commented Feb 2, 2018 •

edited by zhamanakov

Loading

JakobEdding commented Feb 2, 2018 •

edited

Loading

niconomaa commented Feb 2, 2018 •

edited by deeps96

Loading

niconomaa Feb 2, 2018

deeps96 Feb 2, 2018

deeps96 Feb 3, 2018

deeps96 commented Feb 2, 2018 •

edited

Loading

deeps96 commented Feb 3, 2018

bakoe Feb 4, 2018

bakoe left a comment •

edited by deeps96

Loading

JakobEdding commented Feb 4, 2018

bakoe commented Feb 5, 2018 •

edited by deeps96

Loading

Flexibus/#381/team page design #465

Flexibus/#381/team page design #465

Conversation

deeps96 commented Jan 29, 2018 • edited by JakobEdding Loading

JakobEdding commented Jan 30, 2018 • edited Loading

lheilmann commented Jan 30, 2018

bakoe commented Feb 1, 2018 • edited Loading

Response 1

Response 1

Response by @bakoe

Response 1

Response 1

Response 1

Response by @bakoe

DONE

Response 1

bakoe commented Feb 1, 2018

bakoe commented Feb 1, 2018 • edited by deeps96 Loading

bakoe left a comment

Choose a reason for hiding this comment

niconomaa commented Feb 2, 2018 • edited by zhamanakov Loading

Response 1

JakobEdding commented Feb 2, 2018 • edited Loading

niconomaa commented Feb 2, 2018 • edited by deeps96 Loading

Response 1

niconomaa Feb 2, 2018

Choose a reason for hiding this comment

deeps96 Feb 2, 2018

Choose a reason for hiding this comment

deeps96 Feb 3, 2018

Choose a reason for hiding this comment

deeps96 commented Feb 2, 2018 • edited Loading

deeps96 commented Feb 3, 2018

bakoe Feb 4, 2018

Choose a reason for hiding this comment

bakoe left a comment • edited by deeps96 Loading

Choose a reason for hiding this comment

Response 1

JakobEdding commented Feb 4, 2018

bakoe commented Feb 5, 2018 • edited by deeps96 Loading

Response 1

deeps96 commented Jan 29, 2018 •

edited by JakobEdding

Loading

JakobEdding commented Jan 30, 2018 •

edited

Loading

bakoe commented Feb 1, 2018 •

edited

Loading

bakoe commented Feb 1, 2018 •

edited by deeps96

Loading

niconomaa commented Feb 2, 2018 •

edited by zhamanakov

Loading

JakobEdding commented Feb 2, 2018 •

edited

Loading

niconomaa commented Feb 2, 2018 •

edited by deeps96

Loading

deeps96 commented Feb 2, 2018 •

edited

Loading

bakoe left a comment •

edited by deeps96

Loading

bakoe commented Feb 5, 2018 •

edited by deeps96

Loading