From 8e52eec70ca09706d079e4b1c0ac9e1588ad81c4 Mon Sep 17 00:00:00 2001 From: Yannik Schmidt Date: Sun, 27 Sep 2020 10:37:07 +0200 Subject: [PATCH] visual updates --- README.md | 1 + database.py | 2 +- server.py | 11 +++++++-- static/buttons.js | 26 +++++++++----------- static/site.css | 34 ++++++++++++++------------ templates/base.html | 40 ++++++++++++++----------------- templates/footer.html | 11 +++++---- templates/navbar.html | 25 +++++++++++++++++++ templates/navbar_leaderboard.html | 40 +++++++++++++++++++++++++++++++ templates/player.html | 11 +++++---- 10 files changed, 137 insertions(+), 64 deletions(-) create mode 100644 templates/navbar.html create mode 100644 templates/navbar_leaderboard.html diff --git a/README.md b/README.md index 001cef4..2e7c983 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,7 @@ The system was developed to be used with the [skillbird-framwork](https://github # Requirements - [MDB Jquery](https://mdbootstrap.com/docs/jquery/getting-started/download/) (unpack to ./static/bootstrap/) +- [Fontawesome](https://fontawesome.com/download) (move to static/boostrap/fontawesome.css) - ``python3 -m pip install -r req.txt`` diff --git a/database.py b/database.py index 09b48ce..3b866ab 100644 --- a/database.py +++ b/database.py @@ -99,7 +99,7 @@ class DatabaseConnection: return (None, None) playerInLeaderboard = player.PlayerInLeaderboard(playerRow) - player.rank = getPlayerRank(playerInLeaderboard) + playerInLeaderboard.rank = self.getPlayerRank(playerInLeaderboard) return playerInLeaderboard def getPlayerRank(self, player): diff --git a/server.py b/server.py index 7244921..2e2c936 100755 --- a/server.py +++ b/server.py @@ -85,8 +85,12 @@ def leaderboard(): db = DatabaseConnection(app.config["DB_PATH"]) if page: + pageInt = int(page) + if pageInt < 0: + pageInt = 0 start = SEGMENT * int(page) else: + pageInt = 0 start = 0 # handle find player request # @@ -94,7 +98,8 @@ def leaderboard(): searchName = "" if playerName: - playerInLeaderboard, rank = db.findPlayerByName(playerName) + playerInLeaderboard = db.findPlayerByName(playerName) + rank = playerInLeaderboard.rank if not playerInLeaderboard: cannotFindPlayer = flask.Markup("
No player of that name
") start = 0 @@ -136,7 +141,9 @@ def leaderboard(): start=start, \ endOfBoardIndicator=endOfBoardIndicator, \ findPlayer=cannotFindPlayer, \ - searchName=searchName) + searchName=searchName, + nextPageNumber=int(pageInt)+1, + prevPageNumber=int(pageInt)-1) return finalResponse @app.route('/static/') diff --git a/static/buttons.js b/static/buttons.js index 2fcd8bb..30f796a 100644 --- a/static/buttons.js +++ b/static/buttons.js @@ -4,7 +4,6 @@ var page = url.searchParams.get("page") var player = url.searchParams.get("string") var buttonBackward = document.getElementById("button-backward") var buttonForward = document.getElementById("button-forward") -var buttonFirst = document.getElementById("button-first") var isLastPage = document.getElementById("eof") /* clean URL from unessesary parameters */ @@ -14,10 +13,7 @@ url.searchParams.delete("string") /* disable buttons if nessesary */ if(!page || page == "0"){ buttonBackward.disabled = true - buttonFirst.disabled = true - buttonBackward.classList.add("disabled") - buttonFirst.classList.add("disabled") } if(isLastPage){ @@ -76,17 +72,17 @@ function firstPage(){ } /* input fields */ -var gotoRankInputField = document.getElementById("gotoRank"); -gotoRankInputField.addEventListener("keyup", function(event) { - if (event.key == "Enter") { - event.preventDefault(); - var rank = gotoRankInputField.value - var page = Math.trunc((rank - 1)/100) - url.searchParams.set("page", page) - url.searchParams.set("goto", rank) - window.location.href = url.href - } -}); +//var gotoRankInputField = document.getElementById("gotoRank"); +//gotoRankInputField.addEventListener("keyup", function(event) { +// if (event.key == "Enter") { +// event.preventDefault(); +// var rank = gotoRankInputField.value +// var page = Math.trunc((rank - 1)/100) +// url.searchParams.set("page", page) +// url.searchParams.set("goto", rank) +// window.location.href = url.href +// } +//}); var getPlayerInputField = document.getElementById("getPlayer"); getPlayerInputField.addEventListener("keyup", function(event) { diff --git a/static/site.css b/static/site.css index e9097e5..aad517a 100644 --- a/static/site.css +++ b/static/site.css @@ -1,6 +1,6 @@ /* general */ body{ - background: #323232; + background: #323232 !important; } /* ############### TOP NAVBAR ############# */ @@ -80,23 +80,30 @@ body{ display: none; } } -/* ############# PLAYER INFORMATION IN LINES ############# */ +/* ############# PLAYER INFORMATION IN LINES ############# */ .playerRank{ margin-left:1%; float: left; width: 10%; + color: black; } .playerName{ float: left; width: 25%; + color: black; +} + +.playerName:hover{ + opacity: 0.8; } .playerRating{ float: right; width: 15%; text-align: right; + color: black; } .playerGames{ @@ -104,23 +111,14 @@ body{ text-align: right; margin-right: 1%; width: 20%; + color: black; } .playerWinratio{ float: right; width: 20%; text-align: center; -} - -/* #################### LEADERBOARDS ##################### */ -.leaderboard-container{ - margin-top: 10px; - margin-bottom: 50px; - margin-left: auto; - margin-right: auto; - min-width: 250px; - width: 80%; - max-width: 800px; + color: black; } .colum-names{ @@ -133,15 +131,21 @@ body{ .line-even{ width: 100%; - background-color: #999999; /* 60% grey */ + color: black; + background-color: #999999 !important; /* 60% grey */ overflow: hidden; padding-top: 2px; padding-bottom: 2px; } +.bg-special{ + background-color: #eae9e9 !important; +} + .line-odd{ width: 100%; - background-color: lightgrey; + color: black; + background-color: lightgrey !important; overflow: hidden; padding-top: 2px; padding-bottom: 2px; diff --git a/templates/base.html b/templates/base.html index bec3fed..3462f0d 100644 --- a/templates/base.html +++ b/templates/base.html @@ -3,49 +3,45 @@ Leaderboard - + + + + + + + + + + + - -
+ {% include 'navbar_leaderboard.html' %} +
{{ columNames }}
{% for player in playerList %} {% set count = loop.index + start %} {% if count % 2 == 0 %}
+ {{ player.getLineHTML(count) }} +
{% else %}
+ {{ player.getLineHTML(count) }} +
{% endif %} {% endfor %} {{ endOfBoardIndicator }}
- + {% include 'footer.html' %} diff --git a/templates/footer.html b/templates/footer.html index abdc9f4..bfd24f2 100644 --- a/templates/footer.html +++ b/templates/footer.html @@ -1,6 +1,9 @@ -