diff --git a/clip/clip.css b/clip/clip.css index 9a3a30e..a65b5ce 100644 --- a/clip/clip.css +++ b/clip/clip.css @@ -2,10 +2,10 @@ --first-color: {{ initParams.backgroundColor }}; --second-color: {{ initParams.fontColor }}; - --first-top: {{ initParams.firstImagePosition.top }}px; - --first-left: {{ initParams.firstImagePosition.left }}px; - --second-top: {{ initParams.secondImagePosition.top }}px; - --second-left: {{ initParams.secondImagePosition.left }}px; + --first-top: -19px; + --first-left: 53px; + --second-top: 28px; + --second-left: 0px; /* This is an example of how to use MotorCortex's init params in css, using a css variable if you are unfamiliar with css variables here is a quick guide https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#basic_usage @@ -14,14 +14,14 @@ .container { position: relative; -display: flex; -justify-content: center; -flex-direction: column; -align-items: center; -height: 100%; -background: var(--first-color); -font-family: 'Open Sans', sans-serif; -color: var(--second-color); + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + height: 100%; + background: var(--first-color); + font-family: 'Open Sans', sans-serif; + color: var(--second-color); } .image-wrapper{ @@ -48,7 +48,7 @@ color: var(--second-color); .offer{ font-weight: 900; - font-size: 40px; + font-size: 40px; } .title-wrapper{ diff --git a/clip/clip.html b/clip/clip.html index 1f23e32..9ad6b33 100644 --- a/clip/clip.html +++ b/clip/clip.html @@ -1,28 +1,44 @@ - + - {{item}} + {{item}} - {{item}} + + {{item}} + - - + + - {{initParams.thirdRow}} + {{initParams.text}} ΑΠΟ - {{initParams.offer}} + {{initParams.secondaryText}} - - + + - - \ No newline at end of file + diff --git a/clip/initParams.ts b/clip/initParams.ts index e2099f7..6a63ecd 100644 --- a/clip/initParams.ts +++ b/clip/initParams.ts @@ -1,27 +1,27 @@ export default [ { - name: "Blue medium", + name: "Week Offers", value: { + title: "ΠΡΟΣΦΟΡΑ", + subtitle: "ΕΒΔΟΜΑΔΑΣ", + text: "Nike Zoom Lite 3", + secondaryText: "39.90€", + backgroundColor: "#161616", fontColor: "#fff", - offer: "39.90€", - images: [ - "https://donkeyclip.github.io/week-offer/server/white.png", - "https://donkeyclip.github.io/week-offer/server/black.png", + + products: [ + { + name: "Product 1", + featured_image: + "https://donkeyclip.github.io/week-offer/server/white.png", + }, + { + name: "Product 2", + featured_image: + "https://donkeyclip.github.io/week-offer/server/black.png", + }, ], - firstImagePosition: { - top: -19, - left: 53, - }, - secondImagePosition: { - top: 28, - left: 0, - }, - firstRow: "ΠΡΟΣΦΟΡΑ", - secondRow: "ΕΒΔΟΜΑΔΑΣ", - thirdRow: "Nike Zoom Lite 3", - bannerLink: - "https://www.e-tennis.gr/tennis-shoes/tennis-shoe/nike/shopby/show_onsales_products-sales_products-model-zoom_lite.html", }, }, ]; diff --git a/clip/initParamsValidationRules.ts b/clip/initParamsValidationRules.ts index 18ad2ee..87e6174 100644 --- a/clip/initParamsValidationRules.ts +++ b/clip/initParamsValidationRules.ts @@ -1,39 +1,23 @@ export default { + title: { label: "Title", type: "string" }, + + subtitle: { label: "Subtitle", type: "string" }, + + text: { label: "Text", type: "string" }, + secondaryText: { label: "Secondary Text", type: "string" }, + backgroundColor: { label: "Background Color", type: "color" }, fontColor: { label: "Font Color", type: "color" }, - firstRow: { - label: "First Row", - type: "string", - }, - secondRow: { - label: "Second Row", - type: "string", - }, - offer: { - label: "Offer", - type: "string", - }, - images: { - label: "Images", + + products: { + label: "Products", type: "array", - items: { type: "string" }, - }, - firstImagePosition: { - type: "object", - label: "First Image Position", - props: { - top: { type: "number" }, - left: { type: "number" }, - }, - }, - secondImagePosition: { - type: "object", - label: "Second Image Position", - props: { - top: { type: "number" }, - left: { type: "number" }, + items: { + type: "object", + props: { + name: { type: "string" }, + featured_image: { type: "string" }, + }, }, }, - bannerLink: { type: "string", label: "Link" }, - thirdRow: { type: "string", label: "Third Row" }, };