From 479547a2628b8ab7c4593fef3727235fe1c38f41 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 22 Feb 2024 17:49:05 +0100
Subject: [PATCH] wip #6693 @2

---
 resources/grapes/_reset.sass              | 42 +++++++++++++
 resources/grapes/app.sass                 | 44 +++++++++++++-
 resources/grapes/blocks/intro/_intro.sass |  2 +-
 resources/grapes/blocks/intro/block.js    | 73 ++++++++---------------
 resources/grapes/blocks/standard/block.js | 22 +++----
 5 files changed, 123 insertions(+), 60 deletions(-)
 create mode 100644 resources/grapes/_reset.sass

diff --git a/resources/grapes/_reset.sass b/resources/grapes/_reset.sass
new file mode 100644
index 0000000..03e8a0f
--- /dev/null
+++ b/resources/grapes/_reset.sass
@@ -0,0 +1,42 @@
+// @see https://www.boag.online/blog/css-reset
+
+*, *:before, *:after
+    box-sizing: border-box
+
+html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video
+    margin: 0
+    padding: 0
+    border: 0
+    font-size: 100%
+    font: inherit
+    vertical-align: baseline
+    text-rendering: optimizeLegibility
+    -webkit-font-smoothing: antialiased
+    text-size-adjust: none
+
+footer, header, nav, section, main
+    display: block
+
+body
+    line-height: 1
+
+ol, ul
+    list-style: none
+
+blockquote, q
+    quotes: none
+
+blockquote:before, blockquote:after, q:before, q:after
+    content: ''
+    content: none
+
+table
+    border-collapse: collapse
+    border-spacing: 0
+
+input[type="text"],input[type="input"]
+    -webkit-appearance: none
+    border-radius: 0
+
+a
+    text-decoration: none
diff --git a/resources/grapes/app.sass b/resources/grapes/app.sass
index 889eae1..a7cc4f3 100644
--- a/resources/grapes/app.sass
+++ b/resources/grapes/app.sass
@@ -1,12 +1,54 @@
 @import 'https://use.typekit.net/ekh4xhm.css'
 @import "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
 
+@import "reset"
+
 body
     font-family: Inter, sans-serif
+    font-size: 16px
 
 h1, h2, h3, h4, h5, h6
-    font-family: "fields", serif
     font-weight: 600
 
+h1, h2, h3
+    font-family: "fields", serif
+
+h4, h5, h6
+    font-family: Inter, sans-serif
+
+h1
+    font-size: 3.81rem
+
+h4
+    font-size: 1.56rem
+
+section
+    display: flex
+    padding-top: 0em
+    padding-bottom: 6em
+    flex-direction: column
+    gap: 6rem
+
+    .section-container
+        position: relative
+        inset: 0% 0% auto
+        display: grid
+        width: 100%
+        max-width: 1920px
+        margin-right: auto
+        margin-left: auto
+        padding-top: 0em
+        padding-bottom: 3em
+        align-items: start
+        grid-auto-flow: row
+        grid-auto-columns: 1fr
+        grid-auto-rows: 1fr
+        gap: 3rem 1.5rem
+        row-gap: 3rem
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
+        grid-template-rows: minmax(0px, auto) 1fr minmax(0px, auto)
+        flex-direction: column
+
+
 @import "blocks/intro/_intro"
 
diff --git a/resources/grapes/blocks/intro/_intro.sass b/resources/grapes/blocks/intro/_intro.sass
index 4be9298..4df23cc 100644
--- a/resources/grapes/blocks/intro/_intro.sass
+++ b/resources/grapes/blocks/intro/_intro.sass
@@ -1,2 +1,2 @@
 section[data-type="intro"]
