Skip to content

Commit 25037bd

Browse files
gallibgallib
committed
Fresh design using Tailwind
1 parent f275956 commit 25037bd

File tree

4 files changed

+116
-162
lines changed

4 files changed

+116
-162
lines changed

‎resources/views/layout.blade.php‎

Lines changed: 10 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,20 @@
1-
<!doctype html>
2-
<html lang="{{ app()->getLocale() }}">
1+
<!DOCTYPE html>
2+
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
33
<head>
44
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
65
<meta name="viewport" content="width=device-width, initial-scale=1">
76

87
<title>{{ config('app.name') }} - Url shortener</title>
98

10-
<!-- Styles -->
11-
<link href="/css/app.css" rel="stylesheet">
12-
13-
<style>
14-
html, body {
15-
height: 100vh;
16-
}
17-
18-
.wrapper {
19-
min-height: 100vh;
20-
}
21-
22-
.logo-title {
23-
max-height: 100px;
24-
}
25-
</style>
26-
27-
@stack('styles')
9+
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css"/>
2810
</head>
29-
<body>
30-
<div class="container h-100">
31-
<div class="wrapper row align-items-center">
11+
<body class="antialiased">
12+
<div class="relative flex items-top justify-center min-h-screen bg-gray-100 sm:items-center py-4 sm:pt-0">
13+
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
14+
<div class="flex items-center mb-8">
15+
<img class="h-24 sm:h-20" src="{{ asset('/gallib/shorturl/images/short.png') }}" alt="Laravel Short Url">
16+
<h1 class="pl-2 text-2xl">Laravel Short Url</h1>
17+
</div>
3218
@yield('shorturl.content')
3319
</div>
3420
</div>

‎resources/views/urls/create.blade.php‎

Lines changed: 38 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,50 @@
11
@extends('shorturl::layout')
22

33
@section('shorturl.content')
4-
<div class="col-12">
5-
<h1 class="text-center mb-5">
6-
<img class="logo-title" src="{{ asset('/gallib/shorturl/images/short.png') }}" alt="Laravel Short Url">
7-
Laravel Short Url
8-
</h1>
9-
@if (session('short_url'))
10-
<div class="alert alert-success" role="alert">
11-
Your shortened url is: <a class="font-weight-bold" href="{{ session('short_url') }}" title="your shortened url">{{ session('short_url') }}</a> (<a class="copy-clipboard" href="javascript:void(0);" data-clipboard-text="{{ session('short_url') }}">Copy link to clipboard</a>)
4+
@if (session('short_url'))
5+
<div role="alert" class="mb-8 p-5 rounded-lg border border-green-400 bg-green-300 text-green-900 flex">
6+
<span class="mr-2">
7+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
8+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
9+
</svg>
10+
</span>
11+
Your shortened url is: <a class="font-semibold mr-1" href="{{ session('short_url') }}" title="your shortened url">{{ session('short_url') }}</a> (<a class="copy-clipboard underline" href="javascript:void(0);" data-clipboard-text="{{ session('short_url') }}">Copy link to clipboard</a>)
12+
</div>
13+
@endif
14+
15+
<form method="POST" action="{{ route('shorturl.url.store') }}">
16+
@csrf
17+
<div class="grid grid-cols-2 gap-4 my-2">
18+
<div class="col-span-2">
19+
<input type="text" class="w-full h-12 rounded-lg {{ $errors->has('url') ? 'border border-red-700' : '' }}" id="url" name="url" placeholder="Paste an url" aria-label="Paste an url" value="{{ old('url') }}">
20+
@if ($errors->has('url'))
21+
<span class="text-xs text-red-700">{{ $errors->first('url') }}</span>
22+
@endif
23+
</div>
24+
<div>
25+
<label for="code">Custom alias (optional)</label>
26+
<input type="text" class="w-full h-12 rounded-lg {{ $errors->has('code') ? 'border border-red-700' : '' }}" id="code" name="code" placeholder="Set your custom alias" value="{{ old('code') }}">
27+
@if ($errors->has('code'))
28+
<span class="text-xs text-red-700">{{ $errors->first('code') }}</span>
29+
@endif
1230
</div>
13-
@endif
14-
<form method="POST" action="{{ route('shorturl.url.store') }}">
15-
@csrf
16-
<div class="input-group">
17-
<input type="text" class="form-control form-control-lg {{ $errors->has('url') ? 'is-invalid' : '' }}" id="url" name="url" placeholder="Paste an url" aria-label="Paste an url" value="{{ old('url') }}">
18-
<div class="input-group-append">
19-
<button class="btn btn-primary" type="submit">Shorten</button>
20-
</div>
31+
<div>
32+
<label for="expires_at">Expires at (optional)</label>
33+
<input type="datetime-local" class="w-full h-12 rounded-lg {{ $errors->has('expires_at') ? 'border border-red-700' : '' }}" id="expires_at" name="expires_at" placeholder="Set your expiration date" value="{{ old('expires_at') }}">
34+
@if ($errors->has('expires_at'))
35+
<span class="text-xs text-red-700">{{ $errors->first('expires_at') }}</span>
36+
@endif
2137
</div>
22-
@if ($errors->has('url'))
23-
<small id="url-error" class="form-text text-danger">
24-
{{ $errors->first('url') }}
25-
</small>
26-
@endif
27-
<div class="row mt-3">
28-
<div class="col-4">
29-
<div class="form-group">
30-
<label for="code">Custom alias (optional)</label>
31-
<input type="text" class="form-control {{ $errors->has('code') ? 'is-invalid' : '' }}" id="code" name="code" placeholder="Set your custom alias" value="{{ old('code') }}">
32-
@if ($errors->has('code'))
33-
<small id="code-error" class="form-text text-danger">
34-
{{ $errors->first('code') }}
35-
</small>
36-
@endif
37-
</div>
38-
</div>
39-
<div class="col-4">
40-
<div class="form-group">
41-
<label for="expires_at">Expires at (optional)</label>
42-
<input type="datetime-local" class="form-control {{ $errors->has('expires_at') ? 'is-invalid' : '' }}" id="expires_at" name="expires_at" placeholder="Set your expiration date" value="{{ old('expires_at') }}">
43-
@if ($errors->has('expires_at'))
44-
<small id="code-error" class="form-text text-danger">
45-
{{ $errors->first('expires_at') }}
46-
</small>
47-
@endif
48-
</div>
49-
</div>
50-
<div class="col-4 text-right">By <a href="https://github.com/gallib/laravel-short-url" title="by gallib/laravel-short-url" target="_blank">Gallib/laravel-short-url</a></div>
38+
<div>
39+
<button class="h-12 px-5 text-teal-100 transition-colors duration-150 bg-teal-700 rounded-lg focus:shadow-outline hover:bg-teal-800" type="submit">Shorten</button>
5140
</div>
52-
</form>
53-
</div>
41+
<div class="text-right">By <a class="font-semibold" href="https://github.com/gallib/laravel-short-url" title="by gallib/laravel-short-url" target="_blank">Gallib/laravel-short-url</a></div>
42+
</div>
43+
</form>
5444
@endsection
5545

