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.

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

React frontend to SDT #235

Open
wants to merge 27 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
c644360
added cors
Apurv428 Jul 9, 2024
189d4cb
minor change
Apurv428 Jul 9, 2024
0e58e0f
minor change
Apurv428 Jul 9, 2024
9c0cc33
updated react frontend
Apurv428 Jul 15, 2024
baf3d3e
Merge pull request #221 from Apurv428/cors
Apurv428 Jul 15, 2024
e481624
connected to API
Apurv428 Jul 16, 2024
d13dced
Merge branch 'react-frontend' of https://github.com/openmainframeproj…
Apurv428 Jul 16, 2024
2a770b1
refactored search results
Apurv428 Jul 23, 2024
eeffa4a
added os list
Apurv428 Jul 23, 2024
a6bb22a
made responsive and enhanced the user experience
Apurv428 Jul 30, 2024
4cfc103
responsive frontend for smaller screens, removed overflow
deveshidwivedi Aug 15, 2024
6185106
refine package based on name/version
deveshidwivedi Aug 15, 2024
56d4b05
dynamic generation of bit flag via api
deveshidwivedi Aug 16, 2024
070f5f0
search results and faqs made responsive
deveshidwivedi Aug 18, 2024
c62a129
minor ui updates
deveshidwivedi Aug 20, 2024
807c340
implemented filter based on distributions
deveshidwivedi Aug 20, 2024
7b1b2f6
fetch all distributions
deveshidwivedi Aug 20, 2024
60113f1
navbar and faq tweaks
deveshidwivedi Aug 20, 2024
8b062aa
Updated to show count of results along with distribution
deveshidwivedi Aug 21, 2024
b23b10c
Merge pull request #231 from deveshidwivedi/ft-filter
rachejazz Aug 21, 2024
d646acc
search functionality for individual distributions
deveshidwivedi Aug 28, 2024
3362d32
Merge branch 'react-frontend' into ft-search
deveshidwivedi Aug 28, 2024
d0bdd08
Merge pull request #232 from deveshidwivedi/ft-search
deveshidwivedi Aug 28, 2024
5b3cc10
updated Navbar.jsx
Apurv428 Aug 29, 2024
1a69601
updates related to search components
deveshidwivedi Aug 30, 2024
eddefca
Merge pull request #233 from deveshidwivedi/ft-count
deveshidwivedi Aug 30, 2024
5b13bd6
added env variable
Apurv428 Aug 31, 2024
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
Prev Previous commit
Next Next commit
search results and faqs made responsive
Signed-off-by: Deveshi Dwivedi <[email protected]>
deveshidwivedi committed Aug 18, 2024

Verified

This commit was signed with the committer’s verified signature.
masci Massimiliano Pippi
commit 070f5f0a3795f728bd50daa521a48b4980ff2fe4
111 changes: 84 additions & 27 deletions react-frontend/src/App.css
Original file line number Diff line number Diff line change
@@ -487,30 +487,91 @@ input:focus {
background-color: #f0f0f0;
}


.search-list-container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1200px;
align-items: center;
flex-wrap: wrap;
gap: 20px;
position: relative;
margin-top: 20px;
overflow-y: auto;
padding: 0 15px;
justify-content: center;
}

.search-list {
display: flex;
flex: 1 1 100%;
padding: 15px;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
max-width: 100%;
width: 100%;
align-items: center;
padding: 25px;
position: relative;
border-bottom-width: 3px;
border-bottom-style: solid;
border-color: #a89f9f;
}

@media (min-width: 600px) {
.search-list {
flex: 1 1 48%;
}
}

@media (min-width: 900px) {
.search-list {
flex: 1 1 31%;
}
}

.version-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
}

.version-tag {
background-color: #e1e1e1;
padding: 5px 10px;
border-radius: 4px;
}

.content {
margin-top: 10px;
}


.pagination-and-scroll-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}

@media (min-width: 640px) {
.pagination-and-scroll-wrapper {
flex-direction: row;
justify-content: space-between;
}

.pagination-wrapper {
text-align: left;
width: auto;
margin-bottom: 0;
}
}

.pagination-wrapper {
width: 100%;
text-align: center;
margin-bottom: 16px;
}

