liferay / clay Goto Github PK
View Code? Open in Web Editor NEWA web implementation of the Lexicon Experience Language
Home Page: http://clayui.com
License: Other
A web implementation of the Lexicon Experience Language
Home Page: http://clayui.com
License: Other
https://issues.liferay.com/browse/LPS-59141
@pat270 I noticed this was a problem even in Lexicon (since it has an equal z-index with dropdowns, and the ones later in the source win out).
Could you take a look at this one and fix it?
Thanks!
This can be reproduced at http://liferay.github.io/lexicon/content/modals/ and also in liferay-portal. I think this is caused by the styles from the class modal-open
that is appended to the body.
Result: The page is scrolled back to the top.
Note: It seems like for the bottom 3 buttons on the Modal demo page, the bootstrap modal component is resetting the scroll position after the modal is closed.
Toggles in small spaces can be broken when label goes in multi-line
Discovered and related with LPS-68928, LPS-68927.
This behavior can be seen in Liferay Portal when reproducing this ticket: https://issues.liferay.com/browse/LPS-70956.
We are working on a Liferay project to migrate theme from Bootstrap 3 to Lexicon. Found that latest Lexicon is using Bootstrap Alpha version. We do have a lot of utility classes and methods from Bootstrap 3.0 that won't support in Lexicon with Bootstrap 4.
Can someone please help us to get the Lexicon with Bootstrap 3.x and not the Alpha/4.0 bootstrap.
Or please advice the workaround to use bootstrap3.x with Lexicon? Can I just replace the bootstrap 4 with the latest stable version which is Bootstrap 3.x?
The example of http://liferay.github.io/lexicon/content/blogs-action/ looks nice. However, when the title "7 UX Trends of 2015: Get Ready for Big Changes" contains a link (to be able to click the entry) the style changes completely and it looks worse.
Dropdown positioning is broken, BS4 is using a positioning plugin called popper.js.
I think this is helpful to other users who wants to use lexicon outside of the liferay context.
BS4 removed the Pager component. Should we keep it or remove it? Waiting on UX for more details.
Not sure what to do with this. The namespace is really common and collides easily with 3rd party stuff. At the very least it should be converted to flexbox, don't see much benefit of keeping it table based.
Bootstrap 4 dropped all icon fonts, left up to 3rd party devs to include whatever icon font they want.
According to the mockups, the checkboxes are 20px by 20px, and we should size them accordingly in the Atlas theme
Hi!
Alerts doesn't match with Lexicon designs. Here the documentation:
https://docs.google.com/document/d/1mR8k7TE_5s6wzn94HtM7kB3NYVItDMoi4RkKZ0yRezw/edit#heading=h.jkrp0t7cj15n
Thx!
Sidenav plugin follows the href of the toggler when using the data API.
This is because of a missing event.preventDefault()
in the delegate handler.
@victorvalle has confirmed we can drop this button type from Clay and it will be created in compatibility layer.
Read-only inputs are partially obstructed by padding in Firefox. This issue was found in liferay-portal master, https://issues.liferay.com/browse/LPS-57663. And is reproducible at http://natecavanaugh.github.io/lexicon/content/form-elements/ as well.
Hi!
I'm implementing the sticker component in metal-clay but I'm having some issues with the styling. I've done following http://liferay.github.io/clay/content/badges-and-labels/ markup, but there're classes that doesn't exist like sticker-circle, sticker-default, sticker-static, etc.
Are those classes missing or do I have to use other markup?
Also I noticed that the previous .sticker had an absolute positioning by default (overwritten by .sticker-static if necessary). It would be very helpful having examples of the correct current markup.
Thx!
Hi!
I've just created the progress bar metal clay component and I realized that the appearance doesn't match with lexicon mockups. Colors, shapes, shadows, alignments...
Here's the lexicon design:
https://liferay.invisionapp.com/share/PSAI8IVRY#/screens/219580173_Progress_Bar
Here's the component:
deprecate/metal-clay-components#52
Thanks!
Hi!
I'm wondering if you'll provide some builtin functionality on the framework to provide visual feedback to the user while running AJAX processes.
For example, if the user hits a button that submits a form through AJAX, while the AJAX request is being processed the UI displays something to tell the user that an action is being done (typically some kind of spinning wheel or an state button like http://getbootstrap.com/javascript/#buttons-stateful)
Thanks. Juan.
Firefox has some awkward fieldset styling involving width
that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that is not provided in Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
For more information, read https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685
For Bootstrap's documentation, see http://getbootstrap.com/css/#callout-tables-responsive-ff-fieldset
There is a bug in portal where a button group is appearing in front of a autocomplete list. https://issues.liferay.com/browse/LPS-58060
Seems to be caused by this z-index: https://github.com/natecavanaugh/lexicon/blob/master/src/scss/atlas-theme/_button-groups.scss#L24
Force textarea resizing to be constrained within the dimensions of its parent element
Could you please link both sites: the one with the live demo (http://liferay.github.io/lexicon/) and the source code (https://github.com/liferay/lexicon/).
Visitos cannot directly access the source code site from the demo site neither access the demo site from the source code site.
Thanks. Juan
We need to create new icons for the following: info-circle, info-circle-open, caret-top, caret-bottom.
When there is a fixed element on the page and I want it to transition with a sidenav, it's hard to figure out the transition duration and timing function used by the sidenav. So it would be useful to set those values with variables that can be used elsewhere.
So variables specifically for 0.5s
and ease
in _side_navigation.scss.
.sidenav-transition,
.sidenav-transition .sidenav-content,
.sidenav-transition .sidenav-menu-slider,
.sidenav-transition .sidenav-menu-slider .sidenav-menu {
@include transition(all 0.5s ease);
}
You should add a link to https://liferay.github.io/lexicon/ in the repository metadata, and probably a short description wouldn’t hurt.
BS4 removed the transition.js plugin.
The select element is customizable in Clay, but the behavior fits better with BS4's custom forms.
Edit: Researched it a bit more, I think it fits better where it stands. select.form-control
in vanilla Bootstrap isn't that useful if you plan on modifying the border-radius
property on .form-control
.
Only in Atlas theme.
table-striped and table-hover provides striped lines and hover effect, those styles are lost when these classes are combined with table-striped.
This hasn't been implemented in alpha yet, we're limited to whatever configuration options provided by BS4.
The Sidenav
plugin does not have an API to destroy instances. This is particularly harmful in SPA environments, where the plugin needs to be destroyed upon navigation and instantiated again.
In particular, https://github.com/liferay/lexicon/blob/master/src/js/side-navigation.js#L676 makes new instantiations fail because the reference to the toggler to be destroyed is kept in the document.
Z-index variables are scattered throughout each component in Clay, probably should consolidate them in _globals.scss
Popovers and Tooltips need to be converted to work with BS4.
Right now, if you add text into the .toggle-switch-handle
element, it will butt up against the toggle switch.
There are cases where someone may prefer to augment the data-label-*
attributes with persistent text, or just use text with HTML elements inside of it, and forego the data-label-*
attributes altogether.
The idea Patrick and I came up with was to support this by wrapping the text inside of a span with toggle-switch-text
as the class name.
That will give it the same appearance as the data-label-*
attributes.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.