Card component for the uPortal ecosystem.
This component aims to display an Internationalized and accessible Card in Apereo uPortal. So far tested in FF, Chrome, Safari and Edge (Windows, Mac, Linux, IOS & Android)
Low and very light (-3Kb) dependencies make the component fast and easy to maintain.
- hyperHTML @lastest
- webcomponents-lite 1.2.0
- @fortawesome/fontawesome-free 5.5.0 (svg only)
Apache-2.0
en-US(default). 👀 See it in English (United States) 🇺🇸fr-FR. 👀 See it in French 🇫🇷fr-CA. 👀 See it in French (Canada)es-ES. 👀 See it in Spanish 🇪🇸nl-NL. 👀 See it in Dutchit. 👀 See it in Italian 🇮🇹ar. 👀 See it in Standard Arabicde. 👀 See it in German 🇩🇪zn-CN. 👀 See it in Simplified Chinese 🇨🇳
Flexbox layout👀 See it in flexbox layoutGrid layout. 👀 See it in a grid layout
Many Thanks to Heydonworks and Jen Simmons fantastic works in these page, axe-core latest Audit score are excellent and are conforme to WCAG 2.1 AAA
- WCAG 2.1 Level AA - Level AAA Work in progress to got beyond simple conformance, but effective Inclusivity,
- extra Features in CSS Level 4 : :visible-focus (enable accessibility flags)
- An user can differentiate french from France and French Canadian with Speech Assistive Technologies (falsy-friends, Cutural Differences)
- add Support for
en-GB - add Support for
fr-BE - add Support for
fr-CH - add Support for
nl-BE - add Support for Gaelic (Scotland)
gd - add Support for Welsh
cy
- add Support for
- use
npm installto get dependencies. - use
npm startto view code in a local web server. - use
npm testto run lint checks
updated: 2019/05/31
- open
dist/index.htmland change<html lang="en-US">to<html lang="fr-FR">, the component will be in french. - In uPortal, the component will change automatically according to the user's locales switcher.
copy all the files from dist/ folder in a card/ directory, then copy this folder into
uPortal-start/overlays/uPortal/src/main/webapp (or other location served by Tomcat).
Define a SimpleCMS portlet with HTML content like the following:
<my-card id="what-is-uportal-i18n" messagesPath="../../../../uPortal/card/" cssPath="../../../../uPortal/card/css"></my-card>
<script src='https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js' defer></script>
<script src='https://unpkg.com/[email protected]/runtime.js' defer></script>
<script src="../../../../uPortal/card/my-card.umd.js" defer></script>Define a SimpleCMS portlet with HTML content like the following:
<my-card id="what-is-uportal-i18n" messagesPath="../../../../uPortal/card/" cssPath="../../../../uPortal/card/css"></my-card><script src="../../../../uPortal/card/my-card.umd.js" defer></script>