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

[#1005,#1010] Code Panel: match font with GitHub and break lines when overflow #1008

Merged
merged 23 commits into from
Mar 9, 2020
Merged

[#1005,#1010] Code Panel: match font with GitHub and break lines when overflow #1008

merged 23 commits into from
Mar 9, 2020

Conversation

jamessspanggg
Copy link
Contributor

@jamessspanggg jamessspanggg commented Jan 19, 2020 •
edited
Loading

Fixes #1005 and #1010

When the file path or lines of code overflows, it takes up a 
large amount of empty space in order to accomodate to 
it's length. The font size of the code and file path is also 
rather big and takes up much space.

Let's set the file path and lines of code to break into next 
lines when it overflows. Also, let's set the font-family 
and font-size of the code to match with GitHub.
  • break file path or lines of code to next line when overflow
  • match font family and font size with GitHub's
  • decrease the size of the file path
  • match the font sizes of group title in summary panel and file title in code panel
  • match the font styles and sizes between code panel and commit panel

@jamessspanggg jamessspanggg requested a review from a team January 19, 2020 11:34
@Tejas2805
Copy link
Contributor

Since this is similar to #1010 can fix that also in this PR as well ?

@jamessspanggg jamessspanggg changed the title [#1005] Code Panel: Set file path to break into next lines when overflows [#1005] Code Panel: Set file path and code to break into next lines when overflows Jan 19, 2020
@jamessspanggg jamessspanggg changed the title [#1005] Code Panel: Set file path and code to break into next lines when overflows [#1005 & #1010] Code Panel: Set file path and code to break into next lines when overflows Jan 19, 2020
@jamessspanggg jamessspanggg changed the title [#1005 & #1010] Code Panel: Set file path and code to break into next lines when overflows [#1005 & #1010] Code Panel: modify UI Jan 20, 2020
@fzdy1914
Copy link
Member

Break word seems a little bit weird for text.

@jamessspanggg
Copy link
Contributor Author

Break word seems a little bit weird for text.

You mean for the path or the code?

For the path, since the path will be a continuous text: e.g. src/webapp/util.js, I think it is fine to break it in terms of each character.

As for the code, I have modified the code to break in terms of each word instead of character.

@fzdy1914
Copy link
Member

As for the code, I have modified the code to break in terms of each word instead of character.

Yes, that's what I mean.

@Tejas2805
Copy link
Contributor

@jamessspanggg the Prof wanted consistency between the Code Panel and Commit Panel. As suggested by him, can you make the font sizes between the two views same too?

@jamessspanggg
Copy link
Contributor Author

@Tejas2805 may I ask specifically which fonts should be standardised?

@Tejas2805
Copy link
Contributor

@Tejas2805 may I ask specifically which fonts should be standardised?

Group title and file title

@jamessspanggg
Copy link
Contributor Author

Group title and file title

Ok done.

@Tejas2805
Copy link
Contributor

@jamessspanggg Though all CSS is the same, the fonts look different in Ui. What do you think?

@jamessspanggg
Copy link
Contributor Author

@jamessspanggg Though all CSS is the same, the fonts look different in Ui. What do you think?

Do you mean the font for the segments of code? Prof asked me to follow the font-family and font-size of GitHub's code.

@Tejas2805
Copy link
Contributor

@jamessspanggg Is this PR ready?

@jamessspanggg
Merge branch 'master' into 1005-long-filepath
d49186b 
# Conflicts:
#	frontend/src/static/css/style.scss
#	frontend/src/tabs/zoom.pug
@jamessspanggg
Merge branch 'master' into 1005-long-filepath
7d8be49 
# Conflicts:
#	frontend/src/static/css/style.scss
@jamessspanggg
Merge branch 'master' into 1005-long-filepath
6a9d922 
# Conflicts:
#	frontend/src/static/css/v_zoom.scss
#	frontend/src/tabs/zoom.pug
@jamessspanggg
Revert changes in zoom
9eea229
@jamessspanggg
Revert changes in zoom
f0ef7fb
@jamessspanggg
Copy link
Contributor Author

Reverted the changes in zoom. Ready for review.

@jamessspanggg jamessspanggg requested review from eugenepeh and a team March 4, 2020 15:50
@jinyao-lee jinyao-lee requested a review from damithc March 6, 2020 11:59
@jinyao-lee
Copy link
Contributor

@damithc your thoughts on the UI changes?

@damithc
Copy link
Collaborator

damithc commented Mar 6, 2020

@damithc your thoughts on the UI changes?

Looks fine to me 👍

fzdy1914
fzdy1914 requested changes Mar 9, 2020
View reviewed changes
Copy link
Member

@fzdy1914 fzdy1914 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. The title of PR can be improved a bit.
  2. Since the font of the title is smaller, you may also downscale the size of the icon so it matches?

@jamessspanggg jamessspanggg changed the title [#1005,#1010] Code Panel: modify UI [#1005,#1010] Code Panel: match font with GitHub and break lines when overflow Mar 9, 2020
@fzdy1914 fzdy1914 merged commit 145a1b4 into reposense:master Mar 9, 2020
@jamessspanggg jamessspanggg mentioned this pull request Mar 9, 2020
Closed
@Tejas2805 Tejas2805 mentioned this pull request Mar 12, 2020
Closed
Tejas2805 added a commit to Tejas2805/RepoSense that referenced this pull request Mar 13, 2020
@Tejas2805
Merge branch 'refactor-panels-css' of https://github.com/Tejas2805/Re…
af4f816 
…poSense into refactor-panels-css

* 'refactor-panels-css' of https://github.com/Tejas2805/RepoSense:
  [reposense#1109] Config.json: include active author and pug file format (reposense#1123)
  [reposense#1004] Make Code Panel consistent with Chart Panel (reposense#1080)
  [reposense#1005, reposense#1010] Code Panel: match font with GitHub and break lines when overflow (reposense#1008)
  [reposense#1076] Author: add a `isIgnoringFile` method (reposense#1085)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Tejas2805 Tejas2805 Tejas2805 approved these changes

@jinyao-lee jinyao-lee jinyao-lee approved these changes

@fzdy1914 fzdy1914 fzdy1914 approved these changes

@damithc damithc damithc approved these changes

@eugenepeh eugenepeh Awaiting requested review from eugenepeh

Assignees
No one assigned
Labels
s.ToMerge
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Code Panel: Large empty space when author has edited a file with a long filepath
6 participants
@jamessspanggg @Tejas2805 @fzdy1914 @eugenepeh @jinyao-lee @damithc