serg2-mirrors/GDBrowser
1
0
Fork 0
Code Issues 8 Pull requests 10 Projects Releases Packages Wiki Activity Actions

Added compact mode to comments + renamed CSS

Browse source 
- Renamed level.css to browser.css
- Compact comment mode makes comments smaller and fetches 20 comments instead of 10
This commit is contained in:
GDColon 2019-10-23 18:40:31 -04:00
parent 06d18fb45d
commit f815ce338e
13 changed files with 99 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/compact-off.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
assets/compact-on.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.4 KiB

41
assets/css/level.css → assets/css/browser.css
View file

@ -529,6 +529,10 @@ input::-webkit-inner-spin-button {
border-bottom: 0.18vh rgba(0, 0, 0, 0.4) solid;
}
.compactBG {
height: 14vh;
}
.commentBG:nth-child(odd) {
background-color: rgb(185, 108, 57);
}
@ -537,7 +541,7 @@ input::-webkit-inner-spin-button {
margin: 1.5vh auto 0 auto;
width: 96%;
height: 18.5vh;
background-color: #934E27;
background-color: rgba(147, 79, 39, 0.8);
border-radius: 1.5vh;
text-align: left;
padding-top: 1.5vh;
@ -546,6 +550,13 @@ input::-webkit-inner-spin-button {
user-select: none;
}
.compact {
background-color: transparent;
padding-left: 0vh;
margin-top: 0.5vh;
transform: scale(0.8) translate(-13%, -12.5%)
}
.comment h2, .smallGold {
width: fit-content;
vertical-align: top;
@ -574,6 +585,10 @@ input::-webkit-inner-spin-button {
color: rgba(0, 0, 0, 0.5)
}
.compactDate {
transform: translate(-3vh, -11.5vh);
}
.commentPercent {
vertical-align: top;
margin: 0 0 0 1vh;
@ -816,16 +831,16 @@ input::-webkit-inner-spin-button {
}
}
@keyframes bounceButton {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
75% {
transform: scale(1.15);
}
100% {
transform: scale(1.2);
}
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
75% {
transform: scale(1.15);
}
100% {
transform: scale(1.2);
}
}

2
html/analyze.html
View file

@ -5,7 +5,7 @@
<meta id="meta-title" property="og:title" content="Level Analysis">
<meta id="meta-desc" property="og:description" content="Analyze a Geometry Dash level and view it's objects, portals, color channels, code, and more!">
<meta id="meta-image" name="og:image" itemprop="image" content="https://gdbrowser.com/assets/cp.png">
<link href="../css/level.css" type="text/css" rel="stylesheet">
<link href="../css/browser.css" type="text/css" rel="stylesheet">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135255146-3"></script><script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-135255146-3');</script>
<link rel="icon" href="../assets/cp.png">
</head>

73
html/comments.html
View file

@ -1,7 +1,7 @@
<head>
<title>Comments</title>
<meta charset="utf-8">
<link href="../css/level.css" type="text/css" rel="stylesheet">
<link href="../css/browser.css" type="text/css" rel="stylesheet">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135255146-3"></script><script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-135255146-3');</script>
<link rel="icon" href="../assets/like.png">
<meta id="meta-title" property="og:title" content="Level Comments">
@ -29,14 +29,18 @@
<img class="gdButton" id="refresh" src="../assets/refresh.png" height="90%">
</div>
<div class="supercenter" style="left: 3%; top: 20%; height: 10%">
<div class="supercenter" style="left: 3%; top: 15%; height: 10%">
<img class="gdButton" id="topSort" src="../assets/sort-likes.png" height="90%">
</div>
<div class="supercenter" style="left: 3%; top: 30.5%; height: 10%">
<div class="supercenter" style="left: 3%; top: 25.5%; height: 10%">
<img class="gdButton" id="timeSort" src="../assets/sort-time-on.png" height="90%">
</div>
<div class="supercenter" style="left: 3%; top: 36%; height: 10%">
<img class="gdButton" id="compactMode" src="../assets/compact-off.png" height="90%">
</div>
<div class="supercenter" id="pageDown" style="left: 3%; top: 50%; height: 10%; display: none;">
<img class="gdButton" src="../assets/arrow-left.png" height="95%">
</div>
@ -71,6 +75,8 @@
let lvlID = window.location.pathname.split('/')[2]
let history = false;
let compact = false;
let target = `../api/level/${lvlID}`
if (lvlID > 99999999 || lvlID < -99999999) window.location.href = window.location.href.replace("comments", "search")
@ -103,17 +109,19 @@ fetch(target).then(res => res.json()).then(lvl => {
}
}
function appendComments() {
function appendComments(dontClear, bump) {
let p = compact ? ((page + 1) * 2) - 2 + (bump||0) : page
if (loadingComments) return;
else loadingComments = true;
$('#commentBox').html(`<div class="supercenter" id="loading" style="height: 12%;"><img class="spin noSelect" src="../assets/loading.png" height="105%"></div>`)
if (!dontClear) $('#commentBox').html(`<div class="supercenter" id="loading" style="height: 12%;"><img class="spin noSelect" src="../assets/loading.png" height="105%"></div>`)
if (page == 0) $('#pageDown').hide()
else $('#pageDown').show()
fetch(`../api${!history ? window.location.pathname : "/comments/" + lvl.playerID}?page=${page}${history ? "&type=commentHistory" : ""}${mode == "top" ? "&top" : ""}`).then(res => res.json()).then(res => {
fetch(`../api${!history ? window.location.pathname : "/comments/" + lvl.playerID}?page=${p}${history ? "&type=commentHistory" : ""}${mode == "top" ? "&top" : ""}`).then(res => res.json()).then(res => {
if (res.length < 9 || (history && lvl.commentHistory == "off")) $('#pageUp').hide()
else $('#pageUp').show()
@ -123,6 +131,10 @@ fetch(`../api${!history ? window.location.pathname : "/comments/" + lvl.playerID
}
res.forEach(x => {
if (!compact) {
////// NORMAL MODE //////
$('#commentBox').append(`
<div class="commentBG">
<div class="comment">
@ -141,7 +153,31 @@ fetch(`../api${!history ? window.location.pathname : "/comments/" + lvl.playerID
<img id="likeImg" class="inline" ${x.likes < 0 ? "style='transform: translateY(25%)'" : ""} src="../assets/${x.likes < 0 ? "dis" : ""}like.png" height=20% style="margin-right: 0.4%">
<h3 class="inline">${x.likes}</h3>
</div>
</div>`)
</div>`) }
else {
////// COMPACT MODE //////
$('#commentBox').append(`
<div class="commentBG compactBG">
<div class="comment compact">
<img class="inline" src="../icon/${!history ? x.username : lvl.username}?form=${x.form}" height=21% style="margin-right: 0.8%">
<a ${x.username == "Unknown" || x.accountID == "0" ? "" : "href"}="../profile/${!history ? x.username : lvl.username}"><h2 class="inline ${x.username == "Unknown" || x.accountID == "0" ? "green" : "gdButton"}">${!history ? x.username : lvl.username}</h2></a>
${x.modColor || lvl.moderator == "2" ? `<img class="inline" src="../assets/mod-elder.png" height=18% style="margin-left: 0.6%;">` : ""}
<p class="commentPercent inline">${x.percent ? x.percent + "%" : ""}</p>
<div class="commentAlign">
<p class="commentText" style="color: ${!history && x.playerID == lvl.authorID ? "rgb(255, 255, 75)" : x.playerID == "16" ? "rgb(50, 255, 255)" : x.modColor || lvl.moderator == "2" ? `rgb(75, 255, 75)` : "white"}">${x.content}</p>
</div>
</div>
<p class="commentDate compactDate">${x.date}</p>
<div class="commentLikes">
${history ? `<h3 style="margin-right: 0.5vh; pointer-events: all;" class="gold inline"><a href="../${x.levelID}">(${x.levelID})</a></h3>` : ""}
<img id="likeImg" class="inline" ${x.likes < 0 ? "style='transform: translateY(15%)'" : ""} src="../assets/${x.likes < 0 ? "dis" : ""}like.png" height=27% style="margin-right: 0.4%">
<h3 class="inline">${x.likes}</h3>
</div>
</div>`) }
})
$('.commentText').each(function() {
@ -149,10 +185,18 @@ fetch(`../api${!history ? window.location.pathname : "/comments/" + lvl.playerID
let overflow = ($(this).text().length - 100) * 0.01
$(this).css('font-size', (3.5 - (overflow)) + 'vh')
}
});
$('#loading').hide()
})
loadingComments = false;
});
if (compact && p % 2 == 0) {
return appendComments(true, 1)
}
$('#loading').hide()
})
return loadingComments = false;
}
let mode = "time"
@ -181,6 +225,13 @@ $('#timeSort').click(function() {
appendComments()
})
$('#compactMode').click(function() {
compact = !compact
page = 0;
$('#compactMode').attr('src', `../assets/compact-${compact ? "on" : "off"}.png`)
appendComments()
})
$('#refresh').click(function() {
page = 0;
appendComments()

2
html/filters.html
View file

@ -1,7 +1,7 @@
<head>
<title>Level Search</title>
<meta charset="utf-8">
<link href="../css/level.css" type="text/css" rel="stylesheet">
<link href="../css/browser.css" type="text/css" rel="stylesheet">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135255146-3"></script><script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-135255146-3');</script>
<link rel="icon" href="../assets/coin.png">
<meta id="meta-title" property="og:title" content="Level Search">

2
html/gauntlets.html
View file

@ -1,7 +1,7 @@
<head>
<title>Gauntlets</title>
<meta charset="utf-8">
<link href="../css/level.css" type="text/css" rel="stylesheet">
<link href="../css/browser.css" type="text/css" rel="stylesheet">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135255146-3"></script><script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-135255146-3');</script>
<link rel="icon" href="../assets/gauntlet.png">
<meta id="meta-title" property="og:title" content="Gauntlets">

2
html/home.html
View file

@ -1,7 +1,7 @@
<head>
<title>Geometry Dash Browser!</title>
<meta charset="utf-8">
<link href="../css/level.css" type="text/css" rel="stylesheet">
<link href="../css/browser.css" type="text/css" rel="stylesheet">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135255146-3"></script><script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-135255146-3');</script>
<link rel="icon" href="../assets/coin.png">
<meta id="meta-title" property="og:title" content="Geometry Dash Browser!">

2
html/leaderboard.html
View file

@ -1,7 +1,7 @@
<head>
<title>Leaderboard</title>
<meta charset="utf-8">
<link href="../css/level.css" type="text/css" rel="stylesheet">
<link href="../css/browser.css" type="text/css" rel="stylesheet">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135255146-3"></script><script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-135255146-3');</script>
<link rel="icon" href="../assets/trophy.png">
<meta id="meta-title" property="og:title" content="Leaderboards">

2
html/level.html
View file

@ -1,7 +1,7 @@
<head>
<title>[[NAME]] ([[ID]])</title>
<meta charset="utf-8">
<link href="../css/level.css" type="text/css" rel="stylesheet">
<link href="../css/browser.css" type="text/css" rel="stylesheet">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135255146-3"></script><script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-135255146-3');</script>
<link rel="icon" href="../difficulty/[[DIFFICULTYFACE]].png">
<meta id="meta-title" property="og:title" content="[[NAME]] by [[AUTHOR]]">

2
html/mappacks.html
View file

@ -1,7 +1,7 @@
<head>
<title>Map Packs</title>
<meta charset="utf-8">
<link href="../css/level.css" type="text/css" rel="stylesheet">
<link href="../css/browser.css" type="text/css" rel="stylesheet">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135255146-3"></script><script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-135255146-3');</script>
<link rel="icon" href="../assets/folder.png">
<meta id="meta-title" property="og:title" content="Map Packs">

2
html/profile.html
View file

@ -1,7 +1,7 @@
<head>
<title>[[USERNAME]]'s Profile</title>
<meta charset="utf-8">
<link href="../css/level.css" type="text/css" rel="stylesheet">
<link href="../css/browser.css" type="text/css" rel="stylesheet">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135255146-3"></script><script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-135255146-3');</script>
<link rel="icon" href="../icon/[[USERNAME]]">
<meta id="meta-title" property="og:title" content="[[USERNAME]]'s profile">

2
html/search.html
View file

@ -1,7 +1,7 @@
<head>
<title>Level Search</title>
<meta charset="utf-8">
<link href="../css/level.css" type="text/css" rel="stylesheet">
<link href="../css/browser.css" type="text/css" rel="stylesheet">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135255146-3"></script><script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-135255146-3');</script>
<link rel="icon" href="../assets/coin.png">
<meta id="meta-title" property="og:title" content="Level Search">