Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#333: Replaced placeholder with label according to accessibility guid… #455

Merged
16 commits merged into from
May 24, 2022
Merged

#333: Replaced placeholder with label according to accessibility guid… #455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
23a46ca
#333: Replaced placeholder with label according to accessibility guid…
KattisLej May 17, 2022
8573b2c
#333: Correcting aria label according to accessibility guidelines
KattisLej May 18, 2022
b452987
#333: Correcting from code review
KattisLej May 18, 2022
0454957
#333: Adding a label for activity according to review
KattisLej May 18, 2022
c078ed3
#333: Merged develop and fixed conflict
KattisLej May 19, 2022
032b02c
#333: Merged develop and fixed conflicts in Report
KattisLej May 20, 2022
55cb401
#333: Adjustments in the whole footer in order to make elements visib…
KattisLej May 20, 2022
4719282
#333: Finaladjustment of unsaved changes text
KattisLej May 20, 2022
1b0cf56
#333: Merged develop and fixed conflicts in index css
KattisLej May 20, 2022
48f67d1
#333: Lint checks fixes
KattisLej May 20, 2022
b600a0f
#333: Lint checks fixes
KattisLej May 20, 2022
2103bf5
#333: Lint checks end of source newline
KattisLej May 20, 2022
49434ce
#333: More space between heading and labels
KattisLej May 23, 2022
7978eed
#333: Spacing fixes and css classes, fixing bug of not seing total row
KattisLej May 23, 2022
68a7257
#333: Fix index conflict and merge develop
KattisLej May 23, 2022
eef9829
#333: Linter fix
KattisLej May 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 19 additions & 7 deletions frontend/src/components/QuickAdd.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export const QuickAdd = ({
};

const getSearchClasses = () => {
let classes = "col-2 quick-add-input ";
let classes = "col-3 footer-field";
if (search != "") classes += issue ? "valid" : "invalid";
return classes;
};
Expand All @@ -107,10 +107,21 @@ export const QuickAdd = ({
};

return (
<div className="row">
<div>
<h2> Add a new row</h2>
<div className="row">
<label htmlFor="input-issue"
className="col-3 input-label hidden">
Issue e.g. 3499
</label>
<label
htmlFor="select-activity"
className="col-3 select-label hidden"
>Select activity
</label>
</div>
<div className="row">
<input
aria-labelledby="input-issue"
id="input-issue"
className={getSearchClasses()}
type="number"
Expand All @@ -119,7 +130,7 @@ export const QuickAdd = ({
setSearch(e.target.value);
setIssue(null);
}}
placeholder="Type issue number..."
placeholder="e.g. 3499"
title={(issue && issue.subject) || ""}
/>
<img
Expand All @@ -129,8 +140,7 @@ export const QuickAdd = ({
aria-label="Indicator for validity of issue number - x for not valid, check for valid."
/>
<select
aria-label="Activity"
className="col-3"
className="col-3 footer-field"
name="activity"
id="select-activity"
onChange={handleSetActivity}
Expand All @@ -145,9 +155,11 @@ export const QuickAdd = ({
);
})}
</select>
<button className=" basic-button plus-button" onClick={handleAdd}>
<button className="col-3 basic-button plus-button" onClick={handleAdd}>
<img src={plus} alt="Add line" />
</button>
</div>

</div>
);
};
37 changes: 26 additions & 11 deletions frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,17 +138,31 @@ Other button classes are defined further down together with other classes for th

.spreadsheet {
min-height: 100vh;
margin-bottom: 5rem;
}

.footer {
z-index: 100;
width: 100%;
top: calc(100vh - 120px);
bottom: 0;
position: fixed;
height: 120px;
background-color: white;
}

.input-label {
margin-left: 0.4rem;
margin-top: 0.5rem;
}

.select-label {
margin-left: 0.75rem;
margin-top: 0.5rem;
}

.footer-field {
margin-left: 1rem;
}

.header-year {
font-size: 2.25rem;
color: hsl(186deg 92% 11%);
Expand Down Expand Up @@ -351,7 +365,7 @@ Other button classes are defined further down together with other classes for th
}

.save-button {
margin: 2rem;
margin: 1rem 2rem 2rem;
min-width: 10rem;
padding: 1rem 1.5rem;
}
Expand Down Expand Up @@ -405,12 +419,6 @@ Other button classes are defined further down together with other classes for th
height: 2rem;
}

.quick-add-input {
padding: 0.5rem 0.75rem;
margin: 0 0 0 3.75rem;
outline: none;
}

.not-outline {
outline: none;
}
Expand All @@ -425,7 +433,7 @@ Other button classes are defined further down together with other classes for th

.validation-icon {
width: 3.5rem;
margin-left: -2.8rem;
margin-left: -3.8rem;
}

.hiden {
Expand All @@ -435,8 +443,9 @@ Other button classes are defined further down together with other classes for th
/* The unsaved changes alert message box */
.unsaved-alert-p {
color: hsl(26deg 91% 42%); /* Red */
margin: 3rem 1rem 2rem;
margin-right: 2rem;
text-align: right;
min-height: 2rem;
}

.comment-container {
Expand Down Expand Up @@ -636,6 +645,12 @@ Other button classes are defined further down together with other classes for th
width: 0.7rem;
}

@media (max-width: 992px) {
.hidden {
visibility: hidden;
}
}

.row-focused {
background-color: hsl(186deg 30% 94%);
}
18 changes: 9 additions & 9 deletions frontend/src/pages/Report.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -714,20 +714,20 @@ export const Report = () => {
</main>
<div className="footer">
<section className="footer-container">
<div className="col-7">
<div className="col-8">
<QuickAdd addIssueActivity={addIssueActivityHandler}></QuickAdd>
</div>
<div className="col-3 ">
{toastList.length > 0 && (
<Toast onCloseToast={handleCloseToast} toastList={toastList} />
)}
<div className="col-4 save-changes">
<div className="unsaved-alert-p">
{showUnsavedWarning && (
<div className="unsaved-alert-p">

<p role="status">⚠ You have unsaved changes</p>
</div>

)}
{toastList.length > 0 && (
<Toast onCloseToast={handleCloseToast} toastList={toastList} />
)}
</div>
<div className="col-2 save-changes">
</div>
<button className="basic-button save-button" onClick={handleSave}>
Save changes
</button>
Expand Down