Hugging Face's logo

Spaces:
DMTuit
/
psy_vk
Running

App Files Community
DmitrMakeev commited on
Commit
90ce961
·
verified ·
1 Parent(s): b232897

Update builder.html

Browse files
Files changed (1) hide show
  1. builder.html +96 -26
builder.html CHANGED
@@ -6,24 +6,6 @@
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>
@@ -42,6 +24,88 @@
42
  selectorManager: {
43
  componentFirst: true,
44
  },
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45
  });
46
 
47
  const domc = editor.DomComponents;
@@ -51,10 +115,16 @@
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,10 +156,10 @@
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);
 
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>
 
24
  selectorManager: {
25
  componentFirst: true,
26
  },
27
+ styleManager: {
28
+ sectors: [
29
+ {
30
+ name: 'Layout',
31
+ properties: [
32
+ {
33
+ type: 'integer',
34
+ name: 'width',
35
+ units: ['px', '%'],
36
+ defaults: 'auto',
37
+ min: 0,
38
+ },
39
+ {
40
+ type: 'integer',
41
+ name: 'height',
42
+ units: ['px', '%'],
43
+ defaults: 'auto',
44
+ min: 0,
45
+ },
46
+ {
47
+ type: 'integer',
48
+ name: 'margin',
49
+ units: ['px', '%'],
50
+ defaults: '0',
51
+ },
52
+ {
53
+ type: 'integer',
54
+ name: 'padding',
55
+ units: ['px', '%'],
56
+ defaults: '10px',
57
+ },
58
+ ],
59
+ },
60
+ {
61
+ name: 'Decorations',
62
+ properties: [
63
+ {
64
+ type: 'color',
65
+ name: 'background-color',
66
+ defaults: '#f0f0f0',
67
+ },
68
+ {
69
+ type: 'integer',
70
+ name: 'border-width',
71
+ units: ['px'],
72
+ defaults: '1px',
73
+ },
74
+ {
75
+ type: 'color',
76
+ name: 'border-color',
77
+ defaults: '#ccc',
78
+ },
79
+ ],
80
+ },
81
+ {
82
+ name: 'Flex',
83
+ properties: [
84
+ {
85
+ type: 'select',
86
+ name: 'flex-direction',
87
+ defaults: 'row',
88
+ options: [
89
+ { value: 'row', name: 'Row' },
90
+ { value: 'column', name: 'Column' },
91
+ ],
92
+ },
93
+ {
94
+ type: 'select',
95
+ name: 'justify-content',
96
+ defaults: 'space-between',
97
+ options: [
98
+ { value: 'flex-start', name: 'Flex Start' },
99
+ { value: 'flex-end', name: 'Flex End' },
100
+ { value: 'center', name: 'Center' },
101
+ { value: 'space-between', name: 'Space Between' },
102
+ { value: 'space-around', name: 'Space Around' },
103
+ ],
104
+ },
105
+ ],
106
+ },
107
+ ],
108
+ },
109
  });
110
 
111
  const domc = editor.DomComponents;
 
115
  bm.add('horizontal-triple-block', {
116
  label: 'Horizontal Triple Block',
117
  content: `
118
+ <div style="display: flex; justify-content: space-between;">
119
+ <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;">
120
+ <div data-gjs-type="block-container"></div>
121
+ </div>
122
+ <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;">
123
+ <div data-gjs-type="block-container"></div>
124
+ </div>
125
+ <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;">
126
+ <div data-gjs-type="block-container"></div>
127
+ </div>
128
  </div>
129
  `,
130
  });
 
156
  // Function to add new blocks
157
  window.addNewBlock = function() {
158
  const newBlock = `
159
+ <div style="display: flex; justify-content: space-between;">
160
+ <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;"></div>
161
+ <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;"></div>
162
+ <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;"></div>
163
  </div>
164
  `;
165
  editor.addComponents(newBlock);