Revize ce63b2ab

Removed ant layout and used css grid

Changed layouting technology and added main layout for all pages.

webapp/layouts/mainLayout.tsx

@@ -1 +1 @@
 import { LayoutProps } from '../components/types/layoutProps';
-import { Layout } from 'antd';
 import { UserNavBar } from '../components/navigation/userNavBar';
 import { AdminNavBar } from '../components/navigation/adminNavBar';
 import 'antd/dist/antd.css';
-
-const { Header, Content, Footer } = Layout;
+import styles from '/styles/mainLayout.module.scss';
 
 /**
  * Creates layout of main screens.
@@ -13 +11 @@
  */
 export function MainLayout(props: LayoutProps) {
     return (
-        <Layout>
-            <Header>
+        <div className={styles.layoutwrapper}>
+            <div className={styles.header}>
                 {/**
                  @todo: Select correct navigation bar
                  {user && <UserNavBar />}
                  {admin && <AdminNavBar />}
                 **/}
-            </Header>
-            <Content>
-                <main>{props.children}</main>
-            </Content>
-            <Footer></Footer>
-        </Layout>
+            </div>
+            <main className={styles.content}>{props.children}</main>
+            <div className={styles.footer}></div>
+        </div>
     );
 }

webapp/pages/annotation/index.tsx

@@ -1 @@
-import { Layout } from 'antd';
 import { AnnotationPanel } from '../../components/annotation/annotationPanel';
 import { DocumentAnnotationView } from '../../components/annotation/documentAnnotationView';
 import { TagPanel } from '../../components/annotation/tagPanel';
@@ -6 +5 @@
 import 'antd/dist/antd.css';
 import styles from '/styles/annotation.module.scss';
 
-const { Content, Sider } = Layout;
-
 /**
  * Creates an annotation screen.
  * @returns The annotation screen.
@@ -15 +12 @@
 function Annotation() {
     return (
         <MainLayout>
-            <Layout hasSider>
-                <Sider className={styles.leftSidePanel}>
+            <div className={styles.layoutwrapper}>
+                <div className={styles.tags}>
                     <TagPanel />
-                </Sider>
-                <Content className={styles.mainView}>
+                </div>
+                <div className={styles.document}>
                     <DocumentAnnotationView />
-                </Content>
-                <Sider className={styles.rightSidePanel}>
+                </div>
+                <div className={styles.annotations}>
                     <AnnotationPanel />
-                </Sider>
-            </Layout>
+                </div>
+            </div>
         </MainLayout>
     );
 }

webapp/styles/annotation.module.scss

@@ -1 +1 @@
 %lightBackground {
-    background: white;
+    background-color: white;
 }
 
-%sidePanel {
-    @extend %lightBackground;
-    overflow: auto;
-    height: 100vh;
-    position: sticky;
-    top: 0;
+.layoutwrapper {
+    display: grid;
+
+    grid:
+        [main-start] 'tags document annotations' [main-end]
+        / 1fr 3fr 1fr;
+
+    width:100%;
+    height:100%;
+    place-items: stretch;
+    place-content: stretch;
+    gap: 3px;
 }
 
-.leftSidePanel {
-    @extend %sidePanel;
-    left: 0;
+
+.tags {
+    @extend %lightBackground;
+    grid-area: tags;
 }
 
-.rightSidePanel {
-    @extend %sidePanel;
-    right: 0;
+.annotations {
+    @extend %lightBackground;
+    grid-area: annotations;
 }
 
-.mainView {
+.document {
     @extend %lightBackground;
-    margin: 20px;
+    grid-area: document;
 }

webapp/styles/mainLayout.module.scss

@@ +1 @@
+.layoutwrapper {
+    background-color: lightgray;
+    display: grid;
+
+    grid:
+        [header-start] 'header' 60px [header-end]
+        [main-start] 'content' [main-end]
+        [footer-start] 'footer' 30px [footer-end];
+
+    place-items: stretch;
+    place-content: stretch;
+
+    width: 100vw;
+    height: 100vh;
+
+    gap: 3px;
+}
+
+.header {
+    grid-area: header;
+}
+
+.content {
+    grid-area: content;
+}
+
+.footer {
+    grid-area: footer;
+}