From e7678c979af070a23f9f99135f3d1a8a312cd04f Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Sat, 24 Aug 2024 19:41:29 +0300
Subject: [PATCH] M: Improve mobile UI

---
 rsconcept/frontend/src/app/ApplicationLayout.tsx         | 2 +-
 rsconcept/frontend/src/app/Navigation/Navigation.tsx     | 2 +-
 .../frontend/src/app/Navigation/ToggleNavigation.tsx     | 7 ++++---
 rsconcept/frontend/src/pages/OssPage/OssTabs.tsx         | 9 ++++++++-
 .../EditorConstituenta/ToolbarConstituenta.tsx           | 5 ++++-
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/rsconcept/frontend/src/app/ApplicationLayout.tsx b/rsconcept/frontend/src/app/ApplicationLayout.tsx
index eb40d64b..7395de5b 100644
--- a/rsconcept/frontend/src/app/ApplicationLayout.tsx
+++ b/rsconcept/frontend/src/app/ApplicationLayout.tsx
@@ -13,7 +13,7 @@ function ApplicationLayout() {
     <NavigationState>
       <div className='min-w-[20rem] clr-app antialiased h-full'>
         <ConceptToaster
-          className='mt-[4rem] text-sm' // prettier: split lines
+          className='mt-[4rem] text-[14px]' // prettier: split lines
           autoClose={3000}
           draggable={false}
           pauseOnFocusLoss={false}
diff --git a/rsconcept/frontend/src/app/Navigation/Navigation.tsx b/rsconcept/frontend/src/app/Navigation/Navigation.tsx
index c694a2ba..e4518012 100644
--- a/rsconcept/frontend/src/app/Navigation/Navigation.tsx
+++ b/rsconcept/frontend/src/app/Navigation/Navigation.tsx
@@ -36,7 +36,7 @@ function Navigation() {
       <ToggleNavigation />
       <motion.div
         className={clsx(
-          'pl-2 pr-[0.9rem] h-[3rem] w-full', // prettier: split lines
+          'pl-2 pr-[1.5rem] sm:pr-[0.9rem] h-[3rem] w-full', // prettier: split lines
           'flex',
           'cc-shadow-border'
         )}
diff --git a/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx b/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx
index ed4e4307..144eebd2 100644
--- a/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx
+++ b/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx
@@ -13,10 +13,11 @@ function ToggleNavigation() {
       type='button'
       tabIndex={-1}
       className={clsx(
-        'absolute top-0 right-0 z-navigation flex items-center justify-center',
+        'absolute top-0 right-0 z-navigation',
+        'min-h-[2rem] min-w-[2rem] sm:min-w-fit',
+        'flex items-center justify-center',
         'clr-hover',
-        'select-none',
-        'min-h-[2rem]'
+        'select-none'
       )}
       onClick={toggleNoNavigation}
       initial={false}
diff --git a/rsconcept/frontend/src/pages/OssPage/OssTabs.tsx b/rsconcept/frontend/src/pages/OssPage/OssTabs.tsx
index df1cc808..c247fb8a 100644
--- a/rsconcept/frontend/src/pages/OssPage/OssTabs.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/OssTabs.tsx
@@ -12,6 +12,7 @@ import Loader from '@/components/ui/Loader';
 import TabLabel from '@/components/ui/TabLabel';
 import TextURL from '@/components/ui/TextURL';
 import AnimateFade from '@/components/wrap/AnimateFade';
+import { useAuth } from '@/context/AuthContext';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { useLibrary } from '@/context/LibraryContext';
 import { useBlockNavigation, useConceptNavigation } from '@/context/NavigationContext';
@@ -34,6 +35,7 @@ function OssTabs() {
   const router = useConceptNavigation();
   const query = useQueryStrings();
   const activeTab = query.get('tab') ? (Number(query.get('tab')) as OssTabID) : OssTabID.GRAPH;
+  const { user } = useAuth();
 
   const { calculateHeight, setNoFooter } = useConceptOptions();
   const { schema, loading, loadingError: errorLoading } = useOSS();
@@ -41,7 +43,12 @@ function OssTabs() {
 
   const [isModified, setIsModified] = useState(false);
   const [selected, setSelected] = useState<OperationID[]>([]);
-  useBlockNavigation(isModified);
+  useBlockNavigation(
+    isModified &&
+      schema !== undefined &&
+      user !== undefined &&
+      (user.is_staff || user.id == schema.owner || schema.editors.includes(user.id))
+  );
 
   useLayoutEffect(() => {
     if (schema) {
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ToolbarConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ToolbarConstituenta.tsx
index fb47dc8c..d430cac1 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ToolbarConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ToolbarConstituenta.tsx
@@ -49,7 +49,10 @@ function ToolbarConstituenta({
   const controller = useRSEdit();
 
   return (
-    <Overlay position='top-1 right-4' className='cc-icons md:right-1/2 md:translate-x-1/2 transition-all duration-500'>
+    <Overlay
+      position='top-1 right-1/2 translate-x-1/2 sm:right-4 sm:translate-x-0 md:right-1/2 md:translate-x-1/2'
+      className='cc-icons outline-none  transition-all duration-500'
+    >
       {controller.schema && controller.schema?.oss.length > 0 ? (
         <MiniSelectorOSS
           items={controller.schema.oss}