Skip to content

Commit d8d2a6c

Browse files
ilestisilestis
committed
WIP
1 parent 1cf132b commit d8d2a6c

35 files changed

+153
-157
lines changed

‎app/View/Components/Dialog/Article.php

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<?php
2+
3+
namespace App\View\Components\Dialog;
4+
5+
use Closure;
6+
use Illuminate\Contracts\View\View;
7+
use Illuminate\View\Component;
8+
9+
class Article extends Component
10+
{
11+
/**
12+
* Create a new component instance.
13+
*/
14+
public function __construct()
15+
{
16+
//
17+
}
18+
19+
/**
20+
* Get the view / contents that represent the component.
21+
*/
22+
public function render(): View|Closure|string
23+
{
24+
return view('components.dialog.article');
25+
}
26+
}

‎resources/js/components/attributes/Manager.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,8 @@
8989
</div>
9090

9191
<dialog class="dialog rounded-top md:rounded-2xl bg-base-100 min-w-fit shadow-md text-base-content" id="templates-dialog" aria-modal="true" v-if="!loading">
92-
<header class="bg-base-200 sm:rounded-t">
93-
<h4 v-html="trans('templates.title')"></h4>
92+
<header class="flex gap-6 items-center p-4 md:p-6 justify-between">
93+
<h4 v-html="trans('templates.title')" class="text-lg font-normal"></h4>
9494

9595
<button autofocus type="button" class="text-xl opacity-50 hover:opacity-100 focus:opacity-100 cursor-pointer text-decoration-none" aria-label="Close" v-on:click="closeModal()">
9696
<i class="fa-regular fa-circle-xmark" aria-hidden="true"></i>

‎resources/js/components/families/FamilyTree.vue

+7-7
Original file line numberDiff line numberDiff line change
@@ -75,13 +75,13 @@
7575
</div>
7676

7777
<dialog class="dialog rounded-top md:rounded-2xl bg-base-100 min-w-fit shadow-md text-base-content" id="family-tree-modal" aria-modal="true" v-if="!isLoading">
78-
<header class="bg-base-200 sm:rounded-t">
79-
<h4 v-if="isAddingChild">{{ this.texts.modals.entity.child.title }}</h4>
80-
<h4 v-else-if="isAddingCharacter">{{ this.texts.modals.entity.add.title }}</h4>
81-
<h4 v-else-if="isEditingEntity">{{ this.texts.modals.entity.edit.title }}</h4>
82-
<h4 v-else-if="isAddingRelation">{{ this.texts.modals.relation.add.title }}</h4>
83-
<h4 v-else-if="isEditingRelation">{{ this.texts.modals.relation.edit.title }}</h4>
84-
<h4 v-else-if="isAddingNewFounder">{{ this.texts.modals.entity.founder.title }}</h4>
78+
<header class="flex gap-6 items-center p-4 md:p-6 justify-between">
79+
<h4 v-if="isAddingChild" class="text-lg font-normal">{{ this.texts.modals.entity.child.title }}</h4>
80+
<h4 v-else-if="isAddingCharacter" class="text-lg font-normal">{{ this.texts.modals.entity.add.title }}</h4>
81+
<h4 v-else-if="isEditingEntity" class="text-lg font-normal">{{ this.texts.modals.entity.edit.title }}</h4>
82+
<h4 v-else-if="isAddingRelation" class="text-lg font-normal">{{ this.texts.modals.relation.add.title }}</h4>
83+
<h4 v-else-if="isEditingRelation" class="text-lg font-normal">{{ this.texts.modals.relation.edit.title }}</h4>
84+
<h4 v-else-if="isAddingNewFounder" class="text-lg font-normal">{{ this.texts.modals.entity.founder.title }}</h4>
8585

8686
<button autofocus type="button" class="text-xl opacity-50 hover:opacity-100 focus:opacity-100 cursor-pointer text-decoration-none" aria-label="Close" v-on:click="closeModal()">
8787
<i class="fa-regular fa-circle-xmark" aria-hidden="true"></i>

