From 4ac553986a3426482eb2935194e4f22adbeaaa2c Mon Sep 17 00:00:00 2001 From: Dominik Piatek Date: Thu, 25 Aug 2022 13:03:11 +0100 Subject: [PATCH 01/18] Update Platfrom panel --- src/core/Meganav/component.css | 6 + .../MeganavContentPlatform/component.html.erb | 186 +++++++++-------- src/core/MeganavContentPlatform/component.jsx | 196 +++++++++--------- .../component.html.erb | 6 +- .../component.jsx | 5 +- .../component.rb | 5 +- .../MeganavItemsMobile/component.html.erb | 2 +- src/core/MeganavItemsMobile/component.jsx | 2 +- src/core/styles/layout.css | 4 + 9 files changed, 217 insertions(+), 195 deletions(-) diff --git a/src/core/Meganav/component.css b/src/core/Meganav/component.css index 2f16efdde..d066824a9 100644 --- a/src/core/Meganav/component.css +++ b/src/core/Meganav/component.css @@ -74,6 +74,12 @@ @apply px-24 md:px-32 lg:px-32 xl:px-64; } + /* This is implemented not as padding so we can change the color of just this space, while keeping the grid + as close to the designs as possible */ + .ui-meganav-content-spacer { + @apply hidden md:block md:w-32 lg:w-32 xl:w-64 self-stretch flex-shrink-0 flex-grow-0; + } + .ui-meganav-media { @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8; } diff --git a/src/core/MeganavContentPlatform/component.html.erb b/src/core/MeganavContentPlatform/component.html.erb index c28206450..6c173e34a 100644 --- a/src/core/MeganavContentPlatform/component.html.erb +++ b/src/core/MeganavContentPlatform/component.html.erb @@ -1,97 +1,101 @@ -
-
-
- <%= image_tag(ably_stack_path, alt: "Ably homepage") %> -

The Ably Platform

-
+
+
+
+
+
+ <%= image_tag(ably_stack_path, alt: "Ably homepage") %> +

The Ably Platform

+
-

- Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything - realtime, and lets you focus on your code. -

+

+ Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything + realtime, and lets you focus on your code. +

- <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/platform"))) do %>Explore how it works<% end %> -
+ <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/platform"))) do %>Explore how it works<% end %> +
-
-

Examples

-
    -
  • - <%= link_to abs_url("/examples/avatar-stack"), class: "ui-meganav-media group" do %> -

    Avatar Stack

    -

    See who is connected in a digital space.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/examples/emoji-reactions"), class: "ui-meganav-media group" do %> -

    Emoji Reactions

    -

    React with an emoji to a message.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/examples/activity-feed"), class: "ui-meganav-media group" do %> -

    Activity Feed

    -

    Display a list of user actions in realtime.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/examples/live-charts"), class: "ui-meganav-media group" do %> -

    Live Charts

    -

    Visualise live metrics and data in a chart.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/examples/live-cursors"), class: "ui-meganav-media group" do %> -

    Live Cursors

    -

    Track all cursors in realtime.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/examples/typing-indicator"), class: "ui-meganav-media group" do %> -

    Typing Indicator

    -

    See when a user is typing a message.

    - <% end %> -
    • -
+
+

Our Examples

+
    +
  • + <%= link_to abs_url("/examples/avatar-stack"), class: "ui-meganav-media group" do %> +

    Avatar Stack

    +

    See who is connected in a digital space.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/examples/emoji-reactions"), class: "ui-meganav-media group" do %> +

    Emoji Reactions

    +

    React with an emoji to a message.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/examples/activity-feed"), class: "ui-meganav-media group" do %> +

    Activity Feed

    +

    Display a list of user actions in realtime.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/examples/live-charts"), class: "ui-meganav-media group" do %> +

    Live Charts

    +

    Visualise live metrics and data in a chart.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/examples/live-cursors"), class: "ui-meganav-media group" do %> +

    Live Cursors

    +

    Track all cursors in realtime.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/examples/typing-indicator"), class: "ui-meganav-media group" do %> +

    Typing Indicator

    +

    See when a user is typing a message.

    + <% end %> +
    • +
- <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"))) do %>Explore all live examples<% end %> -
+ <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples"))) do %>Explore all live examples<% end %> +
-
-

Our technology

