Skip to content

Commit bdc1f68

Browse files
bernardoazevedobernardoazevedo
committed
alteração no layout
1 parent d05408a commit bdc1f68

File tree

6 files changed

+47
-45
lines changed

6 files changed

+47
-45
lines changed

‎public/assets/css/app.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
--backgroundColor1: hsl(from var(--backgroundColor) h s calc(l - 20));
1313
}
1414

15-
#preview-container {
15+
#htmlText {
1616
background-color: var(--backgroundColor);
1717
}
1818

@@ -173,7 +173,7 @@ blockquote {
173173
.grow-wrap::after {
174174
/* Identical styling required!! */
175175
/* border: 1px solid black; */
176-
padding: 2rem;
176+
padding: 16px;
177177
font: inherit;
178178

179179
/* Place on top of each other */

‎resources/views/components/section.blade.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<section {{ $attributes->merge(['class' => 'shadow divide-y-2 bg-white']) }}>
2+
{{ $slot }}
3+
</section>

‎resources/views/content/partials/parsed-content.blade.php‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
<section id="preview-container" class="p-4 sm:p-8 shadow sm:rounded-lg col-span-2">
2-
<div id="htmlText" class="parsedown flex flex-col gap-y-2 sm:w-auto">
1+
<x-section class="col-span-5 order-2 lg:col-span-2 lg:order-3 flex flex-col">
2+
<header class="text-lg font-medium px-4 py-2">Preview Content</header>
3+
4+
<div id="htmlText" class="parsedown flex flex-col gap-y-2 sm:w-auto p-4 h-max grow">
35
Formatted content will appear here
46
</div>
5-
</section>
7+
</x-section>

‎resources/views/content/partials/style-editor.blade.php‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,26 @@
1-
<section class="p-4 sm:p-8 shadow sm:rounded-lg bg-white">
2-
<div class="flex flex-col gap-y-2 sm:w-auto">
3-
<header class="text-lg font-medium mb-2">Edit your content style</header>
1+
<x-section class="col-span-5 order-3 lg:col-span-1 lg:order-1">
2+
<header class="text-lg font-medium px-4 py-2">Edit your content style</header>
43

5-
<div class="flex gap-3 flex-wrap">
6-
<div class="flex flex-col flex-grow">
7-
<x-color-input-label for="textColor" class="truncate">Text Color</x-color-input-label>
8-
<x-color-input name="textColor" id="textColor" value="#374151"></x-color-input>
9-
</div>
10-
<div class="flex flex-col flex-grow">
11-
<x-color-input-label for="highlightColor" class="truncate">Highlight Color</x-color-input-label>
12-
<x-color-input name="highlightColor" id="highlightColor" value="#559949"></x-color-input>
13-
</div>
14-
<div class="flex flex-col flex-grow">
15-
<x-color-input-label for="backgroundColor" class="truncate">Background Color</x-color-input-label>
16-
<x-color-input name="backgroundColor" id="backgroundColor" value="#FFFFFF"></x-color-input>
17-
</div>
4+
<div class="flex sm:w-auto p-4 gap-3 flex-wrap">
5+
<div class="flex flex-col flex-grow">
6+
<x-color-input-label for="textColor" class="truncate">Text Color</x-color-input-label>
7+
<x-color-input name="textColor" id="textColor" value="#374151"></x-color-input>
188
</div>
19-
20-
<div class="flex gap-3 flex-wrap mt-4">
21-
<div class="flex flex-col flex-grow">
22-
<x-input-label for="filename">Filename</x-input-label>
23-
<x-text-input name="filename" id="filename" class="w-full"></x-text-input>
24-
</div>
25-
<x-primary-button class="max-w-fit">Generate PDF</x-primary-button>
9+
<div class="flex flex-col flex-grow">
10+
<x-color-input-label for="highlightColor" class="truncate">Highlight Color</x-color-input-label>
11+
<x-color-input name="highlightColor" id="highlightColor" value="#559949"></x-color-input>
12+
</div>
13+
<div class="flex flex-col flex-grow">
14+
<x-color-input-label for="backgroundColor" class="truncate">Background Color</x-color-input-label>
15+
<x-color-input name="backgroundColor" id="backgroundColor" value="#FFFFFF"></x-color-input>
2616
</div>
17+
</div>
2718

19+
<div class="flex gap-3 flex-wrap sm:w-auto p-4">
20+
<div class="flex flex-col flex-grow">
21+
<x-input-label for="filename">Filename</x-input-label>
22+
<x-text-input name="filename" id="filename" class="w-full"></x-text-input>
23+
</div>
24+
<x-primary-button class="max-w-fit">Generate PDF</x-primary-button>
2825
</div>
29-
</section>
26+
</x-section>

‎resources/views/content/partials/write-content.blade.php‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
<section class="col-span-2">
2-
<div class="space-y-6 grow-wrap dont-break-out">
3-
<textarea id="text" name="text" type="text" rows="10" cols=""
4-
class="p-4 sm:p-8 bg-white sm:rounded-lg border-none focus:border-gray-400 focus:ring-gray-400 shadow block w-full"
1+
<x-section class="col-span-5 order-1 lg:col-span-2 lg:order-2">
2+
<header class="text-lg font-medium px-4 py-2">Write here</header>
3+
4+
<div class="grow-wrap dont-break-out">
5+
<textarea id="text" name="text" type="text" rows="27" cols=""
6+
class="p-4 border-none focus:border-gray-400 focus:ring-gray-400 block w-full"
57
required autofocus autocomplete="text" placeholder="Type here"
68
onInput="this.parentNode.dataset.replicatedValue = this.value"></textarea>
79
</div>
8-
</section>
10+
</x-section>

‎resources/views/editor.blade.php‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
<x-app-layout>
2-
<div class="py-8">
3-
<div class=" mx-auto sm:px-6 lg:px-8 space-y-6">
4-
<form action="/generatePdf" method="post">
5-
@csrf
6-
<div class="lg:grid lg:grid-cols-5 lg:space-x-4 space-y-6 lg:space-y-0">
7-
@include('content.partials.style-editor')
8-
@include('content.partials.write-content')
9-
@include('content.partials.parsed-content')
10-
</div>
11-
</form>
12-
</div>
2+
<div class="mx-auto space-y-6 py-4">
3+
<form action="/generatePdf" method="post">
4+
@csrf
5+
<div class="grid gap-4 grid-cols-5">
6+
@include('content.partials.style-editor')
7+
@include('content.partials.write-content')
8+
@include('content.partials.parsed-content')
9+
</div>
10+
</form>
1311
</div>
1412
</x-app-layout>

0 commit comments

Comments
 (0)