Redesign short url detail page

pull/873/head
Kei 1 year ago
parent f68fde3391
commit a9fdfb5490

@ -50,6 +50,12 @@
}
}
.btn-icon-detail {
@apply px-2 py-1 rounded mr-4;
@apply text-[#273144];
@apply bg-[#e8ebf2] hover:bg-[#dbe0eb] active:bg-[#e8ebf2];
}
.form-input {
@apply block w-full;
@apply border-slate-200 focus:ring-uh-indigo-400 focus:border-uh-indigo-400 rounded

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<path d="M16.5,20.7c-0.4,0.4-1,0.4-1.4,0c-0.4-0.4-0.4-1,0-1.4l2.3-2.3h-6.8C8,17,6,15,6,12.5V4c0-0.6,0.4-1,1-1s1,0.4,1,1v8.5
c0,1.4,1.1,2.5,2.5,2.5h7.3L15,12.2c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l4.3,4.2c0.2,0.2,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7
L16.5,20.7z"/>
</svg>

After

Width:  |  Height:  |  Size: 615 B

@ -4,73 +4,67 @@
@section('content')
<div class="max-w-7xl mx-auto mb-12">
<div class="flex flex-wrap mt-6 lg:mt-12 px-4 sm:p-6">
<div class="flex flex-wrap mt-6 lg:mt-8 px-4 sm:p-6">
<div class="md:w-9/12">
@include('partials/messages')
<ul>
<div class="text-xl sm:text-2xl lg:text-3xl font-bold mb-4">{!! $url->title !!}</div>
<ul class="mb-4">
<li class="inline-block pr-4">
@svg('icon-calendar')
<i>{{$url->created_at->toDayDateTimeString()}}</i>
</li>
<li class="inline-block pr-4">
<li class="inline-block pr-4 mt-4 lg:mt-0">
@svg('icon-bar-chart')
<i><span title="{{number_format($url->click)}}">{{compactNumber($url->click)}}</span></i>
<i><span title="{{number_format($url->click)}}" class="font-bold">{{compactNumber($url->click)}}</span></i>
{{__('Total engagements')}}
</li>
@auth
@if (Auth::user()->hasRole('admin') || (Auth::user()->id === $url->user_id))
<li class="inline-block pr-2">
<a href="{{route('dashboard.su_edit', $url->keyword)}}" title="{{__('Edit')}}"
class="btn-icon text-xs">
@svg('icon-edit')
</a>
</li>
<li class="inline-block">
<a href="{{route('su_delete', $url->getRouteKey())}}" title="{{__('Delete')}}"
class="btn-icon text-xs hover:text-red-700 active:text-red-600">
@svg('icon-trash')
</a>
</li>
@endif
@endauth
</ul>
<div class="text-xl sm:text-2xl lg:text-3xl mt-2 font-light">{!! $url->title !!}</div>
</div>
</div>
<div class="common-card-style flex flex-wrap mt-6 sm:mt-0 px-4 py-5 sm:p-6">
@if (config('urlhub.qrcode'))
<div class="w-full md:w-1/4 flex justify-center">
<img class="qrcode" src="{{$qrCode->getDataUri()}}" alt="QR Code">
<img class="qrcode h-fit" src="{{$qrCode->getDataUri()}}" alt="QR Code">
</div>
@endif
<div class="w-full md:w-3/4 mt-8 sm:mt-0">
<b class="text-indigo-700">{{__('Shortened URL')}}</b>
<button title="{{__('Copy the shortened URL to clipboard')}}"
data-clipboard-text="{{$url->short_url}}"
class="btn-clipboard btn-icon text-xs ml-4">
@svg('icon-clone')
class="btn-clipboard btn-icon-detail"
>
@svg('icon-clone') {{__('Copy')}}
</button>
<br>
@auth
@if (Auth::user()->hasRole('admin') || (Auth::user()->id === $url->user_id))
<button class="btn-clipboard btn-icon-detail">
<a href="{{route('dashboard.su_edit', $url->keyword)}}" title="{{__('Edit')}}">
@svg('icon-edit') {{__('Edit')}}
</a>
</button>
<button class="btn-clipboard btn-icon-detail hover:text-red-600 active:text-red-700">
<a href="{{route('su_delete', $url->getRouteKey())}}" title="{{__('Delete')}}">
@svg('icon-trash') {{__('Delete')}}
</a>
</button>
@endif
@endauth
<br> <br>
<span class="font-light">
<span class="font-bold text-indigo-700 text-xl sm:text-2xl">
<a href="{{ $url->short_url }}" target="_blank" id="copy">
{{urlDisplay($url->short_url, scheme: false)}}
</a>
</span>
<br> <br>
<b class="text-indigo-700">{{__('Destination URL')}}</b>
<button title="{{__('Copy the destination URL to clipboard')}}" data-clipboard-text="{{ $url->long_url }}"
class="btn-clipboard btn-icon text-xs ml-4">
@svg('icon-clone')
</button>
<div class="font-light break-all max-w-2xl">
{{ $url->long_url }}
<div class="break-all max-w-2xl mt-2">
@svg('arrow-turn-right') <a href="{{ $url->long_url }}" target="_blank" rel="noopener noreferrer" class="redirect-anchor">{{ urlDisplay($url->long_url, limit: 80) }}</a>
</div>
</div>
</div>

Loading…
Cancel
Save