Fixed name alignment

[n-bernat]

Google Code-in task: Fix the text adjustment on team page.

Fix the text of team member name in our team page so that it could adjust if it goes too long.

Changes proposed in this pull request:

• Added the "padding-left" property to team member's name

• Link to live demo: http://pr-227-evalai.surge.sh

• Screenshot with visible changes:

• People with short names are not affected by this change:

[codecov-io]

Codecov Report

Merging #227 into master will decrease coverage by 0.03%. The diff coverage is 50%.

@@            Coverage Diff            @@
##           master    #227      +/-   ##
=========================================
- Coverage   51.73%   51.7%   -0.04%     
=========================================
  Files          66      66              
  Lines        3659    3667       +8     
  Branches      413     414       +1     
=========================================
+ Hits         1893    1896       +3     
- Misses       1671    1676       +5     
  Partials       95      95

Impacted Files	Coverage Δ
src/app/components/our-team/our-team.component.ts	58.49% <50%> (-3.74%)	:arrow_down:

Impacted Files	Coverage Δ
src/app/components/our-team/our-team.component.ts	58.49% <50%> (-3.74%)	:arrow_down:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update b03bdc4...8c6d8d3. Read the comment docs.

[n-bernat]

Made a PR, but this time I made changes that allowed me not to hardcode space between an image and name. I hope that's the expected solution.

[pushkalkatara]

@n-bernat Can you share example screenshots with some outlier names.

[n-bernat]

@n-bernat Can you share example screenshots with some outlier names.

• Full width
  • First card without changes
  • Second card without changes
  • Third card has name that won't fit in one line, so it's multiline

• Squeezed a little bit
  • First card without changes
  • Second card has role that won't fit in one line, so it's multiline
  • Third card has name that won't fit in one line, so it's multiline

[n-bernat]

I made an update with proposed changes. Since you didn't tell me how this tool-tip is supposed to look like, I improvised. If you want to change its look or position just tell me.

As you can see, after hovering over a truncated name there is a tool-tip above it. If name isn't truncated then nothing happens.

I am not sure if the way I did it is the best way to do it, so feedback will be appreciated.

When it comes to style, I used properties like -webkit-line-clamp or -webkit-box-orient and according to MDN and Can I use... it's supported in all major web browser (yes, with -webkit prefix in Firefox). To be 100% sure I checked it (Firefox version 71.0 on Windows 10) and everything works correctly.

Screenshots since gif's quality is really low:

[Sanji515]

@n-bernat I'm unable to see the truncated name, can you please check?

[Sanji515]

Also, name should align to right..... right? :smile:

[n-bernat]

@Sanji515 Could you tell me what web browser (and version) you use? I'm having trouble reproducing the issue

[Sanji515]

@Sanji515 Could you tell me what web browser (and version) you use? I'm having troubles with reproducing your issues

Hey @n-bernat I'm using Google chrome (Version 74.0.3729.157 (Official Build) (64-bit))

[n-bernat]

@Sanji515 Sorry for my question, but are you sure you have tested my changes basing on the latest version of this Pull Request? I downgraded my Chrome to your's version, downloaded the branch that I'm trying to merge (just to be sure that we have the same code) and made new docker containers and I still don't have any issues.

[Sanji515]

@n-bernat Yes, I'm on the latest version of this PR but still can't get it working. @lunayach Can you please test if it's working on your side?

[lunayach]

@Sanji515 @n-bernat, I don't think it's working properly. Orientation and truncation seem to be off,

[n-bernat]

@Sanji515 @lunayach I see, so it's a problem on my side. I'm going to look into it and check why does it occur