Mirrors/gamesearch
1
0
Fork 0
mirror of https://github.com/IdleEndeavor/gamesearch.git synced 2025-04-29 14:14:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Mobile Devices Support Revamped

Browse Source 
- removed old @media query variables
- moved engine selector to bottom of screen on mobile devices
- additional info floating button now hidden on mobile devices
- sidebar now hidden on mobile devices
- share buttons below search bar removed
- added custom share buttons only visible on mobile devices at the top of the screen
This commit is contained in:
IdleEndeavor 2021-12-09 09:45:02 +03:00
parent 24a2f39dcf
commit 053e2d34cc
2 changed files with 74 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
css/index.css
View File

@ -25,36 +25,6 @@ html, body {
text-align: center;
}
@media (max-width: 600px) {
.maindiv {
margin: auto;
position: relative;
text-align: left;
top: 25%;
width: 90%;
}
.maindiv img {
max-width: 85%;
}
.sidebar {
visibility: hidden;
}
.toggle {
visibility: hidden;
}
.nav {
visibility: hidden;
}
.adminActions {
visibility: hidden;
}
}
/* Search Box */
.searchbox {
width: 60%;
@ -63,7 +33,6 @@ html, body {
.search {
text-align: centre;
padding-top: 150px;
width: auto;
width: 60%;
margin: 0 auto 0 auto;
animation: slidein 0.3s ease;
@ -626,4 +595,68 @@ html, body {
.nav__icon {
font-size: 20px;
}
}
@media (max-width: 500px) {
.maindiv {
margin: auto;
position: relative;
text-align: left;
top: 25%;
width: 100%;
}
.maindiv img {
max-width: 75%;
}
.nav {
top: unset;
bottom: 0px;
}
.sharemobile {
display: flex;
text-align: center;
align-items: center;
justify-content: center;
margin: 15px;
}
.share-button-mobile {
display: flex;
text-align: center;
align-items: center;
justify-content: center;
cursor: pointer;
flex-basis: 10px;
}
.share-button-mobile img {
width: 40px;
height: auto;
margin: 0 10px 0 10px;
}
.sidebar {
visibility: hidden;
}
.toggle {
visibility: hidden;
}
.share {
visibility: hidden;
}
.adminActions {
visibility: hidden;
}
}
@media (min-width: 500px) {
.sharemobile {
visibility: hidden;
}
}

9
index.html
View File

@ -27,6 +27,15 @@
<noscript>
<div id="noscript-warning">Rave Game Search uses Javascript to provide its search results. Kindly enable Javascript on your browser and reload the page to restore usability.</div>
</noscript>
<div class="sharemobile">
<div class="share-button-mobile">
<a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fravegamesearch.pages.dev&text=Rave%20Game%20Search:%20http%3A%2F%2Fravegamesearch.pages.dev" target="_blank" title="Tweet"><img alt="Tweet" src="img/social-icons/Twitter.png" /></a>
<a href="http://www.tumblr.com/share?v=3&u=http%3A%2F%2Fravegamesearch.pages.dev&quote=Rave%20Game%20Search&s=" target="_blank" title="Post to Tumblr"><img alt="Post to Tumblr" src="img/social-icons/Tumblr.png" /></a>
<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fravegamesearch.pages.dev&media=https://ravegamesearch.pages.dev/img/ravesearch-homepage-pic.png&description=An%20adaptation%20of%20the%20r%2Fpiracy%20Megathread.%20Rave%20Game%20Search%20helps%20you%20find%20free%20and%20safe%20download%20links%20to%20your%20favourite%20video%20games%20in%20a%20fast%20and%20easy%20to%20use%20UI." target="_blank" title="Pin it"><img alt="Pin it" src="img/social-icons/Pinterest.png" /></a>
<a href="http://www.reddit.com/submit?url=http%3A%2F%2Fravegamesearch.pages.dev&title=Rave%20Game%20Search" target="_blank" title="Submit to Reddit"><img alt="Submit to Reddit" src="img/social-icons/Reddit.png" /></a>
<a href="mailto:?subject=Rave%20Game%20Search&body=An%20adaptation%20of%20the%20r%2Fpiracy%20Megathread.%20Rave%20Game%20Search%20helps%20you%20find%20free%20and%20safe%20download%20links%20to%20your%20favourite%20video%20games%20in%20a%20fast%20and%20easy%20to%20use%20UI.:%20http%3A%2F%2Fravegamesearch.pages.dev" target="_blank" title="Send email"><img alt="Send email" src="img/social-icons/Email.png" /></a>
</div>
</div>
<body>