make all pages responsiv

Made endpage, anmeldepage and regisitrierung responsive (prefer moblie view)
This commit is contained in:
Manuel Prodinger
2022-05-20 17:31:03 +02:00
parent 4d4ab2e08c
commit d804182fae
4 changed files with 47 additions and 35 deletions
+23 -19
View File
@@ -6,11 +6,8 @@ import bild from "../pizza_logo_dark.png";
function Registrierung(props) {
return (
<div class="sm: m-5">
<div class="sm: grid grid-cols-5 items-center">
<img
class="sm:w-60 h-45 p-5 grid col-span-3 col-start-2 place-content-center"
src={props.bild || bild}
alt="Logo"></img>
<div class="flex justify-center">
<img class="w-60 h-45" src={props.bild || bild} alt="Logo"></img>
</div>
<br></br>
@@ -18,38 +15,45 @@ function Registrierung(props) {
<label class="font-medium leading-tight text-3xl mt-0 mb-2">Registrieren</label>
<br></br>
<br></br>
<div class="grid grid-cols-2 grid-rows-2 justify-items-start p-0 gap-x-1 gap-y-0 h-10">
<label class="col-start-1 col-end-1 row-start-1 row-end-1">Vorname:</label>
<label class="col-start-2 col-end-2 row-start-1 row-end-1">Passwort:</label>
<div class="grid grid-cols-2 grid-rows-2 p-0 gap-x-1 gap-y-0 h-10 md:ml-80 md:pl-20 md:mr-80 md:pr:20">
<label class="sm: col-start-1 col-end-1 row-start-1 row-end-1">Vorname:</label>
<label class="sm: col-start-2 col-end-2 row-start-1 row-end-1">Nachname:</label>
<Eingabefeld
isPassword={false}
placeholder="Mail"
class="col-start-1 col-end-1 row-start-2 row-end-2"></Eingabefeld>
placeholder="Vorname"
class="sm: col-start-1 col-end-1 row-start-2 row-end-2"></Eingabefeld>
<Eingabefeld
isPassword={true}
placeholder="Passwort"
isPassword={false}
placeholder="Nachname"
class="col-start-2 col-end-2 row-start-2 row-end-2"></Eingabefeld>
</div>
<br></br>
<br></br>
<div class="pt-2">
<label class="absolute left-2">E-Mail:</label>
<br></br>
<div class="md:flex justify-center sm:w-full">
<label class="">E-Mail:</label>
</div>
<div className="md:flex justify-center sm:w-full">
<Eingabefeld isPassword={false} placeholder="Mail"></Eingabefeld>
</div>
<div class="pt-2">
<label class="absolute left-2">Passwort:</label>
<div class="md:flex justify-center sm:w-full">
<label class="">Passwort:</label>
</div>
<div class="md:flex justify-center sm:w-full">
<Eingabefeld isPassword={true} placeholder="Passwort"></Eingabefeld>
</div>
<div class="pt-2">
<label class="absolute left-2">Passwort erneut:</label>
<div class="md:flex justify-center sm:w-full">
<label class="">Passwort erneut:</label>
</div>
<div className="md:flex justify-center sm:w-full">
<Eingabefeld isPassword={false} placeholder="Passwort erneut"></Eingabefeld>
</div>
<br></br>
<br></br>
<div class="sm: flex justify-between">
<div class="sm: flex justify-between md:justify-center">
<ButtonPrimary name="Registieren"></ButtonPrimary>
<ButtonPrimary name="Anmelden"></ButtonPrimary>
</div>