sheppy/open-web-leaderboard
1
0
Fork 0
mirror of https://github.com/FAUSheppy/open-web-leaderboard.git synced 2025-12-06 07:01:36 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

massive improvements to mobile-like resolutions

Browse Source
This commit is contained in:
Insugeny_athq
2019-06-13 22:20:11 +02:00
parent 2bca3df7f8
commit 13faa93cca
2 changed files with 122 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
static/site.css
View File

@@ -55,15 +55,73 @@ body{
font-weight: bold;
}
@media(max-width: 800px){
.top-bar{
/* bar will be scrolled aways */
position: absolute;
min-width: 250px;
padding-bottom: 4vw;
padding-top: 2vw;
padding-left: 4vw;
}
.top-button{
font-size: 5vw;
margin-right: 2.5%;
}
.input-field{
margin-top: 2vw;
float: left;
font-size: 6vw;
margin-right: 10px;
}
.input-field-number{
display: none;
}
}
/* ############# PLAYER INFORMATION IN LINES ############# */
.playerRank{
margin-left:1%;
float: left;
width: 10%;
}
.playerName{
float: left;
width: 25%;
}
.playerRating{
float: right;
width: 15%;
text-align: right;
}
.playerGames{
float: right;
text-align: right;
margin-right: 1%;
width: 20%;
}
.playerWinratio{
float: right;
width: 20%;
text-align: center;
}
/* #################### LEADERBOARDS ##################### */
.leaderboard-container{
width: 80%;
max-width: 800px;
margin-top: 60px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
background-color: green;
min-width: 250px;
width: 80%;
max-width: 800px;
}
.colum-names{
@@ -95,35 +153,52 @@ body{
font-weight: bold;
}
/* ############# PLAYER INFORMATION IN LINES ############# */
.playerRank{
margin-left:1%;
float: left;
width: 10%;
@media(max-width: 800px){
.leaderboard-container{
font-size: 4.5vw;
width: 100%;
/* deal with absolute nav-header */
margin-top: 30vw;
}
.colum-names{
white-space: nowrap;
overflow: hidden;
}
.playerName{
float: left;
width: 25%;
overflow: hidden;
white-space: nowrap;
width: 30%;
/* write over games */
z-index: 2;
}
.playerName:hover{
overflow: visible;
white-space: normal;
}
.playerRating{
float: right;
width: 15%;
text-align: right;
text-align: left;
}
.playerRank{
width: unset;
margin-right: 20px;
}
.playerGames{
float: right;
width: 20%;
text-align: right;
margin-right: 1%;
width: 15%;
text-align: left;
}
.playerWinratio{
float: right;
width: 20%;
text-align: center;
/* 19% is just enought to cut the last letter */
width: 19%;
}
}
/* ######################## FOOTER ####################### */
@@ -151,3 +226,19 @@ body{
margin-right: 25%;
margin-left: 25%;
}
@media(max-width: 800px){
.footer{
height: unset;
}
.footerLink{
font-size: 4vw;
}
.mid{
margin-left: 2.5%;
margin-right: 2.5%;
}
}

4
templates/base.html
View File

@@ -4,6 +4,10 @@
<link rel="stylesheet" type="text/css" href="/static/site.css">
<link rel="shortcut icon" href="/static/defaultFavicon.ico">
<script src="static/buttons.js" defer></script>
<!-- needed for @media-css mofiers -->
<meta content="width=device-width, initial-scale=1" name="viewport" />
</head>
<body>
<div class=top-bar>