Small adjustments to UI

pull/805/head
Kei 2 years ago
parent 0a841cb5cb
commit 8cb890e64a

@ -117,16 +117,16 @@ final class AllUlrTable extends PowerGridComponent
})
->addColumn('action', function (Url $url) {
return
'<a role="button" href="'.route('short_url.stats', $url->keyword).'" target="_blank" title="'.__('Open front page').'" class="btn-action">'
'<a role="button" href="'.route('short_url.stats', $url->keyword).'" target="_blank" title="'.__('Open front page').'" class="btn-card btn-action">'
.Blade::render('<x-carbon-data-view-alt />').
'</a>
<a role="button" href="'.route('dashboard.duplicate', $url->keyword).'" title="'.__('Duplicate').'" class="btn-action">'
<a role="button" href="'.route('dashboard.duplicate', $url->keyword).'" title="'.__('Duplicate').'" class="btn-card btn-action">'
.Blade::render('<x-far-clone />').
'</a>
<a role="button" href="'.route('short_url.edit', $url->keyword).'" title="'.__('Edit').'" class="btn-action">'
<a role="button" href="'.route('short_url.edit', $url->keyword).'" title="'.__('Edit').'" class="btn-card btn-action">'
.Blade::render('<x-far-edit />').
'</a>
<a role="button" href="'.route('dashboard.delete', $url->getRouteKey()).'" title="'.__('Delete').'" class="btn-action-delete">'
<a role="button" href="'.route('dashboard.delete', $url->getRouteKey()).'" title="'.__('Delete').'" class="btn-card btn-action-delete">'
.Blade::render('<x-far-trash-alt />').
'</a>';
});

@ -103,16 +103,16 @@ final class MyUrlTable extends PowerGridComponent
})
->addColumn('action', function (Url $url) {
return
'<a role="button" href="'.route('short_url.stats', $url->keyword).'" target="_blank" title="'.__('Go to front page').'" class="btn-action" >'
'<a role="button" href="'.route('short_url.stats', $url->keyword).'" target="_blank" title="'.__('Go to front page').'" class="btn-card btn-action">'
.Blade::render('<x-carbon-data-view-alt />').
'</a>
<a role="button" href="'.route('dashboard.duplicate', $url->keyword).'" title="'.__('Duplicate').'" class="btn-action" >'
<a role="button" href="'.route('dashboard.duplicate', $url->keyword).'" title="'.__('Duplicate').'" class="btn-card btn-action" >'
.Blade::render('<x-far-clone />').
'</a>
<a role="button" href="'.route('short_url.edit', $url->keyword).'" title="'.__('Edit').'" class="btn-action" >'
<a role="button" href="'.route('short_url.edit', $url->keyword).'" title="'.__('Edit').'" class="btn-card btn-action" >'
.Blade::render('<x-far-edit />').
'</a>
<a role="button" href="'.route('dashboard.delete', $url->getRouteKey()).'" title="'.__('Delete').'" class="btn-action-delete" >'
<a role="button" href="'.route('dashboard.delete', $url->getRouteKey()).'" title="'.__('Delete').'" class="btn-card btn-action-delete" >'
.Blade::render('<x-far-trash-alt />').
'</a>';
});

@ -86,10 +86,10 @@ final class UserTable extends PowerGridComponent
})
->addColumn('action', function (User $user) {
return
'<a role="button" href="'.route('user.edit', $user->name).'" title="'.__('Details').'" class="btn-action">'
'<a role="button" href="'.route('user.edit', $user->name).'" title="'.__('Details').'" class="btn-card btn-action">'
.Blade::render('<x-fas-user-edit />').
'</a>
<a role="button" href="'.route('user.change-password', $user->name).'" title="'.__('Change Password').'" class="btn-action">'
<a role="button" href="'.route('user.change-password', $user->name).'" title="'.__('Change Password').'" class="btn-card btn-action">'
.Blade::render('<x-fas-key />').
'</a>';
});

