nordic-dev.net/gitea
nordic-dev.net/gitea
2
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-04-15 05:37:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add fullscreen mode for view projects

Browse Source
This commit is contained in:
Kerwin Bryant 2025-03-31 03:19:10 +00:00
parent 2f43544c01
commit 4a2f3b4b53
3 changed files with 61 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
templates/repo/projects/view.tmpl
View File

@ -1,14 +1,15 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository projects view-project">
{{template "repo/header" .}}
<div class="ui container padded">
<div class="ui container padded projects-view-top">
<div class="flex-text-block tw-justify-end tw-mb-4">
<a class="ui small button toggle-fullscreen">Fullscreen</a>
<a class="ui small button" href="{{.RepoLink}}/labels">{{ctx.Locale.Tr "repo.labels"}}</a>
<a class="ui small button" href="{{.RepoLink}}/milestones">{{ctx.Locale.Tr "repo.milestones"}}</a>
<a class="ui small primary button" href="{{.RepoLink}}/issues/new/choose?project={{.Project.ID}}">{{ctx.Locale.Tr "repo.issues.new"}}</a>
</div>
</div>
<div class="ui container fluid padded">
<div class="ui container fluid padded projects-view-bottom">
{{template "projects/view" .}}
</div>
</div>

23
web_src/css/features/projects.css
View File

@ -98,3 +98,26 @@
.card-ghost * {
opacity: 0;
}
.is-fullscreen.projects-view-top,
.is-fullscreen.projects-view-bottom .ui.container {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
right: 0;
margin: 0 !important;
width: 100%;
max-width: 100%;
background-color: var(--color-body);
}
.is-fullscreen.projects-view-bottom .ui.container {
top: 36px;
}
.is-fullscreen #project-board {
position: absolute;
top: 120px;
left: 0;
}

35
web_src/js/features/repo-projects.ts
View File

@ -1,4 +1,5 @@
import {contrastColor} from '../utils/color.ts';
import {toggleClass, toggleElem} from '../utils/dom.ts';
import {createSortable} from '../modules/sortable.ts';
import {POST, request} from '../modules/fetch.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
@ -139,7 +140,41 @@ function initRepoProjectColumnEdit(writableProjectBoard: Element): void {
});
}
function initRepoProjectToggleFullScreen(): void {
const el = document.querySelector('.toggle-fullscreen');
el.addEventListener('click', () => {
const isFullScreen = el.getAttribute('data-fullscreen') === 'true';
// hide other elements
const headerEl = document.querySelector('#navbar');
const contentEl = document.querySelector('.page-content');
const footerEl = document.querySelector('.page-footer');
toggleElem(headerEl, isFullScreen);
toggleElem(contentEl, isFullScreen);
toggleElem(footerEl, isFullScreen);
el.innerHTML = isFullScreen ? 'Fullscreen' : 'Exit';
el.setAttribute('data-fullscreen', String(!isFullScreen));
toggleClass(el, 'is-fullscreen');
const fullScreenEl1 = document.querySelector('.projects-view-top');
const fullScreenEl2 = document.querySelector('.projects-view-bottom');
const outerEl = document.querySelector('.full.height');
toggleClass(fullScreenEl1, 'is-fullscreen');
toggleClass(fullScreenEl2, 'is-fullscreen');
if (isFullScreen) {
contentEl.append(fullScreenEl1);
contentEl.append(fullScreenEl2);
} else {
outerEl.append(fullScreenEl1);
outerEl.append(fullScreenEl2);
}
});
}
export function initRepoProject(): void {
initRepoProjectToggleFullScreen();
const writableProjectBoard = document.querySelector('#project-board[data-project-borad-writable="true"]');
if (!writableProjectBoard) return;