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.

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

add scroolbars to wide graphs. #608

Merged
merged 2 commits into from
Jan 22, 2017
Merged

add scroolbars to wide graphs. #608

merged 2 commits into from
Jan 22, 2017

Conversation

kjellkvinge
Copy link
Contributor

Ref #599

This will use all available space to display the graph.

@lunny lunny added this to the 1.1.0 milestone Jan 8, 2017
@lunny lunny added the type/enhancement An improvement of existing functionality label Jan 8, 2017
@lunny
Copy link
Member

lunny commented Jan 8, 2017

less file?

@tboerger tboerger added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Jan 8, 2017
@kjellkvinge
Copy link
Contributor Author

What do you mean? I just made som changes in the existing template, css and js for the graph.

@lunny
Copy link
Member

lunny commented Jan 8, 2017

Maybe you have to modify less file since you have modified css file.

@kjellkvinge
Copy link
Contributor Author

kjellkvinge commented Jan 8, 2017 via email

#rev-container {width:80%}
#rev-list {margin:0;padding:0 5px 0 0;width:80%}
#rev-container {width:100%}
#rev-list {margin:0;padding:0 5px 0 0;width:100%}
Copy link
Member

Choose a reason for hiding this comment

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

wouldn't padding: 0 5px 0 5px; min-width: 95% be better?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

did you try this locally. On my test, with the repo from the issue, it looks better using 100%:

screenshot from 2017-01-09 21-54-28

95%:

screenshot from 2017-01-09 21-54-22

(this was on chrome, around 900px wide)

what do you think?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

sorry. did not notice the 'min' part. min-width looks better :)

@@ -1,7 +1,7 @@
{{template "base/head" .}}
<div class="repository commits">
{{template "repo/header" .}}
<div class="ui container">
<div class="ui">
Copy link
Member

Choose a reason for hiding this comment

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

for something else (don't remember what ) I did a container.full which sets the width to "100%"

Copy link
Contributor Author

Choose a reason for hiding this comment

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

thats probably better :)

@kjellkvinge
Copy link
Contributor Author

for further improvements, it might be possible to make the graph more compact, but then We would have to change the lib graph.js, this should probably be done upstream for the lib.

It accepts one parameter for "unitSize", We now use default value, which is 20. But If we could set unitSize-x to 10 and unitSize-y to 20, the graph could be more compact and still have the same height. (the y value have to match the font-size used for the text.)

but, I am not sure how many parallel branches there is useful to display. Maybe there should be a limit?

@Bwko
Copy link
Member

Bwko commented Jan 9, 2017

@kjellkvinge Maybe you could add a horizontal scrollbar. Otherwise we'll keep running into the same problem.

@Bwko
Copy link
Member

Bwko commented Jan 11, 2017

LGTM

@tboerger tboerger added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Jan 11, 2017
@Bwko
Copy link
Member

Bwko commented Jan 12, 2017

@kjellkvinge Nitpicking: could reset the width to 80%? I personally think the width of 100% looks kinda ugly 😅

@kjellkvinge
Copy link
Contributor Author

@Bwko yes, this is difficult :)

you mean somethink like this:

-#git-graph-container {overflow-x:auto; width:100%}
+#git-graph-container {overflow-x:auto; width:80%; margin-left:10%}

This will bring more air on the sides, but it looks miss placed when you have a repo with only one, or a few branches in parallell.

it also depends on the screen size.

maybe we should keep the "ui container" unless there is more than 5 or 10 paralell branches?? any thoughts?

@Bwko
Copy link
Member

Bwko commented Jan 13, 2017

@kjellkvinge Thanks 👍 I agree it's hard to get it right. I've tried this solution but it still looks kinda weird. Maybe we should keep the width to 100% width and remove the .full class. Perhaps not the best solution but it prevents jumping of the page width.

@kjellkvinge
Copy link
Contributor Author

kjellkvinge commented Jan 13, 2017

ok, now trying a new approach. This was originally a PR for using full page width. Now it just adds scrollbars if the graph is to wide. This might solve both maintaining the same layout as the rest of the pages, and still usable even if there is a lot of parallel branches in the graph.

@Bwko
Copy link
Member

Bwko commented Jan 14, 2017

@kjellkvinge I find this to be the best solution thus far.
Does someone else have an opinion on this?

@kjellkvinge kjellkvinge changed the title Use full pagewidth to display graph add scroolbars to wide graphs. Jan 17, 2017
@kjellkvinge
Copy link
Contributor Author

Not to much opinions out there :) Maybe I can provide some screenshots, or a live demo somewhere, so people can test without without rebuilding?

@Bwko
Copy link
Member

Bwko commented Jan 18, 2017

@kjellkvinge Screenshots are good enough (I guess)

@lunny
Copy link
Member

lunny commented Jan 22, 2017

LGTM

@tboerger tboerger added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Jan 22, 2017
@lunny lunny merged commit f9a3aa8 into go-gitea:master Jan 22, 2017
@Bwko Bwko mentioned this pull request Jan 22, 2017
@go-gitea go-gitea locked and limited conversation to collaborators Nov 23, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. type/enhancement An improvement of existing functionality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants