Hey Bootcard,

Any thoughts of registering an npm package for bootcards?

Thanks!

Is it possible to add horizontal scroll/swipe feature to go through multiple cards?

I'd prefer it if the slide-in menu just overlays the existing pane(s) of content rather than pushing it to the right.

In the screenshots below, there is a modal that is larger than the screen (in this case landscape iPhone but equally applies for larger modals on larger mobile device screens). When you scroll to see the bottom of the modal the background of the modal disappears.

I’ve updated bootcards-android.css in the repo src.

@markleusink – It fixes the problem on my test version, but let me know if that fixes it for you too

I'm playing with boot cards and getting less-than-desirable results with 1.1.2 and Bootstrap 3.3.5.

It seems that the font-size of h4 changed in Bootstrap
3.3.1 = 14px
3.3.5 = 18px

Such a small change breaks the look of Bootcards. To avoid this, you have 2 options:

• use a preprocessor to adjust sizes automatically
• lock to a specific Bootstrap release (instead of saying "^3" like your bower.json says)

If I position the markup for a modal anywhere inside the main .bootcards-container div the modal is hidden behind the modal-backdrop div.

if I change this line:

.bootcards-container,.offcanvaslist-toggle{-webkit-transform:translate3d(0px,0,0);-moz-transform:translate3d(0px,0,0);-o-transform:translate3d(0px,0,0);-ms-transform:translate3d(0px,0,0);transform:translate3d(0px,0,0);-webkit-transition:.25s ease;-moz-transition:.25s ease;-o-transition:.25s ease;transition:.25s ease}

To this:

.offcanvaslist-toggle{-webkit-transform:translate3d(0px,0,0);-moz-transform:translate3d(0px,0,0);-o-transform:translate3d(0px,0,0);-ms-transform:translate3d(0px,0,0);transform:translate3d(0px,0,0);-webkit-transition:.25s ease;-moz-transition:.25s ease;-o-transition:.25s ease;transition:.25s ease}

Then the problem goes away. Is this something I can request? I have to use the .bootcards-container class for the menu system / portrait iPad functionality.

The ">" arrow in a list does not always render correctly.

It appears to be rendering the content as more than one character.

    a.list-group-item:before {
        font-family:FontAwesome;
        content:'�';
        ...
    }

Note: I am using Chrome 42.0.2311.90 m on Windows 7 Pro.

With current dist code in master, bootcards-dekstop.css renders:

Several styles that exist on the demo page (http://demo.bootcards.org/contacts), like

are missing.

Am I missing something?

As it seems that bootcards is using some serious magic to use only one css file from three included, it is not compatible with meteor.js, which compiles all css into one big file. Maybe you have some idea how I could make bootcards work properly with all three css files being there at the same time?

Or maybe you can point at the piece of code that does css file selection? It is unlikely that it I could somehow create my own version of bootcards that does css inclusion differently, but I could at least check it out.

I have also described this issue at the repo that tries to package bootcards for meteor. MasahiroMorita/mmorita-bootcardsjs#2

thanks in advance for any pointers!

How do you handle pagination?

For some reason, slide-in activation isn't reliable on my iPad, sometimes it works and sometimes it doesn't, you often have to tap 2 or 3 times to get it to work.

(I've seen this sort of behaviour before on an old Unplugged Controls release and it was caused by a bug in the menu button code. The other possible explanation is that my iPad screen has become desensitised at the top left hand side, but this I have ruled out because top left buttons work fine in other apps)

The website says that v0.2.0 is current, but the documentation page shows HTML that (apparently) is for v0.1.0. I spent the better part of my morning trying to figure out why my offscreen sliding nav wasn't picking up the correct styling, even though the CSS was loaded:

docs:

<div class="navmenu navmenu-default navmenu-fixed-left offcanvas">...</div>

v0.2.0 /samples/starter-template.html:

<nav class="navmenu offcanvas offcanvas-left">

I know, I know. That's what I get for copy-pasting from documentation.

See bootcards/demoapp#56

A few changes to make this even better:

1. Add $ sign to numbers in chart and table
2. Right-justify numbers in table
3. Comma format for $0,000s
4. Change title of left hand summary card in dashboard from "Summary Card Heading" to "Dashboard"
5. Make circle chart tappable, so that you can tap each segment of the circle to see the corresponding team member name and closed sales number

Size of cards should increase if the footbar does not exist.

It remains same - tested in Android.

Hi,

Great project! So happy I stumbled over it.

Do you think bootcards would work well with Boostrap Material?
http://fezvrasta.github.io/bootstrap-material-design/

Any immediate concerns?

Thanks in advance :)

Am I missing something? I spent forever trying to figure out why my sliding sidebar wasn't working, and finally got it to work after figuring out that I needed to initialize bootcards first using bootcards.init(). I can't find anything in the documentation about this, I found it at the bottom of the demo. Is this documented anywhere?

The addition of the following CSS:

#main {
  -webkit-transform: translate3d(0px, 0px, 0px);
  -moz-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate3d(0px, 0px, 0px);
  -ms-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  -webkit-transition: 0.25s ease;
  -moz-transition: 0.25s ease;
  -o-transition: 0.25s ease;
  transition: 0.25s ease;  
}
#main.active-left {
  -webkit-transform: translate3d(200px, 0px, 0px);
  -moz-transform: translate3d(200px, 0px, 0px);
  -o-transform: translate3d(200px, 0px, 0px);
  -ms-transform: translate3d(200px, 0px, 0px);
  transform: translate3d(200px, 0px, 0px);
}
#main.active-right {
  -webkit-transform: translate3d(-200px, 0px, 0px);
  -moz-transform: translate3d(-200px, 0px, 0px);
  -o-transform: translate3d(-200px, 0px, 0px);
  -ms-transform: translate3d(-200px, 0px, 0px);
  transform: translate3d(-200px, 0px, 0px);
}

Causes modals that are placed within the body of a page (rather than being right at the end) to not work correctly. I can't see any issue with simple removing the above chunk which is what I've done with the Bootstrap Controls at the moment.

after doing an npm install, one has to do an npm install grunt-text-replace --save-dev before grunt will run.

Up to 3 levels of navigation options preferably.

With the iOS CSS file, radio and checkbox buttons aren't rendered - at all. Seem to be caused by this line in the iOS CSS:

-webkit-appearance:none;

Not sure if I'm missing something or if this is an error.

I haven't checked/ tested this on Android.

The full screen web app doesn't work properly when in portrait mode on my Android Galaxy Note 3 with Kitkat 4.4.

If I load the app, I see the Dashboard ok but when I tap onto Companies or Contracts from the slide-in menu I get a blank screen. I also get a blank screen if I tap onto Companies or Contacts from the summary cards in the dashboard.

In Landscape mode it works pretty much ok, except that the Charts are blank when I tap onto the Charts screen. Staying in that screen and rotating to Portrait mode gets the Charts back.

This issue was discovered in the XControls project:
whitemx/xcontrols-domino#338

Hopefully this video gives a little more detail:
https://vimeo.com/londc/review/132905944/2654f43adc

Basically in portrait mode, when expanding a menu item with sub menus in it, the menu disappears each time it is tapped, so you have to keep re-opening the menu to navigate through the application.

When I open the menu sidebar on my iPad there is a slight flicker of the whole screen. Not sure if there is an easy solution to it?

http://teamstudio.s3.amazonaws.com/MenuFlicker.mp4

Remove the double pane mode when using iPad in portrait orientation, and revert to single display pane

how to do contacts drag from one group to another like icloud.com.

It seems to be missing .bootcards-summary .panel-body .bootcards-summary-item h1 Also the span is not styled either.

Should be simple for you to release the code for the demo app.

The following appears in the source for Form cards. This is... to say the least... problematic.

.form-horizontal .form-group div div {
    padding: 0;
}

For larger phones is there an option to have a listCard at the bottom half of the screen and a form in the top half? This makes it easier for users to control apps with one hand. The image below sorta depicts this: the list at the bottom and the card would be where the album covers are (there could be a button to minimize the list if the form card is large):

Becaouse of following css code nav bar is displaced downwards.

body {
  padding-top: 80px;
  background: #f5f5f5; 
}

Is the above code deliberate added and serves any purpose?

Is it completely out of scope?

See the attached screenshot, the text doesn't wrap when it's too long for the tab area.

For List views displayed in the left hand panel in landscape orientation, we need an A to Z picker that works in a similar way to the one in iOS Contacts on iPad.

