added syling for desktop

This commit is contained in:
2022-06-19 15:05:47 +02:00
parent 7fcd483592
commit 9ddc2616de
10 changed files with 342 additions and 175 deletions

View File

@@ -24,7 +24,7 @@ body{
top: 40%; top: 40%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 400px; width: 300px;
background: white; background: white;
border-radius: 10px; border-radius: 10px;
box-shadow: 10px 10px 15px rgba(0,0,0,0.05); box-shadow: 10px 10px 15px rgba(0,0,0,0.05);
@@ -35,6 +35,7 @@ body{
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
font-weight: 400; font-weight: 400;
color: #002e5b; color: #002e5b;
font-size: 25px;
} }
.center form{ .center form{
padding: 0 40px; padding: 0 40px;

View File

@@ -1,9 +1,20 @@
@import url(./trashcan.css);
html {
background: url("../pictures/Gerätehaus.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
nav a{ nav a{
float: right; float: right;
text-decoration: none; text-decoration: none;
color: #FFFFFF; color: #FFFFFF;
font-size: 18px; font-size: 18px;
padding: 25px 35px; padding: 15px 25px;
display: inline-block; display: inline-block;
transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;
} }
@@ -15,42 +26,44 @@ nav a{
font-weight: bold; font-weight: bold;
float: left; float: left;
padding: 20px; padding: 20px;
margin-left: 17%; margin-left: 0.5rem;
} }
header { header {
overflow: hidden; overflow: hidden;
background-color: #090CA9; background-color: #090CA9;
margin-bottom: 50px; margin-bottom: 5px;
} }
body { body {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
align-items: center;
justify-content: center;
} }
nav { nav {
margin-right: 17%; margin-right: 0.5rem;
} }
h1 { h1 {
margin: 0px auto; margin: 0px auto;
font-size: 26px; font-size: 26px;
padding: 40px 0px; padding: 20px 0px;
color: #002e5b; color: #002e5b;
text-align: center; text-align: center;
} }
h1 span{ h1 span{
font-weight: 400; font-weight: 500;
} }
div.table-div { div.table-div {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; padding-bottom: 20px;
} }
div.table-div table{ div.table-div table{
@@ -65,13 +78,15 @@ div.table-div th,td {
border: 1px solid; border: 1px solid;
padding-left: 2.5vw; padding-left: 2.5vw;
padding-right: 2.5vw; padding-right: 2.5vw;
padding-bottom: 0.5vw; padding-bottom: 5px;
} }
div.headline { div.headline {
display: block; display: block;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-bottom: 1px solid silver;
width: 100%;
} }
div.headline h2{ div.headline h2{
@@ -82,10 +97,115 @@ div.headline h2{
font-weight: 400; font-weight: 400;
} }
tr.highlight { .center{
background: #eef; max-width: 900px;
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);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
} }
tr.clicked { .input{
background: #ccd; padding-right: 0px;
justify-content: right;
display: flex;
}
.btn-div{
padding-top: 5px;
padding-bottom: 1px;
}
.btn-div input{
border-radius: 0;
border: 0;
width: 26px;
border-width: 1px;
height: 26px;
background-color: white;
}
.btn-div input:hover:enabled {
background-color: lightgray;
}
.btn-div form{
position: relative;
}
#icon-add {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
transition: none;
}
#icon-delete{
position: absolute;
top: 4px;
left: 7px;
pointer-events: none;
visibility: visible;
}
#icon-delete.disabled,
#icon-edit.disabled {
visibility: hidden;
}
#icon-edit {
position: absolute;
top: 9px;
left: 8px;
pointer-events: none;
visibility: visible;
}
.input-table{
padding-left: 2px;
padding-right: 2px;
}
.select-div {
padding-top: 5px;
padding-bottom: 1px;
margin-right: auto;
}
.select-div select{
border-radius: 0;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.05);
border: 1px solid silver;
background-color: white;
}
.home-menu-table {
padding-top: 5px;
}
.home {
display: block;
align-items: center;
justify-content: center;
border-bottom: none;
width: 100%;
}
.home h2 {
text-align: center;
color: #002e5b;
margin: 0px auto;
padding: 10px 0px;
font-weight: 400;
} }

File diff suppressed because one or more lines are too long

View File