‎resources/js/components/passport/Clients.vue

+6-6
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@
7474

7575
<!-- Create Client Modal -->
7676
<dialog class="dialog rounded-2xl text-center" id="modal-create-client" ref="createModal" aria-modal="true" aria-labelledby="modal-create-client-label">
77-
<header>
78-
<h4 id="modal-create-client-label">
77+
<header class="flex gap-6 items-center p-4 md:p-6 justify-between w-full">
78+
<h4 id="modal-create-client-label" class="text-lg font-normal">
7979
Create Client
8080
</h4>
8181
<button type="button" class="rounded-full" @click="closeModal('createModal')" title="Close">
@@ -125,7 +125,7 @@
125125

126126
</form>
127127

128-
<div class="grid grid-cols-2 gap-2 w-full">
128+
<div class="flex justify-between items-center gap-2 w-full">
129129
<button type="button" class="btn2 btn-ghost" @click="closeModal('createModal')">Close</button>
130130

131131
<button type="button" class="btn2 btn-primary" @click="store">
@@ -137,8 +137,8 @@
137137

138138
<!-- Edit Client Modal -->
139139
<dialog class="dialog rounded-2xl text-center" id="modal-edit-client" ref="editModal" aria-modal="true" aria-labelledby="modal-edit-client-label">
140-
<header>
141-
<h4 id="modal-edit-client-label">
140+
<header class="flex gap-6 items-center p-4 md:p-6 justify-between">
141+
<h4 id="modal-edit-client-label" class="text-lg font-normal">
142142
Create Client
143143
</h4>
144144
<button type="button" class="rounded-full" @click="closeModal('editModal')" title="Close">
@@ -189,7 +189,7 @@
189189
</div>
190190
</form>
191191

192-
<div class="grid grid-cols-2 gap-2 w-full">
192+
<div class="flex justify-between items-center gap-2 w-full">
193193
<button type="button" class="btn2 btn-ghost" @click="closeModal('editModal')">Close</button>
194194

195195
<button type="button" class="btn2 btn-primary" @click="update">

‎resources/js/components/passport/PersonalAccessTokens.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@
5151
<!-- Create Token Modal -->
5252

5353
<dialog class="dialog rounded-2xl text-center" id="modal-create-token" ref="createModal" aria-modal="true" aria-labelledby="modal-create-token-label">
54-
<header>
55-
<h4 id="modal-create-token-label">
54+
<header class="flex gap-6 items-center p-4 md:p-6 justify-between">
55+
<h4 id="modal-create-token-label" class="text-lg font-normal">
5656
Create Token
5757
</h4>
5858
<button type="button" class="rounded-full" @click="closeModal('createModal')" title="Close">
@@ -100,7 +100,7 @@
100100
</div>
101101
</form>
102102

103-
<div class="grid grid-cols-2 gap-2 w-full">
103+
<div class="flex justify-between items-center gap-2 w-full">
104104
<button type="button" class="btn2 btn-ghost" @click="closeModal('createModal')">Close</button>
105105

106106
<button type="button" class="btn2 btn-primary" @click="store">
@@ -112,8 +112,8 @@
112112

113113
<!-- Access Token Modal -->
114114
<dialog class="dialog rounded-2xl text-center" id="modal-access-token" ref="accessModal" aria-modal="true" aria-labelledby="modal-access-token-label">
115-
<header>
116-
<h4 id="modal-access-token-label">
115+
<header class="flex gap-6 items-center p-4 md:p-6 justify-between">
116+
<h4 id="modal-access-token-label" class="text-lg font-normal">
117117
Personal Access Token
118118
</h4>
119119
<button type="button" class="rounded-full" @click="closeModal('accessModal')" title="Close">

