Align right panel with welcome title #2229
Conversation
There was a problem hiding this comment.
Hi @jedkohjk, thanks for working on this.
In issue #2127, the 'report title' we refer to is the custom title specified by the user for the top of the left panel, which you can specify using this: https://reposense.org/ug/customizingReports.html#add-a-title. Please use an H1 report title for testing.
Consequently, we would like the right panel's 1. Welcome text, 2. 'Code Panel', and 3. 'Commit Panel' to be top-aligned with the left panel's Report Title. This means the right panel headings will move upwards and will also allow for lesser scrolling.
Please also ensure that the CI passes after you make your changes. Thank you!
frontend/src/styles/panels.scss
Outdated
| @@ -2,7 +2,7 @@ | |||
| @import 'z-indices'; | |||
|
|
|||
| .panel-padding { | |||
| padding: 2rem 1.5rem 2rem 2.2rem; | |||
| padding: 0 0 2rem 2.2rem; | |||
There was a problem hiding this comment.
I think we can keep the right padding?
| padding: 0 0 2rem 2.2rem; | |
| padding: 0 1.5rem 2rem 2.2rem; |
| v-on:click="toggleAllFileActiveProperty(true)" | ||
| ) show all file details | ||
| a(v-if="activeFilesCount > 0", v-on:click="toggleAllFileActiveProperty(false)") hide all file details | ||
| h2 |
There was a problem hiding this comment.
Was this h2 added to provide padding or for semantic reasons? Because the .toolbar--multiline wouldn't be a heading right?
There was a problem hiding this comment.
Without the h2, the Code Panel will appear at the top of the screen, above the title.
If .toolbar--multiline is not included in h2, it appears on the line below instead.
The expected behaviour is as follows:
There was a problem hiding this comment.
It may be possible to align by adding top padding for these elements instead of making them both h2, but this works well enough.
Resolves #2127
Proposed commit message
Align panel titles
Other information
Before:
After: