This fixed the issue of dark mode not displaying on the register, login, forgot password and a few other pages.
This one took me a while to fix, and I still don't really know what is going on here.
The aforementioned pages already implemented a dark mode, but it didn't seem to work for me. After some testing, I discovered that the dark mode preset doesn't load on chromium based browsers.
I have absolutely no idea why that is, if someone could help me with this that would be amazing. I might make an issue out of this later on.
As I still wanted to fix this, I finally achieved my goal by doing the caveman approach:
I first added the usual dark mode detection. The same used on the home and little link pages (see previous commits if you're interested).
Then I wrote and if statement that loads the newly added app-dark.css (see previous commit) that changes text and background color on the pages in question, if the browser type is chromium and dark mode is selected in the browser settings.
"@if(strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome' !== false) and $color_scheme == 'dark')"
This doesn't look optimal, and I would rather just have the same dark mode as on Firefox, but this is the best I can currently do with my available time.
Just a quick fix, the logo wasn't displaying correctly I probably should do this with a separate CSS file for all images, but I just did this quick and dirty with a style attribute
Just a quick fix, the logo wasn't displaying correctly I probably should do this with a separate CSS file for all images, but I just did this quick and dirty with a style attribute
Fixed the if-else statement responsible for loading the correct login/register image. The SVG wouldn't work, so I just used the new avatar@2x.png, so I guess that one is staying for now.
If it works it works, I could load the vector image by changing the logo to the SVG in:
confirm-password.blade.php, forgot-password.blade.php, login.blade.php, register.blade.php, reset-password.blade.php and verify-email.blade.php.
This works good enough, so imma leave it how it is now.
As part of the new logo (https://github.com/JulianPrieber/littlelink-custom/milestone/1) I'm now using the new 'logo.svg' vector logo.
For this, I added an if-else statement in most cases, which first check for a custom logo uploaded by the admin or the avatar of an individual user. If the image doesn't exist, the default logo (logo.svg) is used.
Added automatic dark mode detection to littlelink.blade.php via a cookie with js.cookie.min.js (see previous commit).
Detecting the dark mode setting is done with JavaScript. The script detects the preferred dark mode setting in the client's browser and saves it with a cookie. If the script detects a change in this setting, it corrects the cookie.
Loading the appropriate skeleton.css is done via PHP with an if-else statement. If the cookie (saved by the previous script) color scheme equals 'dark' it will load skeleton-dark.css (found in /littlelink/css).
If dark mode is not detected OR nothing is detected/cookie is getting blocked, the statement defaults to skeleton-light.css (also found in /littlelink/css).
You could change what the if-else statement defaults to (i.e. which color scheme is loaded if the cookie fails to detect) by switching 'skeleton-dark.css' and 'skeleton-light.css' around (see comment in if statement).
Everything added is commented and marked with begin/end.
Credit to 'user1575941' on Stack Overflow who's commented code REALLY helped getting behind all this.
Added automatic dark mode detection to home.blade.php via a cookie with js.cookie.min.js (see previous commit).
Detecting the dark mode setting is done with JavaScript. The script detects the preferred dark mode setting in the client's browser and saves it with a cookie. If the script detects a change in this setting, it corrects the cookie.
Loading the appropriate skeleton.css is done via PHP with an if-else statement. If the cookie (saved by the previous script) color scheme equals 'dark' it will load skeleton-dark.css (found in /littlelink/css).
If dark mode is not detected OR nothing is detected/cookie is getting blocked, the statement defaults to skeleton-light.css (also found in /littlelink/css).
You could change what the if-else statement defaults to (i.e. which color scheme is loaded if the cookie fails to detect) by switching 'skeleton-dark.css' and 'skeleton-light.css' around (see comment in if statement).
Everything added is commented and marked with begin/end.
Credit to 'user1575941' on Stack Overflow who's commented code REALLY helped getting behind all this.
Added automatic dark mode detection to home.blade.php via a cookie with js.cookie.min.js (see previous commit).
Detecting the dark mode setting is done with JavaScript. The script detects the preferred dark mode setting in the client's browser and saves it with a cookie. If the script detects a change in this setting, it corrects the cookie.
Loading the appropriate skeleton.css is done via PHP with an if-else statement. If the cookie (saved by the previous script) color scheme equals 'dark' it will load skeleton-dark.css (found in /littlelink/css).
If dark mode is not detected OR nothing is detected/cookie is getting blocked, the statement defaults to skeleton-light.css (also found in /littlelink/css).
You could change what the if-else statement defaults to (i.e. which color scheme is loaded if the cookie fails to detect) by switching 'skeleton-dark.css' 'skeleton-light.css around' (see comment in if statement).
Everything added is commented and marked with begin/end.
Credit to 'user1575941' on Stack Overflow who's commented code REALLY helped getting behind all this.
Live demo: https://julianprieber.github.io/littlelink-admin-demo/button-entrance.html
Added an entrance animation for buttons on home.blade.php. This animation was made by the Animate.css project (https://github.com/animate-css/animate.css).
Each button entrance animation lasts 100ms. Every button after the first adds 100ms to the value of the previous button i.e. button 1 loads after 100ms, button 2 loads after 200ms, button 3 after 300ms and so on...
Timings for the buttons can be changed in /littlelink/css/animate.css
I put every button in a separate <div> Tag, so the animation wouldn't in interfere with the existing hover animation.
Live demo: https://julianprieber.github.io/littlelink-admin-demo/button-entrance.html
Added an entrance animation for buttons on littlelink.blade.php. This animation was made by the Animate.css project (https://github.com/animate-css/animate.css).
Each button entrance animation lasts 100ms. Every button after the first adds 100ms to the value of the previous button i.e. button 1 loads after 100ms, button 2 loads after 200ms, button 3 after 300ms and so on...
Timings for the buttons can be changed in /littlelink/css/animate.css
I put every button in a separate <div> Tag, so the animation wouldn't in interfere with the existing hover animation.
Likewise, I removed all <br> Tags.
This is one of multiple public path edits. For simplified usability, I am integrating the public Laravel directory into the root directory.
For this, I am changing every instance of 'public_path' to 'base_path' and will use this format in future changes as well.
This is one of multiple public path edits. For simplified usability, I am integrating the public Laravel directory into the root directory.
For this, I am changing every instance of 'public_path' to 'base_path' and will use this format in future changes as well.
This is one of multiple public path edits. For simplified usability, I am integrating the public Laravel directory into the root directory.
For this, I am changing every instance of 'public_path' to 'base_path' and will use this format in future changes as well.
This is one of multiple public path edits. For simplified usability, I am integrating the public Laravel directory into the root directory.
For this, I am changing every instance of 'public_path' to 'base_path' and will use this format in future changes as well.
Added hover button animation to home.blade.php.
- Included hover-min.css for animation
- Added class 'button hvr-grow' to all buttons
- Added class 'hvr-icon-wobble-vertical' to all buttons (for icon animation)
- Added class 'hvr-icon' to all icons (to indicate icon to hover-min.css)
Read more on how to use and change animations here: https://github.com/IanLunn/Hover/blob/master/README.md
Try a demo of the added animations here: https://julianprieber.github.io/littlelink-admin-demo/
Added hover button animation to littlelink.blade.php.
- Included hover-min.css for animation
- Added class 'button hvr-grow' to all buttons
- Added class 'hvr-icon-wobble-vertical' to all buttons (for icon animation)
- Added class 'hvr-icon' to all icons (to indicate icon to hover-min.css)
Read more on how to use and change animations here: https://github.com/IanLunn/Hover/blob/master/README.md
Try a demo of the added animations here: https://julianprieber.github.io/littlelink-admin-demo/
Added button animation to littlelink.blade.php.
- Included hover-min.css for animation
- Added class 'button hvr-grow' to all buttons
- Added class 'hvr-icon-wobble-vertical' to all buttons (for icon animation)
- Added class 'hvr-icon' to all icons (to indicate icon to hover-min.css)
Read more on how to use and change animations here: https://github.com/IanLunn/Hover/blob/master/README.md
Try a demo of the added animations here: https://julianprieber.github.io/littlelink-admin-demo/
This shows a preview for Name, Bio and avatar image of users profiles if shared on social sites like Facebook, Twitter, Facebook Messenger, WhatsApp, Discord, Pinterest and many more.
JulianPrieber
aprillio
Khashayar Zavosh
