From b7e095e9105fc24466fcebf30530acd1f60aaee1 Mon Sep 17 00:00:00 2001 From: Grisu Date: Sun, 19 Jun 2022 22:51:55 +0200 Subject: [PATCH] styling for edit and add subpage --- app/public/add_entry.php | 61 ++++++---- app/public/add_station.php | 30 +++-- app/public/add_team.php | 40 ++++--- app/public/add_user.php | 61 +++++----- app/public/css/edit.css | 168 ++++++++++++++++++++++++++++ app/public/css/login.css | 22 +--- app/public/css/styles.css | 96 ++++++++++------ app/public/edit_station.php | 32 ++++-- app/public/edit_statistics.php | 59 ++++++---- app/public/edit_team.php | 42 ++++--- app/public/edit_user.php | 69 +++++++----- app/public/header_footer/header.php | 5 +- app/public/login.php | 2 +- 13 files changed, 469 insertions(+), 218 deletions(-) create mode 100644 app/public/css/edit.css diff --git a/app/public/add_entry.php b/app/public/add_entry.php index cfdb7d2..5c1f212 100644 --- a/app/public/add_entry.php +++ b/app/public/add_entry.php @@ -24,29 +24,44 @@ ?> -
> -
-
- - -
- -
- -
- -
- -
- - -
-
- -
-
+
+
+

Ergebniss eintragen

+
+
+
+ +
+ + +
+
+

Zeit

+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+
-
-

Station hinzufügen

-
-
-
- -
- -
- -
+
+
+

Station hinzufügen

+
+
+
+
+ + + +
+
+ + + +
+ +
+
-
-

Mannschaft hinzufügen

-
-
-
- -
- -
- - - - -
+
+
+

Mannschaft hinzufügen

+
+
+
+
+ + + +
+
+ + + + + + +
+ +
+
diff --git a/app/public/add_user.php b/app/public/add_user.php index 38350e2..96d6988 100644 --- a/app/public/add_user.php +++ b/app/public/add_user.php @@ -30,31 +30,42 @@ ?> -
-

Benutzer hinzufügen

-
-
-
-
- -
- -
- -
- - -
- -
+
+
+

Benutzer hinzufügen

+
+
+
+
+
+ + + +
+
+ + + +
+
+ + +
+
+ + +
+ +
+
diff --git a/app/public/css/edit.css b/app/public/css/edit.css new file mode 100644 index 0000000..9e0b942 --- /dev/null +++ b/app/public/css/edit.css @@ -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; +} \ No newline at end of file diff --git a/app/public/css/login.css b/app/public/css/login.css index f3f3258..1298c77 100644 --- a/app/public/css/login.css +++ b/app/public/css/login.css @@ -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; -} diff --git a/app/public/css/styles.css b/app/public/css/styles.css index 3122852..dc0fe81 100644 --- a/app/public/css/styles.css +++ b/app/public/css/styles.css @@ -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 { @@ -277,4 +255,48 @@ div.headline h2{ margin: 0px auto; 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; + } } \ No newline at end of file diff --git a/app/public/edit_station.php b/app/public/edit_station.php index 4b59890..3e51735 100644 --- a/app/public/edit_station.php +++ b/app/public/edit_station.php @@ -27,18 +27,26 @@ ?> -
-

Station bearbeiten

-
-
-
- - />
- - />
- /> - -
+
+
+

Station bearbeiten

+
+
+
+
+ /> + + +
+
+ /> + + +
+ /> + +
+
diff --git a/app/public/edit_statistics.php b/app/public/edit_statistics.php index e8e4a98..6a18d38 100644 --- a/app/public/edit_statistics.php +++ b/app/public/edit_statistics.php @@ -34,30 +34,41 @@ } ?> -
-

Ergebniss bearbeiten

-
-
-
- -
- -
- -
-
- - - fetch()['minutes'] . "\""; }?>/>
- - fetch()['seconds'] . "\""; }?>/>
- - fetch()['millis'] / 1e4 . "\""; }?>/>
-
- /> - /> - -
+
+
+

Ergebniss bearbeiten

+
+
+
+
+
+
+ + +
+
+

Zeit

+
+
+ +
+ + fetch()['minutes'] . "\""; }?>/> +
+
+ + fetch()['seconds'] . "\""; }?>/> +
+
+ + fetch()['millis'] / 1e4 . "\""; }?>/> +
+
+ /> + /> + +
+
-
-

Mannschaft bearbeiten

-
-
-
- - />
- - />
- - - - /> - -
+
+
+

Mannschaft bearbeiten

+
+
+
+
+ /> + + +
+
+ /> + + + + + +
+ /> + +
+
-
-

Benutzer bearbeiten

-
-
-
- - />
- -
- -
- - -
- name="id"/> - -
+
+
+

Benutzer bearbeiten

+
+
+
+
+ required/> + + +
+
+ + + +
+
+ + +
+
+ + +
+ name="id"/> + +
+
- + + @@ -37,7 +38,7 @@ } } ?> - +
  • Logout
    • diff --git a/app/public/login.php b/app/public/login.php index 60097d0..66b5eaa 100644 --- a/app/public/login.php +++ b/app/public/login.php @@ -44,7 +44,7 @@

    PUNKTESYSTEM-KSP

    - +