5646
@push('scripts')
57-
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
47+
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
5848
<script>
5949
var clipboard = new ClipboardJS('.copy-clipboard');
6050

‎resources/views/urls/edit.blade.php‎

Lines changed: 39 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,51 @@
11
@extends('shorturl::layout')
22

33
@section('shorturl.content')
4-
<div class="col-12">
5-
<h1 class="text-center mb-5">
6-
<img class="logo-title" src="{{ asset('/gallib/shorturl/images/short.png') }}" alt="Laravel Short Url">
7-
Laravel Short Url
8-
</h1>
9-
@if (session('short_url'))
10-
<div class="alert alert-success" role="alert">
11-
Your shortened url is: <a class="font-weight-bold" href="{{ session('short_url') }}" title="your shortened url">{{ session('short_url') }}</a> (<a class="copy-clipboard" href="javascript:void(0);" data-clipboard-text="{{ session('short_url') }}">Copy link to clipboard</a>)
4+
@if (session('short_url'))
5+
<div role="alert" class="mb-8 p-5 rounded-lg border border-green-400 bg-green-300 text-green-900 flex">
6+
<span class="mr-2">
7+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
8+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
9+
</svg>
10+
</span>
11+
Your shortened url is: <a class="font-semibold mr-1" href="{{ session('short_url') }}" title="your shortened url">{{ session('short_url') }}</a> (<a class="copy-clipboard underline" href="javascript:void(0);" data-clipboard-text="{{ session('short_url') }}">Copy link to clipboard</a>)
12+
</div>
13+
@endif
14+
15+
<form method="POST" action="{{ route('shorturl.url.update', $url->id) }}">
16+
@method('PUT')
17+
@csrf
18+
<div class="grid grid-cols-2 gap-4 my-2">
19+
<div class="col-span-2">
20+
<input type="text" class="w-full h-12 rounded-lg {{ $errors->has('url') ? 'border border-red-700' : '' }}" id="url" name="url" placeholder="Paste an url" aria-label="Paste an url" value="{{ old('url', $url->url) }}">
21+
@if ($errors->has('url'))
22+
<span class="text-xs text-red-700">{{ $errors->first('url') }}</span>
23+
@endif
24+
</div>
25+
<div>
26+
<label for="code">Custom alias (optional)</label>
27+
<input type="text" class="w-full h-12 rounded-lg {{ $errors->has('code') ? 'border border-red-700' : '' }}" id="code" name="code" placeholder="Set your custom alias" value="{{ old('code', $url->code) }}">
28+
@if ($errors->has('code'))
29+
<span class="text-xs text-red-700">{{ $errors->first('code') }}</span>
30+
@endif
1231
</div>
13-
@endif
14-
<form method="POST" action="{{ route('shorturl.url.update', $url->id) }}">
15-
@method('PUT')
16-
@csrf
17-
<div class="input-group">
18-
<input type="text" class="form-control form-control-lg {{ $errors->has('url') ? 'is-invalid' : '' }}" id="url" name="url" placeholder="Paste an url" aria-label="Paste an url" value="{{ old('url', $url->url) }}">
19-
<div class="input-group-append">
20-
<button class="btn btn-primary" type="submit">Shorten</button>
21-
</div>
32+
<div>
33+
<label for="expires_at">Expires at (optional)</label>
34+
<input type="datetime-local" class="w-full h-12 rounded-lg {{ $errors->has('expires_at') ? 'border border-red-700' : '' }}" id="expires_at" name="expires_at" placeholder="Set your expiration date" value="{{ old('expires_at', ($url->couldExpire() ? $url->expires_at->format('Y-m-d\TH:i') : null)) }}">
35+
@if ($errors->has('expires_at'))
36+
<span class="text-xs text-red-700">{{ $errors->first('expires_at') }}</span>
37+
@endif
2238
</div>
23-
@if ($errors->has('url'))
24-
<small id="url-error" class="form-text text-danger">
25-
{{ $errors->first('url') }}
26-
</small>
27-
@endif
28-
<div class="row mt-3">
29-
<div class="col-4">
30-
<div class="form-group">
31-
<label for="code">Custom alias (optional)</label>
32-
<input type="text" class="form-control {{ $errors->has('code') ? 'is-invalid' : '' }}" id="code" name="code" placeholder="Set your custom alias" value="{{ old('code', $url->code) }}">
33-
@if ($errors->has('code'))
34-
<small id="code-error" class="form-text text-danger">
35-
{{ $errors->first('code') }}
36-
</small>
37-
@endif
38-
</div>
39-
</div>
40-
<div class="col-4">
41-
<div class="form-group">
42-
<label for="expires_at">Expires at (optional)</label>
43-
<input type="datetime-local" class="form-control {{ $errors->has('expires_at') ? 'is-invalid' : '' }}" id="expires_at" name="expires_at" placeholder="Set your expiration date" value="{{ old('expires_at', ($url->couldExpire() ? $url->expires_at->format('Y-m-d\TH:i') : null)) }}">
44-
@if ($errors->has('expires_at'))
45-
<small id="code-error" class="form-text text-danger">
46-
{{ $errors->first('expires_at') }}
47-
</small>
48-
@endif
49-
</div>
50-
</div>
51-
<div class="col-4 text-right">By <a href="https://github.com/gallib/laravel-short-url" title="by gallib/laravel-short-url" target="_blank">Gallib/laravel-short-url</a></div>
39+
<div>
40+
<button class="h-12 px-5 text-teal-100 transition-colors duration-150 bg-teal-700 rounded-lg focus:shadow-outline hover:bg-teal-800" type="submit">Shorten</button>
5241
</div>
53-
</form>
54-
</div>
42+
<div class="text-right">By <a class="font-semibold" href="https://github.com/gallib/laravel-short-url" title="by gallib/laravel-short-url" target="_blank">Gallib/laravel-short-url</a></div>
43+
</div>
44+
</form>
5545
@endsection
5646

