Implemented Article Page Image Banner #13
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dannypeeps
reviewed
Nov 24, 2023
There was a problem hiding this comment.
I like the fact that you used fluid image handling as that ensures the correct scaling and the use of 'alt-text' that you used is good and so it allows screen readers the chance to describe the image. I would ensure testing across different browsers in the future so that you can make sure that it properly works with all of those.
Darren52BT
added a commit
that referenced
this pull request
Mar 10, 2024
* start frontend repo * basic server and api * packeges * global header (search functionality pending) * implementing fetch implementing fetch after search bar button is clicked, response is wacky because of "no-cors", looking into enabling cors * added cors middleware for server, implement query string for title * Update header * commit again * m * merge with new server update and fetch function * fixing commit * random notes * reformat * fix conflict * search bar design complete (rendering article searh page pending) * fetch works with searchbar * finished user api as well as part of articles api * PR: Implemented Search Bar on Global Header (#3) * global header (search functionality pending) * search bar + useState Hook implemented * #8: Implemented basic article summary, article results, and routing * global header (search functionality pending) * implementing fetch implementing fetch after search bar button is clicked, response is wacky because of "no-cors", looking into enabling cors * added cors middleware for server, implement query string for title * Update header * commit again * m * merge with new server update and fetch function * fixing commit * random notes * reformat * fix conflict * search bar design complete (rendering article searh page pending) * fetch works with searchbar * search bar + useState Hook implemented * add DescriptionBox.js * working on routing and creating two pages (article search results and artive view pages) * search bar and article list working * search result * linked description box now brings to url based on id * fixed error displaying article list page * fixed issue with displaying article list page * change title query to title that contains string * fetching single article data from article list * moved code to articleview.js * removed mdbreact * adapted to not use mdbreact col --------- Co-authored-by: davidgit3000 <[email protected]> Co-authored-by: CerealAaa <[email protected]> Co-authored-by: Patrick Nguyen <[email protected]> Co-authored-by: jdang9191 <[email protected]> * #9: Implemented Article Section Header Component * #10: implemented Article BodySection component * implemented BodySection component, fixed header-marker from disappearing at smaller screen widths * refactored body content into a separate component and used body content component with header component to create section body component * #11: Implemented Topic List component * create topic list component * fixed conflicts * #12: Implemented Article Header * implemented BodySection component, fixed header-marker from disappearing at smaller screen widths * refactored body content into a separate component and used body content component with header component to create section body component * completed basic structure and font sizes * adapted article components to not use container * added key to topic list * #13: Implemented Article Page Image Banner * finished image banner * merged dev * finished image banner * fix merge * #14: Implements Table of Contents Component * implemented BodySection component, fixed header-marker from disappearing at smaller screen widths * refactored body content into a separate component and used body content component with header component to create section body component * completed basic structure and font sizes * adapted article components to not use container * added key to topic list * implemented styling for table of contents * * finished image banner * merged dev * finished image banner * fix merge * refactored body content into a separate component and used body content component with header component to create section body component * completed basic structure and font sizes * adapted article components to not use container * implemented styling for table of contents * completed merge, removed redundant scss * #15: Implemented Article Related Topics Component * implemented BodySection component, fixed header-marker from disappearing at smaller screen widths * refactored body content into a separate component and used body content component with header component to create section body component * completed basic structure and font sizes * adapted article components to not use container * added key to topic list * finished related topics component * #16: Implemented Article Page component and in Article View * created article page * removed temp article example route * made related topics list stick to top as scrolling down * added bcrpyt to hash passwords * added login post request to see if password matched with hashed password * added firebase commands * Create a Signin Card component with custom stylings (#18) * Create a Signin Card component with custom stylings * update error validation and add Signup Card component, add breakpoints for each card * modify the error validation functions, handleSubmit(), and add a state hook for all error messages * add auth.js containing authentication objects for future addition and modification (used for Signin and Signup components): * add client authenticaton to all fields in Signup * add custom.css and custom.css.map * started refactoring to use form feedback * modify client authentiation (not using Alerts component) - provide feedback instead - add show/hide password - add email validation using Regex * merge changes back to dl-signin --------- Co-authored-by: Darren52BT <[email protected]> * #!9: Constructed Signin/Signup Pages * created logo component and signin/signup pages * refactored logo to use more bootstrap classes * #16: Refactored Routes to use Outlet * #22: Migrated Frontend to Vite * finished vite migration and restructured scss * removed redundant css * path corrections * fixed paths * create jwt token * added Footer, changed the route for Signin and Signup in App.jsx, and change the view height of Signed Pages * position the Footer to the bottom of the page * added Footer, changed the route for Signin and Signup in App.jsx, and… (#24) * added Footer, changed the route for Signin and Signup in App.jsx, and change the view height of Signed Pages * position the Footer to the bottom of the page * login returns token * Add files via upload * Update index.js * Update queries.js * created Profile Setting component * add scss file for ProfileEdit, validation, and some small functionalities * add rounded corner to the InputGroup * add logo links for the Footer * modified the styling of ProfileEdit, added a SCSS file for resuable Settings styling pages, and created a Modal for Password Change * fixed the bug of password toggle icon and added validation for Password Change Modal * add navbar link, construct the profile setting page, and correct the typo in the DescriptionBox in the Home page * quick fix to not returning right page * cleaning up merge * pt 2 * wrap auth context around frontend application * create hook to handle signup fetch * #29: Implemented User Settings Customizations Form * created customizations form inputs and layout * added typehead implementation, started scss override * styled dropdown menu, fixed save/cancel changes * added color for no matches found text * removed redundant test code * fix the navbar underline color, enable navigation between each nav link * add CustomizationsEdit to the 'Customiztions' nav link * finish auth, local storage of user, and example of how to access user * #30: Implemented Saved Articles form section for the settings * created saved articles form with modal * added cancel button functionality * Create requireAuth.js * a * added middleware file which makes sure user is authenticated before users can edit/add files * created authorize article middlware that is supposed to check if if user has authorized permissions for certain api routes * railway implemented * gitignore * gitignore * gitignore update * #31: Added new palette colors as scss variables * added new theme colors * fixed colors, added comments * redesigned the header based on Figma * changed the spacing between left and right sections in larger viewport (1440px+) -> make them closer on larger screen * new middleware that makes sure only author can delete article they made * add theme toggler * #33: Implemented footer and added fonts * completed footer and added fonts * edited font name * created the web title and added the main article for the Home page * fixed the main article stylings, added parameters for MainArticle, modified the layout of AppTitle * changed the link of 'My Profile' on the user menu * #35: finished sign pages redesign * finished sign pages * added theme toggle listener that responds to changing prefers-color-mode, fixed colors changing across themes * fixed create one link * fixed scss import links * added color modes for AppTitle, MainArticle, and Header * #36: implemented settings redesign * completed basic background/input bg redesign * completed settings redesign * fixed arrow marker class names * #37: implemented article page redesign * reused settings arrow marker for all arrow markers * finished article redesign * made some adjustments to settings * Revert "made some adjustments to settings" This reverts commit 0ee758a. * new articles format * #38: Added fixes to Settings Page --------- Co-authored-by: CerealAaa <[email protected]> Co-authored-by: davidgit3000 <[email protected]> Co-authored-by: Patrick Nguyen <[email protected]> Co-authored-by: jdang9191 <[email protected]> Co-authored-by: David <[email protected]> Co-authored-by: ryagatep <[email protected]>
Darren52BT
added a commit
that referenced
this pull request
Aug 8, 2025
* start frontend repo * basic server and api * packeges * global header (search functionality pending) * implementing fetch implementing fetch after search bar button is clicked, response is wacky because of "no-cors", looking into enabling cors * added cors middleware for server, implement query string for title * Update header * commit again * m * merge with new server update and fetch function * fixing commit * random notes * reformat * fix conflict * search bar design complete (rendering article searh page pending) * fetch works with searchbar * finished user api as well as part of articles api * PR: Implemented Search Bar on Global Header (#3) * global header (search functionality pending) * search bar + useState Hook implemented * #8: Implemented basic article summary, article results, and routing * global header (search functionality pending) * implementing fetch implementing fetch after search bar button is clicked, response is wacky because of "no-cors", looking into enabling cors * added cors middleware for server, implement query string for title * Update header * commit again * m * merge with new server update and fetch function * fixing commit * random notes * reformat * fix conflict * search bar design complete (rendering article searh page pending) * fetch works with searchbar * search bar + useState Hook implemented * add DescriptionBox.js * working on routing and creating two pages (article search results and artive view pages) * search bar and article list working * search result * linked description box now brings to url based on id * fixed error displaying article list page * fixed issue with displaying article list page * change title query to title that contains string * fetching single article data from article list * moved code to articleview.js * removed mdbreact * adapted to not use mdbreact col --------- Co-authored-by: davidgit3000 <[email protected]> Co-authored-by: CerealAaa <[email protected]> Co-authored-by: Patrick Nguyen <[email protected]> Co-authored-by: jdang9191 <[email protected]> * #9: Implemented Article Section Header Component * #10: implemented Article BodySection component * implemented BodySection component, fixed header-marker from disappearing at smaller screen widths * refactored body content into a separate component and used body content component with header component to create section body component * #11: Implemented Topic List component * create topic list component * fixed conflicts * #12: Implemented Article Header * implemented BodySection component, fixed header-marker from disappearing at smaller screen widths * refactored body content into a separate component and used body content component with header component to create section body component * completed basic structure and font sizes * adapted article components to not use container * added key to topic list * #13: Implemented Article Page Image Banner * finished image banner * merged dev * finished image banner * fix merge * #14: Implements Table of Contents Component * implemented BodySection component, fixed header-marker from disappearing at smaller screen widths * refactored body content into a separate component and used body content component with header component to create section body component * completed basic structure and font sizes * adapted article components to not use container * added key to topic list * implemented styling for table of contents * * finished image banner * merged dev * finished image banner * fix merge * refactored body content into a separate component and used body content component with header component to create section body component * completed basic structure and font sizes * adapted article components to not use container * implemented styling for table of contents * completed merge, removed redundant scss * #15: Implemented Article Related Topics Component * implemented BodySection component, fixed header-marker from disappearing at smaller screen widths * refactored body content into a separate component and used body content component with header component to create section body component * completed basic structure and font sizes * adapted article components to not use container * added key to topic list * finished related topics component * #16: Implemented Article Page component and in Article View * created article page * removed temp article example route * made related topics list stick to top as scrolling down * added bcrpyt to hash passwords * added login post request to see if password matched with hashed password * added firebase commands * Create a Signin Card component with custom stylings (#18) * Create a Signin Card component with custom stylings * update error validation and add Signup Card component, add breakpoints for each card * modify the error validation functions, handleSubmit(), and add a state hook for all error messages * add auth.js containing authentication objects for future addition and modification (used for Signin and Signup components): * add client authenticaton to all fields in Signup * add custom.css and custom.css.map * started refactoring to use form feedback * modify client authentiation (not using Alerts component) - provide feedback instead - add show/hide password - add email validation using Regex * merge changes back to dl-signin --------- Co-authored-by: Darren52BT <[email protected]> * #!9: Constructed Signin/Signup Pages * created logo component and signin/signup pages * refactored logo to use more bootstrap classes * #16: Refactored Routes to use Outlet * #22: Migrated Frontend to Vite * finished vite migration and restructured scss * removed redundant css * path corrections * fixed paths * create jwt token * added Footer, changed the route for Signin and Signup in App.jsx, and change the view height of Signed Pages * position the Footer to the bottom of the page * added Footer, changed the route for Signin and Signup in App.jsx, and… (#24) * added Footer, changed the route for Signin and Signup in App.jsx, and change the view height of Signed Pages * position the Footer to the bottom of the page * login returns token * Add files via upload * Update index.js * Update queries.js * created Profile Setting component * add scss file for ProfileEdit, validation, and some small functionalities * add rounded corner to the InputGroup * add logo links for the Footer * modified the styling of ProfileEdit, added a SCSS file for resuable Settings styling pages, and created a Modal for Password Change * fixed the bug of password toggle icon and added validation for Password Change Modal * add navbar link, construct the profile setting page, and correct the typo in the DescriptionBox in the Home page * quick fix to not returning right page * cleaning up merge * pt 2 * wrap auth context around frontend application * create hook to handle signup fetch * #29: Implemented User Settings Customizations Form * created customizations form inputs and layout * added typehead implementation, started scss override * styled dropdown menu, fixed save/cancel changes * added color for no matches found text * removed redundant test code * fix the navbar underline color, enable navigation between each nav link * add CustomizationsEdit to the 'Customiztions' nav link * finish auth, local storage of user, and example of how to access user * #30: Implemented Saved Articles form section for the settings * created saved articles form with modal * added cancel button functionality * Create requireAuth.js * a * added middleware file which makes sure user is authenticated before users can edit/add files * created authorize article middlware that is supposed to check if if user has authorized permissions for certain api routes * railway implemented * gitignore * gitignore * gitignore update * #31: Added new palette colors as scss variables * added new theme colors * fixed colors, added comments * redesigned the header based on Figma * changed the spacing between left and right sections in larger viewport (1440px+) -> make them closer on larger screen * new middleware that makes sure only author can delete article they made * add theme toggler * #33: Implemented footer and added fonts * completed footer and added fonts * edited font name * created the web title and added the main article for the Home page * fixed the main article stylings, added parameters for MainArticle, modified the layout of AppTitle * changed the link of 'My Profile' on the user menu * #35: finished sign pages redesign * finished sign pages * added theme toggle listener that responds to changing prefers-color-mode, fixed colors changing across themes * fixed create one link * fixed scss import links * added color modes for AppTitle, MainArticle, and Header * #36: implemented settings redesign * completed basic background/input bg redesign * completed settings redesign * fixed arrow marker class names * #37: implemented article page redesign * reused settings arrow marker for all arrow markers * finished article redesign * made some adjustments to settings * Revert "made some adjustments to settings" This reverts commit 0ee758a. * new articles format * designed the popular articles section * #38: Added fixes to Settings Page * fixed the huge gap in larger screen and minor stuff in Popular Articles dev * fixed the banner width, auto-shrinking width for the two bars of the banner, and giant image displayed at around 750-800px * Update routes.js * small fix * Update routes.js * Update routes.js * created recent articles section * fixed the title width and image width for popular articles section * #41: created article result container * created initial article result layout * completed article results list design * #42: created related tags section for article results page * constructed article results page layout with search query title * added recent articles * constructed results page, refactored article view page * fixed responsive sizing of article data under the article image in smaller view and the title that overlaps the Popular articles banner * fixed the media query for around 990px viewport on the banner images and titles * modified the sizings on a tablet and larger screen viewports * slightly modified the width of articles and their images responsively * refactored the Home page based on new UI changes from Figma * fixed the light color mode for article date-time and author * fixed the spacing between author name and published date, and changed the color of the link 'Older posts' based on Figma * Uppercase header nav-bar and and make the logo bigger * Revert "Uppercase header nav-bar and and make the logo bigger" This reverts commit 13d8f31. * Update header and footer * signin/signup pages redev * removed files with unexpected changes on dev * refactoring article results page based on the new UI changes * Create NewLogo * Delete frontend/src/assets/NewLogo * Create logo * Add files via upload * Delete frontend/src/assets/NewLogo/logo * minor changes on ArticleHeader and ArticleHeaderTitle * fixed some changes on the position of tabs menu on the left, make all titles uppercase, and lessened the font weight of labels in Profile Edit page * welcome page fixed * removed TODO comment * Update .gitignore * change so only check authorization for creating/deleting articles and not for getting * fixed search by title * used the new logo on the Home page * added the CC logo on the header * redesigned the footer layout and added the new logo * case insensitive article search * Create ImageStorage add image Storage file * Changed User Endpoints getting a user now requires authentication and it will only return information for the user for which the token belongs to * bookmarks * bookmarks created new bookmark endpoints created a new optionalAuth middleware which adds a user to the request body if the request was sent with a token altered current GET articles endpoints to add bookmarked property to articles requested with a token * initialized all articles bookmark to be false (not filled icon) * delete multiple bookmarks at once * Make some changes about .env and connection refused Make some changes about .env and connection refused * login/signup 90% fix some issues * fixed bug allowing user to be empty by restricting no white spacesl, did same with password * fixed bug with moving on to login even if there are errors * fixed bug with fieldnames in sign up * small change small change * add authorizeArticle * Implemented article editor, admin portal, comments/likes, and finished up bookmarks/profiles (#58) * added basic editorjs page * added block limiting * refactored article editor data into one state, created adding body sections * add form to editor page * separated placeholder ui from editorjs components for now * starting code for drag drop * implemented solution for visually rendering body section swaps + refactored datatransfer of index * implemented visuals for drag drop icon * created article editor hook for create, edit, delete * removed local storage lines from article editor hooks * Updates to UI of body section and creation of MyArticles page * added basic routes for creating/editing/publishing/unpublishing articles * updated routes and pages to reflect changes to user tables * Updated hooks to match with routes and updated My Article Page to use hooks * Integrated cloudinary in profile routes, set up edit profile routes and integrated with frontend * added toasts to profile page for success/errors * updated header to reflect avatar changes * changed block limits for editors, refactored body section data to use UUIDs to mitigate the constant rerenders * created basic EditorJS parser and implemented basic preview for article editor * added article image to preview * Finished styling for article editor "edit" page * updated routes to store images * Added image previews and minor style changes Style changes made to: - article preview - article editor - my articles - header * fixed multiple bugs with routes, integrated with frontend, updated editor components to support repopulating with retrieved article data * added some toast messages, article validation to edit/post routes, fixed bug with delete route * fixed bug with delete route * refactored tableofcontents and added into article preview * added publish_date to articles, integrated article data with results/article page * Added preview images to block parser, floating buttons for article editor, routes to my-articles page buttons Minor changes: - cursor when hovering over preview image - added my articles to profile menu * added article processing to GetMyArticles route * created frontend folder for admin portal * added admin to run dev script * Fixed my articles page to show correct dates * added basic routes for admin portal * implemented admin frontend design * added admin database checks in middleware + added article search route * added login form, integrated login routes into admin frontend * added alternate home page for when admin is signed out * implemented search users and articles routes into admin frontend * integrated admin routes, added loading spinner to admin frontend * added and integrated loading spinner to frontend * added and integrated route for changing password in the edit profile page * implemented article and user data routes to admin frontend * added route for getting all admins * Fixed click navigation on users and articles list views * Separated users/articles dashboard and implemented protected routes * Implemented URL search parameters to maintain search state * implemented and integrated bookmark routes * implemented article likes and comments tables and triggers for counts, implemented liking/unliking routes, refactored article routes to apply middleware individually to avoid unintentional middleware conflicts between routes * implemented comment routes * added id to comments that are retrieved * implemented admin routes for comments * Visual fix for save/create button when minimizing * Integrated article comments and likes into the frontend * Integrated likes and comments into article results and home page articles * Integrated user's comments into admin frontend * fixed bug with avatar in header, added back optionalAuth middleware to some article routes, added isLiked to article results and updated like counts to like/unlike routes * added avatar to admin user routes and updated in admin frontend * Added comment sorting by newest/oldest, delete button for comment authors, and fixed article bug when logged out * Added style changes to article view to make it centered * fixed bug that limited article search to users own articles * accounted for case insensitivity in article searching, user token not attaching properly on searching * increase header char limit --------- Co-authored-by: unknown <[email protected]> Co-authored-by: Kristie Lee <[email protected]> Co-authored-by: Kristie Lee <[email protected]> Co-authored-by: Kristie Lee <[email protected]> --------- Co-authored-by: CerealAaa <[email protected]> Co-authored-by: davidgit3000 <[email protected]> Co-authored-by: Patrick Nguyen <[email protected]> Co-authored-by: jdang9191 <[email protected]> Co-authored-by: David <[email protected]> Co-authored-by: ryagatep <[email protected]> Co-authored-by: Tai Bui <[email protected]> Co-authored-by: magbitty <[email protected]> Co-authored-by: plexin123 <[email protected]> Co-authored-by: Kristie Lee <[email protected]> Co-authored-by: Kristie Lee <[email protected]> Co-authored-by: Kristie Lee <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I have created a component for the image banner at the top of the article page called Image Banner. It will stretch to fill its container, and will crop out part of the image in order to preserve aspect ratio. I have defined different minimum/maximum heights on different screen widths; could be subject to change later on.
What you should see when you visit the route '/article_example':
