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
reserving name 'view' for an MVC-inspired usage.
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.
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.
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:
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.
Leaving off the controls
attribute doesn't seem to affect whether makeControls
is called, and controls are always added.
Would be a nice companion to Deck.
It turns out this component maps well to an existing metaphor, let's use it!
The download link at http://mozilla.github.io/brick/download.html is broken
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.
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!
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.
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.
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
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)
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
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.
This affects Android stock browser as recent as the Galaxy S4 running Android 4.3
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.
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.
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
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
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
This method will simply trigger a 'show' event on that card.
"http://mozilla.github.io/brick/dist/brick.js:2" I got this crash when opening DatePicker demo page everytime with Firefox.
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).
Is this a latest version of modern browsers only thing? Or are we aiming to support ie8+?
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!
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.
Hey guys
Make?
In nodeland??
I thought Grunt was the commonly accepted solution to the building-phase-problem.
:-)
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?
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
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?
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.
Currently, demos live under Documentation - can we add something to make that more clear?
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!
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.
Could I add internal scroll using overflow: scroll ?
and also I have tabs with different height.
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.
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 ?
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?
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
Hopefully this will actually simplify code, and allow for easier extension.
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.