@ -2,6 +2,10 @@
@tailwind components;
@tailwind utilities;
main {
@apply sm:mt-10;
}
.frontend, .backend, .auth {
@apply bg-bg-primary font-sans text-gray-900 antialiased;
}
@ -39,37 +43,6 @@
}
}
main {
@apply sm:mt-10;
}
.blade-icon {
display: inline-block;
height: 1em;
overflow: visible;
box-sizing: content-box;
vertical-align: -0.125em;
}
.form-input {
@apply block w-full;
@apply border-slate-200 focus:ring-uh-indigo-400 focus:border-uh-indigo-400 rounded-md
}
.button {
@apply text-xs uppercase tracking-widest;
@apply rounded-md px-4 py-2;
@apply text-white bg-uh-indigo-600 hover:bg-uh-indigo-700 active:bg-uh-indigo-600;
@apply border border-transparent focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition;
}
.badge-rounded {
@apply text-xs font-bold;
@apply text-center align-baseline whitespace-nowrap;
@apply rounded-full py-1 px-2;
}
.power-grid {
.pg-header {
input {
@ -79,7 +52,7 @@ main {
.pg-table {
@apply overflow-hidden overflow-x-auto bg-white shadow overflow-y-auto relative;
@apply shadow-none;
@apply rounded-md shadow-none;
.table {
thead {
@ -93,14 +66,18 @@ main {
tbody {
tr {
@apply text-uh-1 hover:bg-slate-50 even:bg-slate-50;
td {
@apply py-2;
}
}
.btn-action {
@apply text-slate-400 hover:text-uh-indigo-500 active:text-uh-indigo-700;
@apply text-gray-400 hover:text-indigo-500 active:text-uh-indigo-400;
}
.btn-action-delete {
@apply text-slate-400 hover:text-red-500 active:text-red-700;
@apply text-gray-400 hover:text-red-600 active:text-red-700;
}
}
}
@ -118,3 +95,39 @@ main {
}
}
}
/*
* Components
*/
.blade-icon {
display: inline-block;
height: 1em;
overflow: visible;
box-sizing: content-box;
vertical-align: -0.125em;
}
.button {
@apply text-xs uppercase tracking-widest;
@apply rounded-md px-4 py-2;
@apply text-white bg-uh-indigo-600 hover:bg-uh-indigo-700 active:bg-uh-indigo-600;
@apply border border-transparent focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition;
}
.btn-card {
@apply px-2 py-1 border border-gray-300 rounded-md;
box-shadow: 0 1px 0 rgba(27,31,36,0.04), inset 0 1px 0 rgba(255,255,255,0.25);
}
.badge-rounded {
@apply text-xs font-bold;
@apply text-center align-baseline whitespace-nowrap;
@apply rounded-full py-1 px-2;
}
.form-input {
@apply block w-full;
@apply border-slate-200 focus:ring-uh-indigo-400 focus:border-uh-indigo-400 rounded-md
}

@ -22,14 +22,14 @@
@if (Auth::user()->hasRole('admin') || (Auth::user()->id == $url->user_id))
<li class="inline-block pr-2">
<a href="{{route('short_url.edit', $url->keyword)}}" title="{{__('Edit')}}"
class="text-xs hover:text-white bg-white hover:bg-uh-indigo-600 active:bg-uh-indigo-500 px-2 py-1 border border-gray-300 rounded-md shadow-sm"
class="btn-card text-xs bg-white hover:text-uh-indigo-500 active:text-uh-indigo-400"
>
<x-fas-edit />
</a>
</li>
<li class="inline-block">
<a href="{{route('dashboard.delete', $url->getRouteKey())}}" title="{{__('Delete')}}"
class="text-xs hover:text-white bg-white hover:bg-red-600 active:bg-red-500 px-2 py-1 border border-gray-300 rounded-md shadow-sm"
class="btn-card text-xs bg-white hover:text-red-700 active:text-red-600"
>
<x-fas-trash-alt />
</a>
@ -47,11 +47,10 @@
</div>
<div class="w-full md:w-3/4 mt-8 sm:mt-0">
<b class="text-indigo-700">{{__('Shortened URL')}}</b>
<button title="{{__('Copy to clipboard')}}" data-clipboard-text="{{urlDisplay($url->short_url, false)}}"
class="btn-clipboard ml-4 py-0.5 px-1
text-xs text-white bg-green-600 hover:bg-green-700 focus:bg-green-600"
<button title="{{__('Copy the full shortened URL')}}" data-clipboard-text="{{urlDisplay($url->short_url, false)}}"
class="btn-clipboard btn-card ml-4 text-xs hover:text-indigo-500 active:text-uh-indigo-400"
>
<x-fas-clone /> {{__('Copy')}}
<x-fas-clone />{{-- {{__('Copy')}} --}}
</button>
<br>
@ -62,11 +61,10 @@
<br> <br>
<b class="text-indigo-700">{{__('Destination URL')}}</b>
<button title="{{__('Copy to clipboard')}}" data-clipboard-text="{{ $url->long_url }}"
class="btn-clipboard ml-4 py-0.5 px-1
text-xs text-white bg-green-600 hover:bg-green-700 focus:bg-green-600"
<button title="{{__('Copy the full destination URL')}}" data-clipboard-text="{{ $url->long_url }}"
class="btn-clipboard btn-card ml-4 text-xs hover:text-indigo-500 active:text-uh-indigo-400"
>
<x-fas-clone /> {{__('Copy')}}
<x-fas-clone />
</button>
<div class="font-light break-all">{{ $url->long_url }}</div>

@ -11,7 +11,7 @@ module.exports = {
extend: {
colors: {
"uh-blue": "#3d5b99",
"bg-primary": "#f1f5f9",
"bg-primary": "#f8fafc",
uh: {
1: "#344767",
"2a": "rgb(63 152 222)",

Loading…
Cancel
Save