TotalFreedomMC/Website
1
0
Fork 0
mirror of https://github.com/TotalFreedomMC/Website.git synced 2024-05-22 04:21:26 +00:00
Code Issues Projects Releases Wiki Activity

Added Load More Builds button on MB page

Browse source
This commit is contained in:
Victor Lobe 2020-07-31 13:11:13 -07:00
parent d8b9218f23
commit 08e03dde24
3 changed files with 44 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
masterbuilders/assets/css/builders-dist.css
View file

@ -1 +1 @@
.card-action,.custom-btn,.header,.page-title{text-align:center}*{margin:0;padding:0}body{background:url(../images/bg.png) center no-repeat fixed;background-size:cover;color:#fff;margin-bottom:40px}.masterbuilders-list li,button{color:#ccc;font-family:'Baloo Tamma',cursive;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out}h1,h2,h3,h4,h5,h6,p{text-align:center;font-family:'Baloo Tamma',cursive}.card-action{margin-bottom:30px}button{background:rgba(30,30,30,.5);border:none;outline:0;text-decoration:none;padding:10px;border-radius:10px;width:65%;font-size:1.3em;font-weight:900;text-transform:uppercase;transition:all .2s ease-in-out}button:focus,button:hover{background:rgba(50,50,50,.5)}.card{background:rgba(50,50,50,.3);font-family:'Baloo Tamma',cursive}#note{font-size:1.4em;font-size:900;font-family:'Baloo Tamma',cursive;margin-top:5px}.card .card-image img{height:321.89px!important}.header{padding:100px;background:rgba(200,200,200,.2);width:100%}hr{border:2px solid rgba(230,230,230,.1)}.custom-btn{background:rgba(0,0,0,.6)}.custom-btn:focus,.custom-btn:hover{background:rgba(50,50,50,.6)}.masterbuilders-list li{display:inline-block;background:rgba(100,100,100,.4);padding:8px;cursor:pointer;border-radius:10%;font-size:1.1em;margin:5px;transition:all .2s ease-in-out}.masterbuilders-list li:hover{background:rgba(120,120,120,.5);color:#fff}.masterbuilders-list li img{width:20px;height:20px;margin-right:5px;float:left}.top{position:fixed;bottom:20px;right:50px;font-size:3em;color:rgba(178,34,34,.6);padding:10px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.top:hover{color:rgba(178,34,34,1)}.brand-logo{font-size:'Raleway',sans-serif;font-size:2em;font-weight:200;margin-top:0}@media only screen and (max-width:768px){.header{padding:5px}.masterbuilders-list li{display:block;border-radius:0}button{width:95%}nav .brand-logo{margin-top:13.5px;font-size:1.8em}nav .nav-wrapper li>a{font-weight:500;font-size:1em}}
.card-action,.custom-btn,.header,.page-title{text-align:center}*{margin:0;padding:0}body{background:url(../images/bg.png) center no-repeat fixed;background-size:cover;color:#fff;margin-bottom:40px}.masterbuilders-list li,button{color:#ccc;font-family:'Baloo Tamma',cursive;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out}h1,h2,h3,h4,h5,h6,p{text-align:center;font-family:'Baloo Tamma',cursive}.card-action{margin-bottom:30px}button{background:rgba(30,30,30,.5);border:none;outline:0;text-decoration:none;padding:10px;border-radius:10px;width:65%;font-size:1.3em;font-weight:900;text-transform:uppercase;transition:all .2s ease-in-out}button:focus,button:hover{background:rgba(50,50,50,.5)}.card{background:rgba(50,50,50,.3);font-family:'Baloo Tamma',cursive}#note{font-size:1.4em;font-size:900;font-family:'Baloo Tamma',cursive;margin-top:5px}.card .card-image img{height:321.89px!important}.header{padding:100px;background:rgba(200,200,200,.2);width:100%}hr{border:2px solid rgba(230,230,230,.1)}.custom-btn{background:rgba(0,0,0,.6)}.custom-btn:focus,.custom-btn:hover{background:rgba(50,50,50,.6)}.masterbuilders-list li{display:inline-block;background:rgba(100,100,100,.4);padding:8px;cursor:pointer;border-radius:10%;font-size:1.1em;margin:5px;transition:all .2s ease-in-out}.masterbuilders-list li:hover{background:rgba(120,120,120,.5);color:#fff}.masterbuilders-list li img{width:20px;height:20px;margin-right:5px;float:left}.top{position:fixed;bottom:20px;right:50px;font-size:3em;color:rgba(178,34,34,.6);padding:10px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.top:hover{color:#b22222}.brand-logo{font-size:Raleway,sans-serif;font-size:2em;font-weight:200;margin-top:0}@media only screen and (max-width:768px){.header{padding:5px}.masterbuilders-list li{display:block;border-radius:0}button{width:95%}nav .brand-logo{margin-top:13.5px;font-size:1.8em}nav .nav-wrapper li>a{font-weight:500;font-size:1em}}.build{display:none}.morebuilds{width:auto}

11
masterbuilders/assets/js/builders.js
View file

@ -21,3 +21,14 @@ $(document).ready(function() {
});
$(function(){
$(".build").slice(0, 6).show(); // select the first ten
$("#load").click(function(e){ // click event for load more
e.preventDefault();
$("div:hidden").slice(0, 6).show(); // select next 10 hidden divs and show them
if($("div:hidden").length == 0){ // check if any hidden divs still exist
$("#load").hide();
}
});
});

61
masterbuilders/index.html
View file

@ -78,7 +78,7 @@
<hr>
<br>
<div class="row">
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build1.jpg" target="_blank"><img class="responsive-img" src="assets/images/build1.jpg"></a>
@ -91,7 +91,7 @@
<a href="http://www.planetminecraft.com/project/tropical-island---timelapse/" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build2.jpg" target="_blank"><img class="responsive-img" src="assets/images/build2.jpg"></a>
@ -104,7 +104,7 @@
<a href="http://www.planetminecraft.com/project/the-valley-of-oysaria/" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build3.jpg" target="_blank"><img class="responsive-img" src="assets/images/build3.jpg"></a>
@ -117,7 +117,7 @@
<a href="http://www.planetminecraft.com/project/tropical-island---timelapse/" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build4.jpg" target="_blank"><img class="responsive-img" src="assets/images/build4.jpg"></a>
@ -132,7 +132,7 @@
</div>
</div>
<div class="row">
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<span class="new badge red" data-badge-caption="SPECIAL"></span>
@ -147,7 +147,7 @@
<a href="http://www.planetminecraft.com/project/the-fallen-colossi-games-survival-games-entry-2178608/" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<span class="new badge red" data-badge-caption="SPECIAL"></span>
@ -162,7 +162,7 @@
<a href="http://www.planetminecraft.com/project/the-fallen-colossi-games-survival-games-entry-2178608/" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build7.png" target="_blank"><img class="responsive-img" src="assets/images/build7.png"></a>
@ -171,11 +171,11 @@
<p>Made by Dusty01</p>
</div>
</div>
<div class="card-action">
<div class="card-action build">
<a href="http://totalfreedom.boards.net/user/16464" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build8.png" target="_blank"><img class="responsive-img" src="assets/images/build8.png"></a>
@ -188,7 +188,7 @@
<a href="http://totalfreedom.boards.net/user/16464" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build9.png" target="_blank"><img class="responsive-img" src="assets/images/build9.png"></a>
@ -201,7 +201,7 @@
<a href="http://totalfreedom.boards.net/user/16464" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build10.png" target="_blank"><img class="responsive-img" src="assets/images/build10.png"></a>
@ -216,7 +216,7 @@
</div>
</div>
<div class="row">
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build11.png" target="_blank" target="_blank"><img class="responsive-img" src="assets/images/build11.png"></a>
@ -229,7 +229,7 @@
<a href="http://totalfreedom.boards.net/user/16480" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build12.png" target="_blank"><img class="responsive-img" src="assets/images/build12.png"></a>
@ -242,7 +242,7 @@
<a href="http://totalfreedom.boards.net/user/16480" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build13.png" target="_blank"><img class="responsive-img" src="assets/images/build13.png"></a>
@ -255,7 +255,7 @@
<a href="http://totalfreedom.boards.net/user/16480" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build14.png" target="_blank"><img class="responsive-img" src="assets/images/build14.png"></a>
@ -270,7 +270,7 @@
</div>
</div>
<div class="row">
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build15.png" target="_blank"><img class="responsive-img" src="assets/images/build15.png"></a>
@ -283,7 +283,7 @@
<a href="http://totalfreedom.boards.net/user/5473" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build16.png" target="_blank"><img class="responsive-img" src="assets/images/build16.png"></a>
@ -296,20 +296,20 @@
<a href="http://totalfreedom.boards.net/user/5476" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build21.png" target="_blank"><img class="responsive-img" src="assets/images/build21.png"></a>
</div>
<div class="card-content">
<p>Made by gnusBlocks</p>
<p>Made by DisignusBlocks</p>
</div>
</div>
<div class="card-action">
<a href="http://totalfreedom.boards.net/user/19057" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build22.png" target="_blank"><img class="responsive-img" src="assets/images/build22.png"></a>
@ -322,7 +322,7 @@
<a href="http://totalfreedom.boards.net/user/19057" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build23.png" target="_blank"><img class="responsive-img" src="assets/images/build23.png"></a>
@ -335,7 +335,7 @@
<a href="http://totalfreedom.boards.net/user/19057" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build24.png" target="_blank"><img class="responsive-img" src="assets/images/build24.png"></a>
@ -348,7 +348,7 @@
<a href="http://totalfreedom.boards.net/user/19057" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build25.png" target="_blank"><img class="responsive-img" src="assets/images/build25.png"></a>
@ -361,7 +361,7 @@
<a href="http://totalfreedom.boards.net/user/18920" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build26.png" target="_blank"><img class="responsive-img" src="assets/images/build26.png"></a>
@ -374,7 +374,7 @@
<a href="http://totalfreedom.boards.net/user/18920" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build27.png" target="_blank"><img class="responsive-img" src="assets/images/build27.png"></a>
@ -387,7 +387,7 @@
<a href="http://totalfreedom.boards.net/user/18956" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build28.png" target="_blank"><img class="responsive-img" src="assets/images/build28.png"></a>
@ -400,7 +400,7 @@
<a href="http://totalfreedom.boards.net/user/5473" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build29.png" target="_blank"><img class="responsive-img" src="assets/images/build29.png"></a>
@ -413,7 +413,7 @@
<a href="http://totalfreedom.boards.net/user/5473" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="col s12 m12 l6">
<div class="col s12 m12 l6 build">
<div class="card">
<div class="card-image waves-effect waves-block">
<a href="assets/images/build30.png" target="_blank"><img class="responsive-img" src="assets/images/build30.png"></a>
@ -426,6 +426,9 @@
<a href="http://totalfreedom.boards.net/user/23844" target="_blank"><button class="waves-effect showmore" type="button">Show more</button></a>
</div>
</div>
<div class="center">
<button class="waves-effect" type="button" id="load">Load More Builds</button>
</div>
</div>
</div>
<!-- END OF BUILDS -->
@ -437,7 +440,7 @@
<div class="footer-copyright">
<div class="container">
<hr> TotalFreedom &copy; 2010 - <span id="curYear"></span>
<a class="grey-text text-lighten-4 right" href="https://aggelosqq.com" target="_blank"><img src="https://aggelosqq.com/images/watermarks/agg-white.svg" width="120" style="margin-top: -25px;" /></a>
<a class="grey-text text-lighten-4 right" href="https://aggelosqq.com" target="_blank">Designed by aggelosQQ</a>
</div>
</div>
</div>