s444427/Padel-Tournaments-System
1
0
Fork 0
forked from s444413/Padel-Tournaments-System
Code Issues Pull Requests Projects Releases Wiki Activity

ADD core drabinki z bazą wizualizacji

Browse Source 
ADD collapsible dla widoku całej drabinki
ADD podział style.css na collapsible.css dla zwijania drabinki, li.css dla tworzenia drabinki i round.css do przejść między poziomami drabinki
This commit is contained in:
Lewy 2022-05-30 23:26:22 +02:00
parent 81b1612630
commit 63fd65e127
12 changed files with 305 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/drabinka/css/collapsible.css Normal file
View File

@ -0,0 +1,42 @@
/*COLLAPSIBLE*/
/*Wersja zwinięta*/
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
/*szerokość zwiniętego boxa*/
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
/*Wersja rozwinięta*/
.content {
padding: 0 18px;
max-height: 0;
/*szerokość drabinki*/
width: 75%;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}

36
frontend/drabinka/css/li.css Normal file
View File

@ -0,0 +1,36 @@
li.game {
padding-left: 20px;
}
li.game.winner {
font-weight: bold;
}
/*Tekst wewnątrz boxa*/
li.game span {
float: right;
margin-right: 10px;
}
/*Górna linia drabinki*/
li.game-top {
border-bottom: 1px solid #aaa;
}
/*Róznica wysokości między rundami*/
li.game-spacer {
border-right: 1px solid #aaa;
min-height: 40px;
}
/*Dolna linia drabinki*/
li.game-bottom {
border-top: 1px solid #aaa;
}
/*Box drużyny*/
li.teambox {
border-radius: 25px;
background-color: #FFFFFF;
padding: 10px;
}

22
frontend/drabinka/css/round.css Normal file
View File

@ -0,0 +1,22 @@
.round {
display: flex;
flex-direction: column;
justify-content: center;
width: 200px;
list-style: none;
padding: 0;
}
.round .spacer {
flex-grow: 1;
}
.round .spacer:first-child,
.round .spacer:last-child {
flex-grow: .5;
}
.round .game-spacer {
flex-grow: 1;
}

95
frontend/drabinka/style.css → frontend/drabinka/css/style.css
View File

