fix(website): Update examples section.

lowdefy · Apr 26, 2023 · 79a15d6 · 79a15d6
1 parent 39d63dc
commit 79a15d6
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 54 deletions.
diff --git a/packages/website/pages/home/components/example_card.yaml.njk b/packages/website/pages/home/components/example_card.yaml.njk
@@ -1,10 +1,10 @@
 id: {{ id }}
 type: Card
-layout:
-  span: 6
 properties:
   style:
-    minHeight: 400
+    height: 100%
+    minHeight: 450
+    maxWIdth: 80%
 blocks:
   - id: title
     type: Html
@@ -13,9 +13,9 @@ blocks:
         <a href="{{ view}}" >
           <img style="width: 100%;" src="{{ image }}" alt="{{alt}}"/>
         </a>
-        <h3>
+        <h5 style="color:#1890ff;">
           {{ example }}
-        </h3>
+        </h5>
         <p>
           {{ desc }}
         </p>
@@ -25,9 +25,7 @@ blocks:
     properties:
       title: View on GitHub
       icon: AiOutlineGithub
-    events:
-      onClick:
-        - id: link
-          type: Link
-          params:
-            url: {{ git }}
+      type: link
+      size: large
+      block: true
+      href: {{ git }}
diff --git a/packages/website/pages/home/sections/examples.yaml b/packages/website/pages/home/sections/examples.yaml
@@ -2,6 +2,10 @@ id: examples_box
 type: Box
 layout:
   contentGutter: 8
+  justifyContent: center
+style:
+  maxWidth: 90%
+  margin: 60px auto
 blocks:
   - id: examples_intro
     type: Html
@@ -17,46 +21,81 @@ blocks:
           Explore examples and apps from the community.
         </h3>
 
-  - _ref:
-      path: pages/home/components/example_card.yaml.njk
-      vars:
-        id: survey_example
-        image: /images/examples/survey.png
-        alt: Survey
-        example: Survey
-        desc: A customer feedback webform that saves customer feedback to a Google sheet. All in less than 400 lines of YAML.
-        git: https://github.com/lowdefy/lowdefy-example-survey
-        view: https://example-survey.lowdefy.com
-
-  - _ref:
-      path: pages/home/components/example_card.yaml.njk
-      vars:
-        id: case_management_example
-        image: /images/examples/case_management.png
-        alt: Case Management App
-        example: Case Management App
-        desc: A rich UI for a hypothetical case management app, in a customer relations setting, cases can be flagged, escalated, or closed.
-        git: https://github.com/lowdefy/lowdefy-example-case-management
-        view: https://example-case-management.lowdefy.com
-
-  - _ref:
-      path: pages/home/components/example_card.yaml.njk
-      vars:
-        id: CRUD_example
-        image: /images/examples/crud.png
-        alt: CRUD
-        example: CRUD Admin App
-        desc: A data admin app which allows users to view, create new, edit and delete data records in MongoDB.
-        git: https://github.com/lowdefy/lowdefy-example-crud
-        view: https://example-crud.lowdefy.com
-
-  - _ref:
-      path: pages/home/components/example_card.yaml.njk
-      vars:
-        id: BI_example
-        image: /images/examples/reporting.png
-        alt: BI
-        example: BI Dashboard App
-        desc: A simple live report aggregated from a MongoDB sample dataset, showing results in AmCharts and AgGrid custom blocks.
-        git: https://github.com/lowdefy/lowdefy-example-reporting
-        view: https://example-reporting.lowdefy.com
+  - id: carousel
+    type: Carousel
+    properties:
+      autoplay: true
+      adaptiveHeight: true
+      slidesToShow: 4
+      slides:
+        - key: slide_one
+        - key: slide_two
+        - key: slide_three
+        - key: slide_four
+      style:
+        height: 100%
+      responsive:
+        - breakpoint: 1024
+          settings:
+            slidesToShow: 3
+            slidesToScroll: 3
+            infinite: true
+            dots: true
+        - breakpoint: 600
+          settings:
+            slidesToShow: 2
+            slidesToScroll: 2
+            initialSlide: 2
+        - breakpoint: 480
+          settings:
+            slidesToShow: 1
+            slidesToScroll: 1
+    areas:
+      slide_one:
+        blocks:
+          - _ref:
+              path: pages/home/components/example_card.yaml.njk
+              vars:
+                id: survey_example
+                image: /images/examples/survey.png
+                alt: Survey
+                example: Survey
+                desc: A customer feedback webform that saves customer feedback to a Google sheet. All in less than 400 lines of YAML.
+                git: https://github.com/lowdefy/lowdefy-example-survey
+                view: https://example-survey.lowdefy.com
+      slide_two:
+        blocks:
+          - _ref:
+              path: pages/home/components/example_card.yaml.njk
+              vars:
+                id: case_management_example
+                image: /images/examples/case_management.png
+                alt: Case Management App
+                example: Case Management App
+                desc: A rich UI for a hypothetical case management app, in a customer relations setting, cases can be flagged, escalated, or closed.
+                git: https://github.com/lowdefy/lowdefy-example-case-management
+                view: https://example-case-management.lowdefy.com
+      slide_three:
+        blocks:
+          - _ref:
+              path: pages/home/components/example_card.yaml.njk
+              vars:
+                id: CRUD_example
+                image: /images/examples/crud.png
+                alt: CRUD
+                example: CRUD Admin App
+                desc: A data admin app which allows users to view, create new, edit and delete data records in MongoDB.
+                git: https://github.com/lowdefy/lowdefy-example-crud
+                view: https://example-crud.lowdefy.com
+      slide_four:
+        blocks:
+          - _ref:
+              path: pages/home/components/example_card.yaml.njk
+              vars:
+                id: BI_example
+                image: /images/examples/reporting.png
+                alt: BI
+                example: BI Dashboard App
+                desc: A simple live report aggregated from a MongoDB sample dataset, showing results in AmCharts and AgGrid custom blocks.
+                git: https://github.com/lowdefy/lowdefy-example-reporting
+                view: https://example-reporting.lowdefy.com