IntenseWebs/gitea
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix review UI (#27322)

Browse Source 
Close #26730


1. The `diff-detail-box` was abused, it shouldn't be used for
"DiffFileList/DiffFileTree".
2. Fix the sticky position for various screens.



![image](https://github.com/go-gitea/gitea/assets/2114189/558a5c06-c94c-4e5c-8395-d38473dd21c2)


![image](https://github.com/go-gitea/gitea/assets/2114189/3390fb0e-7dc7-457f-bd0c-398fdb6d24c0)


![image](https://github.com/go-gitea/gitea/assets/2114189/d19dd350-aecf-4909-8ef9-73b09d94560e)
This commit is contained in:
wxiaoguang 2023-09-28 18:00:26 +08:00 committed by GitHub
parent 72c68177ab
commit 1f00bc44b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/repo/diff/box.tmpl
View File

@ -1,5 +1,5 @@
<div> <div>
<div class="diff-detail-box diff-box sticky gt-df gt-sb gt-ac"> <div class="diff-detail-box diff-box">
<div class="gt-df gt-ac gt-fw"> <div class="gt-df gt-ac gt-fw">
{{if not .DiffNotAvailable}} {{if not .DiffNotAvailable}}
<button class="diff-toggle-file-tree-button gt-df gt-ac not-mobile" data-show-text="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}"> <button class="diff-toggle-file-tree-button gt-df gt-ac not-mobile" data-show-text="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}">

23
web_src/css/repo.css
View File

@ -1502,14 +1502,21 @@
} }
.repository .diff-detail-box { .repository .diff-detail-box {
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 8;
padding: 7px 0; padding: 7px 0;
height: 44px; /* this height should match sticky-2nd-row */
background: var(--color-body); background: var(--color-body);
} }
@media (max-width: 991.98px) { @media (max-width: 991.98px) {
.repository .diff-detail-box { .repository .diff-detail-box {
flex-direction: row; flex-direction: row;
align-items: flex-start; height: 77px; /* this height should match sticky-2nd-row */
} }
} }
@ -1518,18 +1525,6 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
.repository .diff-detail-box.sticky {
position: sticky;
top: 0;
z-index: 8;
border-bottom: none;
padding-left: 5px;
padding-right: 5px;
margin-left: -4px;
margin-right: -4px;
}
.repository .diff-detail-box .diff-detail-stats strong { .repository .diff-detail-box .diff-detail-stats strong {
margin-left: 0.25rem; margin-left: 0.25rem;
margin-right: 0.25rem; margin-right: 0.25rem;
@ -2830,7 +2825,7 @@ tbody.commit-list {
.ui.attached.header.diff-file-header.sticky-2nd-row { .ui.attached.header.diff-file-header.sticky-2nd-row {
position: sticky; position: sticky;
top: 47px; /* match .repository .diff-detail-box */ top: 44px; /* match .repository .diff-detail-box */
z-index: 7; z-index: 7;
} }

2
web_src/js/components/DiffFileList.vue
View File

@ -36,7 +36,7 @@ export default {
}; };
</script> </script>
<template> <template>
<ol class="diff-detail-box diff-stats gt-m-0" ref="root" v-if="store.fileListIsVisible"> <ol class="diff-stats gt-m-0" ref="root" v-if="store.fileListIsVisible">
<li v-for="file in store.files" :key="file.NameHash"> <li v-for="file in store.files" :key="file.NameHash">
<div class="gt-font-semibold gt-df gt-ac pull-right"> <div class="gt-font-semibold gt-df gt-ac pull-right">
<span v-if="file.IsBin" class="gt-ml-1 gt-mr-3">{{ store.binaryFileMessage }}</span> <span v-if="file.IsBin" class="gt-ml-1 gt-mr-3">{{ store.binaryFileMessage }}</span>

2
web_src/js/components/DiffFileTree.vue
View File

@ -126,7 +126,7 @@ export default {
}; };
</script> </script>
<template> <template>
<div v-if="store.fileTreeIsVisible" class="gt-mr-3 gt-mt-3 diff-detail-box"> <div v-if="store.fileTreeIsVisible" class="gt-mr-3">
<!-- only render the tree if we're visible. in many cases this is something that doesn't change very often --> <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
<DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/> <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/>
<div v-if="store.isIncomplete" class="gt-pt-2"> <div v-if="store.isIncomplete" class="gt-pt-2">