Hugging Face's logo

Spaces:
DMTuit
/
psy_vk
Running

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

Update builder.html

Browse files
Files changed (1) hide show
  1. builder.html +26 -96
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>
@@ -24,88 +42,6 @@
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,16 +51,10 @@
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,10 +86,10 @@
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);
 
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
  selectorManager: {
43
  componentFirst: true,
44
  },
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45
  });
46
 
47
  const domc = editor.DomComponents;
 
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);