1
0
mirror of https://github.com/go-gitea/gitea.git synced 2024-11-04 08:17:24 -05:00

Fix the full-height problem for all pages (#22905)

Really fix #22883, close #22901

I made a mistake that the global styles in RepoActionView.vue could
still pollute global styles (I forgot that the code of this component is
still loaded on every page, instead of loaded on demand)

This PR makes a complete fix: only change the page's full-height
behavior if the component is used.

Screenshot after the fix:

<details>

![image](https://user-images.githubusercontent.com/2114189/218664776-0dbcd469-2c36-4e17-972f-e44fa3b81ba6.png)

</details>

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
wxiaoguang 2023-02-14 21:04:22 +08:00 committed by GitHub
parent d306ab2b8f
commit e314c9e866
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -268,6 +268,11 @@ export function initRepositoryActionView() {
const el = document.getElementById('repo-action-view'); const el = document.getElementById('repo-action-view');
if (!el) return; if (!el) return;
// TODO: the parent element's full height doesn't work well now,
// but we can not pollute the global style at the moment, only fix the height problem for pages with this component
const parentFullHeight = document.querySelector('body > div.full.height');
if (parentFullHeight) parentFullHeight.style.paddingBottom = '0';
const view = createApp(sfc, { const view = createApp(sfc, {
runIndex: el.getAttribute('data-run-index'), runIndex: el.getAttribute('data-run-index'),
jobIndex: el.getAttribute('data-job-index'), jobIndex: el.getAttribute('data-job-index'),
@ -412,11 +417,6 @@ export function initRepositoryActionView() {
<style lang="less"> <style lang="less">
// some elements are not managed by vue, so we need to use global style // some elements are not managed by vue, so we need to use global style
// TODO: the parent element's full height doesn't work well now
body > div.full.height {
padding-bottom: 0;
}
.job-status-rotate { .job-status-rotate {
animation: job-status-rotate-keyframes 1s linear infinite; animation: job-status-rotate-keyframes 1s linear infinite;
} }