styling for edit and add subpage

This commit is contained in:
2022-06-19 22:51:55 +02:00
parent 22bb085d5e
commit b7e095e910
13 changed files with 469 additions and 218 deletions

View File

@@ -24,29 +24,44 @@
?>
<body>
<div <?php if(!station_exists($con, $_GET['station'])) { echo "hidden=\"true\"";}?>>
<form action="" method="post">
<div id="team-div">
<label for="team">Mannschaft</label>
<select name="team" id="team">
<?php load_teams_no_points($con, $_GET['station'])?>
</select>
</div>
<label for="points">Punkte: </label>
<input name="points" id="points" type="number" max="15" min="0" value="0"/><br>
<label for="zeit">Zeit: </label>
<div id="zeit">
<label for="minutes">Minuten</label>
<input name="minutes" id="minutes" type="number" max="60" min="0" value="0"/><br>
<label for="seconds">Sekunden</label>
<input name="seconds" id="seconds" type="number" max="60" min="0" value="0"/><br>
<label for="miliseconds">Millisekunden</label>
<input name="miliseconds" id="miliseconds" type="number" max="99" min="0" value="0"/>
</div>
<div>
<input id="button" type="submit" value="Eintragen"/>
</div>
</form>
<div class="center">
<div class="headline">
<h2>Ergebniss eintragen</h2>
</div>
<div class="form_div">
<form action="" method="post">
<div id="team-div" class="dropdown">
<label for="team">Mannschaft</label>
<select name="team" id="team">
<?php load_teams_no_points($con, $_GET['station'])?>
</select>
</div>
<div class="number_field">
<label for="points">Punkte: </label>
<input name="points" id="points" type="number" max="15" min="0" value="0" required/>
</div>
<div class="headline">
<h3>Zeit</h3>
</div>
<div id="zeit">
<div class="number_field">
<label for="minutes">Minuten</label>
<input name="minutes" id="minutes" type="number" max="60" min="0" value="0"/>
</div>
<div class="number_field">
<label for="seconds">Sekunden</label>
<input name="seconds" id="seconds" type="number" max="60" min="0" value="0"/>
</div>
<div class="number_field">
<label for="miliseconds">Millisekunden</label>
<input name="miliseconds" id="miliseconds" type="number" max="99" min="0" value="0"/>
</div>
</div>
<div>
<input id="button" type="submit" value="Eintragen" class="btn-confirm"/>
</div>
</form>
</div>
</div>
</body>
<?php

View File

@@ -14,17 +14,25 @@
?>
<body>
<div class="headline">
<h2>Station hinzufügen</h2>
</div>
<div>
<form method="post">
<label for="station_name">Name:</label>
<input id="station_name" type="text" name="station_name"/><br>
<label for="station_pos">Standort:</label>
<input id="station_pos" type="text" name="station_pos"/><br>
<input id="button" type="submit" value="Hinzufügen"/>
</form>
<div class="center">
<div class="headline">
<h2>Station hinzufügen</h2>
</div>
<div class="form_div">
<form method="post">
<div class="txt_field">
<input id="station_name" type="text" name="station_name" required/>
<span></span>
<label for="station_name">Name</label>
</div>
<div class="txt_field">
<input id="station_pos" type="text" name="station_pos" required/>
<span></span>
<label for="station_pos">Standort</label>
</div>
<input id="button" type="submit" value="Hinzufügen" class="btn-confirm"/>
</form>
</div>
</div>
</body>
<?php

View File

@@ -14,22 +14,30 @@
?>
<body>
<div class="headline">
<h2>Mannschaft hinzufügen</h2>
</div>
<div>
<form method="post">
<label for="team_name">Mannschaftsname</label>
<input type="text" name="team_name"/><br>
<label for="fire_department">Feuerwehr</label>
<input type="text" name="fire_department" list="fire_departments"/><br>
<datalist id="fire_departments">
<?php
load_fire_departments($con);
?>
</datalist>
<input id="button" type="submit" value="Hinzufügen">
</form>
<div class="center">
<div class="headline">
<h2>Mannschaft hinzufügen</h2>
</div>
<div class="form_div">
<form method="post">
<div class="txt_field">
<input type="text" name="team_name" required/>
<span></span>
<label for="team_name">Mannschaftsname</label>
</div>
<div class="txt_field">
<input type="text" name="fire_department" list="fire_departments" required/>
<datalist id="fire_departments">
<?php
load_fire_departments($con);
?>
</datalist>
<span></span>
<label for="fire_department">Feuerwehr</label>
</div>
<input id="button" type="submit" value="Hinzufügen" class="btn-confirm"/>
</form>
</div>
</div>
</body>

