Skip to content

Commit 70aa9a8

Browse files
qaiswardagqaiswardag
committed
Enhance CSS and layout
1 parent 949fc9f commit 70aa9a8

File tree

9 files changed

+48
-45
lines changed

9 files changed

+48
-45
lines changed

‎resources/js/Components/Modals/PageBuilderModal.vue

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ onMounted(() => {
181181
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
182182
>
183183
<div
184-
class="inline-block align-bottom text-left transform transition-all sm:align-middle w-full overflow-hidden h-[100vh] top-0 left-0 right-0 absolute"
184+
class="bg-red-100 inline-block align-bottom text-left transform transition-all sm:align-middle w-full overflow-hidden h-[100vh] top-0 left-0 right-0 absolute"
185185
>
186186
<DynamicModal
187187
:show="showModalConfirmClosePageBuilder"
@@ -212,39 +212,39 @@ onMounted(() => {
212212
null
213213
)
214214
"
215-
class="px-4 h-[10vh] flex items-center justify-between border-b border-gray-200 mb-2"
215+
class="px-4 h-[10vh] flex items-center justify-between border-b border-gray-200 bg-white"
216216
>
217217
<div class="flex justify-start myPrimaryGap">
218218
<div
219219
class="flex justify-start myPrimaryGap"
220220
>
221221
<button
222-
class="myPrimaryButton text-[10px] py-2 min-h-2"
222+
class="myPrimaryButton lg:text-xs text-[10px] lg:py-3 py-2 min-h-2"
223223
@click="secondButton"
224224
type="button"
225225
>
226226
<span
227-
class="material-symbols-outlined text-[18px]"
227+
class="material-symbols-outlined text-[16px]"
228228
>
229229
done
230230
</span>
231-
Save & Close
231+
Save & Exit
232232
</button>
233233
<button
234234
v-if="
235235
updateOrCreate === 'update' &&
236236
hideDraftButton
237237
"
238-
class="mySecondaryButton text-[10px] py-2 min-h-2"
238+
class="mySecondaryButton lg:text-xs text-[10px] lg:py-3 py-2 min-h-2"
239239
@click="handleDraftForUpdate"
240240
type="button"
241241
>
242242
<span
243-
class="material-symbols-outlined text-[18px]"
243+
class="material-symbols-outlined text-[16px]"
244244
>
245-
edit
245+
settings_backup_restore
246246
</span>
247-
Draft
247+
Recreate Draft
248248
</button>
249249
</div>
250250
</div>

‎resources/js/Components/Modals/PageBuilderPreviewModal.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,10 +85,10 @@ const handleEscapeKey = function () {
8585
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
8686
>
8787
<div
88-
class="inline-block align-bottom text-left transform transition-all sm:align-middle w-full overflow-hidden h-[100vh] top-0 left-0 right-0 absolute"
88+
class="bg-red-100 inline-block align-bottom text-left transform transition-all sm:align-middle w-full overflow-hidden h-[100vh] top-0 left-0 right-0 absolute"
8989
>
9090
<div
91-
class="px-4 h-[10vh] flex items-center justify-between border-b border-gray-200 mb-2"
91+
class="px-4 h-[10vh] flex items-center justify-between border-b border-gray-200 bg-white"
9292
>
9393
<ApplicationLogo></ApplicationLogo>
9494
<div

‎resources/js/Components/PageBuilder/DropdownsPlusToggles/OptionsDropdown.vue

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@ const deleteAllComponents = function () {
5959
showModalDeleteAllComponents.value = true;
6060
typeModal.value = "delete";
6161
gridColumnModal.value = 2;
62-
titleModal.value = "Delete all Components";
63-
descriptionModal.value = "Are you sure you want to delete all Components?";
62+
titleModal.value = "Remove all Components";
63+
descriptionModal.value = "Are you sure you want to remove all Components?";
6464
firstButtonModal.value = "Close";
6565
secondButtonModal.value = null;
6666
thirdButtonModal.value = "Delete";
@@ -124,13 +124,12 @@ const settingsSlideOverButton = function () {
124124
>
125125
<div>
126126
<MenuButton
127-
class="inline-flex items-center gap-2 justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-emerald-600"
127+
class="inline-flex items-center gap-2 justify-center w-full rounded-md border border-gray-300 shadow-sm pl-4 pr-6 py-2 bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-emerald-600"
128128
>
129-
<span class="myMediumIcon material-symbols-outlined">
130-
check
129+
<span class="material-symbols-outlined text-[16px]">
130+
keyboard_command_key
131131
</span>
132-
Options
133-
<span class="material-symbols-outlined"> unfold_more </span>
132+
<span class="text-sm"> Options </span>
134133
</MenuButton>
135134
</div>
136135

@@ -157,11 +156,15 @@ const settingsSlideOverButton = function () {
157156
'block px-4 py-2',
158157
]"
159158
>
160-
<div class="flex items-center justify-left gap-2">
159+
<div
160+
class="flex items-center justify-left gap-2 text-sm"
161+
>
161162
<div
162-
class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
163+
class="h-8 w-8 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
163164
>
164-
<span class="material-symbols-outlined">
165+
<span
166+
class="material-symbols-outlined text-[16px]"
167+
>
165168
visibility
166169
</span>
167170
</div>
@@ -181,12 +184,16 @@ const settingsSlideOverButton = function () {
181184
'block px-4 py-2',
182185
]"
183186
>
184-
<div class="flex items-center justify-left gap-2">
187+
<div
188+
class="flex items-center justify-left gap-2 text-sm"
189+
>
185190
<div
186-
class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
191+
class="h-8 w-8 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
187192
>
188-
<span class="material-symbols-outlined">
189-
gesture
193+
<span
194+
class="material-symbols-outlined text-[16px]"
195+
>
196+
settings
190197
</span>
191198
</div>
192199
Settings
@@ -204,18 +211,20 @@ const settingsSlideOverButton = function () {
204211
'block px-4 py-2',
205212
]"
206213
>
207-
<div class="flex items-center justify-left gap-2">
214+
<div
215+
class="flex items-center justify-left gap-2 text-sm"
216+
>
208217
<div
209-
class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
218+
class="h-8 w-8 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryErrorColor hover:text-white text-myPrimaryErrorColor"
210219
>
211220
<span
212-
class="myMediumIcon material-symbols-outlined"
221+
class="myMediumIcon material-symbols-outlined text-[16px]"
213222
>
214223
delete
215224
</span>
216225
</div>
217226
<span class="group-hover:text-white">
218-
Delete all Components
227+
Clear page
219228
</span>
220229
</div>
221230
</div>

‎resources/js/Components/PageBuilder/EditorMenu/Editables/BackgroundColorEditor.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ watch(
4242
<ListboxButton class="w-max min-w-[10rem] flex items-center px-2">
4343
<div v-if="getBackgroundColor === 'none'" class="flex gap-2">
4444
<span class="material-symbols-outlined"> ev_shadow </span>
45-
<span class="block truncate">Background color</span>
45+
<span class="block truncate">Background</span>
4646
</div>
4747
<div
4848
v-if="backgroundColor !== 'none'"

‎resources/js/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -279,7 +279,7 @@ const handleModalIframeSrc = function () {
279279
</MediaLibraryModal>
280280
281281
<div
282-
class="z-20 py-1 px-2 h-20 flex items-center justify-center border-b border-gray-200"
282+
class="z-20 py-1 px-2 h-20 flex items-center justify-center mt-2 mx-2 border-b border-myPrimaryLightGrayColor"
283283
>
284284
<div
285285
class="flex items-center justify-center divide-x divide-gray-200 py-1"

‎resources/js/Components/Search/SearchComponents.vue

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -382,7 +382,7 @@ onMounted(async () => {
382382
</div>
383383
</section>
384384
<aside
385-
class="md:w-2/6 overflow-scroll min-h-[30rem] max-h-[30rem] w-full"
385+
class="md:w-2/6 overflow-scroll min-h-[30rem] max-h-[30rem] w-full border rounded pt-4 pb-2"
386386
>
387387
<div
388388
class="grid grid-cols-2 gap-2 w-full overflow-y-scroll"
@@ -396,14 +396,8 @@ onMounted(async () => {
396396
"
397397
v-for="helperComponent in componentHelpers"
398398
:key="helperComponent.title"
399-
class="myPrimaryTag m-0 pt-8 pb-4 px-2 rounded cursor-pointer"
399+
class="myPrimaryTag py-4 px-2 rounded-full cursor-pointer my-0 mx-2"
400400
>
401-
<div
402-
class="flex justify-center items-center"
403-
>
404-
<span v-html="helperComponent.icon">
405-
</span>
406-
</div>
407401
<div
408402
class="flex justify-center items-center gap-4 text-xs font-medium"
409403
>

‎resources/js/Pages/PageBuilder/PageBuilder.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -160,16 +160,16 @@ onMounted(async () => {
160160
</PageBuilderPreviewModal>
161161
162162
<div
163-
class="w-full inset-x-0 h-[90vh] lg:pt-0 pt-0-z-10 bg-white overflow-x-scroll"
163+
class="w-full inset-x-0 h-[90vh] z-10 bg-white overflow-x-scroll lg:pt-2 pt-2"
164164
>
165165
<div class="relative h-full flex">
166166
<div
167167
@click.self="
168168
store.commit('pageBuilderState/setComponent', null)
169169
"
170-
class="min-w-[3.5rem] py-2"
170+
class="min-w-[3.5rem] pt-6 pb-2 my-2 mx-2 bg-myPrimaryLightGrayColor rounded-full shadow"
171171
>
172-
<div class="mx-4 flex flex-col myPrimaryGap">
172+
<div class="mx-2 flex flex-col myPrimaryGap">
173173
<div class="flex gap-2 items-center justify-center">
174174
<button
175175
type="button"
@@ -293,7 +293,7 @@ onMounted(async () => {
293293
class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
294294
>
295295
<span class="material-symbols-outlined">
296-
filter_vintage
296+
gesture
297297
</span>
298298
</button>
299299
</div>

‎resources/js/Pages/PageBuilder/Preview.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div
3-
class="w-full inset-x-0 h-[90vh] lg:pt-0 pt-0-z-10 overflow-x-scroll bg-white"
3+
class="w-full inset-x-0 h-[90vh] z-10 bg-white overflow-x-scroll lg:pt-2 pt-2"
44
>
55
<div id="page-builder-editor">
66
<div class="" v-html="htmlPage"></div>

‎resources/js/utils/builder/html-elements/componentHelpers.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ const componentHelpers = [
7575
{
7676
html_code: `<section><div class="relative py-8"><div class="absolute inset-0 flex items-center" aria-hidden="true"><div class="w-full border-4 border-gray-800 leading-none"></div></div><div class="relative flex justify-start"></div></div></section>`,
7777
id: null,
78-
title: "Line Break Divider",
78+
title: "Break Divider",
7979
icon: `
8080
<span class="material-symbols-outlined">
8181
horizontal_rule

0 commit comments

Comments
 (0)