devol/LinkStack
1
0
Fork 0
mirror of https://github.com/LinkStackOrg/LinkStack.git synced 2025-02-02 20:27:05 +01: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);
transform: translateY(-150px);
}
.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,
sharebutton {
display: inline-block;
text-decoration: none;
height: 48px;
text-align: center;
vertical-align: middle;
font-size: 18px;
width: 48px;
font-weight: 700;
line-height: 48px;
letter-spacing: 0.1px;
white-space: wrap;
border-radius: 8px;
cursor: pointer;
color: #000000;
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 {
color: #000000;
@ -62,4 +82,16 @@ sharebutton:hover,
.sharebutton.sharebutton-primary:hover,
.sharebutton.sharebutton-primary:focus {
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')
<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>
@else
<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>
@endif
<div class="toastdiv">