Hugging Face's logo

Spaces:
DMTuit
/
psy_vk
Running

App Files Community
DmitrMakeev commited on
Commit
21bc8c2
·
verified ·
1 Parent(s): 6c69339

Update builder.html

Browse files
Files changed (1) hide show
  1. builder.html +26 -14
builder.html CHANGED
@@ -6,6 +6,24 @@
6
  <title>GrapesJS Example</title>
7
  <!-- GrapesJS CSS -->
8
  <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </head>
10
  <body>
11
  <div id="gjs"></div>
@@ -33,16 +51,10 @@
33
  bm.add('horizontal-triple-block', {
34
  label: 'Horizontal Triple Block',
35
  content: `
36
- <div style="display: flex; justify-content: space-between;">
37
- <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;">
38
- <div data-gjs-type="block-container"></div>
39
- </div>
40
- <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;">
41
- <div data-gjs-type="block-container"></div>
42
- </div>
43
- <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;">
44
- <div data-gjs-type="block-container"></div>
45
- </div>
46
  </div>
47
  `,
48
  });
@@ -74,10 +86,10 @@
74
  // Function to add new blocks
75
  window.addNewBlock = function() {
76
  const newBlock = `
77
- <div style="display: flex; justify-content: space-between;">
78
- <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;"></div>
79
- <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;"></div>
80
- <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;"></div>
81
  </div>
82
  `;
83
  editor.addComponents(newBlock);
 
6
  <title>GrapesJS Example</title>
7
  <!-- GrapesJS CSS -->
8
  <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
9
+ <style>
10
+ .horizontal-triple-block {
11
+ display: flex;
12
+ justify-content: space-between;
13
+ }
14
+ .horizontal-triple-block > div {
15
+ flex: 1;
16
+ margin: 5px;
17
+ background-color: #f0f0f0;
18
+ padding: 10px;
19
+ border: 1px solid #ccc;
20
+ }
21
+ @media (max-width: 768px) {
22
+ .horizontal-triple-block {
23
+ flex-direction: column;
24
+ }
25
+ }
26
+ </style>
27
  </head>
28
  <body>
29
  <div id="gjs"></div>
 
51
  bm.add('horizontal-triple-block', {
52
  label: 'Horizontal Triple Block',
53
  content: `
54
+ <div class="horizontal-triple-block">
55
+ <div><div data-gjs-type="block-container"></div></div>
56
+ <div><div data-gjs-type="block-container"></div></div>
57
+ <div><div data-gjs-type="block-container"></div></div>
 
 
 
 
 
 
58
  </div>
59
  `,
60
  });
 
86
  // Function to add new blocks
87
  window.addNewBlock = function() {
88
  const newBlock = `
89
+ <div class="horizontal-triple-block">
90
+ <div><div data-gjs-type="block-container"></div></div>
91
+ <div><div data-gjs-type="block-container"></div></div>
92
+ <div><div data-gjs-type="block-container"></div></div>
93
  </div>
94
  `;
95
  editor.addComponents(newBlock);