Implement minor slide editor redesign, improve 'full slide' functionality

Author: gordlin

src/components/chart-editor.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="block">
+    <div class="block mt-3">
         <!-- Menu with option to add a new chart -->
         <div class="flex items-center">
             <span class="font-bold px-4">{{

src/components/dynamic-editor.vue

@@ -1,18 +1,18 @@
 <template>
-    <div class="block">
+    <div class="block mt-2">
         <!-- left and right panel buttons for dynamic panels -->
         <div class="flex">
             <button
                 @click="() => changePanel('text')"
-                class="editor-button border hover:bg-gray-100"
-                :class="editingStatus === 'text' ? 'border-black' : 'border-gray-300'"
+                class="editor-button rounded-none rounded-l border hover:bg-gray-100"
+                :class="editingStatus === 'text' ? 'border-black font-bold' : 'border-gray-300'"
             >
                 {{ $t('dynamic.textSection') }}
             </button>
             <button
                 @click="() => changePanel('panels')"
-                class="editor-button border hover:bg-gray-100"
-                :class="editingStatus !== 'text' ? 'border-black' : 'border-gray-300'"
+                class="editor-button rounded-none rounded-r border hover:bg-gray-100"
+                :class="editingStatus !== 'text' ? 'border-black font-bold' : 'border-gray-300'"
             >
                 {{ $t('dynamic.panel.collection') }}
             </button>
@@ -61,7 +61,7 @@
                         <p v-if="idUsed">{{ $t('dynamic.panel.idTaken') }}</p>
                     </td>
                     <td>
-                        <select v-model="newSlideType">
+                        <select v-model="newSlideType" class="editor-input rounded shadow">
                             <option v-for="thing in Object.keys(editors)" :key="thing">
                                 {{ thing }}
                             </option>
@@ -311,7 +311,7 @@ export default class DynamicEditorV extends Vue {
     width: 150px !important;
     text-align: center;
     font-weight: normal;
-    border: 1px solid black;
+    //border: 1px solid black;
     padding: 2px !important;
     margin-top: 0 !important;
 }

src/components/editor.vue

@@ -154,7 +154,7 @@
                     <!-- Save changes button -->
                     <button
                         @click="saveChanges"
-                        class="editor-button m-0 bg-black text-white hover:bg-gray-900"
+                        class="editor-button m-0 bg-black text-white hover:bg-gray-900 border border-black"
                         :disabled="saving"
                     >
                         <span class="inline-block">{{
@@ -287,10 +287,10 @@
                 ></slide-toc>
             </div>
             <!-- Right side -->
-            <div class="editor-area flex flex-col space-between w-full overflow-y-auto">
+            <div class="w-full">
                 <!-- Slide editor -->
                 <slide-editor
-                    class="flex-1 w-full overflow-y-auto"
+                    class="editor-area w-full"
                     ref="slide"
                     :configFileStructure="configFileStructure"
                     :currentSlide="currentSlide"
@@ -612,22 +612,22 @@ window.addEventListener('resize', () => {
 }
 
 .editor-label {
-    width: 10vw;
-    text-align: right;
-    margin-right: 15px;
-    display: inline-block;
+    font-weight: 600;
+    text-align: left;
 }
 
 .editor-h3 {
     font-size: larger;
 }
 
 .editor-input {
-    padding: 10px 10px;
-    margin-top: 5px;
-    border: 1px solid black;
-    display: inline;
+    padding: 7px 10px;
+    margin-top: 3px;
+    border: 1px solid #a1a1a1;
+    //display: inline;
     border-radius: 5px;
+    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .editor-container .input-error {
@@ -636,13 +636,14 @@ window.addEventListener('resize', () => {
 }
 
 .editor-button {
+    border-radius: 3px;
     padding: 5px 12px;
     font-weight: 600;
     transition-duration: 0.2s;
 }
 
 .editor-forms-button {
-    padding: 11px 15px;
+    padding: 8px 15px;
     border-radius: 5px;
 }
 
@@ -651,8 +652,12 @@ window.addEventListener('resize', () => {
     color: black;
 }
 
-.editor-button:focus {
+button:focus,
+.editor-button:focus,
+input:focus,
+select:focus {
     outline: 2px solid royalblue;
+    z-index: 2;
     outline-offset: 2px;
     transition-duration: 0.075s;
 }
@@ -709,8 +714,8 @@ window.addEventListener('resize', () => {
 @media only screen and (min-width: 768px) {
     .editor-area {
         overflow-y: auto;
-        height: calc(100vh - 63px);
-        height: calc(calc(var(--vh, 1vh) * 100) - 63px);
+        //height: calc(100vh - 80px);
+        height: calc(calc(var(--vh, 1vh) * 100) - 100px);
     }
 }
 
@@ -729,6 +734,7 @@ window.addEventListener('resize', () => {
     font-weight: 600;
     border: 1px solid black;
     transition: background-color 0.2s;
+    border-radius: 3px;
 }
 
 /* Main dropdown icon - required for positioning */

src/components/helpers/action-modal.vue

@@ -1,6 +1,7 @@
 <template>
     <vue-final-modal
         :modalId="name"
+        :clickToClose="false"
         content-class="flex flex-col max-h-full overflow-y-auto max-w-xl mx-4 p-4 bg-white border rounded-lg space-y-2"
         class="flex justify-center items-center"
     >
@@ -65,6 +66,12 @@ button {
     color: black;
 }
 
+.vfm__content button:focus {
+    outline: 2px solid royalblue;
+    outline-offset: 2px;
+    transition-duration: 0.075s;
+}
+
 .vfm__content button:disabled {
     border: 1px solid gray;
     color: gray;

src/components/helpers/chart-preview.vue

@@ -2,26 +2,20 @@
     <li class="chart-item items-center mt-8 mx-5 overflow-hidden">
         <div class="relative border-solid border-2 items-center justify-center text-center w-full">
             <button
-                class="editor-button bg-white absolute h-6 w-6 leading-5 rounded-full top-2 left-0 p-0 z-10 cursor-pointer"
+                class="editor-button bg-white absolute h-6 w-6 leading-5 rounded-full top-2 left-2 p-0 z-10 cursor-pointer"
                 @click="() => $emit('delete', chart)"
                 :content="$t('editor.chart.delete')"
                 v-tippy="{ placement: 'top', hideOnClick: false, animateFill: true }"
                 :aria-label="$t('editor.chart.delete')"
             >
-                <svg
-                    class="absolute transform -translate-x-1/2 -translate-y-1/2"
-                    height="22px"
-                    width="22px"
-                    viewBox="0 0 352 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
+                <svg height="22px" width="22px" viewBox="0 0 352 512" xmlns="http://www.w3.org/2000/svg">
                     <path
                         d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
                     />
                 </svg>
             </button>
             <button
-                class="editor-button bg-white absolute h-6 w-6 leading-5 rounded-full bottom-2 -right-1 p-0 z-10 handle"
+                class="editor-button bg-white absolute h-6 w-6 leading-5 rounded-full bottom-2 right-2 p-0 z-10 handle"
                 :aria-label="$t('editor.chart.delete')"
             >
                 <svg xmlns="http://www.w3.org/2000/svg" fill="#000000" width="22px" height="22px" viewBox="0 0 24 24">
@@ -42,32 +36,29 @@
             ></storylines-chart>
         </div>
         <!-- chart description and edit  -->
-        <div class="flex mt-4 items-center flex-wrap">
-            <div class="flex flex-2 w-4/5" style="min-width: 130px">
-                <div class="flex flex-col mr-2 justify-between">
-                    <label class="name-label font-bold"> {{ $t('editor.chart.label.name') }}: </label>
-                    <label :for="'chartPreviewCaption' + index" class="name-label font-bold pb-2">
-                        {{ $t('editor.image.label.caption') }}:
-                    </label>
-                </div>
-                <div class="flex flex-col justify-between">
-                    <label class="name-label font-bold">
-                        <span class="font-normal break-all">{{ chartName }}</span>
-                    </label>
-                    <input
-                        :id="'chartPreviewCaption' + index"
-                        class="editor-input w-5/6"
-                        type="text"
-                        v-model="chart.caption"
-                        :placeholder="$t('editor.caption.placeholder')"
-                        @input="$emit('captionEdit')"
-                    />
-                </div>
+        <div class="flex flex-col-reverse lg:flex-row mt-4 items-start flex-wrap gap-2 gap-x-2 px-1 pb-1">
+            <div class="flex-1 flex flex-col w-full">
+                <label class="editor-label"> {{ $t('editor.chart.label.name') }}</label>
+                <label class="name-label font-bold">
+                    <span class="font-normal break-all">{{ chartName }}</span>
+                </label>
+
+                <label :for="'chartPreviewCaption' + index" class="editor-label mt-2">
+                    {{ $t('editor.image.label.caption') }}
+                </label>
+                <input
+                    :id="'chartPreviewCaption' + index"
+                    class="editor-input w-full"
+                    type="text"
+                    v-model="chart.caption"
+                    :placeholder="$t('editor.caption.placeholder')"
+                    @input="$emit('captionEdit')"
+                />
             </div>
 
             <!-- edit button -->
             <button
-                class="editor-button chart-btn bg-gray-100 cursor-pointer hover:bg-gray-200 m-0 mt-4"
+                class="editor-button chart-btn bg-gray-100 cursor-pointer hover:bg-gray-200"
                 :id="`edit-${chart.name}-btn`"
             >
                 <div class="flex items-center">

src/components/helpers/image-preview.vue

@@ -39,7 +39,6 @@ export default class ImagePreviewV extends Vue {
 <style lang="scss" scoped>
 .image-item {
     width: 30%;
-
     cursor: move; // fallback
     cursor: grab;
     cursor: -moz-grab;
@@ -61,4 +60,16 @@ export default class ImagePreviewV extends Vue {
         padding: 0 !important;
     }
 }
+
+@media only screen and (max-width: 1500px) {
+    .image-item {
+        width: 41%;
+    }
+}
+
+@media only screen and (max-width: 900px) {
+    .image-item {
+        width: 90%;
+    }
+}
 </style>