[MIK-351] Make novel builder responsive

apps/novel-builder/src/components/ItemSearch.scss

@@ -97,3 +97,16 @@
     margin-top: 20px;
   }
 }
+
+//add media query for width 440px
+@media (max-width: 440px) {
+  .ItemSearch {
+    &__item {
+      flex-direction: column;
+
+      &__content {
+        margin-top: 10px;
+      }
+    }
+  }
+}

apps/novel-builder/src/modals/BackgroundEditModal.scss

@@ -22,11 +22,17 @@
   }
   &__background {
     height: 300px;
-    background-size: cover;
-    background-position: center;
+    width: 100%;
     border-radius: 15px;
     margin: 1em 0;
 
+    & img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 15px;
+    }
+
     &-video {
       height: 300px;
       width: 100%;
@@ -113,3 +119,37 @@
     }
   }
 }
+
+@media (max-width: 750px) {
+  .BackgroundEditModal {
+    min-width: 100% !important;
+    &__background {
+      height: 100%;
+    }
+  }
+}
+
+@media (max-width: 625px) {
+  .BackgroundEditModal {
+    &__buttons {
+      flex-direction: column;
+      align-items: center;
+      .ButtonGroup {
+        flex-wrap: wrap;
+        gap: 4px;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+@media (max-width: 490px) {
+  .BackgroundEditModal {
+    padding: 6px !important;
+    &__animated {
+      flex-direction: column;
+      border: none;
+      align-items: flex-start;
+    }
+  }
+}

apps/novel-builder/src/modals/BackgroundEditModal.tsx

@@ -133,15 +133,9 @@ export default function BackgroundEditModal() {
             />
           </div>
           {background.source.jpg.length > 0 && selectedTab === 'image' ? (
-            <div
-              className="BackgroundEditModal__background"
-              style={{
-                backgroundImage: `url(${config.genAssetLink(
-                  background.source.jpg,
-                  AssetDisplayPrefix.BACKGROUND_IMAGE,
-                )})`,
-              }}
-            />
+            <div className="BackgroundEditModal__background">
+              <img src={config.genAssetLink(background.source.jpg, AssetDisplayPrefix.BACKGROUND_IMAGE)} />
+            </div>
           ) : null}
           {background.source.mp4 && selectedTab === 'video' ? (
             <div className="BackgroundEditModal__video">

apps/novel-builder/src/modals/LorebookEditModal.scss

@@ -99,3 +99,20 @@
     }
   }
 }
+//add media query for width 580px
+@media (max-width: 580px) {
+  .CharacterLorebooks {
+    &__form-top {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    &__entries {
+      &__form {
+        flex-direction: column;
+      }
+    }
+  }
+  .LorebookEditModal {
+    padding: 8px !important;
+  }
+}

apps/novel-builder/src/modals/LorebookEditModal.tsx

@@ -87,6 +87,7 @@ export default function LorebookEditModal() {
     <Modal
       opened={!!lorebook}
       shouldCloseOnOverlayClick
+      className="LorebookEditModal"
       onCloseModal={() => dispatch(closeModal({ modalType: 'lorebookEdit' }))}
     >
       {lorebook ? (

apps/novel-builder/src/modals/SongEditModal.scss

@@ -1,3 +1,7 @@
 .SongEditModal {
   box-shadow: 0px 0px 20px 0px rgb(205 95 234) !important;
+
+  &__delete {
+    margin-top: 10px;
+  }
 }

apps/novel-builder/src/modals/SongEditModal.tsx

@@ -86,7 +86,7 @@ export default function SongEditModal() {
               />
             </div>
           </div>
-          <div className="SongEditModal_delete">
+          <div className="SongEditModal__delete">
             <Button onClick={handleDeleteSong} theme="primary">
               Delete song
             </Button>

apps/novel-builder/src/modals/character/CharacterDescriptionEdit.scss

@@ -88,3 +88,19 @@
     }
   }
 }
+
+@media (max-width: 981px) {
+  .CharacterDescriptionEdit {
+    &__base-text {
+      flex-direction: column;
+    }
+  }
+}
+
+@media (max-width: 521px) {
+  .CharacterDescriptionEdit {
+    &__public-specs {
+      flex-direction: column;
+    }
+  }
+}

apps/novel-builder/src/modals/character/CharacterEditModal.scss

@@ -8,3 +8,9 @@
     justify-content: space-between;
   }
 }
+// add media query for 580px
+@media (max-width: 981px) {
+  .CharacterEditModal {
+    padding: 8px !important;
+  }
+}

apps/novel-builder/src/modals/cutscenes/CutscenesPartsRender.scss

@@ -129,3 +129,21 @@
     }
   }
 }
+//add media query for width 480px
+@media (max-width: 480px) {
+  .CutScenePartsRender {
+    &__header {
+      flex-direction: column;
+      align-items: center;
+
+      &__controls {
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+
+    &__container {
+      justify-content: center;
+    }
+  }
+}

apps/novel-builder/src/modals/cutscenes/PartEditor.scss

@@ -282,3 +282,11 @@
     }
   }
 }
