Giter Site home page Giter Site logo

moleculardevices's People

Contributors

actions-user avatar alexcarol avatar alinarublea avatar andreituicu avatar dev-rajneeshkumar avatar duynguyen avatar johan-t avatar jose-correia avatar kapildhiman avatar lydiapuric avatar marquiserosier avatar mhaack avatar paolomoz avatar ramboz avatar

Stargazers

avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

paolomoz andreituicu aniketsaraswat112 ahmedmustafa2201

moleculardevices's Issues

Implement "Video" block for vidyard Player

  • Implement Player with Thumbnail and play icon with video block
  • support for embed and lightbox style via block options

The vidyard Player seams to use a dynamic JS script tag with the video id encoded. We must transfrom the video direct link into this script.

Sample doc https://adobe.sharepoint.com/:w:/r/sites/HelixProjects/_layouts/15/Doc.aspx?sourcedoc=%7B503CF2B0-C4AE-48CE-88BB-4FCC01BAB54F%7D&file=fully-automated-workflow.docx&action=default&mobileredirect=true

[Product] Implement "Resources Carousel"

Content of related resources is loaded dynamically from the index, filtered by the product, application or service the block is used on.

  • Desktop version
  • Mobile version

Screenshot 2023-02-21 at 13 55 41

Doc: https://adobe.sharepoint.com/:w:/r/sites/HelixProjects/_layouts/15/Doc.aspx?sourcedoc=%7B4B86068E-48E1-4849-9767-9BB2AB1134E8%7D&file=spectramax-m-series-readers.docx&action=default&mobileredirect=true&cid=6d174ad2-ea2f-44fa-a059-e70f56b2727a

Example:

Implement "news" & "in the news" aka publication pages

Both page types share the same layout and styles

  • use auto block to move image into section to have two column layout
  • short version of header/hero with only breadcrumb and title
  • both types use "Resource" templates with different categories

Sample Press Release: https://www.moleculardevices.com/newsroom/news/advanced-solutions-life-sciences-collaborate-to-develop-3d-biology-automation-technologies-for-drug-discovery
Sample "in the news": https://www.moleculardevices.com/newsroom/in-the-news/millions-in-fda-fines-and-thousands-of-warning-letters-how-gxp-compliance-software-can-help

Implement card / carousel combo block

This "standard" cards block is used on many overview pages.

  • add hover effect on desktop
  • change to carousel on mobile

Top page filters are via a separate issue #15

Samples and variants:

Special handling for applications landing page

  • use "card-descriptions" if present, fallback to "description"

Special filtering & sorting for product landing pages needed:

  • only display products with landing-page-order set to a number
  • sort by number but within each product category, lowest number goes first

Special filtering for product sub category pages

  • Assay Kits > prefiltered to show assay kits only, use sub-category for filters
  • Accessories and Consumables > prefiltered by sub category "Accessories and Consumables" only, use main category for filters

Screenshot 2023-02-21 at 12 56 28

Implement events page

  • events use a template "event" - setup via meta data sheet for all docs in the /events/*
  • short version of header/hero with only breadcrumb and title
  • implement event block for the event details
  • event data stored into meta data (region, event type) > use for index
  • support for extra event data, see below > can be via extra issues
    • simple event
    • event with related product cards (will be addressed in branch event-products)
    • event with related resources (will be addressed with #272)
  • implement add to calender button (will be addressed in its own PR)
  • add missing footer curve to publication, news and the event page

Docs to test with:

Samples:

Implement Footer (dynamic)

Implement dynamic footer elements:

  • event list (addressed with PR 295
  • news (addressed with PR 295
  • newsletter form PR 306
  • newsletter archive list (stays static)

This is blocked by event & news content #12 & #9 & static footer #2

Implement "wave" section

  • implement using section metadata with style and background
  • content should be centered
  • different styling for primary and secondary buttons
  • most work with different content & blocks

Screenshot 2023-02-21 at 13 42 36

Screenshot 2023-02-21 at 13 51 21

Screenshot 2023-02-21 at 13 59 38

Example:

CTA Buttons with Link

Implement call to action buttons in the form of links.
These CTA Buttons take the user to a new page, with the correct query parameters (e.g. Request Type, Product ID, Category ID) and usually a HubSpot form.
The link query parameter information should be taken from the page metadata, so authors don't have to manually input each link.

Examples:

Screenshot 2023-03-13 at 16 05 00

Screenshot 2023-03-13 at 16 06 56

Implement Footer (static)

Manually take over static footer links and implement footer block. Use dummy for dynamic footer elements (press releases, events), these will be implement later via #24

  • Desktop version
  • Mobile version

Implement Column layout options

Implement the following column layout options:

Import Content

Implement content import for

  • Product Pages (/products/...) -> only individual product pages, no overview pages
  • Application (/applications/...) -> only individual application pages, no overview pages
  • Resources (/technology/...) and others
  • Press Releases / News (/newsroom/news/...)
  • News (/newsroom/in-the-news/...)
  • Events(/events/...)
  • Lab Notes Blog pages (/lab-notes/...)
  • Files

to be extended

Implement Table block

Tables are used on various publications, application notes etc.

Examples:

There is already a reference table block available in the block collection: https://github.com/adobe/helix-block-collection/tree/main/blocks/table

[Blog] Style blog pages

This is for the overall styling of the blog pages:

  • main content width & margins of content, headlines, etc.

Special blog elements are tracked in different issue: header (#71 ), videos (#44 ), column styles (#72 ), recent posts (#73)

Implement Newsroom page & blocks

The newsroom page collects multiple data elements on an overview page. This requires news, "in the news" & events being indexed, see #10 & #12.

Blocks needed:

  • Hero with video (done via #349)
  • Features posts (already on homepage, done via #7)
  • Latest news with view more (done via #10)
  • Latest press releases with view more (done via #10)
  • Latest events with view more (will be addressed with #12)
  • Sidebar social media buttons (#368)
  • Sidebar twitter feed (#368)
  • Sidebar teaser (with the grey background) (#368)

https://www.moleculardevices.com/newsroom

[Blog] Implement extended Hero block

The blog pages have a unique style (larger image, display date & author) which must be implemented based on the "blog" template.

  • Blog hero is using Hero (Blog) - this is already implemented for the imported blog posts
  • Add "lab notes" sticker with link to "/lab-notes" overview page
  • implement Hero stylings
  • implement Date & Author display

Samples:

Implement events overview page

  • setup index containing the events docs, index the template field - see #10
  • create separate, filtered sheets for events entries - see #10
  • implement "events" with pre filtering config in the doc for types to be displayed
  • event list block most support two options: future, archive
  • create 2 pages for future & archived events

Docs:
current: https://adobe.sharepoint.com/:w:/r/sites/HelixProjects/_layouts/15/Doc.aspx?sourcedoc=%7B30CE9DAE-D436-4272-85F8-52E728946BA5%7D&file=events.docx&action=default&mobileredirect=true
archive: https://adobe.sharepoint.com/:w:/r/sites/HelixProjects/_layouts/15/Doc.aspx?sourcedoc=%7BFC2D76E6-EF85-4D3C-9A4B-8990BD3139DA%7D&file=archived-events.docx&action=default&mobileredirect=true

See https://www.moleculardevices.com/events

Implement Dynamic Product Carousel

In #5 a static product carousel was implemented, based on doc static authoring.

This is blocked until we have product pages and an index.

The goal of this issue is to make the product carousel dynamic.

Tasks:

  • define where and how the carousel should take the dynamic data to be displayed.
  • define which data is inherited from the product page (aka. provided via an index) and which goes into the content block

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.