View File

@@ -30,31 +30,42 @@
?>
<body>
<div class="headline">
<h2>Benutzer hinzufügen</h2>
</div>
<div>
<form method="post">
<label><?php echo $error ?></label><br>
<label for="user_name">Benutzername</label>
<input type="text" name="user_name"/><br>
<label for="password">Passwort</label>
<input type="password" name="password"/><br>
<label for="user_group">Benutzergruppe</label>
<select name="user_group" id="user_group">
<option value="station">Station</option>
<option value="statistics">Statistik</option>
<option value="admin">Administrator</option>
</select><br>
<label for="bind_station">Gebunden an Station:</label>
<select name="bind_station" id="bind_station">
<?php
load_options_stations($con, "", false);
?>
</select>
<label for="bind_station">(Nur für Benutzergruppe Station)</label><br>
<input type="submit" value="Hinzufügen"/>
</form>
<div class="center">
<div class="headline">
<h2>Benutzer hinzufügen</h2>
</div>
<div class="form_div">
<form method="post" class="form_class">
<label><?php echo $error ?></label><br>
<div class="txt_field">
<input type="text" name="user_name" required>
<span></span>
<label>Benutzername</label>
</div>
<div class="txt_field">
<input type="password" name="password" required>
<span></span>
<label>Passwort</label>
</div>
<div class="dropdown">
<label for="user_group">Benutzergruppe</label>
<select name="user_group" id="user_group">
<option value="station">Station</option>
<option value="statistics">Statistik</option>
<option value="admin">Administrator</option>
</select>
</div>
<div class="dropdown">
<label for="bind_station">Gebunden an Station (Nur für Gruppe Station)</label>
<select name="bind_station" id="bind_station">
<?php
load_options_stations($con, "", false);
?>
</select>
</div>
<input type="submit" value="Hinzufügen" class="btn-confirm"/>
</form>
</div>
</div>
</body>

168
app/public/css/edit.css Normal file
View File

@@ -0,0 +1,168 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
form .txt_field{
position: relative;
border-bottom: 2px solid #adadad;
margin: 20px 0px;
}
.txt_field_opt {
position: relative;
border-bottom: 2px solid #adadad;
margin: 20px 0px;
}
.txt_field input {
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.txt_field_opt input {
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.txt_field label {
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}
.txt_field_opt label {
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}
.txt_field span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0%;
height: 2px;
background: #2691d9;
transition: .5s;
}
.txt_field_opt span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0%;
height: 2px;
background: #2691d9;
transition: .5s;
}
.txt_field_opt input:focus ~ label,
.txt_field_opt input:not(:placeholder-shown) ~ label{
top: -5px;
color: #2691d9;
}
.txt_field input:focus ~ label,
.txt_field input:valid ~ label{
top: -5px;
color: #2691d9;
}
.txt_field_opt input:focus ~ span::before,
.txt_field_opt input:not(:placeholder-shown) ~ span::before{
width: 100%;
}
.txt_field input:focus ~ span::before,
.txt_field input:valid ~ span::before{
width: 100%;
}
.dropdown {
display: flex;
flex-direction: column;
}
.dropdown label {
margin-bottom: 5px;
border-bottom: 1px solid #adadad;
}
.dropdown select {
border-radius: 0px;
height: 30px;
border: none;
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #adadad;
}
.btn-confirm {
margin-bottom: 10px;
border-radius: 0px;
border: none;
height: 30px;
width: 100%;
}
.form_div {
margin-left: 5px;
margin-right: 5px;
}
.number_field {
display: flex;
flex-direction: column;
}
.number_field label {
padding-bottom: 2px;
margin-bottom: 5px;
border-bottom: 1px solid #adadad;
}
.number_field input {
border: none;
outline: none;
height: 30px;
padding-bottom: 2px;
margin-bottom: 5px;
border-bottom: 1px solid #adadad;
width: 100%;
}
.headline h3 {
text-align: center;
font-weight: 400;
color: #002e5b;
}
.information {
border-bottom: 1px solid #adadad;
margin-bottom: 5px;
}

