Styling improvements because Sophia complained :D
All checks were successful
Jenkins Production Deployment

This commit is contained in:
Patrick Müller 2023-08-22 18:29:08 +02:00
parent b1f8667705
commit 543bb182b9
Signed by: Paddy
GPG Key ID: 37ABC11275CAABCE
5 changed files with 216 additions and 8 deletions

View File

@ -1,7 +1,3 @@
table, th, td {
border: .05em solid black;
}
p.has-error { p.has-error {
color: red; color: red;
} }
@ -9,4 +5,63 @@ p.has-error {
td.has-error { td.has-error {
border-color: red; border-color: red;
border-width: 2px; border-width: 2px;
margin-top: 5px;
font-size: 14px;
background-color: lightcoral;
}
/* Styling for individual event lines */
tr.app-event {
border: 1px solid black;
}
/* Styling for input fields */
input[type="text"],
input[type="date"],
input[type="time"],
select {
width: 100%;
padding: 6px;
box-sizing: border-box;
}
/* Styling for disabled input fields */
input:disabled {
background-color: #f5f5f5;
}
/* Styling for Save and Delete buttons */
button {
padding: 8px 12px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
margin-right: 5px;
}
button:hover {
background-color: #0056b3;
}
/* Adjust spacing for input and button elements */
td > input,
td > select,
td > button {
margin-top: 5px;
}
/* Styling for checkbox */
td input[type="checkbox"] {
margin: 0;
}
/* Center align text in table cells */
td {
text-align: center;
}
/* Styling for readonly input fields */
td[readonly] {
background-color: #f5f5f5;
} }

View File

@ -22,7 +22,7 @@
<td> <td>
<input type="text" [(ngModel)]="event!.location"> <input type="text" [(ngModel)]="event!.location">
</td> </td>
<td class="{{requiredFieldsMissing? 'has-error' : ''}}"> <td>
{{event?.createdBy}} {{event?.createdBy}}
</td> </td>
<td class="{{invalidUrlError? 'has-error' : ''}}"> <td class="{{invalidUrlError? 'has-error' : ''}}">

View File

@ -1,3 +1,51 @@
table, th, td { /* Styling for the whole table */
border: .05em solid black; table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
font-family: Arial, sans-serif;
} }
/* Styling for table header cells */
th {
background-color: #f2f2f2;
font-weight: bold;
text-align: left;
padding: 8px;
border: 1px solid #ddd;
}
/* Styling for table data cells */
td {
padding: 8px;
border: 1px solid #ddd;
}
/* Add some hover effect to rows */
tr:hover {
background-color: #f5f5f5;
}
/* Styling for the "Add Event" button */
button {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
margin-top: 10px;
}
button:hover {
background-color: #0056b3;
}
/* Styling for individual event lines */
tr:nth-child(odd) {
background-color: #f2f2f2; /* Light gray for odd rows */
}
tr:nth-child(even) {
background-color: #ffffff; /* White for even rows */
}

View File

@ -0,0 +1,105 @@
/* Styling for buttons */
button {
padding: 8px 12px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
margin-right: 5px;
}
button:hover {
background-color: #0056b3;
}
/* Styling for dropdowns */
select {
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
}
/* Styling for spans */
span {
margin-right: 5px;
}
/* Styling for the container of the buttons and dropdowns */
.buttons-container {
margin-bottom: 20px;
display: flex;
align-items: center;
}
/* Add some spacing between buttons and dropdowns */
.buttons-container > * {
margin-right: 10px;
}
/* Login form */
/* Styling for form container */
.form-container {
background-color: #f5f5f5;
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
margin: 0 auto; /* Center the form horizontally */
width: 50%; /* Set the width to 50% */
box-sizing: border-box;
}
/* Styling for form labels */
label {
display: block;
margin-top: 10px;
}
/* Styling for form inputs */
input[type="text"],
input[type="password"] {
width: 100%;
padding: 8px;
margin-top: 6px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
/* Styling for form buttons */
button {
padding: 8px 12px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
margin-top: 10px;
}
button:hover {
background-color: #0056b3;
}
/* Styling for password policy message */
p.password-policy {
color: #dc3545;
font-size: 14px;
margin-top: 5px;
}
/* Styling for passwords mismatch message */
p.password-mismatch {
color: #dc3545;
font-size: 14px;
margin-top: 5px;
}
/* Add some spacing between form elements */
.form-container > * {
margin-bottom: 10px;
}

View File

@ -1,4 +1,4 @@
<div *ngIf="!isLoggedIn"> <div *ngIf="!isLoggedIn" class="form-container">
<p>Please log in:</p> <p>Please log in:</p>
<label for="email">Your @nachklang.art email: </label> <label for="email">Your @nachklang.art email: </label>
<input id="email" type="text" aria-label="Your Email" [(ngModel)]="email"><br> <input id="email" type="text" aria-label="Your Email" [(ngModel)]="email"><br>