Show and highlight web apps on OpenMS website

JKVISION1101 commented 2 months ago

User description

Brief description of what is fixed or changed

fixes #136

Describe your changes here --> Highlighted Web Apps on the OpenMS Website using carousel style.: Enhanced visibility and accessibility of the web applications available on the OpenMS website by highlighting them prominently.

PR Type

enhancement, documentation

Description

Integrated a new carousel component using Swiper.js to highlight web applications on the OpenMS website.
Added Bootstrap and jQuery libraries to enhance UI and functionality.
Created a new section for web apps with dynamic loading from configuration.
Updated styles and scripts to support the new carousel and web apps display.
Simplified the key features section layout by removing feature box content.

Changes walkthrough 📝

Relevant files

Enhancement

9 files

baseof.html `Integrate Bootstrap and Swiper.js for enhanced UI` layouts/_default/baseof.html Added Bootstrap and Swiper.js libraries. Integrated jQuery for enhanced functionality.	+4/-0
index.html `Add web apps carousel to homepage` layouts/index.html - Added partial for web apps carousel.	+3/-0
carousel.html `Create carousel component for web apps` layouts/partials/carousel.html Created a new carousel component with multiple items. Each item includes a card with an image, title, text, and link.	+111/-0
css.html `Include Swiper CSS for carousel styling` layouts/partials/css.html - Added Swiper CSS for carousel styling.	+1/-0
keyfeatures.html `Simplify key features section layout` layouts/partials/keyfeatures.html - Removed feature box content.	+1/-11
webapps.html `Add dynamic web apps section with Swiper` layouts/partials/webapps.html Added new section for web apps with Swiper integration. Dynamically loads web apps from configuration.	+22/-0
webapps_1.html `Add alternative web apps display with card layout` layouts/partials/webapps_1.html Added alternative web apps display with card layout. Included styling for card interaction.	+80/-0
webapps.css `Style web apps container and Swiper slides` assets/css/webapps.css Added styles for web apps container and Swiper slides. Defined styles for slide images and buttons.	+87/-0
swiper.js `Initialize Swiper and add slide interactions` assets/js/swiper.js Initialized Swiper with navigation and pagination. Added event listeners for slide interactions.	+80/-0

Configuration changes

1 files

config.yaml

Configure web apps with URLs and descriptions

config.yaml - Added configuration for web apps including URLs and descriptions.

+34/-0

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

netlify[bot] commented 2 months ago

Deploy Preview for openms failed.

Name	Link
Latest commit	395ecc06f5c1dbb879c5ea26d564a01c194233f6
Latest deploy log	https://app.netlify.com/sites/openms/deploys/66f61dca2803bc0008af9dc5

codiumai-pr-agent-pro[bot] commented 2 months ago

PR-Agent was enabled for this repository. To continue using it, please link your git user with your CodiumAI identity here.

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review

Redundant Code
The carousel component contains repetitive code for multiple carousel items. This could be refactored to use a loop or dynamic content generation for better maintainability. Accessibility Concern
The Swiper implementation lacks proper accessibility features such as ARIA labels for navigation buttons and slide content. Performance Optimization
Event listeners are added to each slide individually, which could impact performance for a large number of slides. Consider using event delegation.

codiumai-pr-agent-pro[bot] commented 2 months ago

PR-Agent was enabled for this repository. To continue using it, please link your git user with your CodiumAI identity here.

PR Code Suggestions ✨

Category	Suggestion	Score
Enhancement	Use a loop to generate carousel items dynamically for improved maintainability ___ Consider using a loop to generate the carousel items dynamically instead of repeating similar HTML structures. This would make the code more maintainable and easier to update. [layouts/partials/carousel.html [1-101]](https://github.com/OpenMS/OpenMS-website/pull/162/files#diff-ec5b772500e55b934612e31d65c13d2a85a1ca18772afb0add84808dfdd8c211R1-R101) ```diff - +{{ range $index, $item := .Site.Data.carousel_items }} + - + - Card title 1 - Some quick example text to build on the card title and make up the bulk of the - card's content. - Go somewhere + {{ $item.title }} + {{ $item.text }} + {{ $item.button_text }} - - - - - Card title 2 - Some quick example text to build on the card title and make up the bulk of the - card's content. - Go somewhere - - - +{{ end }} ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 9 Why: The suggestion to use a loop for generating carousel items dynamically is excellent for improving code maintainability and reducing redundancy, making it easier to update and manage the carousel content.	9
Accessibility	Add descriptive alt text to images for improved accessibility ___ Add alt text to the image elements for better accessibility. The alt text should describe the content or function of the image. [layouts/partials/webapps.html [10-13]](https://github.com/OpenMS/OpenMS-website/pull/162/files#diff-d41c7f7aa4e3f2ed313d36350e70f2dd54f7d1750c562b54aaf0222871ae12a7R10-R13) ```diff - + "{{ $webapp.description }}" ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 8 Why: Adding alt text to images is a crucial accessibility improvement, ensuring that users with screen readers can understand the content or function of the images.	8
Maintainability	Use CSS variables for repeated values to improve maintainability ___ Consider using CSS variables (custom properties) for repeated values like colors and dimensions. This would make the stylesheet more maintainable and easier to update. [assets/css/webapps.css [28-39]](https://github.com/OpenMS/OpenMS-website/pull/162/files#diff-e939772f2afbebdb74e2c15282868d989a18c1c1668bf0c1014b10c3206590b5R28-R39) ```diff +:root { + --slide-img-width-1: 230px; + --slide-img-height-1: 150px; + --slide-img-width-2: 280px; + --slide-img-height-2: 100px; +} + .swiper-slide.slide-1 img { - width: 230px; - height: 150px; + width: var(--slide-img-width-1); + height: var(--slide-img-height-1); margin-left: 30px; margin-top: 35px; } .swiper-slide.slide-2 img { - width: 280px; - height: 100px; + width: var(--slide-img-width-2); + height: var(--slide-img-height-2); margin-top: 60px; } ``` - [ ] Apply this suggestion Suggestion importance[1-10]: 7 Why: Using CSS variables for repeated values like dimensions enhances maintainability by centralizing the control of these values, making the stylesheet easier to update and manage. However, this is a minor improvement compared to functional changes.	7

💡 Need additional feedback ? start a PR chat

jpfeuffer commented 2 months ago

Oh, and by the way, can you check the behaviour on mobile? The slider is way too big there.

JKVISION1101 commented 2 months ago

@jpfeuffer

Oh, and by the way, can you check the behaviour on mobile? The slider is way too big there.

Yes, I checked it. it is problem. I will fix it. Thanks for comment.

JKVISION1101 commented 2 months ago

@jpfeuffer @matteopilz Our team made new pull request because of conflict issue. #165

We edited the code following julianus's feedback.

OpenMS / OpenMS-website