View File

@@ -84,14 +84,7 @@ form .txt_field{
.txt_field input:valid ~ span::before{
width: 100%;
}
.pass{
margin: -5px 0 20px 5px;
color: #a6a6a6;
cursor: pointer;
}
.pass:hover{
text-decoration: underline;
}
input[type="submit"]{
width: 100%;
height: 50px;
@@ -108,16 +101,3 @@ input[type="submit"]:hover{
border-color: #2691d9;
transition: .5s;
}
.signup_link{
margin: 30px 0;
text-align: center;
font-size: 16px;
color: #666666;
}
.signup_link a{
color: #2691d9;
text-decoration: none;
}
.signup_link a:hover{
text-decoration: underline;
}

View File

@@ -20,6 +20,7 @@ html {
align-items: center;
background-color: #090CA9;
color: white;
width: 100%;
}
#logo {
@@ -71,41 +72,10 @@ html {
}
@media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: end;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
header {
margin-bottom: 5px;
width: 100%;
}
body {
@@ -114,6 +84,9 @@ body {
font-family: 'Open Sans', sans-serif;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
width: 100%;
}
h1 {
@@ -126,6 +99,8 @@ h1 {
h1 span{
font-weight: 500;
margin-left: 5px;
margin-right: 5px;
}
div.table-div {
@@ -145,8 +120,8 @@ div.table-div table{
div.table-div th,td {
border: 1px solid;
padding-left: 2.5vw;
padding-right: 2.5vw;
padding-left: .5rem;
padding-right: .5rem;
padding-bottom: 5px;
}
@@ -164,15 +139,16 @@ div.headline h2{
margin: 0px auto;
padding: 10px 0px;
font-weight: 400;
margin-left: 5px;
margin-right: 5px;
}
.center{
max-width: 900px;
min-width: 300px;
/*max-width: 800px;
min-width: 300px;*/
margin: auto;
margin-top: 0px;
background-color: white;
padding-top: 0px;
height: 100%;
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
@@ -244,6 +220,8 @@ div.headline h2{
.input-table{
padding-left: 2px;
padding-right: 2px;
margin-left: 5px;
margin-right: 5px;
}
.select-div {
@@ -278,3 +256,47 @@ div.headline h2{
padding: 10px 0px;
font-weight: 400;
}
@media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: end;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
.center {
margin-left: 2%;
margin-right: 2%;
}
}
@media (max-width: 500px) {
.table-div table{
font-size: 4vmin;
}
}

View File

@@ -27,18 +27,26 @@
?>
<body>
<div class="headline">
<h2>Station bearbeiten</h2>
</div>
<div>
<form method="post">
<label for="station_name">Stations Namen:</label>
<input type="text" name="station_name" <?php echo "value=\"" . $row['name'] . "\"" ?> /><br>
<label for="station_pos">Stations Standort:</label>
<input type="text" name="station_pos" <?php echo "value=\"" . $row['standort'] . "\""?>/><br>
<input type="hidden" name="station_id" <?php echo "value=\"" . $row ['s_id'] . "\""?>/>
<input type="submit" value="Speichern"/>
</form>
<div class="center">
<div class="headline">
<h2>Station bearbeiten</h2>
</div>
<div class="form_div">
<form method="post">
<div class="txt_field">
<input type="text" name="station_name" <?php echo "value=\"" . $row['name'] . "\"" ?> />
<span></span>
<label for="station_name">Stations Namen:</label>
</div>
<div class="txt_field">
<input type="text" name="station_pos" <?php echo "value=\"" . $row['standort'] . "\""?>/>
<span></span>
<label for="station_pos">Stations Standort:</label>
</div>
<input type="hidden" name="station_id" <?php echo "value=\"" . $row ['s_id'] . "\""?>/>
<input type="submit" value="Speichern" class="btn-confirm"/>
</form>
</div>
</div>
</body>

View File

@@ -34,30 +34,41 @@
}
?>
<body>
<div class="headline">
<h2>Ergebniss bearbeiten</h2>
</div>
<div>
<form method="post">
<label for="team_name">Mannschaftsname: </label>
<label for="" name="team_name"><?php echo $row['name']?></label><br>
<label for="fire_department">Feuerwehr:</label>
<label for="" name="fire_department"><?php echo $row["feuerwehr"]?></label><br>
<label for="points">Punkte:</label>
<input type="number" min="0" max="15" name="points" value="<?php echo $row['punkte']?>"/><br>
<div id="time">
<?php $time_set = check_time($con, $row['m_id'], $row['s_id']);?>
<label for="minutes">Minuten:</label>
<input name="minutes" type="number" min="0" max="60" value=<?php if(!$time_set){echo "\"0\"";} else {echo "\"" . get_minutes($con, $row['m_id'], $row['s_id'])->fetch()['minutes'] . "\""; }?>/><br>
<label for="seconds">Sekunden</label>
<input name="seconds" type="number" min="0" max="60" value=<?php if(!$time_set){echo"\"0\"";} else { echo "\"" . get_seconds($con, $row['m_id'], $row['s_id'])->fetch()['seconds'] . "\""; }?>/><br>
<label for="millis">Millisekunden</label>
<input name="millis" type="number" min="0" max="99" value=<?php if(!$time_set){echo"\"0\"";} else { echo "\"" . get_millis($con, $row['m_id'], $row['s_id'])->fetch()['millis'] / 1e4 . "\""; }?>/><br>
</div>
<input type="hidden" name="m_id" value=<?php echo $row['m_id'] ?>/>
<input type="hidden" name="s_id" value=<?php echo $row['s_id'] ?>/>
<input name="button" type="submit" value="Speichern"/>
</form>
<div class="center">
<div class="headline">
<h2>Ergebniss bearbeiten</h2>
</div>
<div class="form_div">
<form method="post">
<label class="information">Mannschaftsname: <?php echo $row['name']?></label><br>
<label for="fire_department" class="information">Feuerwehr: <?php echo $row["feuerwehr"]?></label><br>
<div class="number_field">
<label for="points">Punkte:</label>
<input type="number" min="0" max="15" name="points" value="<?php echo $row['punkte']?>"/>
</div>
<div class="headline">
<h3>Zeit</h3>
</div>
<div id="time">
<?php $time_set = check_time($con, $row['m_id'], $row['s_id']);?>
<div class="number_field">
<label for="minutes">Minuten:</label>
<input name="minutes" type="number" min="0" max="60" value=<?php if(!$time_set){echo "\"0\"";} else {echo "\"" . get_minutes($con, $row['m_id'], $row['s_id'])->fetch()['minutes'] . "\""; }?>/>
</div>
<div class="number_field">
<label for="seconds">Sekunden</label>
<input name="seconds" type="number" min="0" max="60" value=<?php if(!$time_set){echo"\"0\"";} else { echo "\"" . get_seconds($con, $row['m_id'], $row['s_id'])->fetch()['seconds'] . "\""; }?>/>
</div>
<div class="number_field">
<label for="millis">Millisekunden</label>
<input name="millis" type="number" min="0" max="99" value=<?php if(!$time_set){echo"\"0\"";} else { echo "\"" . get_millis($con, $row['m_id'], $row['s_id'])->fetch()['millis'] / 1e4 . "\""; }?>/>
</div>
</div>
<input type="hidden" name="m_id" value=<?php echo $row['m_id'] ?>/>
<input type="hidden" name="s_id" value=<?php echo $row['s_id'] ?>/>
<input name="button" type="submit" value="Speichern" class="btn-confirm"/>
</form>
</div>
</div>
</body>
<?php

View File

@@ -26,23 +26,31 @@
include("header_footer/header.php");
?>
<body>
<div class="headline">
<h2>Mannschaft bearbeiten</h2>
</div>
<div>
<form method="post">
<label for="team_name">Mannschaftsname</label>
<input type="text" name="team_name" <?php echo "value=\"" . $row['name'] . "\""?> /><br>
<label for="fire_department">Feuerwehr</label>
<input type="text" name="fire_department" list="fire_departments" <?php echo "value=\"" . $row['feuerwehr'] . "\"" ?>/><br>
<datalist id="fire_departments">
<?php
load_fire_departments($con);
?>
</datalist>
<input type="hidden" name="m_id" <?php echo "value=\"" . $row['m_id'] . "\""?> />
<input type="submit" value="Speichern"/>
</form>
<div class="center">
<div class="headline">
<h2>Mannschaft bearbeiten</h2>
</div>
<div class="form_div">
<form method="post">
<div class="txt_field">
<input type="text" name="team_name" <?php echo "value=\"" . $row['name'] . "\""?> />
<span></span>
<label for="team_name">Mannschaftsname</label>
</div>
<div class="txt_field">
<input type="text" name="fire_department" list="fire_departments" <?php echo "value=\"" . $row['feuerwehr'] . "\"" ?>/>
<datalist id="fire_departments">
<?php
load_fire_departments($con);
?>
</datalist>
<span></span>
<label for="fire_department">Feuerwehr</label>
</div>
<input type="hidden" name="m_id" <?php echo "value=\"" . $row['m_id'] . "\""?> />
<input type="submit" value="Speichern" class="btn-confirm"/>
</form>
</div>
</div>
</body>
<?php

View File

@@ -35,35 +35,46 @@
?>
<body>
<div class="headline">
<h2>Benutzer bearbeiten</h2>
</div>
<div>
<form method="post">
<label for="user_name">Benutzername:</label>
<input name="user_name" type="text" value=<?php echo "\"" . $row['user_name'] . "\"";?>/><br>
<label for="password">Neues Passwort:</label>
<input type="password" name="password"/><br>
<label for="user_group">Benutzergruppe:</label>
<select name="user_group" id="user_group">
<option value="station" <?php if($row['user_group'] == "station"){echo " selected";}?>>Station</option>
<option value="statistics" <?php if($row['user_group'] == "statistics") {echo " selected";}?>>Statistik</option>
<option value="admin" <?php if($row['user_group'] == "admin") {echo " selected";}?>>Admin</option>
</select><br>
<label for="bind_station">Gebunden an Station:</label>
<select name="bind_station" id="bind_station">
<?php
if($row['s_id'] == null) {
load_options_stations($con, "", false);
} else {
load_options_stations($con, $row['s_id'], false);
}
?>
</select>
<label for="bind_station">(Nur für Benutzergruppe Station)</label><br>
<input type="hidden" value=<?php echo "\"" . $row['id'] . "\""?> name="id"/>
<input type="submit" value="ändern">
</form>
<div class="center">
<div class="headline">
<h2>Benutzer bearbeiten</h2>
</div>
<div class="form_div">
<form method="post">
<div class="txt_field">
<input name="user_name" type="text" value=<?php echo "\"" . $row['user_name'] . "\"";?> required/>
<span></span>
<label for="user_name">Benutzername</label>
</div>
<div class="txt_field_opt">
<input placeholder=" " type="password" name="password" />
<span></span>
<label for="password">Neues Passwort:</label>
</div>
<div class="dropdown">
<label for="user_group">Benutzergruppe:</label>
<select name="user_group" id="user_group">
<option value="station" <?php if($row['user_group'] == "station"){echo " selected";}?>>Station</option>
<option value="statistics" <?php if($row['user_group'] == "statistics") {echo " selected";}?>>Statistik</option>
<option value="admin" <?php if($row['user_group'] == "admin") {echo " selected";}?>>Admin</option>
</select>
</div>
<div class="dropdown">
<label for="bind_station">Gebunden an Station (nur für Gruppe Station)</label>
<select name="bind_station" id="bind_station">
<?php
if($row['s_id'] == null) {
load_options_stations($con, "", false);
} else {
load_options_stations($con, $row['s_id'], false);
}
?>
</select>
</div>
<input type="hidden" value=<?php echo "\"" . $row['id'] . "\""?> name="id"/>
<input type="submit" value="ändern" class="btn-confirm"/>
</form>
</div>
</div>
</body>
<?php

View File

@@ -6,7 +6,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<script src="../js/navbar.js" defer></script>
<link rel="stylesheet" href="css/edit.css">
<script src="js/navbar.js" defer></script>
<script src="js/edit_table.js"></script>
</head>
<body>

View File

@@ -44,7 +44,7 @@
<h1>PUNKTESYSTEM-KSP</h1>
<form method="post">
<div class="txt_field">
<input id="user_name" type="text" name="user_name" required>
<input id="user_name" type="text" name="user_name" required/>
<span></span>
<label>Benutzername</label>
</div>