5747
@push('scripts')
58-
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
48+
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
5949
<script>
6050
var clipboard = new ClipboardJS('.copy-clipboard');
6151

‎resources/views/urls/index.blade.php‎

Lines changed: 29 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,56 @@
11
@extends('shorturl::layout')
22

33
@section('shorturl.content')
4-
<div class="col-8 offset-2">
5-
<h1 class="text-center mb-5">
6-
<img class="logo-title" src="{{ asset('/gallib/shorturl/images/short.png') }}" alt="Laravel Short Url">
7-
Laravel Short Url
8-
</h1>
94
@if (session('short_url'))
10-
<div class="alert alert-success" role="alert">
5+
<div role="alert" class="mb-8 p-5 rounded-lg border border-green-400 bg-green-300 text-green-900 flex">
6+
<span class="mr-2">
7+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
8+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
9+
</svg>
10+
</span>
1111
Your shortened url has been deleted!
1212
</div>
1313
@endif
14-
<div class="mb-2 text-right">
15-
<a class="btn btn-sm btn-primary" href="{{ route('shorturl.url.create') }}" role="button">Add url</a>
14+
<div class="text-right">
15+
<a class="inline-flex items-center h-12 px-5 text-teal-100 transition-colors duration-150 bg-teal-700 rounded-lg focus:shadow-outline hover:bg-teal-800" href="{{ route('shorturl.url.create') }}" role="button">Add url</a>
1616
</div>
17-
<table class="table">
17+
<table class="table-auto">
1818
<tr>
19-
<th>Url</th>
20-
<th>Short Url</th>
21-
<th>Counter</th>
22-
<th>User</th>
23-
<th></th>
19+
<th class="px-4 py-2">Url</th>
20+
<th class="px-4 py-2">Short Url</th>
21+
<th class="px-4 py-2">Counter</th>
22+
<th class="px-4 py-2"></th>
2423
</tr>
2524
@foreach ($urls as $url)
26-
<tr>
27-
<td>{{ $url->url }}</td>
28-
<td><a href="{{ route('shorturl.redirect', $url->code) }}">{{ $url->code }}</a></td>
29-
<td>{{ $url->counter }}</td>
30-
<td>{{ optional($url->user)->name }}</td>
31-
<td>
32-
<button class="btn btn-sm btn-success" data-clipboard-text="{{ route('shorturl.redirect', $url->code) }}">Copy</button>
33-
<a class="btn btn-sm btn-primary" href="{{ route('shorturl.url.edit', $url->id) }}" role="button">Edit</a>
34-
<form method="POST" action="{{ route('shorturl.url.destroy', $url->id) }}">
25+
<tr class="border-solid border-b">
26+
<td class="px-4 py-2">
27+
{{ $url->url }}
28+
@if($url->user)
29+
<div class="text-sm text-gray-500 italic">Created by: {{ $url->user->name }}</div>
30+
@endif
31+
</td>
32+
<td class="px-4 py-2"><a href="{{ route('shorturl.redirect', $url->code) }}">{{ $url->code }}</a></td>
33+
<td class="px-4 py-2">{{ $url->counter }}</td>
34+
<td class="px-4 py-2">
35+
<button class="copy-clipboard h-8 px-4 m-2 text-sm text-teal-100 transition-colors duration-150 bg-teal-500 rounded-lg focus:shadow-outline hover:bg-teal-600" data-clipboard-text="{{ route('shorturl.redirect', $url->code) }}">Copy</button>
36+
<a class="inline-flex items-center h-8 px-4 m-2 text-sm text-cyan-100 transition-colors duration-150 bg-cyan-500 rounded-lg focus:shadow-outline hover:bg-cyan-600" href="{{ route('shorturl.url.edit', $url->id) }}" role="button">Edit</a>
37+
<form method="POST" class="inline-flex" action="{{ route('shorturl.url.destroy', $url->id) }}">
3538
@method('DELETE')
3639
@csrf
37-
<button class="btn btn-sm btn-danger" href="#" role="button">Delete</button>
40+
<button class="h-8 px-4 m-2 text-sm text-red-100 transition-colors duration-150 bg-red-500 rounded-lg focus:shadow-outline hover:bg-red-600" role="button">Delete</button>
3841
</form>
3942
</td>
4043
</tr>
4144
@endforeach
4245
</table>
4346

4447
{{ $urls->links() }}
45-
</div>
4648
@endsection
4749

48-
@push('styles')
49-
<style>
50-
form {
51-
display: inline-block;
52-
}
53-
.wrapper {
54-
min-height: 100vh;
55-
}
56-
.pagination {
57-
justify-content: flex-end;
58-
}
59-
</style>
60-
@endpush
61-
6250
@push('scripts')
63-
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
51+
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
6452
<script>
65-
var clipboard = new ClipboardJS('.btn-success');
53+
var clipboard = new ClipboardJS('.copy-clipboard');
6654
6755
clipboard.on('success', function(e) {
6856
e.trigger.innerText = 'Copied!';

0 commit comments

Comments
 (0)