forms styling WIP
This commit is contained in:
parent
837e666af9
commit
8dd24a8c1e
54
CSS/Element/form.css
Normal file
54
CSS/Element/form.css
Normal file
@ -0,0 +1,54 @@
|
||||
.form-flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form label {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
form input {
|
||||
border: var(--border-primary);
|
||||
height: var(--h-md);
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 2px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.input-short {
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.form-grid label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form-grid textarea {
|
||||
grid-column: span 2;
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
padding: 8px;
|
||||
font-size: 1rem;
|
||||
margin-top: 5px;
|
||||
}
|
||||
@ -2,6 +2,7 @@
|
||||
@import url(Block/header.css);
|
||||
@import url(Block/footer.css);
|
||||
@import url(Element/logo.css);
|
||||
@import url(Element/form.css);
|
||||
@import url(Element/button.css);
|
||||
|
||||
*, *:before, *:after {
|
||||
@ -11,8 +12,6 @@
|
||||
font-family: var(--font-family-main);
|
||||
}
|
||||
|
||||
|
||||
|
||||
body {
|
||||
background-color: var(--brand-background);
|
||||
color: #666;
|
||||
@ -31,8 +30,6 @@ h1 span {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
h2 {
|
||||
color: orange;
|
||||
}
|
||||
@ -80,48 +77,6 @@ main {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*** Formulare ***/
|
||||
|
||||
form {
|
||||
width: 440px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 120px;
|
||||
display: inline-block;
|
||||
margin: 5px 15px 10px 0;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
label.errorMsg {
|
||||
width: 420px;
|
||||
display: inline-block;
|
||||
margin: 0 5px 15px 0;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
width: 100px;
|
||||
margin-left: 330px;
|
||||
}
|
||||
|
||||
form textarea {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
form select {
|
||||
width: 300px;
|
||||
}
|
||||
/*** Loesung Workshop-Seite ***/
|
||||
|
||||
.textContent {
|
||||
@ -156,4 +111,5 @@ form select {
|
||||
.hover:hover{
|
||||
opacity: .75;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,10 +2,12 @@
|
||||
/* Colors*/
|
||||
--brand-primary: #EB8202;
|
||||
--brand-background: #201911;
|
||||
--bg-muted: #5B5B5B;
|
||||
--brand-white: #ffffff;
|
||||
--fullblock: darkblue;
|
||||
--input-placeholder: #998E82;
|
||||
|
||||
|
||||
/*Fonts*/
|
||||
--font-family-main: "Inter", sans-serif;
|
||||
--font-family-headline: "Source Serif 4", serif;
|
||||
@ -19,4 +21,6 @@
|
||||
/*Font-Weight*/
|
||||
--font-weight-semibold: 600;
|
||||
|
||||
--h-md: 48px;
|
||||
--border-primary: 1px solid #998E82;
|
||||
}
|
||||
@ -41,10 +41,9 @@ class AdminController
|
||||
$this->validData[$index] = $_POST[$index];
|
||||
}
|
||||
}
|
||||
|
||||
if (count($this->errors) > 0) {
|
||||
$this->view->setDoMethodName("showContactForm");
|
||||
$this->showContactForm();
|
||||
$this->view->setDoMethodName("showForm");
|
||||
$this->showForm();
|
||||
} else {
|
||||
if ($this->db->writeContactData($this->validData)) {
|
||||
$this->view->setDoMethodName("showConfirmation");
|
||||
|
||||
@ -5,26 +5,34 @@ include dirname(__DIR__).'/header.phtml';
|
||||
|
||||
|
||||
<h2>Neuer Kurs</h2>
|
||||
<form method="post">
|
||||
<form method="post" class="form-grid">
|
||||
|
||||
<?php foreach ($labels as $index => $value) {
|
||||
echo '<label for="' . $index . '">' . $value . '</label>';
|
||||
if ($index == "beschreibung") {
|
||||
echo "<textarea id=\"$index\" name=\"$index\" >";
|
||||
if (isset($validData[$index])) { echo $validData[$index]; }
|
||||
<?php
|
||||
$index = 0;
|
||||
|
||||
foreach ($labels as $key => $value) {
|
||||
if ($key == "beschreibung") {
|
||||
if($index % 2 != 0) echo '<div></div>';
|
||||
}
|
||||
echo '<div class="input"><label for="' . $key . '">' . $value . '</label>';
|
||||
if ($key == "beschreibung") {
|
||||
if($index % 2 != 0) echo '<div></div>';
|
||||
echo "<textarea id=\"$key\" name=\"$key\" >";
|
||||
if (isset($validData[$key])) { echo $validData[$key]; }
|
||||
echo "</textarea><br>";
|
||||
} else {
|
||||
echo '<input type="text" name="' . $index . '" value="' . (isset($validData[$index]) ? $validData[$index] : '') . '"><br>';
|
||||
echo '<input class="input" type="text" name="' . $key . '" value="' . (isset($validData[$key]) ? $validData[$key] : '') . '"><br>';
|
||||
}
|
||||
if (isset($errors[$index])) {
|
||||
echo '<label class="errorMsg">' . $errors[$index] . '</label><br>';
|
||||
if (isset($errors[$key])) {
|
||||
echo '<label class="errorMsg">' . $errors[$key] . '</label><br>';
|
||||
}
|
||||
echo '</div>';
|
||||
$index++;
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<input type="hidden" name="controller" value="contact">
|
||||
<input type="hidden" name="do" value="validateForm">
|
||||
<input type="hidden" name="controller" value="admin">
|
||||
<input type="hidden" name="do" value="showForm">
|
||||
<input type="submit" name="submit" value="Absenden"></form>
|
||||
|
||||
<?php include dirname(__DIR__).'/footer.phtml'; ?>
|
||||
Loading…
x
Reference in New Issue
Block a user