Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI tweaks, script tweak and bug fixes #7

Closed
wants to merge 9 commits into from
Closed

UI tweaks, script tweak and bug fixes #7

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3d75e6c
Fix dropdown container width
7Skiez May 9, 2021
d965517
Improve class replace script
7Skiez May 11, 2021
4479cfb
Change hero ui layout
7Skiez May 11, 2021
72950cd
Change the look and alignment of hero content
7Skiez May 20, 2021
49421bc
Fix pgsql sequence after seeding
7Skiez May 24, 2021
89713ae
Add more changes to the hero section
7Skiez May 28, 2021
6aa7a5c
Revert composer lock file back to original state
7Skiez May 29, 2021
9c48c4a
Add hero layout switch option
7Skiez May 29, 2021
2b1d226
Fix install route showing empty screen after seeding
7Skiez May 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
649 changes: 336 additions & 313 deletions composer.lock
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion public/themes/tailwind/css/app.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/themes/tailwind/js/app.js
View file
Open in desktop

Large diffs are not rendered by default.

20 changes: 17 additions & 3 deletions resources/views/themes/tailwind/assets/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,24 @@ window.csrf = document.querySelector("meta[name='csrf-token']").getAttribute("co
document.addEventListener("DOMContentLoaded", function(){
var replacers = document.querySelectorAll('[data-replace]');
for(var i=0; i<replacers.length; i++){
let replaceClasses = JSON.parse(replacers[i].dataset.replace.replace(/'/g, '"'));
Object.keys(replaceClasses).forEach(function(key) {
let inputClasses = JSON.parse(replacers[i].dataset.replace.replace(/'/g, '"'));
//replace white-space seperated values in inputClasses with array of classes
var replacementClasses = new Array();
Object.keys(inputClasses).forEach(function(key, i) {
replacementClasses[i] = inputClasses[key].match(/(\s+)/)
? inputClasses[key].split(/(\s+)/).filter((e) => e.trim().length > 0)
: inputClasses[key];
inputClasses[key] = replacementClasses[i];
});

Object.keys(inputClasses).forEach(function(key) {
replacers[i].classList.remove(key);
replacers[i].classList.add(replaceClasses[key]);

if(typeof(inputClasses[key]) === 'string'){
replacers[i].classList.add(inputClasses[key]);
}else if(typeof(inputClasses[key]) === 'object'){
replacers[i].classList.add(...inputClasses[key]);
}
});
}
});
Expand Down
19 changes: 18 additions & 1 deletion resources/views/themes/tailwind/assets/sass/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,23 @@ svg {
to {transform: translateX(-100%);}
}

.ship {
animation: ship 6s linear infinite;
}
@keyframes ship {
0% {
transform: rotate(0deg) translateY(0.75vh);
}

50%{
transform: rotate(0.25deg) translateY(0);
}

100% {
transform: rotate(0deg) translateY(0.75vh);
}
}

.form-control{
@apply form-input w-full;
}
Expand All @@ -65,4 +82,4 @@ svg {
background-size: 1.5em 1.5em;
padding:.5rem 2.5rem .5rem .75rem;
background-repeat: no-repeat;
}
}
27 changes: 14 additions & 13 deletions resources/views/themes/tailwind/home.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,29 +27,30 @@
</div>
</div>

<div class="flex w-full mb-16 lg:w-1/2 lg:mb-0">

<div class="relative invisible transition-none duration-1000 delay-100 transform translate-x-12 opacity-0" data-replace='{ "transition-none": "transition-all", "invisible": "visible", "translate-x-12": "translate-y-0", "opacity-0": "opacity-100" }'>
<img src="{{ Voyager::image(theme('home_promo_image')) }}" class="w-full max-w-3xl sm:w-auto">
</div>

</div>
</div>
</div>

</div>

<div class="relative flex items-center z-10 -mt-32 sm:mt-auto xl:-mt-40">
<div
class="absolute w-auto right-0.5 invisible transition-none transform translate-x-12 -translate-y-3/7 opacity-0 float-right -z-1"
data-replace='{ "transition-none": "transition-all duration-1000 delay-100", "invisible": "visible", "translate-x-12": "sm:-translate-x-6", "opacity-0": "opacity-100" }'>

</div>
<img src="{{ Voyager::image(theme('home_promo_image')) }}"
class="w-4/5 m-auto max-w-xl sm:w-auto lg:max-w-xl xl:max-w-3xl 2xl:max-w-4xl ship">

<div class="relative z-40 -mt-64">
</div>

<svg viewBox="0 0 120 28" class="-mt-64">
<svg viewBox="0 0 120 28" class="-mt-1/2" fill-rule="evenodd">
<defs>
<path id="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
{{-- Editted the svg path using https://yqnn.github.io/svg-path-editor/ --}}
<path id="wave"
d="M 0 13 C 30 13 30 15 60 15 C 90 15 90 13 120 13 C 150 13 150 15 180 15 C 210 15 210 13 240 13 v 28 h -240 z" />
</defs>
<use id="wave3" class="wave" xlink:href="#wave" x="0" y="-2"></use>
<use id="wave3" class="wave" xlink:href="#wave" x="0" y="-0.5"></use>
<use id="wave2" class="wave" xlink:href="#wave" x="0" y="0"></use>
<use id="wave1" class="wave" xlink:href="#wave" x="0" y="1" />
<use id="wave1" class="wave" xlink:href="#wave" x="0" y="0.25" />
</svg>
</div>

Expand Down
2 changes: 1 addition & 1 deletion resources/views/themes/tailwind/menus/authenticated.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
x-transition:leave="transition duration-100 ease-in scale-100"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="absolute top-0 w-screen max-w-xs px-2 mt-20 transform -translate-x-1/2 left-1/2 sm:px-0" x-cloak>
class="absolute top-0 w-max max-w-xs px-2 mt-20 transform -translate-x-1/2 left-1/2 sm:px-0" x-cloak>
<div class="border border-gray-100 shadow-md rounded-xl">
<div class="overflow-hidden shadow-xs rounded-xl">
<div class="relative z-20 grid gap-6 px-5 py-6 bg-white sm:p-8 sm:gap-8">
Expand Down
77 changes: 38 additions & 39 deletions resources/views/themes/tailwind/menus/guest.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
x-transition:leave="transition duration-100 ease-in scale-100"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="fixed w-full transform -translate-x-1/2 xl:w-screen xl:max-w-6xl xl:px-2 xl:absolute sm:px-0 lg:ml-0 left-1/2" x-cloak>
class="fixed w-full transform -translate-x-1/2 xl:w-max xl:max-w-6xl xl:px-2 xl:absolute sm:px-0 lg:ml-0 left-1/2" x-cloak>

<div class="overflow-hidden shadow-lg xl:rounded-xl">
<div class="flex items-stretch justify-center overflow-hidden bg-white shadow-xs xl:rounded-xl">
Expand All @@ -38,6 +38,7 @@ class="fixed w-full transform -translate-x-1/2 xl:w-screen xl:max-w-6xl xl:px-2
<div class="absolute inset-0 w-full h-full opacity-75 bg-gradient-to-br from-wave-600 to-indigo-600"></div>
</div>
<div class="relative z-20 grid gap-6 px-5 pt-6 pb-8 bg-white border-t border-b border-transparent xl:border-gray-200 sm:gap-8 sm:p-8">

<a href="#" class="flex items-start inline-block p-3 -m-3 space-x-4 transition duration-150 ease-in-out rounded-lg group">
<div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mt-1 mr-3 transition duration-300 ease-in-out transform scale-100 bg-indigo-100 rounded-full text-wave-600 group-hover:text-white group-hover:bg-wave-600 group-hover:scale-110 group-hover:rotate-3 -rotate-3">
<svg class="relative flex-shrink-0 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path></svg>
Expand Down Expand Up @@ -91,65 +92,63 @@ class="fixed w-full transform -translate-x-1/2 xl:w-screen xl:max-w-6xl xl:px-2
</div>
</a>



</div>

<div class="relative z-20 grid gap-6 px-5 pt-6 pb-8 bg-white border-t border-b border-r border-transparent rounded-r-xl xl:border-gray-200 sm:gap-8 sm:p-8">
<a href="#" class="flex items-start inline-block p-3 -m-3 space-x-4 transition duration-150 ease-in-out rounded-lg group">
<div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mt-1 mr-3 transition duration-300 ease-in-out transform scale-100 bg-indigo-100 rounded-full text-wave-600 group-hover:text-white group-hover:bg-wave-600 group-hover:scale-110 group-hover:rotate-3 -rotate-3">
<svg class="relative flex-shrink-0 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
</div>
<div class="space-y-1">
<p class="text-base font-medium leading-6 text-gray-900">
Notifications
</p>
<p class="text-sm leading-5 text-gray-500">
User notification system that's easy to implement in your SAAS.
</p>
</div>
</a>
<a href="#" class="flex items-start inline-block p-3 -m-3 space-x-4 transition duration-150 ease-in-out rounded-lg group">
<a href="#" class="flex items-start inline-block p-3 -m-3 space-x-4 transition duration-150 ease-in-out rounded-lg group">
<div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mt-1 mr-3 transition duration-300 ease-in-out transform scale-100 bg-indigo-100 rounded-full text-wave-600 group-hover:text-white group-hover:bg-wave-600 group-hover:scale-110 group-hover:rotate-3 -rotate-3">
<svg class="relative flex-shrink-0 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
<svg class="relative flex-shrink-0 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
</div>
<div class="space-y-1">
<p class="text-base font-medium leading-6 text-gray-900">
Fully Functional Blog
Notifications
</p>
<p class="text-sm leading-5 text-gray-500">
Add blog posts to your application to drive-in organic traffic.
User notification system that's easy to implement in your SAAS.
</p>
</div>
</a>
<a href="#" class="flex items-start inline-block p-3 -m-3 space-x-4 transition duration-150 ease-in-out rounded-lg group">
<div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mt-1 mr-3 transition duration-300 ease-in-out transform scale-100 bg-indigo-100 rounded-full text-wave-600 group-hover:text-white group-hover:bg-wave-600 group-hover:scale-110 group-hover:rotate-3 -rotate-3">
<svg class="relative flex-shrink-0 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
</div>
<div class="space-y-1">
<p class="text-base font-medium leading-6 text-gray-900">
Fully Functional Blog
</p>
<p class="text-sm leading-5 text-gray-500">
Add blog posts to your application to drive-in organic traffic.
</p>
</div>
</a>

<a href="#" class="flex items-start inline-block p-3 -m-3 space-x-4 transition duration-150 ease-in-out rounded-lg group">
<div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mt-1 mr-3 transition duration-300 ease-in-out transform scale-100 bg-indigo-100 rounded-full text-wave-600 group-hover:text-white group-hover:bg-wave-600 group-hover:scale-110 group-hover:rotate-3 -rotate-3">
<svg class="relative flex-shrink-0 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>
</div>
<div class="space-y-1">
<p class="text-base font-medium leading-6 text-gray-900">
Themes
</p>
<p class="text-sm leading-5 text-gray-500">
Theme support with your favorite CSS libraries.
</p>
</div>
</a>
<a href="#" class="flex items-start inline-block p-3 -m-3 space-x-4 transition duration-150 ease-in-out rounded-lg group">
<a href="#" class="flex items-start inline-block p-3 -m-3 space-x-4 transition duration-150 ease-in-out rounded-lg group">
<div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mt-1 mr-3 transition duration-300 ease-in-out transform scale-100 bg-indigo-100 rounded-full text-wave-600 group-hover:text-white group-hover:bg-wave-600 group-hover:scale-110 group-hover:rotate-3 -rotate-3">
<svg class="relative flex-shrink-0 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
<svg class="relative flex-shrink-0 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>
</div>
<div class="space-y-1">
<p class="text-base font-medium leading-6 text-gray-900">
Developer API
Themes
</p>
<p class="text-sm leading-5 text-gray-500">
Grant access keys and tokens for your users.
Theme support with your favorite CSS libraries.
</p>
</div>
</a>
</div>
<a href="#" class="flex items-start inline-block p-3 -m-3 space-x-4 transition duration-150 ease-in-out rounded-lg group">
<div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mt-1 mr-3 transition duration-300 ease-in-out transform scale-100 bg-indigo-100 rounded-full text-wave-600 group-hover:text-white group-hover:bg-wave-600 group-hover:scale-110 group-hover:rotate-3 -rotate-3">
<svg class="relative flex-shrink-0 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
</div>
<div class="space-y-1">
<p class="text-base font-medium leading-6 text-gray-900">
Developer API
</p>
<p class="text-sm leading-5 text-gray-500">
Grant access keys and tokens for your users.
</p>
</div>
</a>
</div>

</div>

Expand Down Expand Up @@ -184,7 +183,7 @@ class="fixed w-full transform -translate-x-1/2 xl:w-screen xl:max-w-6xl xl:px-2
x-transition:leave="transition duration-100 ease-in scale-100"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="absolute w-screen max-w-sm px-2 transform -translate-x-1/2 left-1/2 sm:px-0"
class="absolute w-max max-w-sm px-2 transform -translate-x-1/2 left-1/2 sm:px-0"
x-cloak>
<div class="shadow-lg rounded-xl">
<div class="overflow-hidden border border-gray-100 shadow-md rounded-xl">
Expand Down
7 changes: 7 additions & 0 deletions resources/views/themes/tailwind/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,13 @@ module.exports = {
800: '#002F73',
900: '#00204D',
},
},
zIndex: {
"-1": "-1",
},
spacing: {
'3/7': '42.8571429%',
'9/20': '45%',
}
}
},
Expand Down
Binary file added storage/app/public/themes/May2021/IVCCZJseu7JDUmjEQdrs.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added storage/app/public/themes/May2021/NIMToja6m2YpxiV7XD5o.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added storage/app/public/themes/May2021/QJzQ9KwB3bpWJhERzI21.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added storage/app/public/themes/May2021/azzTLh3BVghTNlCzWFGK.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added storage/app/public/themes/May2021/dskAFB9S9ZyfW9d4KdoK.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 tests/Browser/AuthTest.php → tests/Browser/SignupTest.php
View file
Open in desktop
File renamed without changes.