ably-ui 8.7.0.dev.98edac1 → 8.7.0.dev.dc2ec3f

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 42f6b80b849f54650021e4f5ff8459340267f9390fcbe1ef7e2c666259287802
-  data.tar.gz: 10b721b4c0c36fd47e781e7b82d01aae11fd98268107efc549713ac376c0fcf6
+  metadata.gz: 26e061441da61df08fdf0a603f7c5a8a88fddde7bfb7d5d7cfc821f599d848bc
+  data.tar.gz: 85e7e746a7d470db87d02a2a5c382034e10c129eb8cab1528a2fe82264e076bf
 SHA512:
-  metadata.gz: 9aae72fde31b1dc36998f45ddd0b17af3a1dff306f7cfeee708c679f7866c5e57d17a3773f4dbc96b5d835ee090058150db8e65b97762fe02e3c4590a339b5e9
-  data.tar.gz: d1e06ba107ae7de5490db140526e0630f15ee5fa52a07e3231e9696517d61724ff662eaf297330e20540d842a9adb4637480ef4ae1ab2c82a363e67617583305
+  metadata.gz: 5753eab2350c367326a005dafef0f22497b464cacc863ab6a7d8a56a9916a32155589e1c714a7e51bdd1f2dc16c1c01dc7f316d9da09ba2abd6a4b6b4599f120
+  data.tar.gz: f3a08be7018fd8b66d25f65d64c0a2f0c6da2721861abeeaf6f246e76fdf2f9378117d121f342490f11fce08e31193550b17035b7ed2ca44a4b24f4ed23486fc

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (8.7.0.dev.afde810)
+    ably-ui (8.7.0.dev.a7c6637)
       view_component (>= 2.33, < 2.50)
 
 GEM

data/lib/ably_ui/core/footer/component.css

@@ -15,6 +15,16 @@
     font-size: 12px;
   }
 