Hello,

I want to start off with a big thank you to the contributors of this library. I've used Bootcards in a recent project and it is a wonder to work with.

Have you thought about replacing the ruby implementation of Sass with libSass? (http://sass-lang.com/libsass)

There is great library that provides bindings for Node.js to libsass: Node-sass (https://github.com/sass/node-sass)

In my opinion, this would be beneficial, since an installation of Ruby would no longer be required and libSass is up to 4000% faster than the ruby distribution.

It would be good to do some kind of verification (e.g. checksum) on our web app code, maybe as a tool in the demo app, or maybe as an automatic check on startup (better) (which may or may not be technically possible) .

Wireless networks can be very unreliable and lead to incomplete sync sessions or corrupt data.

One one particular network (Highland Capital office wifi in London) I observed inconsistent network behaviour and this was correlated with various breakage modes of the Bootcards demo app, whether it was the stable release or the new release. So it seems that you can break a web app, especially when it is working in full screen mode, just by downloading and installing it over an unreliable network (by unreliable, I mean a network that is prone to random and significant packet loss).

(btw I've seen this sort of behaviour before in Unplugged, with the Unplugged Android engine, which uses an older version of the Unplugged sync code which has less error checking in the sync protocol compared to the latest iOS release. It's very disconcerting when it happens, because it causes you to lose trust in the app)

even starter is not working and also examples in docs. I have checked all things.

The independent scrolling of lists requires the structure of the HTML markup to be

body > .container > .row {
    height: 100%;
    padding-bottom: 50px;

}

So this means that if my page structure is body > form > container > row then scrolling isn't working. Workaround for me is to define a class name to apply to the row to set the height to 100%

When installing bootcards via bower, the css files are not installed. This is probably due to the fact that bower.json refers to non-existing file "dist/css/bootcards.css".

See screenshot: the margin between the menu button & icon seems a lot bigger compared to the margin between the edit button & icon. Is this a markup or CSS issue?

Its fairly easy to provoke the Demo web app to fall out of full screen mode into a browser view.

Go to Contacts in landscape mode
Rotate to portrait mode
Tap on slide in menu (2 or 3 times because it is unreliable see previous issue)
Tap on "Menu" button at top left to go back
Then select something else on the Slide-In Navigator e.g. Companies
You are switched out of full screen mode back into the browser view

There are quite a few user pathways that can provoke this - this is just one example.

Idea

Make the cards where they sit along side each other like google+ did.

When I use the latest version I get the menu bar in the wrong place on IOS and Android

<body id="bootcards">

  <!-- fixed top navbar -->
  <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand no-break-out" title="Bootcards Starter" href="/">Bootcards</a>
        </div>

        <button type="button" class="btn btn-default btn-back pull-left hidden" onclick="history.back()">
        <i class="fa fa-lg fa-chevron-left"></i><span>Back</span>
      </button>
      <!-- menu button to show/ hide the off canvas slider -->
      <button type="button" class="btn btn-default btn-menu pull-left offCanvasToggle" data-toggle="offcanvas">
        <i class="fa fa-lg fa-bars"></i><span>Menu</span>
      </button>


      <!--navbar menu options: shown on desktop only -->
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li>
            <a href="#">
              <i class="fa fa-dashboard"></i>Dashboard
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-building-o"></i>Companies
            </a>
          </li>
          <li class="active">
            <a href="#">
              <i class="fa fa-users"></i>Contacts
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

What am I doing wrong or is it a bug?

Related to whitemx/xcontrols-domino#335

Basically on a phone we want to be able to have two lines of text. We had this working on an earlier version of Bootcards by simply adding a margin to the header, but that no longer works. Any ideas?

Less or Sass (both!) so we can change the colors, the styling without hassles.

This problem is not evident on demo.bootcards.org because that uses release 1.1.0. If you download 1.1.2 dist, change starter-template.html to use the android theme and then serve locally, you should be able to see this:

https://github.com/bootcards/bootcards/blob/1.1.1/src/css/bootcards-android.scss#L160 appears to introduce this. Simply deleting the negative margin appears to fix it on this particular android screen format, but I'm unsure of the impact on other formats.

If I have a lot of text in the description for a summary card item, then it doesn't wrap when viewing on a small screen.