.scroll-to-top {
margin-left: 0;
margin-top: 16px;
}

@media (min-width: 640px) {
.scroll-to-top {
margin-left: 16px;
margin-top: 0;
}
}


.result-name {
color: var(--black);
font-family: var(--font-family-poppins);
@@ -610,7 +671,8 @@ input:focus {
}

.search-results-container {
padding: 5px;
width: 100%;
padding: 20px;
}
.search-list-container {
display: flex;
@@ -711,10 +773,8 @@ input:focus {

.refine-filters-container {
margin-bottom: 20px;
padding: 10px;
background-color: #f8f9fa;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
text-align: center;
}

.refine-filters label {
@@ -724,15 +784,12 @@ input:focus {
color: #333;
}

.refine-filters input[type="text"] {
.refine-filters input {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
max-width: 400px;
padding: 10px;
margin-top: 10px;
box-sizing: border-box;
transition: border-color 0.3s ease;
}

.refine-filters input[type="text"]:focus {
63 changes: 34 additions & 29 deletions react-frontend/src/components/SearchBar.jsx
Original file line number Diff line number Diff line change
@@ -122,32 +122,6 @@ function SearchBar({ onSearchPerformed }) {

return (
<div>
<div className="flex flex-wrap justify-start search-bar-wrapper">
<div className="os-checkbox-container">
<label>
<input
type="checkbox"
checked={selectAll}
onChange={handleSelectAllChange}
className="mr-2"
/>
All
</label>
</div>
{Object.keys(osList).map((os, index) => (
<div key={index} className="os-checkbox-container">
<label>
<input
type="checkbox"
checked={selectedOS[os] || false}
onChange={() => handleOSCheckboxChange(os)}
className="mr-2"
/>
{os}
</label>
</div>
))}
</div>
<div className="search-bar-wrapper">
<div className="omf-logo">
<img className="image-11" src={omfLogo} alt="OMF Logo" />
@@ -180,6 +154,33 @@ function SearchBar({ onSearchPerformed }) {
</div>
</div>

<div className="flex flex-wrap justify-center os-checkbox-wrapper mt-4">
<div className="os-checkbox-container">
<label>
<input
type="checkbox"
checked={selectAll}
onChange={handleSelectAllChange}
className="mr-2"
/>
All
</label>
</div>
{Object.keys(osList).map((os, index) => (
<div key={index} className="os-checkbox-container">
<label>
<input
type="checkbox"
checked={selectedOS[os] || false}
onChange={() => handleOSCheckboxChange(os)}
className="mr-2"
/>
{os}
</label>
</div>
))}
</div>

<div className="flex justify-center mt-2">
<label className="flex items-center">
<input
@@ -191,10 +192,13 @@ function SearchBar({ onSearchPerformed }) {
Search Description
</label>
</div>

<div className="text-center mt-2 font-bold">
Enter the name of the package or at least three characters to enable pattern search. Wildcard ('*') can be used either before or after the search keywords.
</div>

<div className="results-count mt-4">
<div className="results-count text-center sm:text-left">
{searchPerformed ? (
resultsCount > 0 ? (
`${resultsCount} package${resultsCount !== 1 ? 's' : ''} found`
@@ -206,13 +210,13 @@ function SearchBar({ onSearchPerformed }) {
)}
</div>
{resultsCount > 0 && (
<div className="records-per-page mt-2 text-left">
<label>
<div className="records-per-page mt-2 flex justify-center sm:justify-start items-center">
<label className="text-sm">
Records per page:
<select
value={itemsPerPage}
onChange={handleItemsPerPageChange}
className="ml-2"
className="ml-2 p-1 border rounded text-sm"
>
{[5, 10, 20, 30, 40, 50].map((count) => (
<option key={count} value={count}>
@@ -223,6 +227,7 @@ function SearchBar({ onSearchPerformed }) {
</label>
</div>
)}
</div>
<SearchResults results={results} showDesc={searchDescription} itemsPerPage={itemsPerPage} searchPerformed={searchPerformed} />
</div>
);
66 changes: 33 additions & 33 deletions react-frontend/src/components/SearchResults.jsx
Original file line number Diff line number Diff line change
@@ -80,40 +80,40 @@ function SearchResults({ results = [], showDesc, itemsPerPage, searchPerformed }
</div>
))}
</div>

{shouldShowPagination && (
<div className="pagination-and-scroll-wrapper flex justify-between items-center mt-4">
<div className="pagination-wrapper">
<ReactPaginate
previousLabel={'previous'}
nextLabel={'next'}
breakLabel={'...'}
pageCount={Math.ceil(filterResults().length / itemsPerPage)}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
onPageChange={handlePageChange}
containerClassName={'pagination'}
pageClassName={'page-item'}
pageLinkClassName={'page-link'}
previousClassName={'page-item'}
previousLinkClassName={'page-link'}
nextClassName={'page-item'}
nextLinkClassName={'page-link'}
breakClassName={'page-item'}
breakLinkClassName={'page-link'}
activeClassName={'active'}
/>
</div>
<button
onClick={handleScrollToTop}
className="scroll-to-top flex items-center bg-customBlue text-white py-1 px-3 rounded ml-4 hover:bg-blue-700"
style={{ display: 'flex', alignItems: 'center' }}
>
<ArrowUpwardIcon className="mr-1" />
<span>Scroll to Top</span>
</button>
</div>
)}
<div className="pagination-and-scroll-wrapper flex flex-col items-center sm:flex-row sm:justify-between mt-4">
<div className="pagination-wrapper w-full sm:w-auto text-center sm:text-left mb-4 sm:mb-0">
<ReactPaginate
previousLabel={'Previous'}
nextLabel={'Next'}
breakLabel={'...'}
pageCount={Math.ceil(filterResults().length / itemsPerPage)}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
onPageChange={handlePageChange}
containerClassName={'pagination'}
pageClassName={'page-item'}
pageLinkClassName={'page-link'}
previousClassName={'page-item'}
previousLinkClassName={'page-link'}
nextClassName={'page-item'}
nextLinkClassName={'page-link'}
breakClassName={'page-item'}
breakLinkClassName={'page-link'}
activeClassName={'active'}
/>
</div>
<button
onClick={handleScrollToTop}
className="scroll-to-top flex items-center bg-customBlue text-white py-1 px-3 rounded hover:bg-blue-700"
style={{ display: 'flex', alignItems: 'center' }}
>
<ArrowUpwardIcon className="mr-1" />
<span>Scroll to Top</span>
</button>
</div>
)}

</div>
);
}
57 changes: 47 additions & 10 deletions react-frontend/src/screens/Faq/faq.css
Original file line number Diff line number Diff line change
@@ -1,23 +1,45 @@
.main-faq {
width: 85vw;
padding: 50px;
width: 90%;
max-width: 1200px;
padding: 20px;
background-color: rgb(255, 255, 255);
border-radius: 10px;
box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px,
rgba(17, 17, 26, 0.1) 0px 8px 8px;
margin: auto;
}

.faq-heading {
text-align: center;
text-transform: capitalize;
font-size: 32px;
font-size: 2rem;
font-weight: 500;
letter-spacing: 5;
word-spacing: 5px;
letter-spacing: 1px;
margin-bottom: 20px;
color: #2c3148;
}

@media (max-width: 768px) {
.main-faq {
width: 95%;
padding: 15px;
}

.faq-heading {
font-size: 1.5rem;
}
}

@media (max-width: 480px) {
.main-faq {
padding: 10px;
}

.faq-heading {
font-size: 1.25rem,
}
}

.main-heading {
display: flex;
margin-top: 30px;
@@ -33,26 +55,41 @@
word-spacing: 1px;
letter-spacing: 1px;
font-weight: 600;
font-size: 18px;
font-size: 1.125rem;
}

.main-heading p {
cursor: pointer;
border-radius: 50%;
border-radius: 0;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
background: #fff;
padding: 2px;
position: absolute;
}

.answers {
padding: 25px;
font-size: 15px;
padding: 20px;
font-size: 1rem;
word-spacing: 2px;
font-weight: 400;
line-height: 1.7;
background: #fff;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
color: #000;
}
}

@media (max-width: 768px) {
.answers {
padding: 15px;
font-size: 0.875rem;
}
}

@media (max-width: 480px) {
.answers {
padding: 10px;
font-size: 0.75rem;
}
}