aozora / bootmetro Goto Github PK

Reduce the css classes, use LESS.

Icons and css-classes using the IcoMoon font-face do not work for me whenever I include IcoMoon.css in a style bundle using ASP.NET MVC 4. Is anyone else seeing the same behavior?

This started as a simple tweak where I wanted to make the charms panel 350px wide rather than 320px. So I changed the width in my own .CSS file, but found #charms sticks out those extra 30px. So I dug around in bootmetro-charms.js and found the Charms plugin. I tried creating my own with $("#charms").charms({ width: "350px", animateDuration: 600 });, but this got me nowhere near where I need to go. It would help to have some docs on how to create charms-like side panels of my own. It might be as simple as changing the #charms id to a class so other elements can take advantage of the same behavior.

For the record, I did get it working properly by adding #charms.slide { right: -350px; }, but it would be nice to know the right way to use the charms plugin without having to rely on the #charms id.

Microsoft fonts are licensed and cannot be redistributed.

Hello,

there are some icons not showing up sometimes in chrome and firefox.

icon-home icon-home-2 icon-home-3 icon-newspaper icon-pencil icon-pencil-2 icon-droplet icon-picture icon-picture-2 icon-camera icon-music icon-play icon-film icon-camera-2 icon-spades icon-clubs icon-diamonds icon-broadcast icon-microphone icon-book icon-paper icon-paper-2 icon-new icon-copy icon-folder icon-folder-2 icon-tag icon-cart icon-basket icon-calculate icon-support icon-phone icon-mail icon-location icon-compass icon-history icon-clock icon-bell icon-bell-2 icon-bell-3 icon-calendar icon-mouse icon-screen icon-laptop icon-mobile icon-tablet icon-mobile-2 icon-drawer icon-drawer-2 icon-box-add icon-box-remove icon-database icon-undo icon-redo icon-forward icon-reply icon-reply-2 icon-comments icon-comments-2 icon-comments-3 icon-comments-4 icon-comments-5 icon-comments-6 icon-user icon-user-2 icon-user-3 icon-busy icon-loading icon-loading-2 icon-search icon-search-2 icon-zoom-in icon-zoom-out icon-key icon-key-2 icon-locked icon-unlocked icon-wrench icon-equalizer icon-cog icon-pie icon-bars icon-stats-up icon-gift icon-trophy icon-diamond icon-coffee icon-rocket icon-meter-slow icon-meter-medium icon-meter-fast icon-dashboard icon-fire

These icons are pretty weird as they only show up sometimes and not all the time.

They show up fine on Opera because Opera always has the best CSS.

Hi based on the demo page bootstrap-javascript i would like to suggest a capability.

if you add in this page a toolbar app could be posible based on the visibility of and element or if this is in the visible area, to customize the toolbar actions?

I mean if you click in modal in the subnav element you are scrolled to modal section and this means that in the app bar appear and action that let you launch a modal window, on the other hand if you click on the collapse nav option you are scrolled to this section and in this case the action of the app bar could be print the page from this point to this point.

Could be use visibility option:

if( $('#modal').is(':visible') ) {
// it's visible, do something

}else {
// it's not visible so do something else
}

or perhaps check if the section menu is in the visible area:

function isElementVisible(element) {
element = $(element);
var parent = $(window);
var containerLeft = parent.parent().scrollLeft();
var containerRight = containerLeft + parent.parent().width();
var elemLeft = element.offsetLeft;
var elemRight = elemLeft + $(element).width();
if (elemLeft < containerLeft || elemRight > containerRight) {
return false;
}
return true;
}

    if(isElementVisisble(modal.h5)){
         //inside visble area
     } else

{

}

Tx

manifest caching woudl be fab.
also a node script to automatically make the manifest would be awesome because me and others woudl need to include our own assets in it.

I plan to use this to make desktop, web, android and iphone applications.
Hence the app manifest.

I also plan to use pouchDB with to allow full off line data and synchronisation possabilities.

would be nice if you add custom scrollbar styles, as in new outlook mail

https://gist.github.com/4088787

In IE7/8 wincommand buttons in the appbar have a blue background instead a transparent one.

The naming for the icon-seven-segment (see the icon page) seems almost deliberately confusing.

icon-seven-segment is a 0 while icon-seven-segment-2 is 1, and the pattern continues all the way to icon-seven-segment-10 being 9.

Currently, the download seems to include everything there is in the project. Why not create a NuGet package that will only install the nessecary components?

Nice work on this interface. Unfortunately, it looks like the demo on the main site is not responsive. I've tested it in multiple browsers and on multiple devices...pc, mac, ipad, android phone. The main navigation only shows the first category of navigation items on the hub page. I also downloaded and tested the code locally. The primary navigation looks like it has all the correct bootstrap classes and all the css is there, but it doesn't respond to changes in browser size.

Hi
would you mind to describe or to point to a url where a best practices (folder structure, use of knockout templates, javascript async gui, etc) are described for a visual Studio MVC4/webapi project.

What about transitions for Single Page applications.

Tx

There is a small defect in hub.html

You have:

