Added custom spaces and headings

Added custom spaces and headings users can add like buttons to their littlelink pages to divide button sections into groups.

Spaces can be changed via the number in the title, and one space equals one "<br>". The maximum spaces that can be added with one space 'button' is capped at 10.

The 'Space' button will be replaced with an empty space, so buttons could be visually separated into groups. Entering a number between 1-10 in the title section will change the empty space's distance.

The 'Heading' button will be replaced with a sub-heading, where the title defines the text on that heading.
This commit is contained in:
Julian Prieber 2022-05-06 15:26:39 +02:00
parent a65509bd58
commit 5b63080f8c
4 changed files with 29 additions and 0 deletions

View File

@ -92,6 +92,13 @@ class UserController extends Controller
//Save add link
public function addLink(request $request)
{
if ($request->button == 'heading' or $request->button == 'space')
$request->validate([
'link' => '',
'title' => '',
'button' => 'required'
]);
else
$request->validate([
'link' => 'required',
'title' => '',

View File

@ -179,6 +179,14 @@ class ButtonSeeder extends Seeder
[
'name' => 'website'
],
[
'name' => 'header'
],
[
'name' => 'space'
],
];
Button::insert($buttons);

View File

@ -208,6 +208,17 @@ function get_operating_system() {
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-custom_website button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="http://www.google.com/s2/favicons?domain={{$link->link}}">{{ $link->title }}</a></div>
@elseif($link->name === "custom_website" and $link->custom_css != "")
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button hvr-grow hvr-icon-wobble-vertical" style="{{ $link->custom_css }}" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="http://www.google.com/s2/favicons?domain={{$link->link}}">{{ $link->title }}</a></div>
@elseif($link->name === "space")
<?php
if (is_numeric($link->title) and $link->title < 10)
echo str_repeat("<br>",$link->title);
elseif (is_numeric($link->title) and $link->title >= 10)
echo str_repeat("<br>",10);
else
echo "<br><br><br>"
?>
@elseif($link->name === "heading")
<h2>{{ $link->title }}</h2>
@else
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-{{ $link->name }} button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . $linkName }}.svg">{{ ucfirst($linkName) }}</a></div>
@endif

View File

@ -32,6 +32,9 @@
<pre style="color: grey;">
The 'Custom' button allows you to add a custom link, where the text on the button is determined with the link title set above.
The 'Custom_website' button functions similar to the Custom button, with the addition of a function that requests the favicon from the chosen URL and uses it as the button icon.
The 'Space' button will be replaced with an empty space, so buttons could be visually separated into groups. Entering a number between 1-10 in the title section will change the empty space's distance.
The 'Heading' button will be replaced with a sub-heading, where the title defines the text on that heading.
</pre>
</details>