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

Fix styling for PR merge section when no checks #11609

Merged
merged 6 commits into from
May 25, 2020
Merged

Fix styling for PR merge section when no checks #11609

merged 6 commits into from
May 25, 2020

Conversation

CirnoT
Copy link
Contributor

@CirnoT CirnoT commented May 24, 2020 •
edited
Loading

Makes styling consistent between two cases. Also removed unnecessary double border.

Before:
chrome_2020-05-24_19-53-37
chrome_2020-05-24_19-53-25

After:
chrome_2020-05-25_01-09-30
chrome_2020-05-25_01-10-04

@CirnoT
Copy link
Contributor Author

CirnoT commented May 24, 2020

Unsure which style we want to keep. I opted to use the style from checks variant as it seems the styling applied to no-check variant was accidental due to .header part.

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label May 24, 2020
@silverwind
Copy link
Member

Very minor but is is possible to have the inner border stretch the whole width of the box?

@CirnoT
Copy link
Contributor Author

CirnoT commented May 24, 2020

The line above merge button?

@silverwind
Copy link
Member

Yes that one. It should not have margins on the side.

@CirnoT
Copy link
Contributor Author

CirnoT commented May 24, 2020

Done.
chrome_2020-05-24_22-56-00

silverwind
silverwind reviewed May 24, 2020
View reviewed changes
web_src/less/_repository.less Outdated
}

&.no-header {
#avatar-arrow;
Copy link
Member

@silverwind silverwind May 24, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

What does this do? Copy the declarations from the other selector? Maybe we don't wanna use too fancy syntax like that because it could be confusing 😉.

Copy link
Contributor Author

@CirnoT CirnoT May 24, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

It's detached ruleset, I don't know why it was used initially but is used everywhere across this file, presumably to remove code duplication. I just duplicated how it's used everywhere else.

It imports ;:before and ::after rules for showing arrow.

Copy link
Member

Choose a reason for hiding this comment

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

I see, the fact that these use # make them look like selectors. We should change them (in another PR) to use the @ prefix so it's clearer, like the less docs do:

http://lesscss.org/features/#detached-rulesets-feature

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Agreed

@zeripath
Copy link
Contributor

zeripath commented May 24, 2020 •
edited
Loading

I think I preferred the additional padding around the key. I don't understand why it disappeared and I think it looks crammed without it

@CirnoT
Copy link
Contributor Author

CirnoT commented May 24, 2020

@zeripath It was present only when there were no checks on accident, due to .header being applied to whole box, which inherited the padding from Semantic styling.

@CirnoT
Copy link
Contributor Author

CirnoT commented May 24, 2020 •
edited
Loading

And it wasn't really around key, it was around every element, the example doesn't show it but if there was additional line it would had padding too.

I can bring the padding back explicitly, however it might make the box quite large when there are 3 or 4 messages.

@silverwind
Copy link
Member

Maybe just add padding between siblings? E.g. div + div {padding-top: .5rem}.

@CirnoT
Copy link
Contributor Author

CirnoT commented May 24, 2020

Added .5rem padding between items, looks better now.

chrome_2020-05-25_01-08-49

@CirnoT
Copy link
Contributor Author

CirnoT commented May 24, 2020

Updated screenshots in first post for future reference.

@GiteaBot GiteaBot 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 May 24, 2020
@GiteaBot GiteaBot 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 May 24, 2020
@lafriks lafriks added the topic/ui Change the appearance of the Gitea UI label May 24, 2020
@lafriks lafriks added this to the 1.13.0 milestone May 24, 2020
@zeripath
Copy link
Contributor

make lg-tm work

@zeripath zeripath merged commit 75739d0 into go-gitea:master May 25, 2020
@zeripath
Copy link
Contributor

please send backport

@CirnoT CirnoT deleted the merge-section branch May 25, 2020 19:17
CirnoT added a commit to CirnoT/gitea that referenced this pull request May 25, 2020
@CirnoT
Fix styling for PR merge section when no checks (go-gitea#11609)
0b778cc 
Makes styling consistent between two cases. Also removed unnecessary double border.
@CirnoT CirnoT mentioned this pull request May 25, 2020
Merged
techknowlogick pushed a commit that referenced this pull request May 26, 2020
@CirnoT
Backport various styling fixes (#11619)
5331af1 
* Fix inconsistent font size for markdown preview on new PR view (#11565)

We use same method for new issue form and issue view, but was missing from new PR view making it one place where markdown preview is inconsistent in font size.

(cherry picked from commit 04afd9d)

* Fix margin on PR form (#11566)

(cherry picked from commit f2a0be1)

* Fix margin for attached top header on code review (#11571)

Introduced naively by #11463

The margin was being applied too widely.

(cherry picked from commit e682a92)

* Fix styling for PR merge section when no checks (#11609)

Makes styling consistent between two cases. Also removed unnecessary double border.

* Normalize avatar radius
@techknowlogick techknowlogick added the backport/done All backports for this PR have been created label May 26, 2020
ydelafollye pushed a commit to ydelafollye/gitea that referenced this pull request Jul 31, 2020
@CirnoT
Fix styling for PR merge section when no checks (go-gitea#11609)
cae8954 
Makes styling consistent between two cases. Also removed unnecessary double border.
@go-gitea go-gitea locked and limited conversation to collaborators Nov 24, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@lafriks lafriks lafriks approved these changes

@silverwind silverwind silverwind approved these changes

Assignees
No one assigned
Labels
backport/done All backports for this PR have been created lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. topic/ui Change the appearance of the Gitea UI
Projects
None yet
Milestone
1.13.0
Development

Successfully merging this pull request may close these issues.
6 participants
@CirnoT @silverwind @zeripath @lafriks @techknowlogick @GiteaBot