-
    -
  • - <%= link_to abs_url("/four-pillars-of-dependability#performance"), class: "ui-meganav-media group" do %> -

    Predictable performance

    -

    We provide predictability so you can be confident your realtime application will always perform as expected.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/four-pillars-of-dependability#integrity"), class: "ui-meganav-media group" do %> -

    Guaranteed ordering & delivery

    -

    We guarantee in-order data delivery, even after disconnections.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/four-pillars-of-dependability#reliability"), class: "ui-meganav-media group" do %> -

    Fault tolerant infrastructure

    -

    Redundant at regional and global levels with 99.999% uptime SLAs.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/four-pillars-of-dependability#availability"), class: "ui-meganav-media group" do %> -

    High scalability & availability

    -

    Elastic, battle-tested global infrastructure for massive scale.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/network"), class: "ui-meganav-media group" do %> -

    Global edge network

    -

    An edge network of 15 core routing datacenters and 200+ PoPs.

    - <% end %> -
    • -
+
+

Our technology

+
    +
  • + <%= link_to abs_url("/four-pillars-of-dependability#performance"), class: "ui-meganav-media group" do %> +

    Predictable performance

    +

    A low-latency and high-throughput global network.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/four-pillars-of-dependability#integrity"), class: "ui-meganav-media group" do %> +

    Guaranteed ordering & delivery

    +

    Data is delivered - in order - even after disconnections.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/four-pillars-of-dependability#reliability"), class: "ui-meganav-media group" do %> +

    Fault tolerant infrastructure

    +

    Redundancy is built in at global and regional levels.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/four-pillars-of-dependability#availability"), class: "ui-meganav-media group" do %> +

    High scalability & availability

    +

    Built for scale with legitimate 99.999% uptime SLAs.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/network"), class: "ui-meganav-media group" do %> +

    Global edge network

    +

    An edge network of 15 core routing datacenters and 205+ PoPs.

    + <% end %> +
    • +
