This displays an update notice if a new version of LittleLink Custom has been released.
This one is definitely a messy one. Everything I added is commented, but I'm going to try explaining it here one more time.
General outcome:
• This feature checks the local version against the newest version stored on a separate server.
Error prevention:
• I used 'file_get_contents' to get the version number from a JSON file. If 'file_get_contents' cant find the file, PHP will throw an Error Exception.
• To prevent this, I put the update section in an if-statement that only applies if the following conditions are met.
Check if files exist:
• To test whether the file on the server exists (remember, if the server can't be reached, you will get an Error Exception) I used a function that checks if the URL to the file on the server successfully returns a '200 OK' response (see https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/200).
• If this condition is met, it sets the variable '$ServerExists' to true, if not to false.
• Now, the previous mentioned if-statement simply checks if the local file exists and the '$ServerExists' variable equals 'true' to proceed.
Get version number:
• If all previous conditions are met, two variables get defined via 'file_get_contents' '$Vgit' and '$Vlocal'.
• Both the file on the server and the local file simply contain the version number.
• The variable '$Vgit' is the newest version number retrieved from the server.
• The variable '$Vlocal' is the local version number.
Display update notice:
• To finally display the version number (added with HTML) one last check via an if-statement is performed. This simply checks if the current user is an admin AND if the version retrieved from the server is higher than the local one.
• If both conditions are met, the notice is displayed.
In addition, I should mention that I put the existing 'Watch Page' link as well as the update notice in a div with the class 'row' to display both links next to another instead of them being stacked.
Added 'fadein' class to avatar image, littlelink_name and littlelink_description text. This class adds the fade-in animation from 'animate.css' found in /littlelink/css/.
A second empty line in the SQLite database caused an error when running 'php artisan migrate'.
Command:
$ php artisan migrate
Error:
"Illuminate/Database/QueryException"
SQLSTATE[HY000]: General error: 26 file is not a database (SQL: select * from sqlite_master where type = 'table' and name = migrations)
at /path/to/vendor/laravel/framework/src/Illuminate/Database/Connection.php:712
708▕ // If an exception occurs when attempting to run a query, we'll format the error
709▕ // message to include the bindings with SQL, which will make this exception a
710▕ // lot more helpful to the developer instead of just the database's errors.
711▕ catch (Exception $e) {
➜ 712▕ throw new QueryException(
713▕ $query, $this->prepareBindings($bindings), $e
714▕ );
715▕ }
716▕ }
1 /path/to/vendor/laravel/framework/src/Illuminate/Database/Connection.php:368
PDOException::("SQLSTATE[HY000]: General error: 26 file is not a database")
2 /path/to/vendor/laravel/framework/src/Illuminate/Database/Connection.php:368
PDO::prepare("select * from sqlite_master where type = 'table' and name = ?")
Adjusted license to fit this project. I segmented the licenses in 3 different parts.
The first segment titled "GPL-3.0 License" relates to this project alone.
JulianPrieber/littlelink-custom is licensed under the GNU General Public License v3.0.
Permissions of this strong copyleft license are conditioned on making available complete source code of licensed works and modifications, which include larger works using a licensed work, under the same license. Copyright and license notices must be preserved. Contributors provide an express grant of patent rights.
You may:
- Commercially use
- Modify
- Distribute
- Patent
- Privately use
this project.
### I DO NOT PROVIDE ANY LIABILITY OR WARRANTY REGARDING THIS PROJECT! ###
The second segment titled "Forked from" lists every repository this project is based on/forked from.
The third segment titled "Third-Party licenses" includes all third-party licenses of third-party code used in this project, including credit and links to the used repository.
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.
Added empty SQLite database for future use as main database for Laravel. As mentioned in previous commits, I'm switching to SQLite due to the easier setup process for the inexperienced user.
Added default '.env' config file. I'm keeping the '.env.example' in the repository, but an easier setup process a default configuration will from now on be included in the repository.
I'm switching from MySQL to SQLite for the same reason mentioned above. By adding the MySQL database setting from '.env.example' to the '.env' config, MySQL can still be used as the database.
Added dark mode CSS files for all studio pages.
Now, this one's a bit janky. The studio CSS files 'bootstrap.min' and 'style-dashboard' already had settings for dark mode in them.
The problem is that the PHP files for the studio sites:
app.blade.php, footer.blade.php, guest.blade.php, sidebar.blade.php and a few others specify the light classes in the PHP directly.
As I didn't want to create separate PHP pages for dark and light mode, I simply replaced the light mode values in the CSS files with the dark mode ones. This means in the files the classes are still labeled as light mode but are in fact for the dark mode.
Selection for the dark mode will be handled the same as on the other pages, with JavaScript and a cookie (see next commit).
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.
I removed avatar.png as it is no longer being used and has been replaced with logo.svg.
If an admin uploads a custom logo, this will take the place of avatar.png and will be used as the new logo.
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.
JulianPrieber
