devol/LinkStack
1
0
Fork 0
mirror of https://github.com/LinkStackOrg/LinkStack.git synced 2025-04-24 23:18:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

Made share button more mobile friendly

Browse Source
This commit is contained in:
Julian Prieber 2022-05-12 22:03:29 +02:00
parent 9d368ef9cb
commit c48bf69ec6
2 changed files with 53 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
littlelink/css/share.button.css vendored
View File

@ -31,24 +31,44 @@
-webkit-transform: translateY(-150px); -webkit-transform: translateY(-150px);
transform: translateY(-150px); transform: translateY(-150px);
} }
.sharebutton, .sharebutton,
sharebutton { sharebutton {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
height: 48px; height: 48px;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
font-size: 18px; font-size: 18px;
width: 150px; width: 48px;
font-weight: 700; font-weight: 700;
line-height: 48px; line-height: 48px;
letter-spacing: 0.1px; letter-spacing: 0.1px;
white-space: wrap; white-space: wrap;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
color: #000000; color: #000000;
background-color: #efefef background-color: #efefef
} }
@media screen and (min-width: 600px) {
.sharebutton,
sharebutton {
display: inline-block;
text-decoration: none;
height: 48px;
text-align: center;
vertical-align: middle;
font-size: 18px;
width: 150px;
font-weight: 700;
line-height: 48px;
letter-spacing: 0.1px;
white-space: wrap;
border-radius: 8px;
cursor: pointer;
color: #000000;
background-color: #efefef
}
}
sharebutton:hover, sharebutton:hover,
.sharebutton:hover { .sharebutton:hover {
color: #000000; color: #000000;
@ -62,4 +82,16 @@ sharebutton:hover,
.sharebutton.sharebutton-primary:hover, .sharebutton.sharebutton-primary:hover,
.sharebutton.sharebutton-primary:focus { .sharebutton.sharebutton-primary:focus {
color: #FFFFFF; color: #FFFFFF;
filter: brightness(90%) } filter: brightness(90%) }
@media screen and (max-width: 600px) {
.sharebutton-mb {
display: none;
}
.sharebutton-img {
position: relative;
left: 3px;
margin-left: auto;
margin-right: auto;
}
}

4
resources/views/littlelink.blade.php
View File

@ -107,12 +107,12 @@ function get_operating_system() {
@if($user_browser === 'Chrome' or get_operating_system() == 'mobile') @if($user_browser === 'Chrome' or get_operating_system() == 'mobile')
<script src="{{ asset('littlelink/js/jquery.min.js') }}"></script> <script src="{{ asset('littlelink/js/jquery.min.js') }}"></script>
<div align="right" class="sharediv"><div class="button-entrance"><a class="sharebutton hvr-grow hvr-icon-wobble-vertical" id='share-share-button'><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}share.svg">Share</a></div></div> <div align="right" class="sharediv"><div class="button-entrance"><a class="sharebutton hvr-grow hvr-icon-wobble-vertical" id='share-share-button'><img class="sharebutton-img icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}share.svg"><span class="sharebutton-mb">Share</span></a></div></div>
<span class="copy-icon" role="button"> <span class="copy-icon" role="button">
</span> </span>
@else @else
<span class="copy-icon" role="button"> <span class="copy-icon" role="button">
<div align="right" class="sharediv"><div class="button-entrance"><a class="sharebutton hvr-grow hvr-icon-wobble-vertical"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}share.svg">Share</a></div></div> <div align="right" class="sharediv"><div class="button-entrance"><a class="sharebutton hvr-grow hvr-icon-wobble-vertical"><img class="sharebutton-img icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}share.svg"><span class="sharebutton-mb">Share</span></a></div></div>
</span> </span>
@endif @endif
<div class="toastdiv"> <div class="toastdiv">