- <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/four-pillars-of-dependability"))) do %>Explore our technology<% end %> -
-
+ <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/four-pillars-of-dependability"))) do %>Explore Four Pillars of Dependability<% end %> + + +
+ diff --git a/src/core/MeganavContentPlatform/component.jsx b/src/core/MeganavContentPlatform/component.jsx index ed15e3c94..193bf1114 100644 --- a/src/core/MeganavContentPlatform/component.jsx +++ b/src/core/MeganavContentPlatform/component.jsx @@ -4,107 +4,109 @@ import T from "prop-types"; import FeaturedLink from "../FeaturedLink/component.jsx"; const MeganavContentPlatform = ({ paths, absUrl }) => ( -
-
-
- Ably homepage -

The Ably Platform

-
-

- Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything - realtime, and lets you focus on your code. -

+
+
+
+
+
+ Ably homepage +

The Ably Platform

+
+

+ Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything + realtime, and lets you focus on your code. +

- Explore how it works -
+ Explore how it works +
-
-

- Examples -

- - Explore all live examples -
+
+

+ Our Examples +

+ + Explore all live examples +
-
-

- Our technology -

- +
+

+ Our technology +

+ - Explore our technology -
-
+ Explore Four Pillars of Dependability + + +
+ ); MeganavContentPlatform.propTypes = { diff --git a/src/core/MeganavControlMobilePanelClose/component.html.erb b/src/core/MeganavControlMobilePanelClose/component.html.erb index f9aab34d5..82469ff22 100644 --- a/src/core/MeganavControlMobilePanelClose/component.html.erb +++ b/src/core/MeganavControlMobilePanelClose/component.html.erb @@ -2,9 +2,11 @@ <%= button_tag(type: "button", class: "ui-meganav-mobile-link text-gui-default mb-16", data: { id: "meganav-control-mobile-panel-close" }, - aria: { expanded: false, controls: @aria_controls, label: "Hide panel" }) do -%> + aria: { expanded: false, controls: aria_controls, label: "Hide panel" }) do -%> <%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "relative -top-1 transform rotate-180")) %> Back <% end %> -
+ <% if display_hr %> +
+ <% end %> diff --git a/src/core/MeganavControlMobilePanelClose/component.jsx b/src/core/MeganavControlMobilePanelClose/component.jsx index 5631e18a5..5d9c82ef4 100644 --- a/src/core/MeganavControlMobilePanelClose/component.jsx +++ b/src/core/MeganavControlMobilePanelClose/component.jsx @@ -3,7 +3,7 @@ import T from "prop-types"; import Icon from "../Icon/component.jsx"; -const MeganavControlMobilePanelClose = ({ ariaControls }) => ( +const MeganavControlMobilePanelClose = ({ ariaControls, displayHr = true }) => (
-
+ {displayHr ?
: null}
); MeganavControlMobilePanelClose.propTypes = { ariaControls: T.string, + displayHr: T.bool, }; export default MeganavControlMobilePanelClose; diff --git a/src/core/MeganavControlMobilePanelClose/component.rb b/src/core/MeganavControlMobilePanelClose/component.rb index 73b0fa20d..8e48f7f60 100644 --- a/src/core/MeganavControlMobilePanelClose/component.rb +++ b/src/core/MeganavControlMobilePanelClose/component.rb @@ -1,8 +1,11 @@ module AblyUi module Core class MeganavControlMobilePanelClose < ViewComponent::Base - def initialize(aria_controls:) + attr_reader :aria_controls, :display_hr + + def initialize(aria_controls:, display_hr: true) @aria_controls = aria_controls + @display_hr = display_hr end end end diff --git a/src/core/MeganavItemsMobile/component.html.erb b/src/core/MeganavItemsMobile/component.html.erb index ff52f4903..806560284 100644 --- a/src/core/MeganavItemsMobile/component.html.erb +++ b/src/core/MeganavItemsMobile/component.html.erb @@ -48,7 +48,7 @@ <% end %> <%= content_tag(:div, class: "ui-meganav-panel-mobile hidden", id: "#{panel[:id]}-mobile", data: { scroll_lock_scrollable: true }) do %> - <%= render(AblyUi::Core::MeganavControlMobilePanelClose.new(aria_controls: "#{panel[:id]}-mobile")) %> + <%= render(AblyUi::Core::MeganavControlMobilePanelClose.new(aria_controls: "#{panel[:id]}-mobile", display_hr: panel[:id] != 'platform-panel')) %> <%= render("AblyUi::Core::#{panel[:component]}".constantize.new(url_base: url_base)) %> <% end %> diff --git a/src/core/MeganavItemsMobile/component.jsx b/src/core/MeganavItemsMobile/component.jsx index 3c95124a1..08595eb1c 100644 --- a/src/core/MeganavItemsMobile/component.jsx +++ b/src/core/MeganavItemsMobile/component.jsx @@ -74,7 +74,7 @@ const MeganavItemsMobile = ({ panels, paths, sessionState, theme, loginLink, abs {panel.label}
- +
diff --git a/src/core/styles/layout.css b/src/core/styles/layout.css index 0b2580e0c..ce007bfcf 100644 --- a/src/core/styles/layout.css +++ b/src/core/styles/layout.css @@ -7,6 +7,10 @@ @apply gap-8 sm:gap-16 md:gap-24 xl:gap-32; } + .ui-grid-gap-x { + @apply gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32; + } + .ui-grid-px { @apply px-24 sm:px-32 md:px-40 lg:px-64; } From 698340d897ddb203ad263f384d445225e0b92fad Mon Sep 17 00:00:00 2001 From: Dominik Piatek Date: Thu, 25 Aug 2022 13:18:14 +0100 Subject: [PATCH 02/18] Add Use Cases icons --- preview/app/controllers/components_controller.rb | 13 ++++--------- src/core/icons/icon-display-chat-stack.svg | 4 ++++ src/core/icons/icon-display-virtual-events.svg | 12 ++++++++++++ 3 files changed, 20 insertions(+), 9 deletions(-) create mode 100644 src/core/icons/icon-display-chat-stack.svg create mode 100644 src/core/icons/icon-display-virtual-events.svg diff --git a/preview/app/controllers/components_controller.rb b/preview/app/controllers/components_controller.rb index 20572ad38..ec1f1736c 100644 --- a/preview/app/controllers/components_controller.rb +++ b/preview/app/controllers/components_controller.rb @@ -78,11 +78,12 @@ def icon display_icons = %w[ icon-display-48hrs - icon-display-api-keys icon-display-api + icon-display-api-keys icon-display-browser icon-display-calendar icon-display-call-mobile + icon-display-chat-stack icon-display-cloud-servers icon-display-documentation icon-display-gdpr @@ -103,16 +104,10 @@ def icon icon-display-sla icon-display-soc2-type2 icon-display-tech-account-comms + icon-display-virtual-events ] - social_icons = %w[ - discord - facebook - github - glassdoor - linkedin - twitter - ] + social_icons = %w[discord facebook github glassdoor linkedin twitter] other_icons = %w[quote] diff --git a/src/core/icons/icon-display-chat-stack.svg b/src/core/icons/icon-display-chat-stack.svg new file mode 100644 index 000000000..7e732c7c5 --- /dev/null +++ b/src/core/icons/icon-display-chat-stack.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/core/icons/icon-display-virtual-events.svg b/src/core/icons/icon-display-virtual-events.svg new file mode 100644 index 000000000..8a0ff6c87 --- /dev/null +++ b/src/core/icons/icon-display-virtual-events.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + From c8b0c32004d571f5525c1113a9dfb7a4d4b5b4d5 Mon Sep 17 00:00:00 2001 From: Dominik Piatek Date: Thu, 25 Aug 2022 16:10:04 +0100 Subject: [PATCH 03/18] Update Use Cases panel --- src/core/Meganav/component.css | 2 +- src/core/Meganav/component.json | 8 +- src/core/Meganav/component.rb | 6 +- .../MeganavContentUseCases/component.html.erb | 195 +++++++++-------- src/core/MeganavContentUseCases/component.jsx | 201 ++++++++++-------- .../MeganavItemsDesktop/component.html.erb | 3 +- src/core/MeganavItemsDesktop/component.jsx | 3 +- .../MeganavItemsMobile/component.html.erb | 2 +- src/core/MeganavItemsMobile/component.jsx | 3 +- src/core/MeganavItemsMobile/component.rb | 4 + 10 files changed, 247 insertions(+), 180 deletions(-) diff --git a/src/core/Meganav/component.css b/src/core/Meganav/component.css index d066824a9..85c982db2 100644 --- a/src/core/Meganav/component.css +++ b/src/core/Meganav/component.css @@ -89,7 +89,7 @@ grid-template-rows: min-content 1fr; @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8; - @apply grid gap-x-16; + @apply grid gap-x-8; } .ui-meganav-media-heading { diff --git a/src/core/Meganav/component.json b/src/core/Meganav/component.json index 579cef79c..67907ad57 100644 --- a/src/core/Meganav/component.json +++ b/src/core/Meganav/component.json @@ -29,9 +29,9 @@ } }, "panels": [ - { "label": "Platform", "id": "platform-panel", "component": "MeganavContentPlatform" }, - { "label": "Use Cases", "id": "use-cases-panel", "component": "MeganavContentUseCases" }, - { "label": "Why Ably", "id": "why-ably-panel", "component": "MeganavContentWhyAbly" }, - { "label": "Developers", "id": "developers-panel", "component": "MeganavContentDevelopers" } + { "label": "Platform", "shortLabel": "Platform", "id": "platform-panel", "component": "MeganavContentPlatform" }, + { "label": "Use Cases & Solutions", "shortLabel": "Use Cases", "id": "use-cases-panel", "component": "MeganavContentUseCases" }, + { "label": "Why Ably", "shortLabel": "Why Ably", "id": "why-ably-panel", "component": "MeganavContentWhyAbly" }, + { "label": "Developers", "shortLabel": "Developers", "id": "developers-panel", "component": "MeganavContentDevelopers" } ] } diff --git a/src/core/Meganav/component.rb b/src/core/Meganav/component.rb index 651250d1e..92f0300b5 100644 --- a/src/core/Meganav/component.rb +++ b/src/core/Meganav/component.rb @@ -30,21 +30,25 @@ def panels [ { label: 'Platform', + short_label: 'Platform', id: 'platform-panel', class: 'AblyUi::Core::MeganavContentPlatform' }, { - label: 'Use Cases', + label: 'Use Cases & Solutions', + short_label: 'Use Cases', id: 'use-cases-panel', class: 'AblyUi::Core::MeganavContentUseCases' }, { label: 'Why Ably', + short_label: 'Why Ably', id: 'why-ably-panel', class: 'AblyUi::Core::MeganavContentWhyAbly' }, { label: 'Developers', + short_label: 'Developers', id: 'developers-panel', class: 'AblyUi::Core::MeganavContentDevelopers' } diff --git a/src/core/MeganavContentUseCases/component.html.erb b/src/core/MeganavContentUseCases/component.html.erb index 6aa3b7adf..962410e01 100644 --- a/src/core/MeganavContentUseCases/component.html.erb +++ b/src/core/MeganavContentUseCases/component.html.erb @@ -1,84 +1,113 @@ -
-
-

By use case

-
    -
  • - <%= link_to abs_url("/solutions/edtech"), class: "ui-meganav-media group" do %> -

    EdTech

    -

    Deliver interactive learning experiences like multi-user classrooms with chat.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/solutions/virtual-events"), class: "ui-meganav-media group" do %> -

    Virtual Events

    -

    Power engaging virtual events with interactive realtime features.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/solutions/sports-and-media"), class: "ui-meganav-media group" do %> -

    Sports & Media

    -

    Deliver global realtime experiences to keep fans informed, engaged, entertained.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/solutions/fintech"), class: "ui-meganav-media group" do %> -

    Fintech

    -

    Deliver fast, personalised fintech data in realtime to mobile & web customers.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/solutions/gaming"), class: "ui-meganav-media group" do %> -

    Gaming

    -

    Power interactive gaming experiences that are wicked fast and utterly reliable.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/solutions/automotive-logistics-and-mobility"), class: "ui-meganav-media group" do %> -

    Automotive, Logistics, & Mobility

    -

    Power asset tracking, live transit updates, race-critical diagnostics, and more.

    - <% end %> -
    • -
-
+
+
+
+
+

+ Use cases +

+
    +
  • + <%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %> + <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack", size: "2.5rem")) %> +
    +

    Chat

    +

    Deliver highly reliable chat experiences at scale.

    +
    + <% end %> +
    • +
  • + <%= link_to abs_url("/solutions/virtual-events"), class: "ui-meganav-media-with-image group" do %> + <%= render(AblyUi::Core::Icon.new(name: "icon-display-virtual-events", size: "2.5rem")) %> +
    +

    Virtual Events

    +

    Power engaging virtual events with realtime features.

    +
    + <% end %> +
    • +
+
-
-
    -
  • - <%= link_to abs_url("/solutions/b2b-platforms"), class: "ui-meganav-media group" do %> -

    B2B Platforms

    -

    Empower customers with realtime technology that gives them a competitive edge.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/solutions/healthcare"), class: "ui-meganav-media group" do %> -

    Healthcare

    -

    Provide HIPAA-compliant realtime apps healthcare professionals can depend on.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %> -

    eCommerce & Retail

    -

    Enable realtime pricing, inventory, and transactions to enrich user experiences.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/solutions/iot-and-connected-devices"), class: "ui-meganav-media group" do %> -

    IoT & Connected Devices

    -

    Monitor and control global IoT deployments of any kind in realtime.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media group" do %> -

    Asset Tracking

    -

    Track assets in realtime with a solution optimized for last mile logistics, food delivery applications, and urban mobility services.

    - <% end %> -
    • -
  • - <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %> -

    Extend Kafka to the edge

    -

    Enhance and reliably expand Kafka's event streaming capabilities beyond your private network.

    - <% end %> -
    • -
-
-
+
+

+ Industry +

+
    +
  • + <%= link_to abs_url("/solutions/edtech"), class: "ui-meganav-media group" do %> +

    EdTech

    +

    Deliver interactive learning experiences.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/solutions/fintech"), class: "ui-meganav-media group" do %> +

    Fintech

    +

    Deliver personalised financial data in realtime.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/solutions/automotive-logistics-and-mobility"), class: "ui-meganav-media group" do %> +

    Automotive, Logistics, & Mobility

    +

    Power diagnostics, order tracking and more.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/solutions/b2b-platforms"), class: "ui-meganav-media group" do %> +

    B2B Platforms

    +

    Empower your customers with realtime solutions.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/solutions/healthcare"), class: "ui-meganav-media group" do %> +

    Healthcare (HIPAA)

    +

    Provide trustworthy, HIPAA-compliant realtime apps.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %> +

    eCommerce & Retail

    +

    Enrich customer experiences with realtime updates.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/solutions/sports-and-media"), class: "ui-meganav-media group" do %> +

    Sports, Media & Audience Engagement

    +

    Deliver engaging global realtime experiences.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/solutions/gaming"), class: "ui-meganav-media group" do %> +

    Gaming

    +

    Power ultra fast and reliable gaming experiences.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/solutions/iot-and-connected-devices"), class: "ui-meganav-media group" do %> +

    IoT & Connected Devices

    +

    Monitor and control global IoT deployments in realtime.

    + <% end %> +
    • +
+
+ +
+

+ Solutions +

+
    +
  • + <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %> +

    Extend Kafka to the edge

    +

    Reliably expand Kafka’s event streaming beyond your private network.

    + <% end %> +
    • +
  • + <%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media group" do %> +

    Asset Tracking

    +

    Track assets in realtime with a solution optimised for last mile logistics.

    + <% end %> +
    • +
+
+
+
+ diff --git a/src/core/MeganavContentUseCases/component.jsx b/src/core/MeganavContentUseCases/component.jsx index dcf8535c9..ebb5fee52 100644 --- a/src/core/MeganavContentUseCases/component.jsx +++ b/src/core/MeganavContentUseCases/component.jsx @@ -1,95 +1,122 @@ import React from "react"; import T from "prop-types"; +import Icon from "../Icon/component.jsx"; + const MeganavContentUseCases = ({ absUrl }) => ( -
-
-

- By use case -

- -
+
+
+
+ + + - -
+ +
+
+ ); MeganavContentUseCases.propTypes = { diff --git a/src/core/MeganavItemsDesktop/component.html.erb b/src/core/MeganavItemsDesktop/component.html.erb index 3f817caf2..e3824463a 100644 --- a/src/core/MeganavItemsDesktop/component.html.erb +++ b/src/core/MeganavItemsDesktop/component.html.erb @@ -2,7 +2,8 @@ <% panels.each do |panel| %>
  • <%= render(AblyUi::Core::MeganavControl.new(aria_controls: panel[:id], theme_name: @theme_name)) do %> - <%= panel[:label] %> + + <%= panel[:short_label] %> <% end %> <%= content_tag :div, class: 'ui-meganav-panel invisible', data: { id: "meganav-panel" }, id: panel[:id] do %> diff --git a/src/core/MeganavItemsDesktop/component.jsx b/src/core/MeganavItemsDesktop/component.jsx index eeef20c0b..7db8d567b 100644 --- a/src/core/MeganavItemsDesktop/component.jsx +++ b/src/core/MeganavItemsDesktop/component.jsx @@ -12,7 +12,8 @@ const MeganavDesktopItems = ({ panels, paths, theme, absUrl }) => ( return (
  • - {panel.label} + {panel.label} + {panel.shortLabel}
    diff --git a/src/core/MeganavItemsMobile/component.html.erb b/src/core/MeganavItemsMobile/component.html.erb index 806560284..b1a5a6381 100644 --- a/src/core/MeganavItemsMobile/component.html.erb +++ b/src/core/MeganavItemsMobile/component.html.erb @@ -48,7 +48,7 @@ <% end %> <%= content_tag(:div, class: "ui-meganav-panel-mobile hidden", id: "#{panel[:id]}-mobile", data: { scroll_lock_scrollable: true }) do %> - <%= render(AblyUi::Core::MeganavControlMobilePanelClose.new(aria_controls: "#{panel[:id]}-mobile", display_hr: panel[:id] != 'platform-panel')) %> + <%= render(AblyUi::Core::MeganavControlMobilePanelClose.new(aria_controls: "#{panel[:id]}-mobile", display_hr: display_hr(panel[:id]))) %> <%= render("AblyUi::Core::#{panel[:component]}".constantize.new(url_base: url_base)) %> <% end %>
    • diff --git a/src/core/MeganavItemsMobile/component.jsx b/src/core/MeganavItemsMobile/component.jsx index 08595eb1c..488697574 100644 --- a/src/core/MeganavItemsMobile/component.jsx +++ b/src/core/MeganavItemsMobile/component.jsx @@ -68,13 +68,14 @@ const MeganavItemsMobile = ({ panels, paths, sessionState, theme, loginLink, abs