@@ -15,7 +15,7 @@
Punktesystem-KSP Punktesystem-KSP
</div> </div>
<nav> <nav>
<a href="logout.php">logout</a> <a href="logout.php">Logout</a>
<a href="index.php">Home</a> <a href="index.php">Home</a>
<?php <?php
if(isset($_SESSION['user_group'])) { if(isset($_SESSION['user_group'])) {

View File

@@ -9,14 +9,18 @@
?> ?>
<body> <body>
<h1><span>Punktesystem Kreispokalwettbewerb Altdorf</span></h1> <div class="center">
<div class="headline"> <div class="headline">
<h2>Gesamtergebniss</h2> <h1><span>Punktesystem Kreispokalwettbewerb Altdorf</span></h1>
</div> </div>
<div class="table-div"> <div class="home">
<table id="table"> <h2>Gesamtergebniss</h2>
<?php load_total_score($con); ?> </div>
</table> <div class="home-menu-table table-div">
<table id="table">
<?php load_total_score($con); ?>
</table>
</div>
</div> </div>
</body> </body>

View File

@@ -28,8 +28,8 @@ function highlight_row() {
for( var i = 0; i < cells.length; i++) { for( var i = 0; i < cells.length; i++) {
var cell = cells[i]; var cell = cells[i];
var buttons = document.getElementsByClassName('edit');
cell.onclick = function() { cell.onclick = function() {
var buttons = document.getElementsByClassName('edit');
var rowId = this.parentNode.rowIndex; var rowId = this.parentNode.rowIndex;
var rowsNotSelected = table.getElementsByTagName('tr'); var rowsNotSelected = table.getElementsByTagName('tr');
for ( var row = 0; row < rowsNotSelected.length; row++) { for ( var row = 0; row < rowsNotSelected.length; row++) {
@@ -43,6 +43,7 @@ function highlight_row() {
rowSelected.classList.remove('selected'); rowSelected.classList.remove('selected');
Array.prototype.forEach.call(buttons, function(button) { Array.prototype.forEach.call(buttons, function(button) {
button.disabled = true; button.disabled = true;
button.className += " disabled";
}) })
} else { } else {
selected = rowId; selected = rowId;
@@ -50,6 +51,7 @@ function highlight_row() {
rowSelected.className += " selected"; rowSelected.className += " selected";
Array.prototype.forEach.call(buttons, function(button) { Array.prototype.forEach.call(buttons, function(button) {
button.disabled = false; button.disabled = false;
button.classList.remove('disabled');
}) })
} }
} }

View File

@@ -8,41 +8,50 @@
?> ?>
<body> <body>
<div class="headline"> <div class=" center">
<h2>Benutzerverwaltung</h2> <div class="headline">
</div> <h2>Benutzerverwaltung</h2>
<div> </div>
<form action="add_user.php" method="get"> <div class="input-table">
<input type="submit" value="Benutzer hinzufügen"/> <div class="input">
</form> <div class="btn-div">
</div> <form action="delete_user.php" method="post">
<div> <span class="gg-trash icon edit disabled" id="icon-delete" disabled="true"></span>
<form action="edit_user.php" method="get"> <input type="button" id="delete_user" value="" class="edit" disabled="true"/>
<input id="edit_user" type="button" value="Eintrag bearbeiten" class="edit" disabled="true"/> <input type="hidden" id="id_delete" name="id"/>
<input id="user_id_val" type="hidden" name="id"/> </form>
</form> </div>
</div> <div class="btn-div">
<div> <form action="edit_user.php" method="get">
<form action="delete_user.php" method="post"> <span class="gg-pen icon edit disabled" id="icon-edit" disabled="true"></span>
<input type="button" id="delete_user" value="Löschen" class="edit" disabled="true"/> <input id="edit_user" type="button" value="" class="edit" disabled="true"/>
<input type="hidden" id="id_delete" name="id"/> <input id="user_id_val" type="hidden" name="id"/>
</form> </form>
</div> </div>
<div class="table-div"> <div class="btn-div">
<table id="table"> <form action="add_user.php" method="get">
<thead> <span class="gg-add-r icon" id="icon-add"></span>
<tr> <input type="submit" value=""/>
<th scope="col">Name</th> </form>
<th scope="col">Benutzergruppe</th> </div>
<th scope="col">Gebunden an Station</th> </div>
</tr> <div class="table-div">
</thead> <table id="table">
<tbody> <thead>
<?php <tr>
load_users($con); <th scope="col">Name</th>
?> <th scope="col">Benutzergruppe</th>
</tbody> <th scope="col">Gebunden an Station</th>
</table> </tr>
</thead>
<tbody>
<?php
load_users($con);
?>
</tbody>
</table>
</div>
</div>
</div> </div>
</body> </body>

View File

@@ -9,38 +9,47 @@
?> ?>
<body> <body>
<div class="headline"> <div class="center">
<h2>Mannschaftsverwaltung</h2> <div class="headline">
</div> <h2>Mannschaftsverwaltung</h2>
<div> </div>
<form action="add_team.php" method="get"> <div class="input-table">
<input id="button" type="submit" value="Mannschaft hinzufügen"/> <div class="input">
</form> <div class="btn-div">
</div> <form action="delete_team.php" method="post">
<div> <span class="gg-trash icon edit disabled" id="icon-delete"></span>
<form action="edit_team.php" method="get"> <input id="delete_team" type="button" value="" class="edit" disabled="true"/>
<input id="edit_team" type="button" value="Bearbeiten" class="edit" disabled="true"/> <input type="hidden" name="m_id" id="m_id_delete"/>
<input type="hidden" id="m_id" name="m_id"> </form>
</form> </div>
</div> <div class="btn-div">
<div> <form action="edit_team.php" method="get">
<form action="delete_team.php" method="post"> <span class="gg-pen icon edit disabled" id="icon-edit"></span>
<input id="delete_team" type="button" value="Löschen" class="edit" disabled="true"/> <input id="edit_team" type="button" value="" class="edit" disabled="true"/>
<input type="hidden" name="m_id" id="m_id_delete"/> <input type="hidden" id="m_id" name="m_id">
</form> </form>
</div> </div>
<div class="table-div"> <div class="btn-div">
<table id="table"> <form action="add_team.php" method="get">
<thead> <span class="gg-add-r icon" id="icon-add"></span>
<tr> <input id="button" type="submit" value=""/>
<th scope="col">Name</th> </form>
<th scope="col">Feuerwehr</th> </div>
</tr> </div>
</thead> <div class="table-div">
<tbody> <table id="table">
<?php load_teams_table($con); ?> <thead>
</tbody> <tr>
</table> <th scope="col">Name</th>
<th scope="col">Feuerwehr</th>
</tr>
</thead>
<tbody>
<?php load_teams_table($con); ?>
</tbody>
</table>
</div>
</div>
</div> </div>
</body> </body>

View File

@@ -9,40 +9,49 @@
?> ?>
<body> <body>
<div class="headline"> <div class="center">
<h2>Stationen</h2> <div class="headline">
</div> <h2>Stationen</h2>
<div> </div>
<form action="add_station.php" method="get"> <div class="input-table">
<input type="submit" value="Station anlegen"/> <div class="input">
</form> <div class="btn-div">
</div> <form action="delete_station.php" method="post">
<div> <span class="gg-trash icon edit disabled" id="icon-delete"></span>
<form action="edit_station.php" method="get"> <input id="delete_station" type="button" type="butto" value="" class="edit" disabled="true"/>
<input id="edit_station" type="button" value="Station bearbeiten" class="edit" disabled="true"/> <input type="hidden" id="s_id_delete" name="s_id"/>
<input type="hidden" id="s_id" name="s_id"/> </form>
</form> </div>
</div> <div class="btn-div">
<div> <form action="edit_station.php" method="get">
<form action="delete_station.php" method="post"> <span class="gg-pen icon edit disabled" id="icon-edit"></span>
<input id="delete_station" type="button" type="butto" value="Löschen" class="edit" disabled="true"/> <input id="edit_station" type="button" value="" class="edit" disabled="true"/>
<input type="hidden" id="s_id_delete" name="s_id"/> <input type="hidden" id="s_id" name="s_id"/>
</form> </form>
</div> </div>
<div class="table-div"> <div class="btn-div">
<table id="table"> <form action="add_station.php" method="get">
<thead> <span class="gg-add-r icon" id="icon-add"></span>
<tr> <input type="submit" value=""/>
<th scope="col">Name</th> </form>
<th scope="col">Standort</th> </div>
</tr> </div>
</thead> <div class="table-div">
<tbody> <table id="table">
<?php <thead>
load_stations_table($con); <tr>
?> <th scope="col">Name</th>
</tbody> <th scope="col">Standort</th>
</table> </tr>
</thead>
<tbody>
<?php
load_stations_table($con);
?>
</tbody>
</table>
</div>
</div>
</div> </div>
</body> </body>

View File

@@ -21,61 +21,73 @@
?> ?>
<body> <body>
<div class="headline"> <div class="center">
<?php <div class="headline">
if($session == "total-score") {
echo "<h2>Gesamtpunkte</h2>\n";
} else {
echo "<h2>" . get_station_name($con, $session)['name'] . "</h2>\n";
}
?>
</div>
<div>
<?php
if($user_data['user_group'] != "station") {
echo "<form name=\"switch-statistics\" method=\"get\">
<select name=\"stationen\" id=\"station\" onchange=\"this.form.submit()\">";
load_options_stations($con, $session, true);
echo "</select>
</form>";
}
if($session != "total-score" && get_teams_no_points($con, $session)->rowCount() > 0 && $user_data['user_group'] != 'statistics') {
echo "<form action=\"add_entry.php\" method=\"get\">
<input type=\"hidden\" name=\"station\" value=\"$session\"/>
<input type=\"submit\" value=\"Ergebniss eintragen\"/>
</form>\n";
}
if ($session != "total-score" && $user_data['user_group'] != 'statistics') {
//add edit button
echo "<div>
<form action=\"edit_statistics.php\" method=\"get\">
<input type=\"button\" id=\"edit_statistic\" value=\"Eintrag bearbeiten\" class=\"edit\" disabled=true/>
<input type=\"hidden\" id=\"team_id\" name=\"m_id\"/>
<input type=\"hidden\" id=\"station_id\" name=\"s_id\" value=\"". $session . "\"/>
</form>
</div>";
//add delete button
echo "<div>
<form action=\"delete_statistics.php\" method=\"post\">
<input type=\"button\" id=\"delete_statistic\" value=\"Löschen\" class=\"edit\" disabled=\"true\"/>
<input type=\"hidden\" id=\"m_id_delete\" name=\"m_id\"/>
<input type=\"hidden\" id=\"s_id_delete\" name=\"s_id\" value=\"" . $session . "\"/>
</form>
</div>";
}
?>
</div>
<div class="table-div">
<table id="table">
<?php <?php
if($session == "total-score") { if($session == "total-score") {
load_total_score($con); echo "<h2>Gesamtpunkte</h2>\n";
} else { } else {
load_station_table($con, $session); echo "<h2>" . get_station_name($con, $session)['name'] . "</h2>\n";
} }
?> ?>
</table> </div>
<div class="input-table">
<div class="input">
<?php
if($user_data['user_group'] != "station") {
echo "<div class=\"select-div\">
<form name=\"switch-statistics\" method=\"get\">
<select name=\"stationen\" id=\"station\" onchange=\"this.form.submit()\">";
load_options_stations($con, $session, true);
echo "</select>
</form>
</div>";
}
if ($session != "total-score" && $user_data['user_group'] != 'statistics') {
//add delete button
echo "<div class=\"btn-div\">
<form action=\"delete_statistics.php\" method=\"post\">
<span class=\"gg-trash icon edit disabled\" id=\"icon-delete\"></span>
<input type=\"button\" id=\"delete_statistic\" value=\"\" class=\"edit\" disabled=\"true\"/>
<input type=\"hidden\" id=\"m_id_delete\" name=\"m_id\"/>
<input type=\"hidden\" id=\"s_id_delete\" name=\"s_id\" value=\"" . $session . "\"/>
</form>
</div>";
//add edit button
echo "<div class=\"btn-div\">
<form action=\"edit_statistics.php\" method=\"get\">
<span class=\"gg-pen icon edit disabled\" id=\"icon-edit\"></span>
<input type=\"button\" id=\"edit_statistic\" value=\"\" class=\"edit\" disabled=true/>
<input type=\"hidden\" id=\"team_id\" name=\"m_id\"/>
<input type=\"hidden\" id=\"station_id\" name=\"s_id\" value=\"". $session . "\"/>
</form>
</div>";
}
if($session != "total-score" && get_teams_no_points($con, $session)->rowCount() > 0 && $user_data['user_group'] != 'statistics') {
echo "<div class=\"btn-div\">
<form action=\"add_entry.php\" method=\"get\">
<span class=\"gg-add-r icon\" id=\"icon-add\"></span>
<input type=\"hidden\" name=\"station\" value=\"$session\"/>
<input type=\"submit\" value=\"\"/>
</form>
</div>\n";
}
?>
</div>
<div class="table-div">
<table id="table">
<?php
if($session == "total-score") {
load_total_score($con);
} else {
load_station_table($con, $session);
}
?>
</table>
</div>
</div>
</div> </div>
</body> </body>