Skip to content

Commit e93214d

Browse files
dinncerdinncer
authored
Merge pull request #3 from laravel-upgrade-helper/index-page-updates
Update index page logo and modal
2 parents eed7b16 + 710a3f6 commit e93214d

File tree

2 files changed

+72
-6
lines changed

2 files changed

+72
-6
lines changed

‎index.html

+72-6
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,29 @@
33
<head>
44
<meta charset="utf-8">
55
<title>Laravel Upgrade Helper</title>
6-
<meta name="description" content=" Take a quick look and upgrade Laravel. Fearlessly.">
7-
<link rel="shortcut icon" href="https://laravel.com/img/favicon/favicon.ico">
6+
<meta name="description" content="Take a quick look and upgrade Laravel. Fearlessly.">
7+
<link rel="shortcut icon" href="logo.png">
88
<script src="https://cdn.tailwindcss.com"></script>
99
<script src="https://unpkg.com/vue@3"></script>
1010
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css"/>
1111
<script src="https://cdn.jsdelivr.net/npm/diff2html@3.4.18/bundles/js/diff2html.min.js"></script>
1212
</head>
1313
<body>
1414
<header>
15-
<a href="https://github.com/laravel-upgrade-helper" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
15+
<a href="https://github.com/laravel-upgrade-helper" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
1616
</header>
1717
<main id="app">
1818
<div class="container font-sans bg-white mx-auto">
1919
<section class="bg-white mt-20">
2020
<div class="max-w-2xl px-6 text-center mx-auto">
21-
<img src="https://laravel.com/img/logomark.min.svg" alt="Laravel Upgrade Helper" width="50"
22-
class="mx-auto"/>
21+
<img src="logo.png" alt="Laravel Upgrade Helper" width="100" class="mx-auto"/>
2322
<h1 class="mt-5 text-5xl font-semibold text-gray-800">Laravel Upgrade Helper</h1>
2423
<p class="text-gray-600 mt-4">Quickly view differences between versions for Laravel.</p>
24+
<p>
25+
<button class="inline-flex items-center text-xs font-normal text-gray-500 hover:underline dark:text-gray-400" @click="toggleModal">
26+
<svg aria-hidden="true" class="mr-2 w-3 h-3" aria-hidden="true" focusable="false" data-prefix="far" data-icon="question-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"></path></svg>
27+
Why this project?</button>
28+
</p>
2529
<div>
2630
<p class="mt-5">
2731
<select v-model="baseVersion"
@@ -51,6 +55,9 @@ <h1 class="mt-5 text-5xl font-semibold text-gray-800">Laravel Upgrade Helper</h1
5155
</button>
5256
</div>
5357
</div>
58+
<div class="text-center">
59+
<span class="loader mt-3" v-show="showSpinner"></span>
60+
</div>
5461
</section>
5562
</div>
5663

@@ -72,8 +79,58 @@ <h1 class="mt-5 text-5xl font-semibold text-gray-800">Laravel Upgrade Helper</h1
7279

7380
<div v-show="diffString !==''" v-html="diffHtml"></div>
7481
</section>
82+
83+
<div tabindex="-1" v-show="showModal" class="backdrop flex overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center">
84+
<div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
85+
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
86+
<div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
87+
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
88+
Why this?
89+
</h3>
90+
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="aboutModal" @click="toggleModal">
91+
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
92+
<span class="sr-only">Close</span>
93+
</button>
94+
</div>
95+
<div class="p-6 space-y-6">
96+
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
97+
We know that Laravel has <b>release notes</b>, we have Laravel <b>docs</b> also we have <b>Laravel Shift.</b>
98+
We know all these but we wanted to quick look what we should update when we are upgrading our project.
99+
We build this tool for internal purposes and now decided to open source it.
100+
<i>Hope that it will be useful for you too.</i>
101+
</p>
102+
</div>
103+
</div>
104+
</div>
105+
</div>
75106
</main>
76107

108+
<style>
109+
.backdrop {
110+
background-color: rgba(0,0,0,0.5);
111+
}
112+
113+
.loader {
114+
width: 32px;
115+
height: 32px;
116+
border: 5px solid #dcdcdc;
117+
border-bottom-color: #e35e50;
118+
border-radius: 50%;
119+
display: inline-block;
120+
box-sizing: border-box;
121+
animation: rotation 1s linear infinite;
122+
}
123+
124+
@keyframes rotation {
125+
0% {
126+
transform: rotate(0deg);
127+
}
128+
100% {
129+
transform: rotate(360deg);
130+
}
131+
}
132+
</style>
133+
77134
<script>
78135
const {createApp} = Vue
79136

@@ -85,6 +142,8 @@ <h1 class="mt-5 text-5xl font-semibold text-gray-800">Laravel Upgrade Helper</h1
85142
upgradeVersion: null,
86143
diffString: "",
87144
showResult: false,
145+
showModal: false,
146+
showSpinner: false,
88147
};
89148
},
90149

@@ -95,6 +154,10 @@ <h1 class="mt-5 text-5xl font-semibold text-gray-800">Laravel Upgrade Helper</h1
95154
},
96155

97156
methods: {
157+
toggleModal() {
158+
this.showModal = !this.showModal
159+
},
160+
98161
clearResult() {
99162
this.diffString = "";
100163
this.showResult = false;
@@ -109,10 +172,12 @@ <h1 class="mt-5 text-5xl font-semibold text-gray-800">Laravel Upgrade Helper</h1
109172
if (!this.tags.includes(this.baseVersion) ||
110173
!this.tags.includes(this.upgradeVersion)
111174
) {
112-
alert('select version'); // TODO: modal here!
175+
alert('Please select version.');
113176
return;
114177
}
115178

179+
this.showSpinner = true;
180+
116181
this.showResult = true;
117182
this.diffString = '';
118183

@@ -128,6 +193,7 @@ <h1 class="mt-5 text-5xl font-semibold text-gray-800">Laravel Upgrade Helper</h1
128193
})
129194
.then(diffString => {
130195
this.diffString = diffString;
196+
this.showSpinner = false;
131197

132198
document.getElementById('showBtn').scrollIntoView({behavior: "smooth"});
133199
});

‎logo.png

26.5 KB
Loading

0 commit comments

Comments
 (0)