Merge pull request #1157 from nataliauvarova/kalmyk_markup

Kalmyk markup: Add sticky titles and radio buttons (part)
ispras · Dec 2, 2024 · dff6b5b · dff6b5b
2 parents 9253fa8 + 07b831c
commit dff6b5b
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 11 deletions.
diff --git a/src/components/JoinMarkupsModal/index.js b/src/components/JoinMarkupsModal/index.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useState } from "react";
-import { Button, Checkbox, Modal, Table } from "semantic-ui-react";
+import { Button, Checkbox, Form, Modal, Table } from "semantic-ui-react";
 import PropTypes from "prop-types";
 
 import TranslationContext from "Layout/TranslationContext";
@@ -9,6 +9,10 @@ import "./styles.scss";
 const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
   const getTranslation = useContext(TranslationContext);
 
+  //const [firstTextRelation, setFirstTextRelation] = useState(null);
+  //const [secondTextRelation, setSecondTextRelation] = useState(null);
+  const [typeRelation, setTypeRelation] = useState(null);
+
   console.log("perspectiveId====");
   console.log(perspectiveId);
 
@@ -29,7 +33,7 @@ const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
           <div className="join-markups-content__table1">
             {/* Table 1 */}
             <div className="block-add-relation">
-              <div className="block-add-relation__first">
+              <div className="block-add-relation__column">
                 <Table celled padded className="lingvo-perspective-table">
                   <Table.Header>
                     <Table.Row>
@@ -48,7 +52,7 @@ const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
                 </Table>
               </div>
 
-              <div className="block-add-relation__second">
+              <div className="block-add-relation__column">
                 <Table celled padded className="lingvo-perspective-table">
                   <Table.Header>
                     <Table.Row>
@@ -67,6 +71,44 @@ const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
                 </Table>
               </div>
               <div className="block-add-relation__actions">
+                {/*<Form>
+                {statistics.map(stat => (
+                  <Form.Radio
+                    key={stat.user_id}
+                    label={stat.name}
+                    value={stat.user_id}
+                    checked={user_id === stat.user_id}
+                    onChange={this.handleUserSelected}
+                    className="lingvo-radio"
+                  />
+                ))}
+              </Form>*/}
+                <Form>
+                  {/*<div>
+                    Selected value: <b>{typeRelation}</b>
+                  </div>*/}
+
+                  <Form.Radio
+                    label={getTranslation("Translit")}
+                    name="radioGroup"
+                    key="Translit"
+                    value="Translit"
+                    checked={typeRelation === "Translit"}
+                    onChange={(e, { value }) => setTypeRelation(value)}
+                    className="lingvo-radio"
+                  />
+
+                  <Form.Radio
+                    label={getTranslation("Literal translation")}
+                    name="radioGroup"
+                    key="LiteralTranslation"
+                    value="LiteralTranslation"
+                    checked={typeRelation === "LiteralTranslation"}
+                    onChange={(e, { value }) => setTypeRelation(value)}
+                    className="lingvo-radio"
+                  />
+                </Form>
+
                 <Button
                   //icon={<i className="lingvo-icon lingvo-icon_check" />}
                   content={getTranslation("Join")}

diff --git a/src/components/JoinMarkupsModal/styles.scss b/src/components/JoinMarkupsModal/styles.scss
@@ -2,33 +2,62 @@
   display: flex;
   flex-direction: column;
   height: 65vh;
-  //max-height: 100vh;
+  min-height: 450px;
 
   &__table1 {
     height: 50%;
-    //flex: 1 0 50%;
     padding-bottom: 20px;
   }
 
   &__table2 {
     height: 50%;
-    //flex: 1 0 50%;
     overflow-y: auto;
+
+    & .ui.table thead th {
+      position: relative;
+      position: sticky;
+      top: 0;
+      z-index: 1;
+
+      @media only screen and (max-device-width: 767px), only screen and (max-width: 767px) {
+        position: static;
+      }
+    }
   }
 }
 
 .block-add-relation {
   display: flex;
   height: 100%;
 
-  &__first {
+  &__column {
     flex: 1 1 33%;
     overflow-y: auto;
-  }
+    margin: 0 0 0 10px;
 
-  &__second {
-    flex: 1 1 33%;
-    overflow-y: auto;
+    & .ui.table thead th {
+      position: relative;
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+
+    &:first-of-type {
+      margin: 0 10px 0 0;
+    }
+
+    @media only screen and (max-device-width: 767px), only screen and (max-width: 767px) {
+      margin-left: 5px;
+
+      & .ui.table thead th {
+        position: static;
+      }
+
+      &:first-of-type {
+        margin-right: 5px;
+        margin-left: 0;
+      }
+    }
   }
 
   &__actions {