Redesign short url detail page

realodix · Dec 15, 2022 · a9fdfb5 · a9fdfb5
1 parent f68fde3
commit a9fdfb5
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 37 deletions.
diff --git a/resources/css/base.css b/resources/css/base.css
@@ -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

diff --git a/resources/svg/arrow-turn-right.svg b/resources/svg/arrow-turn-right.svg
diff --git a/resources/views/frontend/short.blade.php b/resources/views/frontend/short.blade.php
@@ -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>