ably-ui 11.7.1.dev.1344841 → 12.0.0.dev.77b7db9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/README.md +0 -1
- data/lib/ably_ui/core/showcase/component.js +1 -1
- data/lib/ably_ui/core/showcase/showcase.html.erb +2 -2
- data/lib/ably_ui/core/styles.css +9 -4
- data/lib/ably_ui/core/uptime/component.css +1 -2
- data/lib/ably_ui/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: aa0f233e8b6024db5a9eb48d4286500a0d8e3412a728d8e0e833ace01ae7e0f7
|
4
|
+
data.tar.gz: 760a20eb684d437862348c4ba67a1fff5090f38d662ad2f59780aedf1a102d25
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 49a7c36164c0219176e96f5e3b762e227608fc6b6964348bb00925ae62cedfb906a456dc0a95b0b4d23b28638c25d872d8178f9b41b4bce847d80e5472ed1eaf
|
7
|
+
data.tar.gz: d82afab4e779c4973d76f424d66cafaacfaafdf0bf561c073f2562cfb76b68103f5f25c6480a3ea505790f065dba0ef9f2727b2312408afc07b918b32f7545f9
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -80,7 +80,6 @@ Currently, AblyUI CSS is built to work with TailwindCSS. To integrate it into yo
|
|
80
80
|
1. Add postCSS import with `npm install postcss-import`
|
81
81
|
1. Further to the instructions, if installation is hanging for over 5 minutes or otherwise problematic, try installing the libraries one at a time
|
82
82
|
1. Make sure you are installing v2 with `npm install -D tailwindcss@2.X`
|
83
|
-
1. Make sure that tailwindcss-filters is also set to v2 in your package.json: otherwise `npm install -D tailwindcss-filters@2.X`
|
84
83
|
3. Make sure you are using the format `@import 'tailwindcss/base';...` in your `global.css` file rather than the `@tailwind/base` format from Tailwind v3
|
85
84
|
4. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
|
86
85
|
|
@@ -1 +1 @@
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Showcase=t())}(this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>c});var n=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))};function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var o=function(e,t){var n=100*t*(arguments.length>2&&void 0!==arguments[2]?arguments[2]:1);e.style.transform="translateX(".concat(n,"%)")},i=function(e){if("undefined"==typeof window)return!1;var t="".concat(e+64,"px");return!window.matchMedia("(min-width: ".concat(t,")")).matches};const c=function(e,t){var c=e||n("showcase"),u=Array.from(function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll("[data-id=".concat(e,"]"))}("showcase-control",c)),a=u.map((function(e){return e.querySelector("img")})),l=n("showcase-controls",c),f=n("showcase-index-bar",c),s=n("showcase-slides",c),d=s.children.length,m=("--ui-showcase-client-logo-min-width",window.getComputedStyle(document.documentElement).getPropertyValue("--ui-showcase-client-logo-min-width")),v=parseFloat(m)*parseFloat(getComputedStyle(document.documentElement).fontSize)*d;[".ui-showcase-logo-wrapper",".ui-showcase-index-bar"].forEach((function(e){var t=c.querySelector(e),n="".concat(v,"px");t.style.minWidth=n}));var p,h,
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Showcase=t())}(this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>c});var n=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))};function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var o=function(e,t){var n=100*t*(arguments.length>2&&void 0!==arguments[2]?arguments[2]:1);e.style.transform="translateX(".concat(n,"%)")},i=function(e){if("undefined"==typeof window)return!1;var t="".concat(e+64,"px");return!window.matchMedia("(min-width: ".concat(t,")")).matches};const c=function(e,t){var c=e||n("showcase"),u=Array.from(function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll("[data-id=".concat(e,"]"))}("showcase-control",c)),a=u.map((function(e){return e.querySelector("img")})),l=n("showcase-controls",c),f=n("showcase-index-bar",c),s=n("showcase-slides",c),d=s.children.length,m=("--ui-showcase-client-logo-min-width",window.getComputedStyle(document.documentElement).getPropertyValue("--ui-showcase-client-logo-min-width")),v=parseFloat(m)*parseFloat(getComputedStyle(document.documentElement).fontSize)*d;[".ui-showcase-logo-wrapper",".ui-showcase-index-bar"].forEach((function(e){var t=c.querySelector(e),n="".concat(v,"px");t.style.minWidth=n}));var p,y,h,w=0,b=!1,g=function(e){o(s,e,-1),o(f,e,1),function(e,t){var n=["grayscale","grayscale-0"],o=[].concat(n).reverse();e.forEach((function(e,i){var c,u;(c=e.classList).replace.apply(c,function(e){if(Array.isArray(e))return r(e)}(u=i===t?n:o)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}())}))}(a,e),i(v)&&function(e,t){var n=e.parentNode,r=e.children,o=n.clientWidth/2,i=r.length,c=Array.from(r).map((function(e){return e.clientWidth})).reduce((function(e,t){return e+t}))/i,u=t*c-((t&&i-t-1?o-c/2:0)>>0);n.scrollTo({left:u,behavior:"smooth"})}(l,e)},A=function e(){return p=setTimeout((function(){b||i(v)||(w=(w+1)%u.length,g(w),e())}),5e3)},E=function(){var e=function(){b=!0,clearTimeout(p)};return c.addEventListener("mouseover",e),function(){return c.removeEventListener("mouseover",e)}},S=function(){var e=function(){b=!1,A()};return c.addEventListener("mouseleave",e),function(){return c.removeEventListener("mouseleave",e)}},L=function(){var e=function(){clearTimeout(p),A()};return document.addEventListener("resize",e),function(){return document.removeEventListener("resize",e)}},j=(y=u.map((function(e,t){var n=function(e){return function(){g(w=e)}}(t);return e.addEventListener("click",n),n})),function(){y.forEach((function(e,t){return u[t].removeEventListener("click",e)}))}),x=(h=function(e){return e.preventDefault()},l.parentNode.addEventListener("wheel",h),function(){return l.parentNode.removeEventListener("wheel",h)}),U=function(){if(t){A(),c.setAttribute("aria-live","polite");var e=[E(),S(),L()];return function(){return e.forEach((function(e){return e()}))}}return function(){}}();return function(){g(0),clearTimeout(p),j(),U(),x()}};return t.default})()));
|
@@ -13,7 +13,7 @@
|
|
13
13
|
type: 'button',
|
14
14
|
data: { id: 'showcase-control' },
|
15
15
|
aria: { controls: @random_id } do %>
|
16
|
-
<%= image_tag company[:logo], alt: "#{company[:name]} logo", class: ['ui-showcase-logo-img', index === 0 ? '
|
16
|
+
<%= image_tag company[:logo], alt: "#{company[:name]} logo", class: ['ui-showcase-logo-img', index === 0 ? 'grayscale-0' : 'grayscale', 'hover:grayscale-0'], srcset: [["#{company[:logo2x]}", "2x"]] %>
|
17
17
|
<% end %>
|
18
18
|
</li>
|
19
19
|
<% end %>
|
@@ -40,7 +40,7 @@
|
|
40
40
|
|
41
41
|
<div class="flex items-center">
|
42
42
|
<div class="flex-shrink-0 flex-grow-0 mr-16 overflow-hidden rounded-full flex align-center justify-center w-48 h-48">
|
43
|
-
<%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48
|
43
|
+
<%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 grayscale" %>
|
44
44
|
</div>
|
45
45
|
<div>
|
46
46
|
<p class="ui-text-p2"><%= company[:author][:name] %></p>
|
data/lib/ably_ui/core/styles.css
CHANGED
@@ -498,13 +498,13 @@
|
|
498
498
|
}
|
499
499
|
|
500
500
|
.ui-text-overline1 {
|
501
|
-
@apply font-mono font-
|
501
|
+
@apply font-mono font-medium text-active-orange uppercase;
|
502
502
|
@apply text-overline1 leading-normal;
|
503
503
|
@apply tracking-widen-0.16;
|
504
504
|
}
|
505
505
|
|
506
506
|
.ui-text-overline2 {
|
507
|
-
@apply font-mono font-
|
507
|
+
@apply font-mono font-medium text-active-orange uppercase;
|
508
508
|
@apply text-overline2 leading-normal;
|
509
509
|
@apply tracking-widen-0.16;
|
510
510
|
}
|
@@ -583,10 +583,15 @@
|
|
583
583
|
|
584
584
|
.ui-link-neutral {
|
585
585
|
@apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
|
586
|
-
@apply focus:text-charcoal-grey
|
586
|
+
@apply focus:text-charcoal-grey;
|
587
587
|
@apply underline;
|
588
588
|
}
|
589
589
|
|
590
|
+
/* focus:outline-gui-focus-neutral does not get created under Tailwind 3.3.5, not sure why */
|
591
|
+
.ui-link-neutral:focus {
|
592
|
+
outline: 2px solid var(--color-neutral-000);
|
593
|
+
}
|
594
|
+
|
590
595
|
.ui-figcaption {
|
591
596
|
@apply font-mono text-p3 text-neutral-800;
|
592
597
|
}
|
@@ -663,7 +668,7 @@
|
|
663
668
|
}
|
664
669
|
@layer components {
|
665
670
|
.ui-input {
|
666
|
-
@apply text-p2 font-
|
671
|
+
@apply text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
|
667
672
|
@apply hover:bg-white hover:shadow-input hover:border-transparent;
|
668
673
|
@apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
|
669
674
|
@apply max-w-screen-sm;
|
data/lib/ably_ui/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: ably-ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version:
|
4
|
+
version: 12.0.0.dev.77b7db9
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Dominik Piatek
|
@@ -10,7 +10,7 @@ authors:
|
|
10
10
|
autorequire:
|
11
11
|
bindir: bin
|
12
12
|
cert_chain: []
|
13
|
-
date: 2023-
|
13
|
+
date: 2023-12-04 00:00:00.000000000 Z
|
14
14
|
dependencies:
|
15
15
|
- !ruby/object:Gem::Dependency
|
16
16
|
name: view_component
|