/ - Diff - Anotace pro analýzu smluvních podmínek a skrytých reklam (AV ČR) - 0x00 - Redmine

     import { Col, Container, Row, Stack } from 'react-bootstrap';
     import { Occurrence, Tag } from '../types/tag';
     import { ChangeEvent, useContext, useState } from 'react';
     import 'antd/dist/antd.css';
     import { Button, Input } from 'antd';
     import {
         PlusOutlined,
         EyeOutlined,
         DownOutlined,
         DeleteOutlined,
     } from '@ant-design/icons';
     import { AnnotationContext } from '../../contexts/AnnotationContext';
     export function AnnotationItem(props: { tag: Tag }) {
         const [visibleProperties, setVisibleProperties] = useState(false);
         const {
             addOccurrence,
             deleteOccurrence,
             changeVisibility,
             changePosition,
             changeLength,
         } = useContext(AnnotationContext);
         const onAddOccurrence = () => {
             addOccurrence(props.tag);
         };
         const onDeleteOccurrence = (occurrence: Occurrence) => (e: any) => {
             deleteOccurrence(occurrence);
         };
         const onChangeVisibility = () => {
             changeVisibility(props.tag);
         };
         const onChangePosition =
             (occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
                 changePosition(occurrence, Number(e.currentTarget.value));
             };
         const onChangeLength =
             (occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
                 changeLength(occurrence, Number(e.currentTarget.value));
             };
         const changePropertiesVisibility = () => {
             setVisibleProperties(!visibleProperties);
         };
         return (
             <Container>
                 <Row>
                     <Col className="d-flex align-items-center">{props.tag.name}</Col>
                     <Col sm="auto">
                         <Button
                             type="text"
                             shape="circle"
                             icon={<PlusOutlined />}
                             onClick={onAddOccurrence}
                         />
                         <Button
                             type="text"
                             shape="circle"
                             icon={<EyeOutlined />}
                             onClick={onChangeVisibility}
                         />
                         <Button
                             type="text"
                             shape="circle"
                             icon={<DownOutlined />}
                             onClick={changePropertiesVisibility}
                         />
                     </Col>
                 </Row>
                 {visibleProperties && (
                     <Stack>
                         <div>Kategorie: {props.tag.category}</div>
                         <div>Výskyty:</div>
                         {props.tag.occurrences.map((occurrence, index) => {
                             return (
                                 <div key={index} id={props.tag.name + index}>
                                     <Container>
                                         <Row>
                                             <Col>
                                                 <Row>
                                                     <Col className="d-flex align-items-center">
                                                         Pozice:
                                                     </Col>
                                                     <Col sm="auto">
                                                         <Input
                                                             value={occurrence.position}
                                                             onChange={onChangePosition(
                                                                 occurrence
                                                             )}
                                                         />
                                                     </Col>
                                                 </Row>
                                                 <Row>
                                                     <Col className="d-flex align-items-center">
                                                         Délka:
                                                     </Col>
                                                     <Col sm="auto">
                                                         <Input
                                                             value={occurrence.length}
                                                             onChange={onChangeLength(
                                                                 occurrence
                                                             )}
                                                         />
                                                     </Col>
                                                 </Row>
                                             </Col>
                                             <Col
                                                 sm="auto"
                                                 className="d-flex align-items-center"
+                                            >
                                                 <Button
                                                     icon={<DeleteOutlined />}
                                                     onClick={onDeleteOccurrence(occurrence)}
                                                 ></Button>
                                             </Col>
                                         </Row>
                                     </Container>
                                 </div>
                             );
                         })}
                     </Stack>
                 )}
             </Container>
         );
+    }

     import { Stack } from 'react-bootstrap';
     import { AnnotationItem } from './AnnotationItem';
     import { useContext } from 'react';
     import { AnnotationContext } from '../../contexts/AnnotationContext';
     import { Tag } from '../types/tag';
     /**
      * Creates a panel in the annotation screen that contains a list of annotations.
      * @returns Panel with a list of annotations.
      */
     export function AnnotationPanel() {
         //const { tags } = useContext(AnnotationContext);
         const tags: Tag[] = [
+            {
                 name: 'tag a',
                 category: 'kategorie 1',
                 visible: true,
                 occurrences: [
                     { position: 2, length: 5 },
                     { position: 10, length: 2 },
                 ],
             },
+            {
                 name: 'tag b',
                 category: 'kategorie 2',
                 visible: true,
                 occurrences: [
                     { position: 546, length: 432 },
                     { position: 767, length: 123 },
                 ],
             },
         ];
         return (
             <div>
                 <Stack>
                     {tags?.map((tag, index) => {
                         return <AnnotationItem key={index} tag={tag} />;
                     })}
                 </Stack>
             </div>
         );
+    }

     /**
      * Creates an annotation view of a document.
      * @returns The annotation view.
      */
     export function DocumentAnnotationView() {
         return (
             <div>
                 <p>Main view with a rendered document</p>
             </div>
         );
+    }

     /**
      * Creates a panel in the annotation screen that contains a list of tag.
      * @returns Panel with a list of tags.
      */
     export function TagPanel() {
         return (
             <div>
                 <p>Panel with a list of tags</p>
             </div>
         );
+    }

     import { Col, Container, Row, Stack } from 'react-bootstrap';
     import { Occurrence, Tag } from '../models/tag';
     import { ChangeEvent, ChangeEventHandler, useState } from 'react';
     import 'antd/dist/antd.css';
     import { Button, Input } from 'antd';
     import {
         PlusOutlined,
         EyeOutlined,
         DownOutlined,
         DeleteOutlined,
     } from '@ant-design/icons';
     type AnnotationItemProps = {
         tag: Tag;
         onAddOccurrence: (tag: Tag) => void;
         onDeleteOccurrence: (occurrence: Occurrence) => void;
         onChangeVisibility: (tag: Tag) => void;
         onChangePosition: (occurrence: Occurrence, newValue: number) => void;
         onChangeLength: (occurrence: Occurrence, newValue: number) => void;
     };
     export function AnnotationItem(props: AnnotationItemProps) {
         const [visibleProperties, setVisibleProperties] = useState(false);
         const addOccurrence = () => {
             props.onAddOccurrence(props.tag);
         };
         const deleteOccurrence = (occurrence: Occurrence) => (e: any) => {
             props.onDeleteOccurrence(occurrence);
         };
         const changeVisibility = () => {
             props.onChangeVisibility(props.tag);
         };
         const changePropertiesVisibility = () => {
             setVisibleProperties(!visibleProperties);
         };
         const changePosition =
             (occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
                 props.onChangePosition(occurrence, Number(e.currentTarget.value));
             };
         const changeLength =
             (occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
                 props.onChangeLength(occurrence, Number(e.currentTarget.value));
             };
         return (
             <div>
                 <Row>
                     <Col className="d-flex align-items-center">{props.tag.name}</Col>
                     <Col sm="auto">
                         <Button
                             type="text"
                             shape="circle"
                             icon={<PlusOutlined />}
                             onClick={addOccurrence}
                         />
                         <Button
                             type="text"
                             shape="circle"
                             icon={<EyeOutlined />}
                             onClick={changeVisibility}
                         />
                         <Button
                             type="text"
                             shape="circle"
                             icon={<DownOutlined />}
                             onClick={changePropertiesVisibility}
                         />
                     </Col>
                 </Row>
                 {visibleProperties && (
                     <Stack>
                         <div>Kategorie: {props.tag.category}</div>
                         <div>Výskyty:</div>
                         {props.tag.occurrences.map((occurrence, index) => {
                             return (
                                 <div key={index} id={props.tag.name + index}>
                                     <Container>
                                         <Row>
                                             <Col>
                                                 <Row>
                                                     Pozice:
                                                     <Input
                                                         value={occurrence.position}
                                                         onChange={changePosition(occurrence)}
                                                     />
                                                 </Row>
                                                 <Row>
                                                     Délka:
                                                     <Input
                                                         value={occurrence.length}
                                                         onChange={changeLength(occurrence)}
                                                     />
                                                 </Row>
                                             </Col>
                                             <Col
                                                 sm="auto"
                                                 className="d-flex align-items-center"
+                                            >
                                                 <Button
                                                     icon={<DeleteOutlined />}
                                                     onClick={deleteOccurrence(occurrence)}
                                                 ></Button>
                                             </Col>
                                         </Row>
                                     </Container>
                                 </div>
                             );
                         })}
                     </Stack>
                 )}
             </div>
         );
+    }

     import { Stack } from 'react-bootstrap';
     import { AnnotationItem } from './annotationItem';
     import { Occurrence, Tag } from '../models/tag';
     import { useContext } from 'react';
     import { AnnotationContext } from '../../contexts/AnnotationContext';
     type AnnotationPanelProps = {
         tags: Tag[];
         onAddOccurrence: (tag: Tag) => void;
         onDeleteOccurrence: (occurrence: Occurrence) => void;
         onChangeVisibility: (tag: Tag) => void;
         onChangePosition: (occurrence: Occurrence, newValue: number) => void;
         onChangeLength: (occurrence: Occurrence, newValue: number) => void;
     };
     /**
      * Creates a panel in the annotation screen that contains a list of annotations.
      * @returns Panel with a list of annotations.
      */
     export function AnnotationPanel(props: AnnotationPanelProps) {
         const { tags } = useContext(AnnotationContext);
         return (
             <div>
                 <p>Panel with a list of annotations</p>
                 <Stack>
                     {props.tags.map((tag, index) => {
                         return (
                             <AnnotationItem
                                 key={index}
                                 tag={tag}
                                 onAddOccurrence={props.onAddOccurrence}
                                 onDeleteOccurrence={props.onDeleteOccurrence}
                                 onChangeVisibility={props.onChangeVisibility}
                                 onChangePosition={props.onChangePosition}
                                 onChangeLength={props.onChangeLength}
                             />
                         );
                     })}
                 </Stack>
             </div>
         );
+    }

     /**
      * Creates an annotation view of a document.
      * @returns The annotation view.
      */
     export function DocumentAnnotationView() {
         return (
             <div>
                 <p>Main view with a rendered document</p>
             </div>
         );
+    }

     /**
      * Creates a panel in the annotation screen that contains a list of tag.
      * @returns Panel with a list of tags.
      */
     export function TagPanel() {
         return (
             <div>
                 <p>Panel with a list of tags</p>
             </div>
         );
+    }

     import { message, Button, Modal, Upload } from 'antd';
     import { InboxOutlined } from '@ant-design/icons';
     import 'antd/dist/antd.css';
     const { Dragger } = Upload;
     /**
      * Creates a modal window that loads documents to the app.
      * @returns The modal window.
      */
     export function AddDocument(afterClose: () => {}) {
         /**
          * Settings of a file loader.
          */
         const props = {
             name: 'file',
             multiple: true,
             directory: true,
             /**
                 @todo: Probably will be needed to change the uploading URL
             **/
             action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
             onChange(info: any) {
                 const { status } = info.file;
                 if (status !== 'uploading') {
                     console.log(info.file, info.fileList);
+                }
                 if (status === 'done') {
                     message.success(`${info.file.name} file uploaded successfully.`);
                 } else if (status === 'error') {
                     message.error(`${info.file.name} file upload failed.`);
+                }
             },
             onDrop(e: any) {
                 console.log('Dropped files', e.dataTransfer.files);
             },
         };
         /**
          * Handles successfull closing of the modal window.
          */
         const handleOk = () => {
             /**
                 @todo: Send documents to a server when all files are loaded
             **/
             console.log('Document is loaded');
             afterClose();
         };
         /**
          * Handles cancelling of the model window.
          */
         const handleCancel = () => {
             console.log('Loading of documents is cancelled.');
             afterClose();
         };
         return (
             <Modal
                 title="Nový dokument"
                 onOk={handleOk}
                 onCancel={handleCancel}
                 footer={[
                     <Button key="back" onClick={handleCancel}>
                         Storno
                     </Button>,
                     <Button key="submit" type="primary" onClick={handleOk}>
                         Nahrát
                     </Button>,
                 ]}
+            >
                 <Dragger>
                     <p className="ant-upload-drag-icon">
                         <InboxOutlined />
                     </p>
                     <p className="ant-upload-text">
                         Soubory lze nahrát stisknutím nebo přetažením...
                     </p>
                 </Dragger>
             </Modal>
         );
+    }

     import { message, Button, Modal, Upload } from 'antd';
     import { useState } from 'react';
     import { InboxOutlined } from '@ant-design/icons';
     import 'antd/dist/antd.css';
     const { Dragger } = Upload;
     /**
      * Creates a modal window that loads documents to the app.
      * @returns The modal window.
      */
     export function AddDocument() {
         const [visible, setVisible] = useState(true);
         /**
          * Settings of a file loader.
          */
         const props = {
             name: 'file',
             multiple: true,
             directory: true,
             /**
                 @todo: Probably will be needed to change the uploading URL
             **/
             action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
             onChange(info: any) {
                 const { status } = info.file;
                 if (status !== 'uploading') {
                     console.log(info.file, info.fileList);
+                }
                 if (status === 'done') {
                     message.success(`${info.file.name} file uploaded successfully.`);
                 } else if (status === 'error') {
                     message.error(`${info.file.name} file upload failed.`);
+                }
             },
             onDrop(e: any) {
                 console.log('Dropped files', e.dataTransfer.files);
             },
         };
         /**
          * Handles successfull closing of the modal window.
          */
         const handleOk = () => {
             setVisible(false);
             /**
                 @todo: Send documents to a server when all files are loaded
             **/
             console.log('Document is loaded');
         };
         /**
          * Handles cancelling of the model window.
          */
         const handleCancel = () => {
             setVisible(false);
             console.log('Loading of documents is cancelled.');
         };
         return (
             <Modal
                 visible={visible}
                 title="Nový dokument"
                 onOk={handleOk}
                 onCancel={handleCancel}
                 footer={[
                     <Button key="back" onClick={handleCancel}>
                         Storno
                     </Button>,
                     <Button key="submit" type="primary" onClick={handleOk}>
                         Nahrát
                     </Button>,
                 ]}
+            >
                 <Dragger>
                     <p className="ant-upload-drag-icon">
                         <InboxOutlined />
                     </p>
                     <p className="ant-upload-text">
                         Soubory lze nahrát stisknutím nebo přetažením...
                     </p>
                 </Dragger>
             </Modal>
         );
+    }

     export type Tag = {
         name: string;
         category: string;
         visible: boolean;
         occurrences: Occurrence[];
     };
     export type Occurrence = {
         position: number;
         length: number;
     };

     /**
      * Creates a navigation bar of an admin.
      * @returns Navigation bar of an admin.
      */
     export function AdminNavBar() {
         return (
             <div>
                 <p>Navigation bar of an admin.</p>
             </div>
         );
+    }

     /**
      * Creates a navigation bar of a normal user (annotator).
      * @returns Navigation bar of a user.
      */
     export function UserNavBar() {
         return (
             <div>
                 <p>Navigation bar of a normal user.</p>
             </div>
         );
+    }

     /**
      * Creates a navigation bar of an admin.
      * @returns Navigation bar of an admin.
      */
     export function AdminNavBar() {
         return (
             <div>
                 <p>Navigation bar of an admin.</p>
             </div>
         );
+    }

     /**
      * Creates a navigation bar of a normal user (annotator).
      * @returns Navigation bar of a user.
      */
     export function UserNavBar() {
         return (
             <div>
                 <p>Navigation bar of a normal user.</p>
             </div>
         );
+    }

     import React from 'react';
     /**
      * Props prepared for a react stucture that is passed to a layout.
      */
     export type LayoutProps = {
         children: React.ReactNode;
     };

     export type Tag = {
         name: string;
         category: string;
         visible: boolean;
         occurrences: Occurrence[];
     };
     export type Occurrence = {
         position: number;
         length: number;
     };

     import React, { createContext, useContext, useEffect, useState } from 'react';
     import { TagInstanceInfo } from '../api';
     import { Occurrence, Tag } from '../components/models/tag';
     import { Occurrence, Tag } from '../components/types/tag';
     interface IAnnotationContextProvider {
         tags: TagInstanceInfo[] | null;
         setTags: (newTags: TagInstanceInfo[] | null) => void;
         addOccurrence: () => void;
         addOccurrence: (tag: Tag) => void;
         changeVisibility: (tag: Tag) => void;
         deleteOccurrence: (occurrence: Occurrence) => void;
         changePosition: (occurrence: Occurrence, newValue: number) => void;
-...
         setTags: (v) => {
             return;
         },
         addOccurrence: () => {
         addOccurrence: (tag: Tag) => {
             return;
         },
         changeVisibility: (tag: Tag) => {
-...
     const AnnotationProvider = (props: { children: React.ReactNode }) => {
         const [tags, setTags] = useState<TagInstanceInfo[] | null>(null);
         const addOccurrence = () => {};
         const addOccurrence = (tag: Tag) => {};
         const changeVisibility = (tag: Tag) => {};
         const deleteOccurrence = (occurrence: Occurrence) => {};
         const changePosition = (occurrence: Occurrence, newValue: number) => {};

     import logo from '/public/usp-logo.svg';
     import Image from 'next/image';
     import styles from '/styles/Login.module.scss';
     import { Col, Container, Row, Stack } from 'react-bootstrap';
     import React from 'react';
     /**
      * Creates layout of a login screen.
      * @param props Html structure of a login form.
      * @returns The login screen.
      */
     export function LoginLayout(props: { children: React.ReactNode }) {
         return (
             <Container>
                 <Row className="min-vh-100 align-items-center">
                     <Col md={8}>
                         <Stack gap={5}>
                             <div>
                                 <Image
                                     src={logo}
                                     alt="Ústav státu a práva Akademie věd ČR"
                                 ></Image>
                             </div>
                             <h1 className={styles.title}>
                                 Vítejte na stránkách Ústavu státu a práva Akademie věd ČR pro
                                 anotaci dokumentů v rámci projektu TAČR TL03000152 - Umělá
                                 inteligence, média a právo
                             </h1>
                         </Stack>
                     </Col>
                     <Col md={4}>
                         <main>{props.children}</main>
                     </Col>
                 </Row>
             </Container>
         );
+    }

     import { UserNavBar } from '../components/navigation/UserNavBar';
     import { AdminNavBar } from '../components/navigation/AdminNavBar';
     import 'antd/dist/antd.css';
     import styles from '/styles/MainLayout.module.scss';
     import React from 'react';
     /**
      * Creates layout of main screens.
      * @param props Html structure of a login form.
      * @returns The login screen.
      */
     export function MainLayout(props: { children: React.ReactNode }) {
         return (
             <div className={styles.layoutWrapper}>
                 <div className={styles.header}>
                     {/**
                      @todo: Select correct navigation bar
                      {user && <UserNavBar />}
                      {admin && <AdminNavBar />}
                     **/}
                 </div>
                 <main className={styles.content}>{props.children}</main>
                 <div className={styles.footer}></div>
             </div>
         );
+    }

     import logo from '/public/usp-logo.svg';
     import Image from 'next/image';
     import styles from '/styles/login.module.scss';
     import { Col, Container, Row, Stack } from 'react-bootstrap';
     import { LayoutProps } from '../components/types/layoutProps';
     /**
      * Creates layout of a login screen.
      * @param props Html structure of a login form.
      * @returns The login screen.
      */
     export function LoginLayout(props: LayoutProps) {
         return (
             <Container>
                 <Row className="min-vh-100 align-items-center">
                     <Col md={8}>
                         <Stack gap={5}>
                             <div>
                                 <Image
                                     src={logo}
                                     alt="Ústav státu a práva Akademie věd ČR"
                                 ></Image>
                             </div>
                             <h1 className={styles.title}>
                                 Vítejte na stránkách Ústavu státu a práva Akademie věd ČR pro
                                 anotaci dokumentů v rámci projektu TAČR TL03000152 - Umělá
                                 inteligence, média a právo
                             </h1>
                         </Stack>
                     </Col>
                     <Col md={4}>
                         <main>{props.children}</main>
                     </Col>
                 </Row>
             </Container>
         );
+    }

     import { LayoutProps } from '../components/types/layoutProps';
     import { UserNavBar } from '../components/navigation/userNavBar';
     import { AdminNavBar } from '../components/navigation/adminNavBar';
     import 'antd/dist/antd.css';
     import styles from '/styles/mainLayout.module.scss';
     /**
      * Creates layout of main screens.
      * @param props Html structure of a login form.
      * @returns The login screen.
      */
     export function MainLayout(props: LayoutProps) {
         return (
             <div className={styles.layoutwrapper}>
                 <div className={styles.header}>
                     {/**
                      @todo: Select correct navigation bar
                      {user && <UserNavBar />}
                      {admin && <AdminNavBar />}
                     **/}
                 </div>
                 <main className={styles.content}>{props.children}</main>
                 <div className={styles.footer}></div>
             </div>
         );
+    }

     import { AnnotationPanel } from '../../components/annotation/annotationPanel';
     import { DocumentAnnotationView } from '../../components/annotation/documentAnnotationView';
     import { TagPanel } from '../../components/annotation/tagPanel';
     import { MainLayout } from '../../layouts/mainLayout';
     import { AnnotationPanel } from '../../components/annotation/AnnotationPanel';
     import { DocumentAnnotationView } from '../../components/annotation/DocumentAnnotationView';
     import { TagPanel } from '../../components/annotation/TagPanel';
     import { MainLayout } from '../../layouts/MainLayout';
     import 'antd/dist/antd.css';
     import styles from '/styles/annotation.module.scss';
     import { Occurrence, Tag } from '../../components/models/tag';
     import AnnotationProvider from '../../contexts/AnnotationContext';
     import styles from '/styles/Annotation.module.scss';
     import AnnotationProvider, { AnnotationContext } from '../../contexts/AnnotationContext';
     /**
      * Creates an annotation screen.
      * @returns The annotation screen.
      */
     function Annotation() {
         const tags = [
+            {
                 name: 'tag a',
                 category: 'kategorie 1',
                 visible: true,
                 occurrences: [
                     { position: 2, length: 5 },
                     { position: 10, length: 2 },
                 ],
             },
+            {
                 name: 'tag b',
                 category: 'kategorie 2',
                 visible: true,
                 occurrences: [
                     { position: 546, length: 432 },
                     { position: 767, length: 123 },
                 ],
             },
         ];
         const addOccurrence = () => {};
         const changeVisibility = (tag: Tag) => {};
         const deleteOccurrence = (occurrence: Occurrence) => {};
         const changePosition = (occurrence: Occurrence, newValue: number) => {};
         const changeLength = (occurrence: Occurrence, newValue: number) => {};
         return (
             <AnnotationProvider>
                 <MainLayout>
                     <div className={styles.layoutwrapper}>
                     <div className={styles.layoutWrapper}>
                         <div className={styles.tags}>
                             <TagPanel />
                         </div>
-...
                             <DocumentAnnotationView />
                         </div>
                         <div className={styles.annotations}>
                             <AnnotationPanel
                                 tags={tags}
                                 onAddOccurrence={addOccurrence}
                                 onChangeVisibility={changeVisibility}
                                 onDeleteOccurrence={deleteOccurrence}
                                 onChangePosition={changePosition}
                                 onChangeLength={changeLength}
                             />
                             <AnnotationPanel />
                         </div>
                     </div>
                 </MainLayout>

     import { Form, Input, Button } from 'antd';
     import { UserOutlined, LockOutlined } from '@ant-design/icons';
     import 'antd/dist/antd.css';
     import { LoginLayout } from '../../layouts/loginLayout';
     import { LoginLayout } from '../../layouts/LoginLayout';
     /**
      * Creates a login screen.

     .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;
+    }
     %annotationContent {
         background-color: white;
         padding: 10px 0px 10px 10px;
         overflow-y: scroll;
+    }
     .tags {
         @extend %annotationContent;
         grid-area: tags;
+    }
     .annotations {
         @extend %annotationContent;
         grid-area: annotations;
+    }
     .document {
         @extend %annotationContent;
         grid-area: document;
+    }

webapp/styles/Login.module.scss
	1	.title {
	2	font-size: x-large;
	3	font-family:Arial, Helvetica, sans-serif
	4	}

     .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;
         overflow-y: hidden;
+    }
     .footer {
         grid-area: footer;
+    }

     %lightBackground {
         background-color: white;
+    }
     .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;
+    }
     .tags {
         @extend %lightBackground;
         grid-area: tags;
+    }
     .annotations {
         @extend %lightBackground;
         grid-area: annotations;
+    }
     .document {
         @extend %lightBackground;
         grid-area: document;
+    }

webapp/styles/login.module.scss
1		.title {
2		font-size: x-large;
3		font-family:Arial, Helvetica, sans-serif
4		}

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

Projekt

Obecné

Profil

ASWI - Pokročilé softwarové inženýrství » ASWI 2022 » Anotace pro analýzu smluvních podmínek a skrytých reklam (AV ČR) - 0x00

Revize c73aecde

Přidáno uživatelem Dominik Poch před asi 2 roky(ů)