Add fullscreen mode for view projects

Author: kerwin612

templates/repo/projects/view.tmpl

@@ -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>

web_src/css/features/projects.css

@@ -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;
+}

web_src/js/features/repo-projects.ts

@@ -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;