Refactor guestboook form style

This commit is contained in:
Helen Chong 2024-05-26 13:07:51 +08:00
parent fd50a564da
commit 467f556cca
2 changed files with 72 additions and 199 deletions

View File

@ -10,15 +10,66 @@
--icon-color: var(--clr-body-txt); --icon-color: var(--clr-body-txt);
} }
.comments-region { .comment-form {
display: flex; border: 0.1rem solid var(--clr-body-txt);
flex-direction: column; width: 100%;
align-items: center; padding: 1em;
gap: 0.8rem; margin: 2em 0;
display: grid;
} }
.comment-article > button, .comment-form-title {
.form-footer input { text-align: center;
margin-bottom: 0.5em;
font-size: 1.25em;
}
.comment-form,
.input-horizontal-wrapper {
gap: 0.7em;
}
.input-horizontal-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%/1, max(10rem, 100%/3)), 1fr));
}
.input-vertical,
.comment-box-container {
display: grid;
gap: 0.2em;
}
.input-vertical input {
width: 100%;
}
.input-vertical input:focus {
outline: 0.15em solid var(--clr-link);
}
.comment-box-container textarea {
resize: vertical;
}
.inline-banner {
padding: 0.4em;
word-break: break-word;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
}
.form-footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
gap: 0.5em;
}
.form-footer input,
.comment-article > button {
cursor: pointer; cursor: pointer;
border: none; border: none;
background: var(--clr-link-btn-bg); background: var(--clr-link-btn-bg);
@ -35,24 +86,8 @@
gap: 0.4em; gap: 0.4em;
} }
.comment-box-container {
margin-top: 0.5em;
margin-left: auto;
margin-right: auto;
width: fit-content;
}
.comment-form-title {
display: flex;
justify-content: center;
margin-bottom: 0.4em;
font-size: 1.25em;
}
.comment-article { .comment-article {
border-left: 2px solid var(--border-color);
padding: 0.5em 0; padding: 0.5em 0;
background-color: var(--content-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -94,163 +129,3 @@
font-size: 1.1em; font-size: 1.1em;
font-weight: bold; font-weight: bold;
} }
.comment-form {
border: 1px solid;
padding: 0.4em;
border-color: var(--general-border-color);
width: 100%;
background-color: var(--content-color);
margin: 2em 0;
}
.comment-form.transparent-form {
border: none;
padding: 0;
width: auto;
background-color: inherit;
}
.transparent-fieldset {
margin: 0;
padding: 0;
border: 0;
}
.comment-form > h1, form > h2, form > h3, form > h4, form > h5, form > h6 {
margin: 0;
text-align: center;
}
.transparent-fieldset > legend {
display: none !important;
}
.form-footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.form-footer > * {
margin: 0.2em;
min-height: 2rem;
}
.input-line > label {
text-align: left;
width: 9.5rem;
min-width: 6rem;
}
.input-line * {
display: inline-block;
}
.input-line {
margin-bottom: 5px;
}
.input-flex {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.input-flex-line {
display: flex;
flex-direction: row;
width: 100%;
justify-content: flex-start;
align-items: center;
margin-bottom: 0.4em;
}
.input-horizontal-flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
row-gap: 4px;
}
.input-horizontal-flex > .input-flex-line, .input-horizontal-flex > .input-vertical-line {
width: auto;
margin-right: 0.8em;
}
.input-vertical {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin-left: 0.4em;
margin-right: 0.4em;
}
.input-vertical input:focus {
outline: 0.15em solid var(--clr-link);
}
.input-vertical-line {
display: flex;
flex-direction: column;
width: 100%;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 0.4em;
}
.input-vertical-line > label, .input-vertical > label {
padding-bottom: 0.1em;
}
.input-grid {
display: grid;
grid-template-columns: minmax(75px, 1fr) minmax(75px, auto);
grid-auto-rows: minmax(25px, auto);
grid-column-gap: 0.4em;
grid-row-gap: 0.1em;
align-items: baseline;
}
.input-grid > .full-line {
grid-column: 1 / -1;
}
.input-line label, .input-flex-line label, .input-vertical-line label, .input-grid label {
cursor: pointer;
}
.input-line > button, .input-flex-line > button, .input-vertical-line > button, .input-grid button {
height: 1.8rem;
}
.input-flex-line > label {
text-align: left;
flex-grow: 1;
padding-right: 0.6em;
}
.inline-banner-wrapper {
display: flex;
}
.inline-banner-wrapper > .inline-banner {
width: 100%;
}
.inline-banner {
margin: 0.4em;
border: 1px solid var(-border-color);
background-color: var(--banner-color);
color: var(--text-color);
padding: 0.4em;
word-break: break-word;
display: flex;
align-items: center;
justify-content: center;
gap: 0.3em;
}

View File

@ -74,8 +74,8 @@ registerNamespace("GW.Controls", function (ns)
class="comment-form" class="comment-form"
autocomplete="off" autocomplete="off"
> >
<span id="${this.idKey}-title" class="comment-form-title">${this.titleText}</span> <h2 id="${this.idKey}-title" class="comment-form-title">${this.titleText}</h2>
<div class="input-horizontal-flex"> <div class="input-horizontal-wrapper">
<div class="input-vertical"> <div class="input-vertical">
<label for="${this.idKey}-dispName"> <label for="${this.idKey}-dispName">
Display name<span aria-hidden="true">*</span> Display name<span aria-hidden="true">*</span>
@ -97,22 +97,20 @@ registerNamespace("GW.Controls", function (ns)
</div> </div>
</div> </div>
<div class="comment-box-container"> <div class="comment-box-container">
<div class="input-vertical"> <label for="${this.idKey}-comment">
<label for="${this.idKey}-comment"> Comment<span aria-hidden="true">*</span>
Comment<span aria-hidden="true">*</span> <span class="visually-hidden">(Required)</span>
<span class="visually-hidden">(Required)</span> </label>
</label> <textarea id="${this.idKey}-comment"
<textarea id="${this.idKey}-comment" minlength="1"
minlength="1" maxlength="4000"
maxlength="4000" required="true"
required="true" rows="5"
rows="5" ></textarea>
></textarea>
</div>
</div> </div>
<div id="${this.idKey}-banner" class="inline-banner"> <div id="${this.idKey}-banner" class="inline-banner">
<gw-icon iconKey="circle-info" title="info"></gw-icon> <gw-icon iconKey="circle-info" alt="info"></gw-icon>
<span>Comments are manually approved</span> <p>Comments are manually approved</p>
</div> </div>
<div class="form-footer"> <div class="form-footer">
<input id="${this.idKey}-reset" type="reset" value="Reset"> <input id="${this.idKey}-reset" type="reset" value="Reset">