replace vh units

README.md

@@ -1,52 +1,54 @@
-## Виджет
+## Правила
-### Сборка
+- Запрещено использовать vh/vw css-юниты и их производные
-```bash
+## Виджет
-yarn build:widget
+### Сборка
-```
+```bash
-### Использование
+yarn build:widget
-```html
+```
-<script type="module">
+### Использование
-    import widget from "https://s.hbpn.link/export/pub.js";
+```html
-
+<script type="module">
-    widget.create({
+    import widget from "https://s.hbpn.link/export/pub.js";
-        selector: "widget-container",
+
-        quizId: "...",
+    widget.create({
-    })
+        selector: "widget-container",
-</script>
+        quizId: "...",
-```
+    })
-## Npm-пакет
+</script>
-### Перед использованием и публикацией
+```
-```bash
+## Npm-пакет
-npm config set //penahub.gitlab.yandexcloud.net/api/v4/packages/npm/:_authToken=INSTANCE_TOKEN
+### Перед использованием и публикацией
-npm config set //penahub.gitlab.yandexcloud.net/api/v4/projects/43/packages/npm/:_authToken=PROJECT_TOKEN
+```bash
-```
+npm config set //penahub.gitlab.yandexcloud.net/api/v4/packages/npm/:_authToken=INSTANCE_TOKEN
-### Публикация
+npm config set //penahub.gitlab.yandexcloud.net/api/v4/projects/43/packages/npm/:_authToken=PROJECT_TOKEN
-1. Инкрементировать версию в package.json
+```
-2. 
+### Публикация
-```bash
+1. Инкрементировать версию в package.json
-yarn publish
+2. 
-```
+```bash
-3. Нажать enter при запросе версии
+yarn publish
-### Установка
+```
-Добавить в корень проекта файл .yarnrc с содержимым
+3. Нажать enter при запросе версии
-```
+### Установка
-"@frontend:registry" "https://penahub.gitlab.yandexcloud.net/api/v4/packages/npm/"
+Добавить в корень проекта файл .yarnrc с содержимым
-```
+```
-```bash
+"@frontend:registry" "https://penahub.gitlab.yandexcloud.net/api/v4/packages/npm/"
-yarn add @frontend/squzanswerer
+```
-```
+```bash
-Peer dependencies:
+yarn add @frontend/squzanswerer
-```bash
+```
-yarn add @emoji-mart/data @emoji-mart/react @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/x-date-pickers axios emoji-mart immer moment nanoid notistack react-dom react-error-boundary react-router-dom react swr use-debounce zustand
+Peer dependencies:
-```
+```bash
-### Использование
+yarn add @emoji-mart/data @emoji-mart/react @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/x-date-pickers axios emoji-mart immer moment nanoid notistack react-dom react-error-boundary react-router-dom react swr use-debounce zustand
-```ts
+```
-import { QuizView } from "@frontend/squzanswerer";
+### Использование
-
+```ts
-export default function Component() {
+import { QuizView } from "@frontend/squzanswerer";
-    // ...
+
-    return (
+export default function Component() {
-        <QuizView quizId={quizId} />
+    // ...
-    }
+    return (
-}
+        <QuizView quizId={quizId} />
-```
+    }
+}
+```

lib/components/ViewPublicationPage/ContactForm.tsx

@@ -179,7 +179,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                     width: isWide && !isMobile ? "100%" : isMobile ? undefined : "530px",
                     borderRadius: "4px",
                     height: "100%",
-                    minHeight: "100vh",
+                    minHeight: "100%",
                     display: isWide && !isMobile ? "flex" : undefined,
                     background: settings.cfg.design && !isMobile
                         ? quizThemes[settings.cfg.theme].isLight

lib/components/ViewPublicationPage/ResultForm.tsx

@@ -35,7 +35,7 @@ export const ResultForm = ({resultQuestion}: ResultFormProps) => {
                 alignItems: "center",
                 justifyContent: "space-between",
                 height: "100%",
-                minHeight: "100vh",
+                minHeight: "100%",
                 width: "100%",
                 overflow: "auto",
                 backgroundColor: theme.palette.background.default,

lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx

@@ -36,7 +36,7 @@ const StandartLayout = ({
       sx={{
         display: "flex",
         flexDirection: alignType === "left" ? "row" : "row-reverse",
-        minHeight: "100vh",
+        minHeight: "100%",
         backgroundPosition: "center",
         backgroundSize: "cover",
         backgroundImage: settings.cfg.design
@@ -78,7 +78,7 @@ const ExpandedLayout = ({
     <Box
       sx={{
         zIndex: 3,
-        minHeight: "100vh",
+        minHeight: "100%",
         width: "40%",
         padding: "16px",
         margin:
@@ -137,7 +137,7 @@ const CenteredLayout = ({
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        minHeight: "100vh",
+        minHeight: "100%",
         backgroundPosition: "center",
         backgroundSize: "cover",
         backgroundImage: settings.cfg.design

lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx

@@ -31,7 +31,7 @@ const StandartMobileLayout = ({
         flexDirection: "column-reverse",
         flexGrow: 1,
         justifyContent: "flex-end",
-        minHeight: "100vh",
+        minHeight: "100%",
         height: "100%",
         "&::-webkit-scrollbar": { width: 0 },
         backgroundPosition: "center",
@@ -97,7 +97,7 @@ const ExpandedMobileLayout = ({
       flexDirection: "column-reverse",
       flexGrow: 1,
       justifyContent: "flex-end",
-      minHeight: "100vh",
+      minHeight: "100%",
       height: "100%",
       "&::-webkit-scrollbar": { width: 0 },
     }}
@@ -140,11 +140,11 @@ const ExpandedMobileLayout = ({
         left: 0,
         top: 0,
         width: "100%",
-        minHeight: "100vh",
+        minHeight: "100%",
         overflow: "hidden",
         "& > img": {
           display: "block",
-          minHeight: "100vh",
+          minHeight: "100%",
         },
       }}
     >
@@ -166,7 +166,7 @@ const CenteredMobileLayout = ({
                 flexDirection: "column-reverse",
                 flexGrow: 1,
                 justifyContent: "flex-end",
-                minHeight: "100vh",
+                minHeight: "100%",
                 height: "100%",
                 backgroundPosition: "center",
                 backgroundSize: "cover",

lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx

@@ -21,7 +21,6 @@ import { quizThemes } from "@utils/themes/Publication/themePublication";
 import { DESIGN_LIST } from "../Question";
 
 import { NameplateLogo } from "@icons/NameplateLogo";
-import PenaLogo from "@icons/PenaLogo.png";
 
 export const StartPageViewPublication = () => {
   const theme = useTheme();
@@ -51,7 +50,7 @@ export const StartPageViewPublication = () => {
               : undefined,
           height: "100%",
           minWidth: "100%",
-          maxHeight: "100vh",
+          maxHeight: "100%",
           objectFit: "cover",
           overflow: "hidden",
         }}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@frontend/squzanswerer",
-    "version": "1.0.12",
+    "version": "1.0.13",
     "type": "module",
     "main": "./dist-package/index.js",
     "module": "./dist-package/index.js",