‎resources/js/components/subscription/BillingManagement.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
</a>
3535
</div>
3636
<dialog class="dialog rounded-2xl text-center" id="modal-card" ref="cardModal" aria-modal="true" aria-labelledby="modal-card-label">
37-
<header>
38-
<h4 id="modal-card-label">
37+
<header class="flex gap-6 items-center p-4 md:p-6 justify-between w-full">
38+
<h4 id="modal-card-label" class="text-lg font-normal">
3939
{{ translate('new_card') }}
4040
</h4>
4141
<button type="button" class="rounded-full" @click="closeModal('cardModal')" title="Close">
@@ -62,7 +62,7 @@
6262
{{ translate('helper') }}
6363
</p>
6464

65-
<div class="grid grid-cols-2 gap-2">
65+
<div class="flex justify-between items-center gap-2 w-full">
6666
<button type="button" class="btn2 btn-ghost" @click="closeModal('cardModal')">Close</button>
6767

6868
<button type="button" v-bind:class="saveBtnClass()" @click="submitPaymentMethod" ref="formBtn">

‎resources/js/gallery/Browser.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
</div>
55

66
<dialog class="dialog rounded-2xl text-center" id="gallery-dialog" ref="galleryDialog" aria-modal="true" aria-labelledby="modal-card-label">
7-
<header class="bg-base-200 sm:rounded-t">
8-
<h4 v-html="trans.browse.title" ></h4>
7+
<header class="flex gap-6 items-center p-4 md:p-6 justify-between">
8+
<h4 v-html="trans.browse.title" class="text-lg font-normal"></h4>
99
<button type="button" class="text-base-content" @click="closeBrowser()" title="Close">
1010
<i class="fa-regular fa-circle-xmark" aria-hidden="true"></i>
1111
<span class="sr-only">Close</span>

‎resources/js/gallery/Gallery.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -140,8 +140,8 @@
140140
</div>
141141

142142
<dialog ref="newDialog" class="dialog rounded-2xl text-center" v-if="initiated">
143-
<header class="bg-base-200 sm:rounded-t">
144-
<h4 v-html="trans('new_folder')"></h4>
143+
<header class="flex gap-6 items-center p-4 md:p-6 justify-between">
144+
<h4 v-html="trans('new_folder')" class="text-lg font-normal"></h4>
145145
<button type="button" class="text-base-content" @click="closeModal(newDialog)" title="Close">
146146
<i class="fa-regular fa-circle-xmark" aria-hidden="true"></i>
147147
<span class="sr-only">Close</span>
@@ -168,8 +168,8 @@
168168
</dialog>
169169

170170
<dialog ref="updateDialog" class="dialog rounded-2xl text-center" v-if="initiated">
171-
<header class="bg-base-200 sm:rounded-t">
172-
<h4 v-html="trans('update')"></h4>
171+
<header class="flex gap-6 items-center p-4 md:p-6 justify-between">
172+
<h4 v-html="trans('update')" class="text-lg font-normal"></h4>
173173
<button type="button" class="text-base-content" @click="closeModal(updateDialog)" title="Close">
174174
<i class="fa-regular fa-circle-xmark" aria-hidden="true"></i>
175175
<span class="sr-only">Close</span>

‎resources/js/gallery/Selection.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@
4141
></Browser>
4242

4343
<dialog ref="cta" class="dialog rounded-2xl text-center" v-if="!loading">
44-
<header class="bg-base-200 sm:rounded-t">
45-
<h4 v-html="trans.cta_title"></h4>
44+
<header class="flex gap-6 items-center p-4 md:p-6 justify-between">
45+
<h4 v-html="trans.cta_title" class="text-lg font-normal"></h4>
4646
<button type="button" class="text-base-content" @click="closeDialog(cta)" title="Close">
4747
<i class="fa-regular fa-circle-xmark" aria-hidden="true"></i>
4848
<span class="sr-only">Close</span>

‎resources/js/recovery/Recovery.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@
5858
</div>
5959

