devol/LinkStack
1
0
Fork 0
mirror of https://github.com/LinkStackOrg/LinkStack.git synced 2025-01-10 17:23:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

Touched up styling

Browse Source
This commit is contained in:
Julian Prieber 2023-05-15 15:00:03 +02:00
parent aa65331b32
commit 03c1ba6940
1 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
resources/views/studio/button-editor.blade.php
View File

@ -94,7 +94,7 @@
<h2 class="mb-4 card-header"><i class="bi bi-pen"> Button Editor</i></h2> <h2 class="mb-4 card-header"><i class="bi bi-pen"> Button Editor</i></h2>
<div class="card-body p-0 p-md-3"> <div class="card-body p-0 p-md-3">
<br><br><a class="btn btn-primary" href="{{ url('/studio/links') }}">⬅ Back</a> <a class="btn btn-primary" href="{{ url('/studio/links') }}"><i class="bi bi-arrow-left-short"></i> Back</a><br><br>
<h2>Custom Button</h2><br> <h2>Custom Button</h2><br>
@ -149,9 +149,9 @@
<section id="preview"> <section id="preview">
@if($buttonId == 1) @if($buttonId == 1)
<center><div id="sample" style="--delay: 1s; border-radius:8px !important; max-width: 400px; width: 80%; class="button-entrance"><div class="button-demo button hvr-grow hvr-icon-wobble-vertical"><img class="icon hvr-icon" src="{{ asset('\/assets/linkstack/icons\/') . 'custom' }}.svg">{{ $title }}</div></div></center> <center><div id="sample" style="border-radius: 8px !important; max-width: 350px; height: 48px; display: flex; align-items: center; justify-content: center;font-size: 18px;" class="button-demo button"><img class="icon hvr-icon" src="{{ asset('\/assets/linkstack/icons\/') . 'custom' }}.svg">{{ $title }}</div></center>
@else @else
<center><div id="sample" style="--delay: 1s; border-radius:8px !important; max-width: 400px; width: 80%; class="button-entrance"><div class="button-demo button hvr-grow hvr-icon-wobble-vertical"><img class="wicon hvr-icon" src="@if(file_exists(base_path("assets/favicon/icons/").localIcon($id))){{url('assets/favicon/icons/'.localIcon($id))}}@else{{getFavIcon($id)}}@endif">{{ $title }}</div></div></center> <center><div id="sample" style="border-radius: 8px !important; max-width: 350px; height: 48px; display: flex; align-items: center; justify-content: center;font-size: 18px;" class="button-demo button"><img class="wicon hvr-icon" src="@if(file_exists(base_path("assets/favicon/icons/").localIcon($id))){{url('assets/favicon/icons/'.localIcon($id))}}@else{{getFavIcon($id)}}@endif">{{ $title }}</div></center>
@endif @endif
</section> </section>
@ -171,7 +171,7 @@
</div> </div>
</div> </div>
</details> </details>
<br><button id="code" class="mt-3 ml-3 btn btn-info">Submit</button><br> <br><button id="code" class="btn btn-primary">Save</button><br>
</form> </form>
<form action="{{ route('editCSS', $id) }}" method="post"> <form action="{{ route('editCSS', $id) }}" method="post">
@ -181,7 +181,7 @@
NULL NULL
</textarea> </textarea>
</div> </div>
<button type="submit" class="mt-3 ml-3 btn btn-info">Reset to default</button> <button type="submit" class="btn btn-danger">Reset to default</button>
</form> </form>
<br><br><div id="result" style="left: 1%; position: relative; background-color:#2c2d3a; border-radius: 25px; min-width:300px; max-width:950px; height:300px; box-shadow: 0 10px 20px -10px rgba(0,0,0, 0.6);"> <br><br><div id="result" style="left: 1%; position: relative; background-color:#2c2d3a; border-radius: 25px; min-width:300px; max-width:950px; height:300px; box-shadow: 0 10px 20px -10px rgba(0,0,0, 0.6);">
@ -223,7 +223,9 @@
<p>If the short code is a brand icon, it is important to include a 'fab' before the short code part. Again, The 'fa-...' formatting still applies here. For example, 'fab fa-github'</p> <p>If the short code is a brand icon, it is important to include a 'fab' before the short code part. Again, The 'fa-...' formatting still applies here. For example, 'fab fa-github'</p>
<p>To apply color to your icons, you can simply write out the color name or just write the HEX value before the icon, followed by a ';'. Here it is important to put the color before the icon short code and the color code must be ended with a semicolon.<br> <p>To apply color to your icons, you can simply write out the color name or just write the HEX value before the icon, followed by a ';'. Here it is important to put the color before the icon short code and the color code must be ended with a semicolon.<br>
You can find a list of available colors <a href="https://www.w3schools.com/cssref/css_colors.asp" target="_blank">here</a>.</p> You can find a list of available colors <a href="https://www.w3schools.com/cssref/css_colors.asp" target="_blank">here</a>.</p>
<br><table class="table table-bordered"> <br>
<div class="table-responsive">
<table class="table table-striped">
<thead> <thead>
<tr> <tr>
<th scope="col">Style</th> <th scope="col">Style</th>
@ -259,18 +261,19 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</details> </details>
<div class="row"> <br>
<button type="submit" class="mt-3 ml-3 btn btn-info">Update icon</button> <button type="submit" class="btn btn-primary">Update icon</button>
<button class="mt-3 ml-3 btn btn-info"><a href="https://fontawesome.com/search?m=free" target="_blank">See all icons</a></button> <a class="btn btn-primary" href="https://fontawesome.com/search?m=free" target="_blank">See all icons</a>
</div>
</form><br><br><br><br> </form><br><br><br><br>
@endif @endif
</div> </div>
<a class="btn btn-primary" href="{{ url('/studio/links') }}">⬅ Back</a> <a class="btn btn-primary" href="{{ url('/studio/links') }}"><i class="bi bi-arrow-left-short"></i> Back</a>
</div> </div>
</section> </section>