Skip to content

Commit

Permalink
Merge pull request #636 from NBISweden/fix/shrink-footer
Browse files Browse the repository at this point in the history 
Shrink footer section desktop & mobile
  • Loading branch information
@KattisLej
KattisLej authored Sep 12, 2022
2 parents d2701a4 + 2606cf4 commit 582137d
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 121 deletions.
115 changes: 57 additions & 58 deletions frontend/src/components/QuickAdd.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ export const QuickAdd = ({
};

const getSearchClasses = () => {
let classes = "col-3 footer-field ";
let classes = "quick-add-input ";
if (search.text != "") classes += issue ? "valid" : "invalid";
return classes;
};
Expand Down Expand Up @@ -242,70 +242,69 @@ export const QuickAdd = ({
};

return (
<div>
<h2> Add a new row</h2>
<div className="row">
<label htmlFor="input-issue" className="col-3 input-label hidden">
Issue (e.g. 3499) / free text
</label>
<label htmlFor="select-activity" className="col-3 select-label hidden">
Select activity
</label>
</div>
<div className="row">
<input
id="input-issue"
aria-keyshortcuts="ctrl+a"
ref={issueInputRef}
autoComplete="off"
className={getSearchClasses()}
type="text"
onKeyUp={(ev) => {
handleInputToAutocompleteFocus(ev);
}}
min={0}
onChange={(e) => {
setSearch({ ...search, text: e.target.value });
setIssue(null);
}}
title={(issue && issue.subject) || ""}
/>
<img
className={
search.text === "" ? "validation-icon hiden" : "validation-icon"
}
src={getValidationIconSrc()}
alt="Validity"
aria-label="Indicator for validity of issue number - x for not valid, check for valid."
/>
<select
className="col-3 footer-field"
name="activity"
id="select-activity"
onChange={handleSetActivity}
style={{ width: "50%" }}
>
{activities &&
activities.map((activity) => {
return (
<option value={activity.id} key={activity.id}>
{activity.name}
</option>
);
})}
</select>
<button className="col-3 basic-button plus-button" onClick={handleAdd}>
<img src={plus} alt="Add line" />
</button>
<div className="quick-add-wrapper">
<div className="quick-add">
<div className="quick-add-input-wrapper">
<label htmlFor="input-issue">Search issue</label>
<input
id="input-issue"
placeholder="3499, analysis, ..."
aria-keyshortcuts="ctrl+a"
ref={issueInputRef}
autoComplete="off"
className={getSearchClasses()}
type="text"
onKeyUp={(ev) => {
handleInputToAutocompleteFocus(ev);
}}
min={0}
onChange={(e) => {
setSearch({ ...search, text: e.target.value });
setIssue(null);
}}
title={(issue && issue.subject) || ""}
/>
<img
className={
search.text === "" ? "validation-icon hidden" : "validation-icon"
}
src={getValidationIconSrc()}
alt="Validity"
aria-label="Indicator for validity of issue number - x for not valid, check for valid."
/>
</div>
<div className="quick-add-input-wrapper">
<label htmlFor="select-activity">Select activity</label>
<select
className="quick-add-input"
name="activity"
id="select-activity"
onChange={handleSetActivity}
>
{activities &&
activities.map((activity) => {
return (
<option value={activity.id} key={activity.id}>
{activity.name}
</option>
);
})}
</select>
</div>
<div className="quick-add-input-wrapper">
<button className="basic-button add-button" onClick={handleAdd}>
Add row
</button>
</div>
</div>
{search.suggestions.length > 0 && isAutoCompleteVisible && (
<ul
id="suggestions-ul"
className="col-8 autocomplete-container"
className="autocomplete-container"
ref={suggestionsRef}
>
{search.suggestions.map((item, index) => (
<li key={item.id} className="autocomplete-item">
<li key={item.id}>
<button
id={"suggestion-btn-" + index.toString()}
onKeyUp={(ev) => {
Expand Down
122 changes: 73 additions & 49 deletions frontend/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,20 +179,6 @@ Other button classes are defined further down together with other classes for th
}
}

.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 @@ -362,7 +348,7 @@ Other button classes are defined further down together with other classes for th

.footer-container {
margin-top: 0.2rem;
padding: 0.5rem 1rem;
padding: 1rem;
background-color: hsl(0deg 0% 97%);
display: flex;
}
Expand Down Expand Up @@ -438,30 +424,30 @@ Other button classes are defined further down together with other classes for th
}

.save-button {
margin: 1rem 2rem 2rem;
min-width: 10rem;
padding: 1rem 1.5rem;
}

.save-changes {
display: flex;
flex-direction: column;
align-items: end;
justify-content: end;
text-align: end;
width: 25%;
margin-left: 2rem;
}

.plus-button {
width: 4.5rem;
.add-button {
background-color: hsl(288deg 46% 22%);
margin-left: 1rem;
padding: 0 1rem;
height: 2rem;
min-width: 6rem;
}

.plus-button:hover {
.add-button:hover {
background-color: hsl(276deg 46% 16%);
}

.plus-button img {
width: 1.8rem;
}

.star-icon {
width: 1.7rem;
}
Expand Down Expand Up @@ -497,32 +483,45 @@ Other button classes are defined further down together with other classes for th
height: 2rem;
}

.quick-add-wrapper {
width: 75%;
}

.quick-add {
align-items: flex-end;
display: flex;
height: 100%;
}

.quick-add-input {
padding: 0.5rem 0.75rem;
margin: 0 0 0 3.75rem;
width: 100%;
height: 2rem;
}

.quick-add label {
color: hsl(276deg 46% 16%);
}

.quick-add-input-wrapper {
position: relative;
width: 33%;
padding-right: 0.5rem;
}

.autocomplete-container {
max-height: 10rem;
margin-left: -3.2em;
margin-top: 0.6em;
padding: 0;
list-style-type: none;
overflow-y: auto;
z-index: 1;
}

.autocomplete-item {
padding: 0 0 0 24px;
width: 100%;
box-sizing: border-box;
width: 66%;
}

.autocomplete-button {
background-color: white;
width: 100%;
text-align: left;
border: none;
padding: 0.5rem 1rem;
padding: 0.5rem;
}

.autocomplete-button:focus {
Expand All @@ -535,6 +534,36 @@ Other button classes are defined further down together with other classes for th
outline: none;
}

@media (max-width: 700px) {
.footer-container,
.quick-add {
flex-direction: column;
align-items: flex-start;
width: 100%;
}

.quick-add-wrapper {
width: 100%;
}

.quick-add-input-wrapper {
width: 100%;
}

.save-changes {
margin-left: 0;
width: 100%;
}

.add-button {
margin: 0.5rem 0 1rem;
}

.autocomplete-container {
width: 100%;
}
}

.invalid {
border: 2px solid hsl(17deg 91% 31%);
}
Expand All @@ -544,20 +573,21 @@ Other button classes are defined further down together with other classes for th
}

.validation-icon {
width: 3.5rem;
margin-left: -3.8rem;
position: absolute;
height: 2rem;
right: 1rem;
}

.hiden {
.hidden {
visibility: hidden;
}

/* The unsaved changes alert message box */
.unsaved-alert-p {
.unsaved-alert {
color: hsl(26deg 91% 42%); /* Red */
margin-right: 2rem;
text-align: right;
min-height: 2rem;
margin: 0;
white-space: nowrap;
}

.comment-container {
Expand Down Expand Up @@ -778,12 +808,6 @@ 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%);
}
Expand Down
26 changes: 12 additions & 14 deletions frontend/src/pages/Report.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -835,23 +835,21 @@ export const Report = () => {
</main>
<div className="footer">
<section className="footer-container">
<div className="col-8">
<QuickAdd
addIssueActivity={addIssueActivityHandler}
toastList={toastList}
onToastListUpdate={handleToastListUpdate}
issueInputRef={issueInputRef}
></QuickAdd>
</div>
<QuickAdd
addIssueActivity={addIssueActivityHandler}
toastList={toastList}
onToastListUpdate={handleToastListUpdate}
issueInputRef={issueInputRef}
></QuickAdd>
{toastList.length > 0 && (
<Toast onCloseToast={handleCloseToast} toastList={toastList} />
)}
<div className="col-4 save-changes">
<div className="unsaved-alert-p">
{showUnsavedWarning && (
<p role="status">⚠ You have unsaved changes</p>
)}
</div>
<div className="save-changes">
{showUnsavedWarning && (
<p role="status" className="unsaved-alert">
⚠ You have unsaved changes
</p>
)}
<button
className="basic-button save-button"
aria-keyshortcuts="ctrl+s"
Expand Down

0 comments on commit 582137d

Please sign in to comment.