Skip to content

Commit 82b503f

Browse files
JaceCroweJaceCrowe
committed
css changes for canvas vue, made html elements appear better and closer to actual elements
1 parent 60a9223 commit 82b503f

File tree

1 file changed

+73
-49
lines changed

1 file changed

+73
-49
lines changed

‎src/components/Canvas.vue

Lines changed: 73 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,23 @@
6161
element.y !== 0 ? {'left': element.y} : {'left': '60%'},
6262
element.w !== 0 ? {'width': element.w} : {'width': '25%'},
6363
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
64-
{'background-color': componentData.color}]">
64+
{'background-color': componentData.color}]"
65+
>
6566
<p class="innerHtmlText">{{element.note !== '' ? element.note : element.text}}</p>
6667
</div>
6768
<div v-if="element.text === 'div'"
6869
class="htmlDiv"
70+
:style="[element.x !== 0 ? {'top': element.x} : {'top': '10%'},
71+
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
72+
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
73+
element.h !== 0 ? {'height' : element.h} : {'height' : '75%'},
74+
{'background-color': componentData.color}]"
75+
>
76+
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
77+
</div>
78+
<div v-if="element.text === 'footer'" class="htmlFooter"></div>
79+
<div v-if="element.text === 'form'"
80+
class="htmlGeneral"
6981
:style="[element.x !== 0 ? {'top': element.x} : {'top': '50%'},
7082
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
7183
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
@@ -74,36 +86,35 @@
7486
>
7587
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
7688
</div>
77-
<div v-if="element.text === 'footer'" class="htmlFooter"></div>
7889
<div v-if="element.text === 'h1'"
7990
class="htmlHead"
8091
:style="[element.x !== 0 ? {'top': element.x} : {'top': '10%'},
81-
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
82-
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
92+
element.y !== 0 ? {'left': element.y} : {'left': '5%'},
93+
element.w !== 0 ? {'width': element.w} : {'width': '90%'},
8394
element.h !== 0 ? {'height' : element.h} : {'height' : '20%'},
8495
{'background-color': componentData.color}]"
8596
>
86-
<p class="innerHtmlText" style="font-size: 4em">{{element.note !== '' ? element.note :'Lorem Ipsum'}}</p>
97+
<p class="innerHtmlText" style="font-size: 4em">{{element.note !== '' ? element.note :element.text}}</p>
8798
</div>
8899
<div v-if="element.text === 'h2'"
89100
class="htmlHead"
90101
:style="[element.x !== 0 ? {'top': element.x} : {'top': '15%'},
91-
element.y !== 0 ? {'left': element.y} : {'left': '15%'},
92-
element.w !== 0 ? {'width': element.w} : {'width': '70%'},
102+
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
103+
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
93104
element.h !== 0 ? {'height' : element.h} : {'height' : '15%'},
94105
{'background-color': componentData.color}]"
95106
>
96-
<p class="innerHtmlText" style="font-size: 2.5em">{{element.note !== '' ? element.note : 'dolor sit amet'}}</p>
107+
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
97108
</div>
98109
<div v-if="element.text === 'h3'"
99110
class="htmlHead"
100111
:style="[element.x !== 0 ? {'top': element.x} : {'top': '18%'},
101-
element.y !== 0 ? {'left': element.y} : {'left': '18%'},
102-
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
112+
element.y !== 0 ? {'left': element.y} : {'left': '15%'},
113+
element.w !== 0 ? {'width': element.w} : {'width': '70%'},
103114
element.h !== 0 ? {'height' : element.h} : {'height' : '12%'},
104115
{'background-color': componentData.color}]"
105116
>
106-
<p class="innerHtmlText" style="font-size: 2.2em">{{element.note !== '' ? element.note : 'consectetur adipiscing elit'}}</p>
117+
<p class="innerHtmlText" style="font-size: 2.5em">{{element.note !== '' ? element.note : element.text }}</p>
107118
</div>
108119
<div v-if="element.text === 'h4'"
109120
class="htmlHead"
@@ -113,80 +124,93 @@
113124
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
114125
{'background-color': componentData.color}]"
115126
>
116-
<p class="innerHtmlText" style="font-size: 2em">{{element.note !== '' ? element.note : 'sed do eiusmod tempor incididunt'}}</p>
127+
<p class="innerHtmlText" style="font-size: 2em">{{element.note !== '' ? element.note : element.text}}</p>
117128
</div>
118129
<div v-if="element.text === 'h5'"
119130
class="htmlHead"
120131
:style="[element.x !== 0 ? {'top': element.x} : {'top': '20%'},
121-
element.y !== 0 ? {'left': element.y} : {'left': '20%'},
122-
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
123-
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
132+
element.y !== 0 ? {'left': element.y} : {'left': '25%'},
133+
element.w !== 0 ? {'width': element.w} : {'width': '50%'},
134+
element.h !== 0 ? {'height' : element.h} : {'height' : '8%'},
124135
{'background-color': componentData.color}]"
125136
>
126-
<p class="innerHtmlText" style="font-size: 2em">{{element.note !== '' ? element.note : 'ut labore et dolore magna aliqua'}}</p>
137+
<p class="innerHtmlText" style="font-size: 1.5em">{{element.note !== '' ? element.note : element.text}}</p>
127138
</div>
128139
<div v-if="element.text === 'h6'"
129140
class="htmlHead"
130141
:style="[element.x !== 0 ? {'top': element.x} : {'top': '20%'},
131-
element.y !== 0 ? {'left': element.y} : {'left': '20%'},
132-
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
133-
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
134-
{'background-color': componentData.color}]"
135-
>
136-
<p class="innerHtmlText" style="font-size: 2em">{{element.note !== '' ? element.note : 'Ut enim ad minim veniam'}}</p>
137-
</div>
138-
<div v-if="element.text === 'navbar'" class="htmlNavbar"></div>
139-
<div v-if="element.text === 'form'"
140-
class="htmlForm"
141-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '50%'},
142-
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
143-
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
144-
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
142+
element.y !== 0 ? {'left': element.y} : {'left': '30%'},
143+
element.w !== 0 ? {'width': element.w} : {'width': '40%'},
144+
element.h !== 0 ? {'height' : element.h} : {'height' : '5%'},
145145
{'background-color': componentData.color}]"
146146
>
147-
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
147+
<p class="innerHtmlText" style="font-size: 1em">{{element.note !== '' ? element.note : element.text}}</p>
148148
</div>
149149
<div v-if="element.text === 'header'" class="htmlHeader"></div>
150150
<div v-if="element.text === 'img'"
151-
class="htmlImg"
152-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '50%'},
153-
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
154-
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
151+
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%'},
155155
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
156156
{'background-color': componentData.color}]"
157157
>
158158
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
159159
</div>
160160
<input v-if="element.text === 'input'" class="htmlInput"/>
161-
<div v-if="element.text === 'list'" class="htmlList"></div>
161+
<div v-if="element.text === 'list'"
162+
class="htmlList"
163+
:style="[element.x !== 0 ? {'top': element.x} : {'top': '30%'},
164+
element.y !== 0 ? {'left': element.y} : {'left': '30%'},
165+
element.w !== 0 ? {'width': element.w} : {'width': '60%'},
166+
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
167+
{'background-color': componentData.color}]"
168+
>
169+
<p class="innerHtmlText" style="font-size: 2em">{{element.note !== '' ? element.note : element.text}}</p>
170+
</div>
162171
<div v-if="element.text === 'list-ol'"
163-
class="htmlList-Ol"
164-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '50%'},
172+
class="htmlGeneral"
173+
:style="[element.x !== 0 ? {'top': element.x} : {'top': '20%'},
165174
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
166175
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
167176
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
168177
{'background-color': componentData.color}]"
169178
>
179+
<p class="innerHtmlText" style="font-size: 1.5em">{{element.note !== '' ? element.note : element.text}}
180+
<ol>
181+
<li>1</li>
182+
<li>2</li>
183+
<li>3</li>
184+
</ol>
185+
</p>
170186
</div>
171187
<div v-if="element.text === 'list-ul'"
172-
class="htmlList-Ul"
173-
:style="[element.x !== 0 ? {'top': element.x} : {'top': '50%'},
188+
class="htmlGeneral"
189+
:style="[element.x !== 0 ? {'top': element.x} : {'top': '20%'},
174190
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
175191
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
176192
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
177193
{'background-color': componentData.color}]"
178194
>
195+
<p class="innerHtmlText" style="font-size: 1.5em">{{element.note !== '' ? element.note : element.text}}
196+
<ol>
197+
<li>-</li>
198+
<li>-</li>
199+
<li>-</li>
200+
</ol>
201+
</p>
179202
</div>
180203
<div v-if="element.text === 'paragraph'"
181-
class="htmlParagraph"
204+
class="htmlGeneral"
182205
:style="[element.x !== 0 ? {'top': element.x} : {'top': '50%'},
183206
element.y !== 0 ? {'left': element.y} : {'left': '10%'},
184207
element.w !== 0 ? {'width': element.w} : {'width': '80%'},
185208
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
186209
{'background-color': componentData.color}]"
187210
>
188-
<p>{{element.note !== '' ? element.note : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'}}</p>
211+
<p>{{element.note !== '' ? element.note : element.text }}</p>
189212
</div>
213+
<div v-if="element.text === 'navbar'" class="htmlNavbar"></div>
190214
</div>
191215
<q-icon v-if="componentData.componentName === this.activeComponent"
192216
size="25px"
@@ -1036,6 +1060,7 @@ color:black;
10361060
margin: .5em;
10371061
border-style: solid;
10381062
border: 2em;
1063+
border-radius: 1.5%;
10391064
}
10401065
10411066
.htmlDiv {
@@ -1055,8 +1080,11 @@ color:black;
10551080
background-color: $primary;
10561081
}
10571082
1058-
.htmlForm {
1059-
background-color: rgba($secondary, .42);
1083+
.htmlGeneral{
1084+
position: absolute;
1085+
color: $menutext;
1086+
border-radius: 1.5%;
1087+
border-style: solid;
10601088
}
10611089
10621090
.htmlHead{
@@ -1073,12 +1101,8 @@ color:black;
10731101
}
10741102
10751103
.htmlInput{
1076-
background-color: rgba($secondary, .42);
1077-
}
1078-
1079-
.htmlLink{
10801104
position: absolute;
1081-
color: blue;
1105+
color: $menutext;
10821106
}
10831107
10841108
.htmlList{

0 commit comments

Comments
 (0)