mozbrick / brick Goto Github PK
View Code? Open in Web Editor NEWUI Web Components for Modern Web Apps
Home Page: http://mozbrick.github.io/
License: Other
UI Web Components for Modern Web Apps
Home Page: http://mozbrick.github.io/
License: Other
Let's get a basic presence on Travis, and expand from there! I'll start with the basic "does the current brick bundle even load without JS errors" heartbeat.
This method will simply trigger a 'show' event on that card.
OpenSans-Semibold.ttf
in dist/
needs to have an uppercase "b" in "bold". Compare what the CSS file says, and use the exact same spelling :)
@mattbasta pointed it out to me that my app has a 404, and this was why.
Thanks!
Is this a latest version of modern browsers only thing? Or are we aiming to support ie8+?
no semantics are exposed in accessibility layer ie no role. suggest using native HTML <button> input type=button etc. If that is not an option refer to the ARIA design pattern for a button http://www.w3.org/WAI/PF/aria-practices/#button for making custom buttons accessible.
Would be a nice companion to Deck.
Leaving off the controls
attribute doesn't seem to affect whether makeControls
is called, and controls are always added.
When dragging across dates in mobile devices, dates are not toggled like when viewed in desktop browsers. This is due to an issue in the touchenter vs mouseenter logic, and will be addressed soon.
How to style x-tabbar-tab? Neither
x-tabbar-tab {
color: #fff;
background: #7cc4e7;
}
nor
#x-tabbar-tab-custom {
color: #fff;
background: #7cc4e7;
}
seem to work.
I use Chrome 28.0.1500.95 m and brick's demo page is failing with console message
Uncaught TypeError: Cannot read property 'labels' of undefined brick.js:2
Need to add support for other languages for month names in x-calendar, either with more labels or with the option to add custom labels
It would be good to allow a double-tap/click to open an event option where we can enter information. It would be even better if the event could allow me to add in custom HTML (if I want to include <ul><li></li></ul>, <h1>, <form>
etc)
Right now, the days of x-calendars are a fixed size. We should change this to be more responsive using percentages of the container calendar.
May want to refactor the calendar content sizes to be based on the calendar's size instead of the other way around for a more responsive approach.
The download link at http://mozilla.github.io/brick/download.html is broken
At the moment, if the section of an x-layout tag causes overflow, it won't constrain its height to fit the phone demo area on the demo page in FF18 (ie: old flexbox support). However, it will act fine in the testing page in component/layout/demo/testpage.html.
Since release is so close and this is a demo page only issue, this isn't a major issue, but I'm filing this issue as a reminder to go back and debug it later.
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
I just noticed http://mozilla.github.io/brick/index.html is down. I don’t know how else to contact you, so I create this issue hoping you get an email. Here is the error on homepage:
Error 503 Backend is unhealthy
Backend is unhealthy
Guru Meditation:
XID: 3654671732
Varnish cache server
Once the components are moved into individual repos I can register them with Bower and add them to the X-Tag Registry.
There are also other advantages like versioning and issue tracking on a per element basis.
Why does the following work
<x-calendar chosen='[["2013-07-10", "2013-07-11"]]' controls multiple></x-calendar>
and the following doesn't work?
<x-calendar chosen="[['2013-07-10', '2013-07-11']]" controls multiple></x-calendar>
double/single quote assignment for attributes and arrays should not affect whether it is a valid Date object?
This affects Android stock browser as recent as the Galaxy S4 running Android 4.3
reserving name 'view' for an MVC-inspired usage.
Could I add internal scroll using overflow: scroll ?
and also I have tabs with different height.
Hello. First, thanks for the open stuff. I think I'd much prefer this library to some others.
Now, here's the trouble. On a simple, existing, uninteresting form I added a date picker. It works! What it doesn't (yet) do is "integrate": by that I mean crafting style to match the existing form isn't obvious, what with some extra wrapping with their own bordering and padding. There's also some data format hinting in the pick element that should really be matched on other elements (email, number input) but we don't have info how to do that.
Your work is beta so in principle things like this are TODO. I'm just ahead of the curve. ;-) Thank you!
Currently, demos live under Documentation - can we add something to make that more clear?
Running a simple calendar demo I see this in the Network panel:
http://localhost/testingzone/bricktests/brick/OpenSans-SemiBold.ttf
The font is not included with the download. It certainly doesn't prevent me from playing with Brick, but I assume that this font should be removed from the CSS perhaps? Or included w/ the download?
Sass is nice! except that it adds ruby to our build stack. Would be awesome to move to Stylus, a JS-based CSS preprocessor. Thoughts?
On the calendar "Basic calendar with navigation controls" demo here:
http://mozilla.github.io/brick/demos/calendar/index.html
If you click the previous month arrow several times eventually the calendar will disappear and insert a huge grey line through the center of the entire page (see attached image).
System is Windows 7 - IE 10.0.9200
Getting this in Chrome dev tools and the 'flip' demo won't work:
Uncaught TypeError: Cannot read property 'labels' of undefined brick.js:2
steps to reproduce:
Hopefully this will actually simplify code, and allow for easier extension.
"http://mozilla.github.io/brick/dist/brick.js:2" I got this crash when opening DatePicker demo page everytime with Firefox.
On http://mozilla.github.io/brick/demos/datepicker/index.html , click to bring up the date picker, then click a grayed-out date from the next or previous month; for example, in September 2013, click the grayed-out 2 for October 2nd.
Result: instead of picking 2013-10-02, or advancing to October without selecting anything, it advances to October and picks whatever date is underneath where you clicked in the new month, in this case 2013-10-30. That's clearly the wrong behavior. If your click location is still gray in the new month, it does something weirder like picking a random date from that column; for example, in December 2013 click, click January 4 and it jumps to Feb 1st!
This in Firefox 23.0 on Ubuntu 13.04. The "Forcing polyfill UI view" does the right thing in Chromium 28.0.1500.71 Ubuntu 13.04
We should be showing off the more advanced features of x-layout, so people can see that it is more that just CSS with semantics.
the calendar component (http://mozilla.github.io/brick/demos/calendar/index.html) is an interactive data table, but is not marked up as one and therefore the relationships between the data and headers is not conveyed (amongst other things) Suggest looking at the ARIA date picker design pattern http://www.w3.org/WAI/PF/aria-practices/#datepicker for info on making it understandable/usable accessibility wise
I'd like each component to have a functional style file and a visual style file that we can optionally leave out in favor of other skins.
I'm volunteering to do this separation as part of the stylus migration.
Demos work great for me in Win7 Firefox, but not in Safari (not Win7, OS X nor iOS).
Not being able to play with it in a mobile browser makes this a nonstarter for me at the moment.
I tried to embed a deck inside a layout and while the header/footer displayed, the deck content did not.
Code:
<header>
I'm the header!
</header>
<section>
<x-deck id="mainDeck">
<x-card>
0
<span>I'm the first card!</span>
</x-card>
<x-card >
1
These cards can contain any markup!<br>
</x-card>
<x-card>
2
</x-card>
</x-deck>
</section>
<footer>
<button id="prevButton">Previous</button>
<button id="nextButton">Next</button>
</footer>
</x-layout>
Note - it works in Firefox, but in Chrome the deck content is hidden.
Since the demo shows a stylized phone, the transition should probably not break out of the phone's screen.
Though admittedly, that would be pretty cool in real life.
When x-tooltips are not visible, they still affect document flow, causing parent containers to stretch if the tooltip is too large.
Attempts at setting display:none when hidden remove capability for CSS transitions (short of using requestAnimationFrame, which isn't supported on Android browsers). Currently looking into a width/height 0 based approach.
Hey guys
Make?
In nodeland??
I thought Grunt was the commonly accepted solution to the building-phase-problem.
:-)
I went to the calendar demo in this url
http://mozilla.github.io/brick/component/calendar/demo/index.html
There I can see only one date for each examples. Is it a bug ?
First let me tell you, I think brick is a very cool project. In order to learn more about brick, I started developing a simple Firefox OS app using it. I used x-slide, and then pushed to the phone -- thinking to myself: it is all going to work out of the box. Little did I know, it seems that brick currently does not handle swipe gestures at all.
When someone uses a slide deck, they expect to be able to naturally swipe left and right -- when the app runs on a touch device.
Here are two questions for you:
And last, I like to express my interest in helping to find a solution and implement it. So, please let me know what your thoughts are, and if you are open to community contributions. Thanks!
I highly recommend adding proper date range selection to the x-calendar component as selecting multiple dates one by one is not what users expect. Every calendar "widget" should provide this feature (and I guess most of the good ones do).
It turns out this component maps well to an existing metaphor, let's use it!
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.