6060
<dialog ref="premiumDialog" class="dialog rounded-2xl text-center" v-if="initiated">
61-
<header class="bg-base-200 sm:rounded-t">
62-
<h4 v-html="trans('premium_title')"></h4>
61+
<header class="flex gap-6 items-center p-4 md:p-6 justify-between">
62+
<h4 v-html="trans('premium_title')" class="text-lg font-normal"></h4>
6363
<button type="button" class="text-base-content" @click="closeModal(premiumDialog)" title="Close">
6464
<i class="fa-regular fa-circle-xmark" aria-hidden="true"></i>
6565
<span class="sr-only">Close</span>

‎resources/sass/buttons.scss

+9-13
Original file line numberDiff line numberDiff line change
@@ -40,32 +40,28 @@
4040
flex-wrap: wrap;
4141
align-items: center;
4242
justify-content: center;
43-
border-color: transparent;
44-
border-color: hsl(var(--b2)/var(--tw-border-opacity));
4543
text-align: center;
4644
transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
4745
transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
4846
transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
4947
transition-duration: .2s;
5048
transition-timing-function: cubic-bezier(.4,0,.2,1);
5149
border-radius: var(--rounded-btn,.25rem);
52-
padding-left: 1rem;
53-
padding-right: 1rem;
54-
font-size: .875rem;
50+
padding-left: 1.25rem;
51+
padding-right: 1.25rem;
5552
line-height: 1.25rem;
56-
line-height: 1em;
57-
min-height: 3rem;
53+
min-height: 2.5rem;
5854
gap: .5rem;
55+
font-size: 1rem;
5956
//font-weight:600;
6057
text-decoration-line: none;
6158
border-width: var(--border-btn, 0px);
59+
border-color: hsl(var(--b3)/var(--tw-border-opacity, 1));
6260
animation: button-pop var(--animation-btn,.25s) ease-out;
63-
text-transform: var(--btn-text-case,uppercase);
61+
text-transform: var(--btn-text-case, inherit);
6462
--tw-border-opacity: 1;
65-
--tw-bg-opacity: 1;
66-
background-color:hsl(var(--b2)/var(--tw-bg-opacity));
67-
--tw-text-opacity: 1;
68-
color:hsl(var(--bc)/var(--tw-text-opacity))
63+
background-color:hsl(var(--b1)/var(--tw-bg-opacity, 1));
64+
color:hsl(var(--bc)/var(--tw-text-opacity, 1))
6965
}
7066
.btn2.btn-disabled,
7167
.btn2.btn[disabled],
@@ -114,7 +110,7 @@
114110
--tw-border-opacity: 1;
115111
border-color:hsl(var(--b3)/var(--tw-border-opacity));
116112
--tw-bg-opacity: 1;
117-
background-color:hsl(var(--b3)/var(--tw-bg-opacity));
113+
background-color:hsl(var(--b2)/var(--tw-bg-opacity));
118114
color:hsl(var(--bc)/var(--tw-text-opacity));
119115
}
120116
.btn2.btn-primary:hover {

‎resources/sass/dialog.scss

-32
Original file line numberDiff line numberDiff line change
@@ -2,57 +2,26 @@
22
display: grid;
33
max-inline-size: min(90vw, var(--size-content-3));
44
max-block-size: min(80vh, 100%);
5-
max-block-size: min(80dvb, 100%);
65
padding: 0;
76
position: fixed;
87
inset: 0;
98
z-index: 1050;
109
border: 0;
1110
transition: opacity .5s ease-in-out;
1211

13-
header {
14-
display: flex;
15-
flex-wrap: wrap;
16-
gap: 0.75rem;
17-
justify-content: space-between;
18-
align-items: center;
19-
padding-block: 0.5rem;
20-
padding-inline: 1.0rem;
21-
22-
h4 {
23-
text-align: center;
24-
flex-shrink: 0;
25-
place-items: center;
26-
margin: 0;
27-
}
28-
29-
> button {
30-
//width: 32px;
31-
text-align: center;
32-
aspect-ratio: 1;
33-
flex-shrink: 0;
34-
place-items: center;
35-
border: 0;
36-
}
37-
}
38-
3912
article {
4013
overflow-y: auto;
4114
overscroll-behavior-y: contain;
4215
max-block-size: 100%; /* safari */
4316
display: grid;
4417
justify-items: flex-start;
4518
gap: 0.75rem;
46-
padding-inline: 1rem;
47-
padding-block: 0.75rem;
48-
padding-bottom: 1rem;
4919
}
5020
form, .formless {
5121
display: grid;
5222
grid-template-rows: auto 1fr auto;
5323
align-items: start;
5424
max-block-size: 70vh;
55-
max-block-size: 70dvb;
5625
footer {
5726
menu:only-child {
5827
margin-inline-start: auto;
@@ -64,7 +33,6 @@
6433
grid-template-rows: auto 1fr auto;
6534
align-items: start;
6635
max-block-size: 70vh;
67-
max-block-size: 70dvb;
6836
}
6937
}
7038

‎resources/sass/themes/light.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
--sic: 0 0% 90%;
6666

6767
// Border radius for buttons
68-
--rounded-btn: .25rem;
68+
--rounded-btn: .5rem;
6969
// Border radius for badges (tags)
7070
--rounded-badge: .25rem;
7171
// Animation duration when a button is focused
@@ -74,9 +74,9 @@
7474
--btn-focus-scale: 1;
7575

7676
// Button border width
77-
//--border-btn: 1px;
77+
--border-btn: 1px;
7878
// Button text transform
79-
--btn-text-case: uppercase;
79+
--btn-text-case: inherit;
8080

8181
// Border radius for tabs
8282
--tab-radius: .25rem;

‎resources/views/campaigns/leave.blade.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
{{ __('campaigns.leave.title') }}
33
</x-dialog.header>
44

5-
<article class="max-w-xl">
5+
<article class="max-w-xl p-4 md:px-6">
66
@if(auth()->user()->can('leave', $campaign))
77
<p class="">
88
{!! __('campaigns.leave.confirm', ['name' => '<strong>' . $campaign->name . '</strong>']) !!}

‎resources/views/campaigns/styles/theme.blade.php

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<x-dialog.header>
22
{!! __('campaigns/styles.theme.title') !!}
33
</x-dialog.header>
4-
<article>
4+
<x-dialog.article>
55
<x-form :action="['campaign-theme.save', $campaign]" class="w-full max-w-lg text-left">
66
<x-forms.field field="theme" :label="__('campaigns.fields.theme')" :helper="__('campaigns.helpers.theme')">
77
<x-forms.select name="theme_id" :options="$themes" :selected="$campaign->theme_id ?? null" />
@@ -11,4 +11,4 @@
1111
<button class="btn2 btn-primary">{{ __('crud.actions.apply') }}</button>
1212
</x-dialog.footer>
1313
</x-form>
14-
</article>
14+
</x-dialog.article>

‎resources/views/campaigns/submissions/edit.blade.php

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{{ __('campaigns/submissions.actions.reject') }}
66
@endif
77
</x-dialog.header>
8-
<article>
8+
<x-dialog.article>
99
<x-form :action="['campaign_submissions.update', $campaign, $submission->id]" method="PATCH" class="entity-form w-full max-w-lg text-left">
1010
@if($action === 'approve')
1111

@@ -50,5 +50,5 @@
5050

5151
<input type="hidden" name="action" value="{{ $action }}" />
5252
</x-form>
53-
</article>
53+
</x-dialog.article>
5454

‎resources/views/campaigns/submissions/show.blade.php

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<x-dialog.header>
33

44
</x-dialog.header>
5-
<article>
5+
<x-dialog.article>
66
<x-form :action="['campaign_submissions.update', $campaign, $application->id]" method="PATCH" class="entity-form w-full max-w-lg text-left" direct>
77

88
<div class="flex flex-col gap-4">
@@ -48,5 +48,5 @@
4848
</div>
4949

5050
</x-form>
51-
</article>
51+
</x-dialog.article>
5252

0 commit comments

Comments
 (0)