but the there is no such stylesheet "assets/css/bootmetro-icons-ie7.css"

http://aozora.github.com/bootmetro/charms-demo.html

and

http://aozora.github.com/bootmetro/images.html

Add a page to demo a bootstrap form, with a customized metro calendar

How to make the icons in the Applicationbar clickable?
I tried everything. A simple doens't work. Neither adding onClick="window.loctation... to the span does'nt work. Can someone help me?

Map Segoe UI Symbol to CSS classes in order to replace and extend the Bootstrap glyphicons.

For the Hub page, make a css pseudo class for 2 scroll layout, using mousewheel plugin or with metro arrow button

• horizontal scroll
• vertical scroll

It would be awesome if a user could use the arrow keys to navigate through the tiles. Great project so far though.

You now have

.panorama {
overflow: auto
}
in bootmetro.css, which results in an ugly horizontal scroll bar (at least in Chrome and Firefox).
Accedent or on purpose?

hub page tiles moving when we scroll on up direction
by default it is down for moving a page

sorry for my english

Good morning

Just wondering if any plans for full compatability in IE 8 and also IE 7 ?

Thanks

Shane

In the table demo, add a column with checkboxes.

page:

http://aozora.github.com/bootmetro/scaffolding.html

404 file:

http://aozora.github.com/bootmetro/assets/img/responsive-illustrations.png

In Base-Css.html, after changing theme to Dark by way of 'Settings', the text elements in bs-docs-example classes appear to change to a foreground color of white. Hence, the text is not visible. Changing the theme back to Light causes the foreground color to revert to black. And thanks for putting BootMetro together – a really nice piece of work!

I was wondering if having responsive tiles could be helpful. As of now, du eto the fact that BootMetro tries to replicate the Metro style, Tiles too have the same standard size of the original: i.e. square tiles are 150x150, wide 310x150 etc.
I can make tiles responsive without a fixed width, and using the span* classes of bootstrap to set it instead; that will ensure correct resizing of a hub page with various display resolutions.

Let me know what you think about it.

In your website demo (http://aozora.github.com/bootmetro/hub.html), the design is intended for use with a width of 640 + 640 + 320px.
In a smaller resolution, the content is clipped.

You can add a css attribute for "metro-sections" -> "100% width." Hidden content will appear on a new line. However, I'm not sure that there will be no impact.

EDIT : I just see that it is possible to scroll. But there is still no scrollbar.

I know the charms page is yet to be written, but do charms offer the ability to slide multiple divs in and out of the charms panel like the pivot control does? Windows 8 does something like this when using the settings charm in any of the standard apps (like Mail or Calendar), and selecting any one setting seems to pop out another sidebar/charm panel of varying width. It seems like it would be more fluid if the next panel just slid in from the right like a pivot control. Does the existing charms control handle the need to show multiple divs as a user navigates one of many master-detail relationships shown in the sidebar?

add specific css for IE7 support

Add hover effect for single cells for tables

Move all css to LESS files, and customize the Bootstrap LESS files in order to achieve a seamless integration if possible.

In the application bar the border seems truncated. Setting the min-width of the win-command element to 44px helps.

For the backbutton, the arrow is not centered in the circle. No idea how to fix this one.

Is there any fall back built in for those that don't have a mouse wheel? Any quick way to add navigation arrows or similar.

Looks like a great looking project, but the button dropdown menus do not capture the click on iOS. It looks to me as though the user clicks on whatever is beneath the menu rather than the menu itself.

Any clue on what would be needed to help with this?

Hi Aozora,

Its not actually an issue.
Few contextual icons are missing in the footer of appbar-demo.html example.Home , search Icon .
Just want to know how icon are added in this way - win-commandimage class and span tag with value similar to ! .
It would be really good we have wiki documentation also for this project.

Thanks & Regards
Anil

In IE7/8 the backbutton display only an empty bordered square...

Due to the fact that in any case IE7 and 8 don't support rounded border, think about provide an image as fallback.

Horizontal scroll not working in the hub page in Chrome or IE, works only in firefox.

Add Notification demo page, and edit the relative section in the bootstrap component page

Hi aozora,

You said bootmetro is based on Metro-UI-CSS, will the changes of the future of Metro-UI-CSS be merged into bootmetro project? What's the goal of bootmetro project (more than Metro-UI-CSS project)?

And another question, what's the significance of using Twitter bootstrap? I think it's a full featured UI framework, if I desided to use bootmetro + jQuery UI, will them confict or redundant?

Execuse me that I could find your contact information, so I ask question here.
Thank you.

How can I show charm by default, I want to load the page and at the same time show the charm ??

Be it Opera Next or the Opera browser, bootmetro is extremely broken on Opera.

There are so many bugs and issues with it, is it even being supported?

If its not supported, is there any ETA on the support for Opera web browser?

See http://aozora.github.com/bootmetro/bootstrap-components.html#buttonDropdowns
in Chrome btn-large is broken

In webkit the backbutton arrow is vertically not aligned.

having some problem in bootmetro when integrating in MVC3 project
affix is set on top 0 in page size
not in container