commit ce63b2abb217ea8e5b57f3407442e7af35ee518d
Author: Dominik Poch <dpoch@email.cz>
Date:   Fri Apr 15 12:22:12 2022 +0200

    Removed ant layout and used css grid
    
    Changed layouting technology and added main layout for all pages.

diff --git a/webapp/layouts/mainLayout.tsx b/webapp/layouts/mainLayout.tsx
index 35c1f00..53e5b36 100644
--- a/webapp/layouts/mainLayout.tsx
+++ b/webapp/layouts/mainLayout.tsx
@@ -1,10 +1,8 @@
 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,18 +11,16 @@ const { Header, Content, Footer } = Layout;
  */
 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>
     );
 }
diff --git a/webapp/pages/annotation/index.tsx b/webapp/pages/annotation/index.tsx
index 58b3b21..9694262 100644
--- a/webapp/pages/annotation/index.tsx
+++ b/webapp/pages/annotation/index.tsx
@@ -1,4 +1,3 @@
-import { Layout } from 'antd';
 import { AnnotationPanel } from '../../components/annotation/annotationPanel';
 import { DocumentAnnotationView } from '../../components/annotation/documentAnnotationView';
 import { TagPanel } from '../../components/annotation/tagPanel';
@@ -6,8 +5,6 @@ import { MainLayout } from '../../layouts/mainLayout';
 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,17 +12,17 @@ const { Content, Sider } = Layout;
 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>
     );
 }
diff --git a/webapp/styles/annotation.module.scss b/webapp/styles/annotation.module.scss
index 9a8afad..09e6605 100644
--- a/webapp/styles/annotation.module.scss
+++ b/webapp/styles/annotation.module.scss
@@ -1,26 +1,33 @@
 %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;
 }
\ No newline at end of file
diff --git a/webapp/styles/mainLayout.module.scss b/webapp/styles/mainLayout.module.scss
new file mode 100644
index 0000000..a68a9a3
--- /dev/null
+++ b/webapp/styles/mainLayout.module.scss
@@ -0,0 +1,29 @@
+.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;
+}
