Web Editor home made

src/components/CMyElem/CMyElem.scss

@@ -462,6 +462,9 @@ body.mobile .landing:before {
   border: #11f609 solid 2px;
   cursor: pointer;
 }
+.selectedElem {
+  border: #200e96 solid 3px !important;
+}
 
 .align_center {
   text-align: center;

src/components/CMyElem/CMyElem.ts

@@ -28,15 +28,21 @@ import { useI18n } from '@/boot/i18n'
 
 export default defineComponent({
   name: 'CMyElem',
-  components: { CImgTitle, CTitle, LandingFooter, CEventsCalendar,
+  components: {
+    CImgTitle, CTitle, LandingFooter, CEventsCalendar,
     CCardCarousel, COpenStreetMap, CMyPage, CMyPageIntro, CMyEditor, CMyFieldRec,
-    CSelectColor, CSelectFontSize },
+    CSelectColor, CSelectFontSize
+  },
   emits: ['selElemClick'],
   props: {
     myelem: {
       type: Object as PropType<IMyElem>,
       required: true,
     },
+    selElem: {
+      type: Object as PropType<IMyElem>,
+      required: false,
+    },
     path: {
       type: String,
       required: false,
@@ -70,7 +76,7 @@ export default defineComponent({
     const enableEdit = ref(false)
     const enableAdd = ref(true)
 
-    const neworder = ref(<number|undefined>0)
+    const neworder = ref(<number | undefined>0)
 
     const myel = toRef(props, 'myelem')
     const newtype = ref(<any>'')
@@ -157,7 +163,7 @@ export default defineComponent({
 
     }
 
-    function modifElem(value: any) {
+    function modifElem() {
       disableSave.value = false
     }
 
@@ -171,6 +177,7 @@ export default defineComponent({
     function clickOnElem() {
       if (props.editOn) {
         enableEdit.value = true
+        console.log('selElemClick', props.myelem)
         emit('selElemClick', props.myelem)
       }
     }
@@ -188,13 +195,21 @@ export default defineComponent({
       if (props.myelem.class2)
         mycl += ' ' + props.myelem.class2
 
+      if (props.selElem && props.editOn) {
+        if (props.myelem._id === props.selElem._id)
+          mycl += ' selectedElem'
+      }
+
       return mycl
     }
 
     function getImgFileByElem(elem: IMyElem, reccard?: IMyCard) {
       if (elem) {
         if (elem.type === shared_consts.ELEMTYPE.CARD) {
-          return 'upload/pages/' + elem.path + '/' + reccard!.imagefile
+          if (reccard?.imagefile)
+            return 'upload/pages/' + elem.path + '/' + reccard.imagefile
+          else
+            return ''
         } else if (elem.type === shared_consts.ELEMTYPE.IMAGE) {
           return 'upload/pages/' + elem.path + '/' + elem.container
         } else {

src/components/CMyElem/CMyElem.vue

@@ -25,8 +25,8 @@
           @click="clickOnElem"
         >
           <div v-for="(rec, ind) in myel.listcards" :key="ind" >
-            <q-card class="my-card center_img" flat bordered>
-              rec: {{rec}}
+            <q-card :class="`my-card center_img bordered ` + myel.class3"
+              :style="rec.style">
               <q-img :src="getImgFileByElem(myel, rec)" />
               <q-card-section>
                 <div :class="` ` + rec.size" :style="`color: ` + rec.color">
@@ -221,7 +221,7 @@
       </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.CAROUSEL_IMGS">
         <section
-          class="maxwidth padding_gallery bg-white text-grey-10 text-center"
+          class="padding_gallery bg-white text-grey-10 text-center"
         >
           <div
             :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
@@ -236,14 +236,15 @@
               :fit="myel.fit"
               :thumbnails="myel.parambool2"
               infinite
-              :height="myel.height ? myel.height.toString() : 600"
+              :height="myel.heightimg ? myel.heightimg.toString() : tools.getheightgallery()"
             >
+
               <q-carousel-slide
                 v-for="(rec, index) in myel.list"
                 :key="index"
                 :name="index"
                 :img-src="
-                  getsrcbyimg(`upload/pages/` + path + `/` + rec.imagefile)
+                  getsrcbyimg(`upload/pages/` + myel.path + `/` + rec.imagefile)
                 "
                 :alt="rec.alt"
                 class="carousel_slide"