Feature/EPMUII-5022 Responsiveness - Global layout

src/engine/Graphics2d.js

@@ -691,18 +691,40 @@ class Graphics2d extends React.Component {
     this.m_sliceRatio = this.props.sliderValue;
     this.m_mode2d = this.props.mode2d;
 
+    const isLandscape = window.matchMedia('(orientation: landscape)').matches;
+
     const wrapperStyles = {
-      display: 'flex',
-      justifyContent: 'flex-start',
-      width: `calc(100% - 110px)`,
-      height: `calc(100% - 110px)`,
-      margin: '100px 125px',
+      width: '100%',
+      height: '100%',
+      justifyContent: 'center',
+      overflow: 'scroll',
+      padding: '0',
     };
+
     const canvasStyles = {
-      maxWidth: '100%',
+      display: 'block',
+      width: '150vw',
+      height: '100%',
+      margin: '0',
+      padding: '0',
       border: '2px solid #dc5e47',
       borderRadius: '10px',
     };
+
+    if (window.innerWidth < 768) {
+      wrapperStyles.height = `calc(100% - 5rem)`;
+      canvasStyles.width = '150vw';
+      canvasStyles.height = '100%';
+    } else if (window.innerWidth >= 768) {
+      if (isLandscape && window.innerWidth >= 1024) {
+        wrapperStyles.width = 'calc(100% - 3rem)';
+        canvasStyles.width = '70%';
+        canvasStyles.height = 'calc(100% - 0.5rem)';
+      } else {
+        canvasStyles.width = '80vw';
+        canvasStyles.height = 'calc(100% - 3rem)';
+      }
+    }
     return (
       <div style={wrapperStyles}>
         <canvas

src/index.css

@@ -11,6 +11,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: 'Inter', sans-serif;
+  font-size: 15px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   height: 100vh;
@@ -28,6 +29,7 @@ code {
   --black: #18191b;
 
   /* Additional colors */
+  --beige: #f4f2ea;
   --gray: #636666;
   --dark-gray: #282a2d;
   --dark-gray2: #46494e;

src/ui/Button/Button.jsx

@@ -30,7 +30,7 @@ export const UIButton = ({ icon, caption, handler, active, rounded, type, mode,
       caption={icon && caption}
     >
       {icon ? <SVG name={icon} title={caption} /> : caption}
-      {text ? text : ''}
+      {text ? <span>{text}</span> : ''}
     </ButtonContainer>
   );
 };

src/ui/Button/Button.module.css

@@ -3,6 +3,60 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+.button.light svg {
+  fill: var(--black);
+}
+
+button:hover,
+.button:focus {
+  background-color: var(--light-orange);
+}
+
+.button.active {
+  color: var(--red);
+}
+.apply {
+  background-color: var(--red);
+  border-radius: 4px;
+}
+
+.button.active svg {
+  fill: var(--red);
+}
+
+.button.light {
+  color: var(--black);
+  background-color: var(--light);
+}
+
+.button.light svg {
+  fill: var(--black);
+}
+
+.button.light.active {
+  color: var(--red);
+}
+
+.button.light:hover,
+.button.light:focus {
+  background-color: var(--light);
+  filter: brightness(80%);
+}
+
+.button.accent {
+  color: var(--white);
+  background-color: var(--red);
+}
+
+
+
+@media screen and (min-width: 768px) {
+  .reset {
+    display: flex;
+    justify-content: end;
+  }
+
+}
 .reset {
   display: inline-block;
   border: none;
@@ -53,58 +107,116 @@
   fill: var(--white);
 }
 
-.button:hover,
-.button:focus {
-  background-color: var(--light-orange);
-}
-
-.button.active {
-  color: var(--red);
-}
-
-.apply {
-  background-color: var(--red);
-  border-radius: 4px;
-}
-
-.button.active svg {
-  fill: var(--red);
-}
-
-.button.light {
-  color: var(--black);
-  background-color: var(--light);
-}
+.button:not(.reset) {
+    display: block;
+}
+
+@media screen and (min-width: 1024px) {
+  .reset {
+    display: inline-block;
+    border: none;
+    margin: 0;
+    text-decoration: none;
+    background-color: transparent;
+    padding: 0;
+    cursor: pointer;
+    transition: all 250ms ease-in-out, transform 150ms ease;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+
+  .reset:focus {
+    outline: none;
+  }
+
+  .button {
+    margin-right: 5px;
+    margin-bottom: 5px;
+    background-color: var(--black);
+    padding: 12px 13px;
+    color: var(--white);
+    font-family: inherit;
+    text-align: center;
+    vertical-align: center;
+    font-size: 14px;
+    border-radius: 36px;
+  }
+
+  .button > svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  .rounded {
+    overflow: hidden;
+    border-radius: 50%;
+  }
+
+  .captionButton {
+    padding: 5px 10px;
+    font-size: 16px;
+    line-height: 1.5;
+  }
+
+  .button svg {
+    fill: var(--white);
+  }
+
+  .button:hover,
+  .button:focus {
+    background-color: var(--light-orange);
+  }
+
+  .button.active {
+    color: var(--red);
+  }
+
+  .apply {
+    background-color: var(--red);
+    border-radius: 4px;
+  }
+
+  .button.active svg {
+    fill: var(--red);
+  }
+
+  .button.light {
+    color: var(--black);
+    background-color: var(--light);
+  }
+
+  .button.light svg {
+    fill: var(--black);
+  }
+
+  .button.light.active {
+    color: var(--red);
+  }
+
+  .button.light:hover,
+  .button.light:focus {
+    background-color: var(--light);
+    filter: brightness(80%);
+  }
+
+  .button.accent {
+    color: var(--white);
+    background-color: var(--red);
+  }
+
+  .button.accent svg {
+    fill: var(--white);
+  }
+
+  .button.accent:hover,
+  .button.accent:focus {
+    background-color: var(--red);
+    filter: brightness(85%);
+  }
+
+  .button.accent.active svg {
+    fill: var(--black);
+  }
 
-.button.light svg {
-  fill: var(--black);
 }
 
-.button.light.active {
-  color: var(--red);
-}
-
-.button.light:hover,
-.button.light:focus {
-  background-color: var(--light);
-  filter: brightness(80%);
-}
-
-.button.accent {
-  color: var(--white);
-  background-color: var(--red);
-}
-
-.button.accent svg {
-  fill: var(--white);
-}
-
-.button.accent:hover,
-.button.accent:focus {
-  background-color: var(--red);
-  filter: brightness(85%);
-}
-
-.button.accent.active svg {
-  fill: var(--black);
-}

src/ui/Layout/Container.module.css

@@ -2,7 +2,18 @@
  * Copyright 2021 EPAM Systems, Inc. (https://www.epam.com/)
  * SPDX-License-Identifier: Apache-2.0
  */
+.vertical {
+  display: none;
+}
+
+.horizontal {
+  display: block;
+}
 
+.container button > svg #clear {
+  display: block;
+  color: #18191b;
+}
 .container {
   display: inline-flex;
   flex-wrap: wrap;
@@ -11,18 +22,57 @@
   overflow: hidden;
 }
 
-.vertical {
-  flex-direction: column;
-  width: 50px;
+.horizontal button > svg > use[xlinkHref$="#folder"] {
+  display: none;
 }
 
-.vertical:not(:first-child) {
-  margin-top: 25px;
+@media screen and (min-width: 768px) {
+
+  .container {
+    display: inline-flex;
+    flex-wrap: wrap;
+    width: fit-content;
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  .vertical {
+    flex-direction: column;
+    width: 50px;
+  }
+
+  .vertical:not(:first-child) {
+    margin-top: 25px;
+  }
+
+  .container button {
+    display: flex;
+  }
+
+  .horizontal {
+    display: none;
+  }
+
+
 }
 
-.horizontal {
-  flex-direction: row;
-  flex-shrink: 0;
-  height: 50px;
-  margin: 0 25px 0 0;
+@media screen and (min-width: 1024px) {
+  .horizontal {
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+    height: 50px;
+    margin: 0 25px 0 0;
+  }
+
+  .container button > svg #clear,
+  .container button > svg #edit {
+    display: block;
+    color: #18191b;
+    background: red;
+  }
+
 }
+
+
+