-    background: #ff0000
+    background-color: transparent !important
diff --git a/resources/grapes/blocks/intro/block.js b/resources/grapes/blocks/intro/block.js
index af72c09..5209232 100644
--- a/resources/grapes/blocks/intro/block.js
+++ b/resources/grapes/blocks/intro/block.js
@@ -1,57 +1,36 @@
-blocks.push({
-    category: 'Fluidbook digital learning',
-    order: 0,
-    id: 'intro',
-    label: 'Intro',
-    media: `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-box-multiple-1" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" /><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" /><path d="M14 14v-8l-2 2" /></svg>`,
-    content: {type: 'intro'},
-});
-
-components.push(['intro', {
+e.Components.addType('intro', {
     model: {
         defaults: {
             tagName: "section",
             attributes: {'data-type': "intro"},
             components:
-                '<h1 data-gjs-editable="true" data-gjs-name="Title" data-gjs-draggable="false" data-gjs-stylable="false" class="heading">Insert title here</h1>' +
-                '<p data-gjs-editable="true" data-gjs-name="Text" data-gjs-draggable="false" data-gjs-stylable="false" class="paragraph">Lorem ipsum</p>' +
-                '<img data-gjs-editable="true" data-gjs-name="Image" data-gjs-stylable="false" data-gjs-draggable="false" src="">',
+                '<div class="section-container" data-gjs-selectable="false" data-gjs-layerable="false" data-gjs-hoverable="false" data-gjs-draggable="false">' +
+                '<div class="title-container" data-gjs-selectable="false" data-gjs-layerable="false" data-gjs-hoverable="false" data-gjs-draggable="false">' +
+                '<h1 data-gjs-editable="true" data-gjs-name="Title" data-gjs-draggable="false" data-gjs-stylable="false">Insert title here</h1>' +
+                '</div>' +
+                '<div class="text-container" data-gjs-selectable="false" data-gjs-layerable="false" data-gjs-hoverable="false" data-gjs-draggable="false">' +
+                '<h4 data-gjs-editable="true" data-gjs-name="Text" data-gjs-draggable="false" data-gjs-stylable="false">Lorem ipsum</h4>' +
+                '</div>' +
+                '<div class="image-contaienr" data-gjs-selectable="false" data-gjs-layerable="false" data-gjs-hoverable="false" data-gjs-draggable="false">' +
+                '<img data-gjs-editable="true" data-gjs-name="Image" data-gjs-stylable="false" data-gjs-draggable="false" src="">' +
+                '</div>' +
+                '</div>',
             stylable: ['background-color'],
         }
     },
+});
 
-}]);
+e.Blocks.add('intro', {
+    category: 'Fluidbook digital learning',
+    order: 0,
+    id: 'intro',
+    label: 'Intro',
+    media: `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-box-multiple-1" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" /><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" /><path d="M14 14v-8l-2 2" /></svg>`,
+    content: {type: 'intro'},
+});
 
-// components.push(['intro-h1', {
-//     model: {
-//         defaults: {
-//             name: 'Heading 1',
-//             editable:true,
-//             draggable: false,
-//             droppable: false,
-//         }
-//     }
-// }]);
-//
-// components.push(['intro-paragraph', {
-//     model: {
-//         defaults: {
-//             name: 'Text',
-//             editable:true,
-//             draggable: false,
-//             droppable: false,
-//         }
-//     }
-// }]);
-//
-// components.push(['intro-image', {
-//     type:'image',
-//     model: {
-//         defaults: {
-//             name: 'Image',
-//             editable:true,
-//             draggable: false,
-//             droppable: false,
-//         }
-//     }
-// }]);
+e.on('style:property:update', function (p) {
+    if (['intro'].indexOf(e.getSelected().attributes.type) >= 0 && p.property.id === 'background-color') {
+        e.getSelected().addAttributes({'data-bg-color': p.value});
+    }
+});
diff --git a/resources/grapes/blocks/standard/block.js b/resources/grapes/blocks/standard/block.js
index 173cc1f..baa9c00 100644
--- a/resources/grapes/blocks/standard/block.js
+++ b/resources/grapes/blocks/standard/block.js
@@ -1,11 +1,11 @@
-blocks.push({
-    category: 'Fluidbook digital learning',
-    order: 2,
-    id: 'standard',
-    label: 'Bloc standard',
-    media: `<i class="ti ti-layout-rows"></i>`, // Use `image` component
-    content: {type: 'image'}, // The component `image` is activatable (shows the Asset Manager).
-    // We want to activate it once dropped in the canvas.
-    activate: true, // select: true, // Default with `activate: true`
-});
-
+// blocks.push({
+//     category: 'Fluidbook digital learning',
+//     order: 2,
+//     id: 'standard',
+//     label: 'Bloc standard',
+//     media: `<i class="ti ti-layout-rows"></i>`, // Use `image` component
+//     content: {type: 'image'}, // The component `image` is activatable (shows the Asset Manager).
+//     // We want to activate it once dropped in the canvas.
+//     activate: true, // select: true, // Default with `activate: true`
+// });
+//
-- 
2.39.5