Skip to content

Commit 5014831

Browse files
JaceCroweJaceCrowe
committed
fixed glitch, there needed to be % added to each value for the HTML Elements with a numerical value
1 parent 641d4d6 commit 5014831

File tree

2 files changed

+58
-89
lines changed

2 files changed

+58
-89
lines changed

‎src/components/Canvas.vue

Lines changed: 58 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -48,21 +48,21 @@
4848
<div v-for="element in this.componentMap[componentData.componentName].htmlList" :key="element.id+ new Date()">
4949
<div v-if="element.text === 'button'"
5050
class="htmlButton"
51-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '70%'},
52-
element.y !== 0 ? {'left': element.y} : {'left': '60%'},
53-
element.w !== 0 ? {'width': element.w} : {'width': '25%'},
54-
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
55-
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
51+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '70%'},
52+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '60%'},
53+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '25%'},
54+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '10%'},
55+
element.z !== 0 ? {'z-index' : element.z + '%'} : {'z-index' : '0'},
5656
{'background-color': componentData.color}]"
5757
>
5858
<p class="innerHtmlText">{{element.note !== '' ? element.note : element.text}}</p>
5959
</div>
6060
<div v-if="element.text === 'div'"
6161
class="htmlDiv"
62-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '10%'},
63-
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
64-
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
65-
element.h !== 0 ? {'height' : element.h} : {'height' : '75%'},
62+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '10%'},
63+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
64+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
65+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '75%'},
6666
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
6767
{'background-color': componentData.color}]"
6868
>
@@ -71,76 +71,76 @@
7171
<div v-if="element.text === 'footer'" class="htmlFooter"></div>
7272
<div v-if="element.text === 'form'"
7373
class="htmlGeneral"
74-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '50%'},
75-
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
76-
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
77-
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
74+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '50%'},
75+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
76+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
77+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '40%'},
7878
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
7979
{'background-color': componentData.color}]"
8080
>
8181
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
8282
</div>
8383
<div v-if="element.text === 'h1'"
8484
class="htmlHead"
85-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '10%'},
86-
element.y !== 0 ? {'left': element.y} : {'left': '5%'},
87-
element.w !== 0 ? {'width': element.w} : {'width': '90%'},
88-
element.h !== 0 ? {'height' : element.h} : {'height' : '20%'},
85+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '10%'},
86+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '5%'},
87+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '90%'},
88+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '20%'},
8989
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
9090
{'background-color': componentData.color}]"
9191
>
9292
<p class="innerHtmlText" style="font-size: 4em">{{element.note !== '' ? element.note :element.text}}</p>
9393
</div>
9494
<div v-if="element.text === 'h2'"
9595
class="htmlHead"
96-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '15%'},
97-
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
98-
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
99-
element.h !== 0 ? {'height' : element.h} : {'height' : '15%'},
96+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '15%'},
97+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
98+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
99+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '15%'},
100100
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
101101
{'background-color': componentData.color}]"
102102
>
103103
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
104104
</div>
105105
<div v-if="element.text === 'h3'"
106106
class="htmlHead"
107-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '18%'},
108-
element.y !== 0 ? {'left': element.y} : {'left': '15%'},
109-
element.w !== 0 ? {'width': element.w} : {'width': '70%'},
110-
element.h !== 0 ? {'height' : element.h} : {'height' : '12%'},
107+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '18%'},
108+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '15%'},
109+
element.w !== 0 ? {'width': element.w} + '%' : {'width': '70%'},
110+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '12%'},
111111
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
112112
{'background-color': componentData.color}]"
113113
>
114114
<p class="innerHtmlText" style="font-size: 2.5em">{{element.note !== '' ? element.note : element.text }}</p>
115115
</div>
116116
<div v-if="element.text === 'h4'"
117117
class="htmlHead"
118-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '20%'},
119-
element.y !== 0 ? {'left': element.y} : {'left': '20%'},
120-
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
121-
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
118+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
119+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '20%'},
120+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '60%'},
121+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '10%'},
122122
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
123123
{'background-color': componentData.color}]"
124124
>
125125
<p class="innerHtmlText" style="font-size: 2em">{{element.note !== '' ? element.note : element.text}}</p>
126126
</div>
127127
<div v-if="element.text === 'h5'"
128128
class="htmlHead"
129-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '20%'},
130-
element.y !== 0 ? {'left': element.y} : {'left': '25%'},
131-
element.w !== 0 ? {'width': element.w} : {'width': '50%'},
132-
element.h !== 0 ? {'height' : element.h} : {'height' : '8%'},
129+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
130+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '25%'},
131+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '50%'},
132+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '8%'},
133133
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
134134
{'background-color': componentData.color}]"
135135
>
136136
<p class="innerHtmlText" style="font-size: 1.5em">{{element.note !== '' ? element.note : element.text}}</p>
137137
</div>
138138
<div v-if="element.text === 'h6'"
139139
class="htmlHead"
140-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '20%'},
141-
element.y !== 0 ? {'left': element.y} : {'left': '30%'},
142-
element.w !== 0 ? {'width': element.w} : {'width': '40%'},
143-
element.h !== 0 ? {'height' : element.h} : {'height' : '5%'},
140+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
141+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '30%'},
142+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '40%'},
143+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '5%'},
144144
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
145145
{'background-color': componentData.color}]"
146146
>
@@ -149,10 +149,10 @@
149149
<div v-if="element.text === 'header'" class="htmlHeader"></div>
150150
<div v-if="element.text === 'img'"
151151
class="htmlGeneral"
152-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '20%'},
153-
element.y !== 0 ? {'left': element.y} : {'left': '20%'},
154-
element.w !== 0 ? {'width': element.w} : {'width': '40%'},
155-
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
152+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
153+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '20%'},
154+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '40%'},
155+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '40%'},
156156
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
157157
{'background-color': componentData.color}]"
158158
>
@@ -161,21 +161,21 @@
161161
<input v-if="element.text === 'input'" class="htmlInput"/>
162162
<div v-if="element.text === 'list'"
163163
class="htmlList"
164-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '30%'},
165-
element.y !== 0 ? {'left': element.y} : {'left': '30%'},
166-
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
167-
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
164+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '30%'},
165+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '30%'},
166+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '60%'},
167+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '10%'},
168168
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
169169
{'background-color': componentData.color}]"
170170
>
171171
<p class="innerHtmlText" style="font-size: 2em">{{element.note !== '' ? element.note : element.text}}</p>
172172
</div>
173173
<div v-if="element.text === 'list-ol'"
174174
class="htmlGeneral"
175-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '20%'},
176-
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
177-
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
178-
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
175+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
176+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
177+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
178+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '40%'},
179179
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
180180
{'background-color': componentData.color}]"
181181
>
@@ -189,10 +189,10 @@
189189
</div>
190190
<div v-if="element.text === 'list-ul'"
191191
class="htmlGeneral"
192-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '20%'},
193-
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
194-
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
195-
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
192+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '20%'},
193+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
194+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
195+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '40%'},
196196
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
197197
{'background-color': componentData.color}]"
198198
>
@@ -206,10 +206,10 @@
206206
</div>
207207
<div v-if="element.text === 'paragraph'"
208208
class="htmlGeneral"
209-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '50%'},
210-
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
211-
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
212-
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
209+
:style="[element.x !== 0 ? {'top': element.x + '%'} : {'top': '50%'},
210+
element.y !== 0 ? {'left': element.y + '%'} : {'left': '10%'},
211+
element.w !== 0 ? {'width': element.w + '%'} : {'width': '80%'},
212+
element.h !== 0 ? {'height' : element.h + '%'} : {'height' : '40%'},
213213
element.z !== 0 ? {'z-index' : element.z} : {'z-index' : '0'},
214214
{'background-color': componentData.color}]"
215215
>
@@ -1044,37 +1044,6 @@ li:hover {
10441044
text-overflow: clip;
10451045
}
10461046
1047-
1048-
.htmlImg{
1049-
position: absolute;
1050-
color: $menutext;
1051-
}
1052-
1053-
.htmlInput{
1054-
position: absolute;
1055-
color: $menutext;
1056-
}
1057-
1058-
.htmlList{
1059-
position: absolute;
1060-
color: $menutext;
1061-
}
1062-
1063-
.htmlList-ol {
1064-
position: absolute;
1065-
color: $menutext;
1066-
}
1067-
1068-
.htmlList-ul{
1069-
position: absolute;
1070-
color: $menutext;
1071-
}
1072-
1073-
.htmlParagraph{
1074-
position: absolute;
1075-
color: $menutext;
1076-
}
1077-
10781047
.innerHtmlText {
10791048
position: absolute;
10801049
text-align: center;
@@ -1091,6 +1060,7 @@ li:hover {
10911060
top: 0%;
10921061
z-index: -1;
10931062
}
1063+
10941064
.sr-only {
10951065
position: absolute;
10961066
overflow: hidden;

‎src/components/left-sidebar/ComponentTab/InputHTMLMenu.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,6 @@ export default {
175175
for (let i = 0; i <this.routes[this.activeRoute].length; i++) {
176176
for (let j = 0; j < this.routes[this.activeRoute][i].htmlList.length; j++) {
177177
if(this.activeHTML === this.routes[this.activeRoute][i].htmlList[j].id) {
178-
console.log(this.routes[this.activeRoute][i])
179178
this.heightText = this.routes[this.activeRoute][i].htmlList[j].h;
180179
this.widthText = this.routes[this.activeRoute][i].htmlList[j].w;
181180
this.topText = this.routes[this.activeRoute][i].htmlList[j].x;

0 commit comments

Comments
 (0)