super

src/components/edit/QuestionEdit.vue

@@ -180,6 +180,7 @@ async function submitForm() {
 </template>
 
 <style scoped lang="scss">
+@import "@/styles/form/view.scss";
 .question {
   &-space {
     position: fixed;

src/views/form/Edit.vue

@@ -9,6 +9,7 @@ import ScalePreview from '@/components/edit/ScalePreview.vue'
 import { makeAPIRequest } from '@/utils/http'
 import { useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
+import {PhFilePlus, PhFloppyDisk, PhRowsPlusBottom} from "@phosphor-icons/vue";
 
 const route = useRoute()
 const authStore = useAuthStore()
@@ -96,13 +97,19 @@ onMounted(async () => {
     @input="editQuestion($event)"
     :data="pages[currentPage].questions[currentQuestion]"
   />
-  <div class="">
-    <button @click="showCreateDialog = true">Создать вопрос</button>
-    <button @click="pages.push({ text: null, questions: [] })">Создать страницу</button>
-    <button @click="submitSave">Сохранить</button>
+  <div class="edit">
+    <div class="container">
+      <div class="edit-form edit-form-container">
+        <div class="default-card edit-ctrl-card">
+          <button @click="showCreateDialog = true" class="edit-ctrl-card-btn edit-ctrl-card-btn--newa"><PhRowsPlusBottom :size="30" /></button>
+          <button @click="pages.push({ text: null, questions: [] })" class="edit-ctrl-card-btn edit-ctrl-card-btn--newp"><PhFilePlus :size="30" /></button>
+          <button @click="submitSave" class="edit-ctrl-card-btn edit-ctrl-card-btn--save"><PhFloppyDisk :size="30" /></button>
+        </div>
+        <div style="user-select: none" class="">
+          <div class="default-card highlight-card form-card-formtitle view-form-title">
+            <h3 class="view-form-q-title">Название формы</h3>
+            <input type="text" v-model="formName" class="default-input" />
           </div>
-  <div style="user-select: none">
-    <input type="text" v-model="formName" />
           <div v-for="(page, pageIndex) in pages">
             <div>
               <h3>Страница {{ pageIndex + 1 }}</h3>
@@ -151,6 +158,9 @@ onMounted(async () => {
             </draggable>
           </div>
         </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -190,4 +200,88 @@ onMounted(async () => {
   transition-timing-function: ease;
   transition-duration: 0.2s;
 }
+
+.default-input {
+  width: 100% !important;
+  background: var(--color-main-background);
+  border: 1px solid var(--color-main-border);
+  padding: 10px 20px;
+  font-weight: 200;
+  border-radius: 0.5rem;
+  outline: 0;
+  transition:
+      border,
+      background 0.25s ease;
+
+  &:hover {
+    border: 1px solid var(--color-secondary-border);
+  }
+
+  &:focus {
+    border: 1px solid var(--color-third-border);
+    background: var(--color-input-background);
+  }
+}
+
+.highlight-card {
+
+}
+
+.edit {
+  margin: 40px 0;
+
+  &-form {
+    display: flex;
+    flex-direction: column;
+    //gap: 25px 0;
+
+    &-container {
+      display: grid;
+      grid-template-columns: 75px calc(100% - 95px);
+      gap: 0 20px;
+      align-items: start;
+      margin: 0 auto;
+      max-width: 880px;
+    }
+  }
+
+  &-ctrl-card {
+    padding: 10px;
+    position: sticky;
+    top: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px 0;
+
+    &-btn {
+      width: 45px;
+      height: 45px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 0.5rem;
+      transition: 0.15s ease-in-out;
+
+      &:hover {
+        opacity: 0.9;
+      }
+
+      &:active {
+        background: var(--color-main-toned);
+      }
+
+      &--newp, &--newa {
+        background: #d6e1ff;
+        border: 1px solid #a7beff;
+      }
+
+      &--save {
+        background: #d0ffc6;
+        border: 1px solid #52c042;
+      }
+    }
+  }
+}
 </style>