+  .ui-footer-tick-icon {
+    min-width: 1.5rem;
+  }
+
+  @media (max-width: 1040px) {
+    .ui-footer-bottom-links {
+      @apply pb-40;
+    }
+  }
+
   @media screen {
     .ui-footer-glassdoor {
       display: none;

data/lib/ably_ui/core/footer/footer.html.erb

@@ -1,16 +1,16 @@
 <footer class="bg-light-grey font-sans antialiased" data-id="footer">
-  <div class="max-w-screen-xl mx-auto py-32 sm:py-40 lg:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
-    <div class="col-span-full lg:col-span-2">
+  <div class="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
+    <div class="col-span-full md:col-span-2">
       <div class="flex flex-row p-menu-row-snug">
         <%= image_tag(ably_stack_path, alt: "Ably homepage", class: "mr-24 -mt-16") %>
         <h2 class="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
       </div>
-      <div class="grid grid-cols-4 lg:col-span-2">
-        <p class="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
+      <div class="md:col-span-4 md:w-3/4 xs:w-3/5 w-full">
+        <p class="text-p3 py-16 font-medium p-menu-row-snug">
           Easily power any realtime experience in your application via a simple API that handles everything realtime.
         </p>
       </div>
-      <ul class="grid xs:grid-cols-2 gap-x-8 md:gap-x-24 xl:gap-x-32 md:grid-cols-1">
+      <ul class="grid grid-cols-1">
         <li class="p-menu-row-snug">
           <%= link_to 'Pub/sub messaging', abs_url("/pub-sub-messaging"), class: "ui-footer-menu-row-link" %>
         </li>
@@ -28,7 +28,7 @@
         </li>
       </ul>
     </div>
-    <div class="col-span-full xs:col-span-3 lg:col-span-1">
+    <div class="col-span-full xs:col-span-3 md:col-span-1">
       <h2 class="ui-footer-col-title">Ably is for</h2>
       <ul>
         <li class="p-menu-row-snug">
@@ -66,7 +66,7 @@
         </li>
       </ul>
     </div>
-    <div class="col-span-full xs:col-span-3 lg:col-span-1">
+    <div class="col-span-full xs:col-span-3 md:col-span-1">
       <h2 class="ui-footer-col-title">Developers</h2>
       <ul>
         <li class="p-menu-row-snug">
@@ -93,7 +93,7 @@
         </li>
       </ul>
     </div>
-    <div class="col-span-full xs:col-span-3 lg:col-span-1">
+    <div class="col-span-full xs:col-span-3 md:col-span-1">
       <h2 class="ui-footer-col-title">WHY ABLY</h2>
       <ul>
         <li class="p-menu-row-snug">
@@ -116,7 +116,7 @@
         </li>
       </ul>
     </div>
-    <div class="col-span-full xs:col-span-3 lg:col-span-1">
+    <div class="col-span-full xs:col-span-3 md:col-span-1">
       <h2 class="ui-footer-col-title">ABOUT</h2>
       <ul>
         <li class="p-menu-row-snug">
@@ -144,14 +144,14 @@
     </div>
   </div>
   <div class="max-w-screen-xl ui-grid-px mx-auto">
-    <hr class="border-t border-mid-grey" />
+    <hr class="border-t border-mid-grey my-0"/>
   </div>
   <%# Twitter + Glassdoor SM * above + Glassdoor XS  + Badges %>
-  <div class="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
-    <div class="">
-      <div class="flex flex-col lg:flex-row flex-auto ml-8 sm:col-span-1 lg:col-span-2">
+  <div class="max-w-screen-xl mx-auto py-32 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
+    <div class="md:flex md:items-center">
+      <div class="flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2">
         <div class="">
-          <div class="flex items-center pb-24">
+          <div class="flex pb-24">
             <a class="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime" title="Ably on Twitter">
               <%= render(AblyUi::Core::Icon.new(name: "twitter", size: "1.5rem")) %>
             </a>
@@ -172,7 +172,7 @@
         </div>
         <%# GLASSDOOR on SM and Above %>
         <div class="xs:hidden sm:block ui-footer-glassdoor">
-          <div class="flex sm:pt-24 lg:pt-0 sm:border-t sm:border-l-0 lg:border-t-0 lg:border-l sm:border-mid-grey sm:w-3/4 lg:w-full lg:pl-24">
+          <div class="flex sm:pt-24 md:pt-0 sm:border-t sm:border-l-0 md:border-t-0 md:border-l sm:border-mid-grey sm:w-3/4 md:w-full md:pl-24">
             <a
                   href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
                   class="h-24 text-cool-black hover:text-icon-glassdoor"
@@ -209,47 +209,47 @@
         </div>
       </div>
     </div>
-    <div class="col-span-full sm:col-span-1 inline-flex sm:ml-auto">
-      <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2022", class: "w-96 h-96") %>
-      <%= image_tag(users_love_us, alt: "Users Love Us", class: "w-96 h-96") %>
-      <%= image_tag(highest_performer, alt: "High Performer 2022", class: "w-96 h-96") %>
+    <div class="col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center">
+      <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2022", class: "mr-24 w-96 h-96") %>
+      <%= image_tag(users_love_us, alt: "Users Love Us", class: "mr-24 w-96 h-96") %>
+      <%= image_tag(highest_performer, alt: "High Performer 2022", class: "mr-24 w-96 h-96") %>
     </div>
   </div>
   <div class="max-w-screen-xl ui-grid-px mx-auto">
-    <hr class="border-t border-mid-grey" />
+    <hr class="border-t border-mid-grey my-0"/>
   </div>
-  <div class="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px ">
-    <div class="flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1">
-      <div class="pl-16 ">
-        <%= link_to 'Cookies', abs_url("/privacy"), class: "ui-footer-link pr-24" %>
-        <%= link_to 'Legals', abs_url("/legals"), class: "ui-footer-link pr-24" %>
-        <%= link_to 'Data Protection', abs_url("/data-protection"), class: "ui-footer-link pr-24" %>
+  <div class="max-w-screen-xl mx-auto py-24 sm:py-40 md:py-32 md:grid md:grid-cols-2 ui-grid-gap ui-grid-px">
+    <div class="flex ml-8 col-span-full sm:col-span-1 md:pb-16 items-center ui-footer-bottom-links">
+      <div class="flex">
+        <%= link_to 'Cookies', abs_url("/privacy"), class: "pr-24 ui-footer-link" %>
+        <%= link_to 'Legals', abs_url("/legals"), class: "pr-24 ui-footer-link" %>
+        <%= link_to 'Data Protection', abs_url("/data-protection"), class: "pr-24 ui-footer-link" %>
         <%= link_to 'Privacy', abs_url("/privacy"), class: "ui-footer-link" %>
       </div>
     </div>
-    <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 ">
+    <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-0 ">
       <div class="flex mr-24">
-        <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
+        <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
         <div>
-          <p class="ui-footer-compliance-text font-medium">SOC 2 Type 2</p>
+          <p class="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
           <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
         </div>
       </div>
-      <div class="flex mr-24 sm:col-start-2">
+      <div class="flex mr-24 md:col-start-2">
         <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
         <div>
           <p class="ui-footer-compliance-text font-medium">HIPAA</p>
           <p class="ui-footer-compliance-text font-light mb-24">Compliant</p>
         </div>
       </div>
-      <div class="flex mr-24 sm:col-start-3">
+      <div class="flex mr-24 md:col-start-3">
         <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
         <div>
           <p class="ui-footer-compliance-text font-medium">EU GDPR</p>
           <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
         </div>
       </div>
-      <div class="flex mr-24 sm:col-start-4">
+      <div class="flex mr-24 md:col-start-4">
         <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
         <div>
           <p class="ui-footer-compliance-text font-medium">256-bit AES</p>

data/lib/ably_ui/version.rb

@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '8.7.0.dev.98edac1'
+  VERSION = '8.7.0.dev.dc2ec3f'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ably-ui
 version: !ruby/object:Gem::Version
-  version: 8.7.0.dev.98edac1
+  version: 8.7.0.dev.dc2ec3f
 platform: ruby
 authors:
 - Dominik Piatek
@@ -10,7 +10,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-12-28 00:00:00.000000000 Z
+date: 2023-01-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component