1
1
mirror of https://github.com/go-gitea/gitea synced 2025-07-03 09:07:19 +00:00

Add fullscreen mode as a more efficient operation way to view projects (#34081)

Maybe fix #33482, maybe fix #34015

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Kerwin Bryant
2025-04-23 13:42:22 +08:00
committed by GitHub
parent 04fab1818b
commit c2c04ffff7
9 changed files with 119 additions and 57 deletions

View File

@ -1,31 +1,34 @@
.board {
#project-board {
display: flex;
align-items: stretch;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: clip;
align-items: stretch;
overflow: auto;
margin: 0 0.5em;
max-height: calc(100vh - 120px);
}
.project-header {
padding: 0.5em 0;
overflow-x: auto; /* in fullscreen mode, the position is fixed, so we can't use "flex wrap" which would change the height */
}
.project-header h2 {
white-space: nowrap;
margin: 0;
}
.project-column {
background-color: var(--color-project-column-bg) !important;
border: 1px solid var(--color-secondary) !important;
border-radius: var(--border-radius);
margin: 0 0.5rem !important;
padding: 0.5rem !important;
width: 320px;
height: initial;
min-height: max(calc(100vh - 400px), 300px);
flex: 0 0 auto;
overflow: visible;
display: flex;
flex-direction: column;
cursor: default;
}
.project-column .issue-card {
color: var(--color-text);
background-color: var(--color-project-column-bg);
border: 1px solid var(--color-secondary);
border-radius: var(--border-radius);
margin: 0 0.5rem;
padding: 0.5rem;
width: 320px;
overflow: visible;
}
.project-column-header {
@ -39,16 +42,15 @@
color: inherit;
}
.project-column > .cards {
.project-column > .ui.cards {
flex: 1;
display: flex;
align-content: baseline;
margin: 0 !important;
padding: 0 !important;
flex-wrap: nowrap !important;
flex-wrap: nowrap;
flex-direction: column;
overflow-x: clip;
overflow: clip auto;
gap: .25rem;
margin: 0;
padding: 0;
}
.project-column > .divider {
@ -98,3 +100,29 @@
.card-ghost * {
opacity: 0;
}
.fullscreen.projects-view .project-header {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
right: 0;
padding: 0.5em;
width: 100%;
max-width: 100%;
background-color: var(--color-body);
border-bottom: 1px solid var(--color-secondary);
}
/* Hide project-description in full-screen due to its variable height. No need to show it for better space use. */
.fullscreen.projects-view .project-description {
display: none;
}
.fullscreen.projects-view #project-board {
position: absolute;
top: 60px;
left: 0;
right: 0;
max-height: calc(100vh - 70px);
}

View File

@ -1,5 +1,6 @@
.ui.menu {
display: flex;
flex-shrink: 0;
margin: 1rem 0;
font-family: var(--fonts-regular);
font-weight: var(--font-weight-normal);
@ -643,6 +644,7 @@
display: inline-flex;
margin: 0;
vertical-align: middle;
flex-shrink: 0;
}
.ui.compact.vertical.menu {
display: inline-block;