@ -1,7 +1,19 @@
@import "li.css";
@import "collapsible.css";
@import "round.css";
/*
* Flex Layout Specifics
*/
body {
background-color: #C0C0C0;
font-family: sans-serif;
font-size: small;
padding: 10px;
line-height: 1.4em;
}
img {
width: 150px;
@ -43,7 +55,7 @@ header {
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
background-color: #0f64f2;
background-color: #065FD4;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
@ -52,8 +64,6 @@ header {
}
header>p {
text-align: center;
line-height: 0;
@ -78,28 +88,6 @@ header>p {
align-items: center;
}
.round {
display: flex;
flex-direction: column;
justify-content: center;
width: 200px;
list-style: none;
padding: 0;
}
.round .spacer {
flex-grow: 1;
}
.round .spacer:first-child,
.round .spacer:last-child {
flex-grow: .5;
}
.round .game-spacer {
flex-grow: 1;
}
/*
* Flex Layout Specifics
*/
@ -108,60 +96,3 @@ main {
flex-direction: row;
}
.round {
display: flex;
flex-direction: column;
justify-content: center;
width: 200px;
list-style: none;
padding: 0;
}
.round .spacer {
flex-grow: 1;
}
.round .spacer:first-child,
.round .spacer:last-child {
flex-grow: .5;
}
.round .game-spacer {
flex-grow: 1;
}
/*
* General Styles
*/
body {
font-family: sans-serif;
font-size: small;
padding: 10px;
line-height: 1.4em;
}
li.game {
padding-left: 20px;
}
li.game.winner {
font-weight: bold;
}
li.game span {
float: right;
margin-right: 5px;
}
li.game-top {
border-bottom: 1px solid #aaa;
}
li.game-spacer {
border-right: 1px solid #aaa;
min-height: 40px;
}
li.game-bottom {
border-top: 1px solid #aaa;
}

146
frontend/drabinka/index.html
View File

@ -5,14 +5,17 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/less@4"></script>
<title>Padel Tournaments System</title>
<link rel="stylesheet" href="css/style.css">
<!-- TODO Zakomentowałem, bo może useless-->
<!-- <script src="https://cdn.jsdelivr.net/npm/less@4"></script>-->
</head>
<body>
<header>
<img src="../logo_padel.jpeg">
<a href="../index.html"><img src="../logo_padel.jpeg" alt=""></a>
<a href="#">Wiadomości</a>
<a href="#">Kalendarz turniejów</a>
<a href="#">Ranking</a>
@ -23,111 +26,184 @@
</header>
<div class="container">
<h1>Padel tournament</h1>
<button type="button" class="collapsible">Drabinka Główna</button>
<div class="content">
<main id="tournament">
<!-- ROUND 1-->
<ul class="round round-1">
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Jan <span>79</span></li>
<li class="game game-top teambox winner ">
Jan <span>21</span><br> Paweł <span>37</span>
</li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Piotrek <span>48</span></li>
<li class="game game-bottom teambox">
Piotrek <span>48</span><br> Artur <span>11</span>
</li>
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Czarek <span>84</span></li>
<li class="game game-top teambox winner">
Czarek <span>84</span>
</li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Kasia <span>72</span></li>
<li class="game game-bottom teambox">
Kasia <span>72</span>
</li>
<li class="spacer">&nbsp;</li>
<li class="game game-top ">Jerzy <span>55</span></li>
<li class="game game-top teambox">
Jerzy <span>55</span>
</li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom winner">Andrzej <span>68</span></li>
<li class="game game-bottom teambox winner">
Andrzej <span>68</span>
</li>
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Mateusz <span>64</span></li>
<li class="game game-top teambox winner">
Mateusz <span>64</span>
</li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Lukasz <span>44</span></li>
<li class="game game-bottom teambox">
Lukasz <span>44</span>
</li>
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Arek <span>54</span></li>
<li class="game game-top teambox winner">
Arek <span>54</span>
</li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Marek <span>52</span></li>
<li class="game game-bottom teambox">
Marek <span>52</span>
</li>
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Alfred <span>65</span></li>
<li class="game game-top teambox winner">
Alfred <span>65</span>
</li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Amir <span>54</span></li>
<li class="game game-bottom teambox">
Amir <span>54</span>
</li>
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Ambrozy <span>67</span></li>
<li class="game game-top teambox winner">
Ambrozy <span>67</span>
</li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Fabian <span>63</span></li>
<li class="game game-bottom teambox">
Fabian <span>63</span>
</li>
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Fryderyk <span>73</span></li>
<li class="game game-top teambox winner">
Fryderyk <span>73</span>
</li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Gracjan <span>61</span></li>
<li class="game game-bottom teambox">
Gracjan <span>61</span>
</li>
<li class="spacer">&nbsp;</li>
</ul>
<!-- ROUND 2-->
<ul class="round round-2">
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Jan <span>82</span></li>
<li class="game game-top teambox winner">
Jan <span>82</span>
</li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Czarek <span>56</span></li>
<li class="game game-bottom teambox">
Czarek <span>56</span>
</li>
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Andrzej <span>74</span></li>
<li class="game game-top teambox winner">
Andrzej <span>74</span>
</li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Mateusz <span>57</span></li>
<li class="game game-bottom teambox">
Mateusz <span>57</span>
</li>
<li class="spacer">&nbsp;</li>
<li class="game game-top ">Arek <span>48</span></li>
<li class="game game-top teambox">
Arek <span>48</span>
</li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom winner">Alfred <span>70</span></li>
<li class="game game-bottom teambox winner">
Alfred <span>70</span>
</li>
<li class="spacer">&nbsp;</li>
<li class="game game-top ">Ambrozy <span>50</span></li>
<li class="game game-top teambox">
Ambrozy <span>50</span>
</li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom winner">Fryderyk <span>66</span></li>
<li class="game game-bottom teambox winner">
Fryderyk <span>66</span>
</li>
<li class="spacer">&nbsp;</li>
</ul>
<!-- ROUND 3-->
<ul class="round round-3">
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Jan <span>77</span></li>
<li class="game game-top teambox winner">
Jan <span>77</span>
</li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Andrzej <span>69</span></li>
<li class="game game-bottom teambox">
Andrzej <span>69</span>
</li>
<li class="spacer">&nbsp;</li>
<li class="game game-top ">Alfred <span>61</span></li>
<li class="game game-top teambox">
Alfred <span>61</span>
</li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom winner">Fryderyk <span>71</span></li>
<li class="game game-bottom teambox winner">
Fryderyk <span>71</span>
</li>
<li class="spacer">&nbsp;</li>
</ul>
<!-- ROUND 4-->
<ul class="round round-4">
<li class="spacer">&nbsp;</li>
<li class="game game-top winner">Jan <span>85</span></li>
<li class="game game-top teambox winner">
Jan <span>85</span>
</li>
<li class="game game-spacer">&nbsp;</li>
<li class="game game-bottom ">Frederyk <span>63</span></li>
<li class="game game-bottom teambox">
Frederyk <span>63</span>
</li>
<li class="spacer">&nbsp;</li>
</ul>
</div>
</main>
</div>
</div>
<script type="text/javascript" src="./myscript.js"></script>
</body>
</html>

14
frontend/drabinka/myscript.js Normal file
View File

@ -0,0 +1,14 @@
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}

8
frontend/index.html
View File

@ -5,18 +5,18 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strona główna</title>
<title>Padel Tournaments System</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<img src="logo_padel.jpeg">
<a href="#">Wiadomości</a>
<a href="./index.html"><img src="logo_padel.jpeg"></a>
<!-- <a href="#">Wiadomości</a>-->
<a href="#">Kalendarz turniejów</a>
<a href="#">Ranking</a>
<a href="#">Wyniki</a>
<a href="#">Kontakt</a>
<!-- <a href="#">Kontakt</a>-->
<form action="logowanie/index.html">
<input class="loginn" type="submit" value="Logowanie" />
</form>

2
frontend/logowanie/index.html
View File

@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paddle tournament system</title>
<title>Padel Tournaments System</title>
<link href="style.css" rel="stylesheet">
</head>

10
frontend/panel_organizatora/index.html
View File

@ -1,16 +1,14 @@
<html>
<head>
<title>Todo App</title>
<title>Padel Tournaments System</title>
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
</head>
<!-- komentarz -->
<body>
<header>
<img src="../logo_padel.jpeg">
<a href="../index.html"><img src="../logo_padel.jpeg"></a>
<a href="#">Wiadomości</a>
<a href="#">Kalendarz turniejów</a>
<a href="#">Ranking</a>
@ -42,11 +40,11 @@
}
button.edit {
padding: 10;
padding: 10px;
}
button.delete {
padding: 10;
padding: 10px;
}
button {

8
frontend/rejestracja/index.html
View File

@ -5,10 +5,9 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paddle tournament system</title>
<title>Padel Tournaments System</title>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
</head>
<body>
@ -43,15 +42,14 @@
<input placeholder="Potwierdź hasło" type="password" id="password2" name="password">
<i class="bi bi-eye-slash" id="togglePassword2"></i>
<center>
<form action="#">
<input class="myButton" type="submit" value="Zarejestruj" id="regsubmit" />
</form>
</center>
<br>
<a href="#">Zapomniałeś hasła?</a>
<br>
<span> Masz już konto? <a href="../logowanie/index.html">Zaloguj się</a></span>
</div>
</div>

16
frontend/rejestracja/myscript.js
View File

@ -17,18 +17,18 @@ form.addEventListener('submit', function (e) {
e.preventDefault();
});
<<<<<<< HEAD
// <<<<<<< HEAD
// var token = "";
// // document.getElementById("loginButton").addEventListener("click", function () {
// // document.getElementById("login").style.display = "block";
// // });
=======
//REST API
var token = "";
document.getElementById("loginButton").addEventListener("click", function () {
document.getElementById("login").style.display = "block";
});
>>>>>>> b44b5f1fc14af7c8da4ca602072af953974b49af
// // =======
// //REST API
// var token = "";
// document.getElementById("loginButton").addEventListener("click", function () {
// document.getElementById("login").style.display = "block";
// });
// >>>>>>> b44b5f1fc14af7c8da4ca602072af953974b49af
// // document.getElementById("regButton").addEventListener("click", function () {
// // document.getElementById("reg").style.display = "block";

4
frontend/zalogowany_organizator/index.html
View File

@ -5,13 +5,13 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strona główna</title>
<title>Padel Tournaments System</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<img src="../logo_padel.jpeg">
<a href="../index.html"><img src="../logo_padel.jpeg"></a>
<a href="#">Wiadomości</a>
<a href="#">Kalendarz turniejów</a>
<a href="#">Ranking</a>