feat: panel zapisanego uczestnika

wyrównanie menu zakładek Informacje/zapisy/drabinka
This commit is contained in:
Lewy 2022-06-17 16:57:06 +02:00
parent 411a03501c
commit dac36acd8e
13 changed files with 159 additions and 48 deletions

View File

@ -1,6 +1,5 @@
/*##################*/ /*##################*/
ul { ul {
float: left;
width: 100%; width: 100%;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -19,15 +18,15 @@ li a {
color: black; color: black;
background-color: white; background-color: white;
padding: 10px 15px; padding: 10px 15px;
margin: 0px 1px 1px 0px; margin: 0 1px 1px 0;
border: 1px solid black; border: 1px solid black;
border-radius: 3px; border-radius: 3px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 0px 2px 3px gray; box-shadow: 0 2px 3px gray;
-moz-box-shadow: 0px 2px 3px gray; -moz-box-shadow: 0 2px 3px gray;
-webkit-box-shadow: 0px 2px 3px gray; -webkit-box-shadow: 0 2px 3px gray;
} }
li a:hover { li a:hover {

View File

@ -3,9 +3,7 @@
/*Wersja zwinięta*/ /*Wersja zwinięta*/
.collapsible { .collapsible {
/*Box alignment*/ /*Box alignment*/
margin-left: 5%; width: 100%;
margin-right: 5%;
width: 80%;
/*Content alignment*/ /*Content alignment*/
padding: 1%; padding: 1%;
@ -44,7 +42,7 @@
padding: 0 18px; padding: 0 18px;
max-height: 0; max-height: 0;
/*szerokość drabinki*/ /*szerokość drabinki*/
width: 75%; width: 95%;
overflow: hidden; overflow: hidden;
transition: max-height 0.2s ease-out; transition: max-height 0.2s ease-out;
background-color: #f1f1f1; background-color: #f1f1f1;

View File

@ -26,10 +26,11 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
flex-flow: row wrap;
height: 100%; height: 100%;
width: 100%; width: 80%;
justify-content: flex-end; margin: auto;
} }
main { main {
@ -39,11 +40,9 @@ main {
.bookmarks { .bookmarks {
/*Alignment*/ /*Alignment*/
margin: auto; margin-left: 0;
width: 50%; width: 40%;
height: 5vh; height: 5vh;
float: left;
/*Others*/
justify-content: center;
align-items: center;
} }

View File

@ -42,7 +42,8 @@
</div> </div>
<div class="signInBox"> <div class="signInBox">
<button class="signIn">ZAPISZ SIĘ!</button> <a href="zapisy%20na%20turniej/index.html"> <button class="signIn" >ZAPISZ SIĘ!</button>
</a>
</div> </div>
</div> </div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 484 KiB

View File

@ -3,7 +3,7 @@
/*Layer 0*/ /*Layer 0*/
html { html {
background-image: url(src/tlo_logowanie.png); background-image: url(src/tlo.jpg);
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;

View File

@ -19,15 +19,15 @@ li a {
color: black; color: black;
background-color: white; background-color: white;
padding: 10px 15px; padding: 10px 15px;
margin: 0px 1px 1px 0px; margin: 0 1px 1px 0;
border: 1px solid black; border: 1px solid black;
border-radius: 3px; border-radius: 3px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 0px 2px 3px gray; box-shadow: 0 2px 3px gray;
-moz-box-shadow: 0px 2px 3px gray; -moz-box-shadow: 0 2px 3px gray;
-webkit-box-shadow: 0px 2px 3px gray; -webkit-box-shadow: 0 2px 3px gray;
} }
li a:hover { li a:hover {

View File

@ -3,9 +3,7 @@
/*Wersja zwinięta*/ /*Wersja zwinięta*/
.collapsible { .collapsible {
/*Box alignment*/ /*Box alignment*/
margin-left: 5%; width: 100%;
margin-right: 5%;
width: 80%;
/*Content alignment*/ /*Content alignment*/
padding: 1%; padding: 1%;
@ -41,11 +39,17 @@
/*Wersja rozwinięta*/ /*Wersja rozwinięta*/
.collapsibleContent { .collapsibleContent {
padding: 0 18px;
max-height: 0;
/*szerokość drabinki*/ /*szerokość drabinki*/
width: 75%; width: 95%;
margin:auto;
/*Visual*/
background-color: #f1f1f1;
/*Efekt rozwinięcia*/
max-height: 0;
overflow: hidden; overflow: hidden;
transition: max-height 0.2s ease-out; transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
} }

View File

@ -8,7 +8,7 @@
<title>Padel Tournaments System</title> <title>Padel Tournaments System</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css"/>
</head> </head>
<body> <body>
@ -41,17 +41,81 @@
<!-- OPEN--> <!-- OPEN-->
<button type="button" class="collapsible">Zapisani na turniej - OPEN</button> <button type="button" class="collapsible">Zapisani na turniej - OPEN</button>
<div class="collapsibleContent"> <div class="collapsibleContent">
<div class="participant"> <div class="participant">
To ja
<div class="partID">
1.
</div>
<div class="partNames">
Adrian Trela <br>
Adam Kowalski
</div>
<div class="partParameters">
Dopuszczeni do turnieju
<div class="pretty p-switch p-fill" style="margin-left: 5%">
<input type="checkbox" />
<div class="state p-success">
<label></label>
</div>
</div>
<br>
Zapis opłacony
<div class="pretty p-switch p-fill" style="margin-left: 5%">
<input type="checkbox" />
<div class="state p-success">
<label></label>
</div>
</div>
</div>
</div> </div>
<div class="participant">
<div class="partID">
1.
</div>
<div class="partNames">
Adrian Trela <br>
Adam Kowalski
</div>
<div class="partParameters">
Dopuszczeni do turnieju
<div class="pretty p-switch p-fill" style="margin-left: 5%">
<input type="checkbox" />
<div class="state p-success">
<label></label>
</div>
</div>
<br>
Zapis opłacony
<div class="pretty p-switch p-fill" style="margin-left: 5%">
<input type="checkbox" />
<div class="state p-success">
<label></label>
</div>
</div>
</div>
</div>
</div> </div>
<!-- MIKST--> <!-- MIKST-->
<button type="button" class="collapsible">Zapisani na turniej - MIKST</button> <button type="button" class="collapsible">Zapisani na turniej - MIKST</button>
<div class="collapsibleContent"> <div class="collapsibleContent">
<main id="tournament8"> Brak zawodników mikst
Hejo
</main>
</div> </div>
</div> </div>

View File

@ -4,6 +4,7 @@
@import "../../../../_global/header.css"; @import "../../../../_global/header.css";
@import "bookmarks.css"; @import "bookmarks.css";
@import "../../../../_global/style.css"; @import "../../../../_global/style.css";
@import '~pretty-checkbox/src/pretty-checkbox.scss';
body { body {
@ -16,11 +17,11 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
/*flex-flow: row wrap;*/ margin: auto;
flex-flow: row wrap;
height: 100%; height: 100%;
width: 100%; width: 80%;
justify-content: flex-end;
} }
main { main {
@ -61,21 +62,66 @@ main {
.bookmarks { .bookmarks {
/*Alignment*/ /*Alignment*/
margin: auto; margin-left: 0;
width: 50%; width: 40%;
height: 5vh; height: 5vh;
float: left;
/*Others*/
justify-content: center;
align-items: center;
} }
/*Participant Box*/
.participant { .participant {
/*Size and alignment*/
height: 10vh; height: 10vh;
width: 50%; width: 49.842%;
float: left;
background-color: #0f64f2; /*Font*/
color: #CF2323; font-family: 'Montserrat', serif;
font-weight: 600;
font-size: 18px;
color: #828282;
border: 1px solid black; /*Visual*/
background-color: #FFFFFF;
border: 1px solid #AFAFAF;
padding: -2px;
}
/*2'nd Layer*/
.partID {
width: 6%;
height: 100%;
float: left;
box-sizing: border-box;
padding-top: 6%;
text-align: center;
padding-bottom: 0;
}
.partNames{
width: 47%;
height: 100%;
float: left;
box-sizing: border-box;
padding-left: 2%;
padding-top: 2%;
line-height: 200%;
}
.partParameters{
width: 47%;
height: 100%;
float: left;
text-align: right;
/*Padding doesn't change the size of the box*/
box-sizing: border-box;
/*padding-left: 2%;*/
padding-top: 2%;
padding-right: 2%;
line-height: 200%;
} }

View File

@ -3,7 +3,7 @@
/*Layer 0*/ /*Layer 0*/
html { html {
background-image: url(../src/mezczyzna_padel.jpg); background-image: url(../src/tlo.jpg);
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;

Binary file not shown.

After

Width:  |  Height:  |  Size: 484 KiB

View File

@ -2,7 +2,7 @@
/*Layer 0*/ /*Layer 0*/
html { html {
background-image: url(src/tlo_logowanie.png); background-image: url(src/tlo.jpg);
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;