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

145
static/site.css
View File

@@ -55,15 +55,73 @@ body{
font-weight: bold; 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 ##################### */ /* #################### LEADERBOARDS ##################### */
.leaderboard-container{ .leaderboard-container{
width: 80%;
max-width: 800px;
margin-top: 60px; margin-top: 60px;
margin-bottom: 50px; margin-bottom: 50px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background-color: green; background-color: green;
min-width: 250px;
width: 80%;
max-width: 800px;
} }
.colum-names{ .colum-names{
@@ -95,35 +153,52 @@ body{
font-weight: bold; font-weight: bold;
} }
/* ############# PLAYER INFORMATION IN LINES ############# */ @media(max-width: 800px){
.playerRank{ .leaderboard-container{
margin-left:1%; font-size: 4.5vw;
float: left; width: 100%;
width: 10%;
} /* deal with absolute nav-header */
margin-top: 30vw;
.playerName{ }
float: left;
width: 25%; .colum-names{
} white-space: nowrap;
overflow: hidden;
}
.playerRating{ .playerName{
float: right; overflow: hidden;
width: 15%; white-space: nowrap;
text-align: right; width: 30%;
} /* write over games */
z-index: 2;
}
.playerGames{ .playerName:hover{
float: right; overflow: visible;
width: 20%; white-space: normal;
text-align: right; }
margin-right: 1%;
}
.playerWinratio{ .playerRating{
float: right; text-align: left;
width: 20%; }
text-align: center;
.playerRank{
width: unset;
margin-right: 20px;
}
.playerGames{
width: 15%;
text-align: left;
}
.playerWinratio{
/* 19% is just enought to cut the last letter */
width: 19%;
}
} }
/* ######################## FOOTER ####################### */ /* ######################## FOOTER ####################### */
@@ -151,3 +226,19 @@ body{
margin-right: 25%; margin-right: 25%;
margin-left: 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="stylesheet" type="text/css" href="/static/site.css">
<link rel="shortcut icon" href="/static/defaultFavicon.ico"> <link rel="shortcut icon" href="/static/defaultFavicon.ico">
<script src="static/buttons.js" defer></script> <script src="static/buttons.js" defer></script>
<!-- needed for @media-css mofiers -->
<meta content="width=device-width, initial-scale=1" name="viewport" />
</head> </head>
<body> <body>
<div class=top-bar> <div class=top-bar>