+//add media query for width 480px
+@media (max-width: 480px) {
+  .PartEditor {
+    &__modal {
+      padding: 8px !important;
+    }
+  }
+}

apps/novel-builder/src/modals/items/ItemEditModal.scss

@@ -178,3 +178,22 @@
     }
   }
 }
+@media (max-width: 540px) {
+  .ItemEdit {
+    &__actionList {
+      flex-direction: column;
+
+      &__action {
+        width: 100%;
+      }
+    }
+  }
+}
+
+@media (max-width: 440px) {
+  .ItemEdit {
+    &__form {
+      flex-direction: column;
+    }
+  }
+}

apps/novel-builder/src/modals/map/MapEditModal.scss

@@ -89,6 +89,14 @@
     & label {
       margin-left: 5px;
     }
+
+    &__button {
+      background-color: $secondary-color;
+      color: $text-1;
+      border-radius: 16px;
+      padding: 8px;
+      display: none;
+    }
   }
 
   &__placesContainer {
@@ -157,3 +165,90 @@
 .MapEditModal {
   max-width: 850px !important;
 }
+
+@media (max-width: 815px) {
+  .MapEditModal {
+    max-width: 100% !important;
+    padding: 8px !important;
+  }
+  .MapEdit {
+    flex-direction: column;
+    align-items: center;
+
+    &__form {
+      width: 100%;
+      align-items: center;
+
+      &__top {
+        width: 100%;
+      }
+
+      &__name {
+        width: 50%;
+      }
+
+      &__description {
+        width: 50%;
+      }
+    }
+
+    &__createPlace {
+      width: 100%;
+      padding: 0 !important;
+      height: 100%;
+      display: flex;
+
+      &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+      }
+
+      &__button {
+        display: block;
+      }
+    }
+
+    &__placesContainer {
+      width: 100%;
+      flex-direction: row;
+      flex-wrap: wrap;
+      height: fit-content;
+      justify-content: center;
+      max-height: 20rem;
+
+      &__button {
+        display: none;
+      }
+    }
+
+    &__place {
+      &__edit {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+@media (max-width: 575px) {
+  .MapEdit {
+    &__form {
+      &__top {
+        flex-direction: column;
+      }
+      &__name {
+        width: 100%;
+      }
+      &__description {
+        width: 100%;
+      }
+      &__uploadMap {
+        .mdSize {
+          width: 20rem !important;
+          height: 20rem !important;
+        }
+      }
+    }
+  }
+}

apps/novel-builder/src/modals/map/MapEditModal.tsx

@@ -1,4 +1,4 @@
-import { AreYouSure, DragAndDropImages, Input, Modal, Tooltip } from '@mikugg/ui-kit';
+import { AreYouSure, Button, DragAndDropImages, Input, Modal, Tooltip } from '@mikugg/ui-kit';
 import { HiOutlinePlus } from 'react-icons/hi';
 
 import { FaTrashAlt } from 'react-icons/fa';
@@ -158,7 +158,18 @@ export default function MapEditModal() {
             </div>
           </div>
           <div className="MapEdit__createPlace">
-            <label>Places</label>
+            <div className="MapEdit__createPlace__header">
+              <label>Places</label>
+              <Button
+                onClick={() => {
+                  dispatch(createPlace({ mapId: map.id }));
+                }}
+                theme="gradient"
+                className="MapEdit__createPlace__button"
+              >
+                Add place
+              </Button>
+            </div>
 
             {map?.places.length > 0 && (
               <div className="MapEdit__placesContainer scrollbar">