Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jul 11 2016 19:26

    Splaktar on master

    fix(toast): apply theming corre… perf(icon): better handling of … fix(list): copy ng-show, ng-hid… and 49 more (compare)

  • Jun 15 2016 16:14

    Splaktar on v1.1.0-rc.5

    release: version 1.1.0-rc.5 (compare)

  • May 14 2016 05:55

    Splaktar on master

    feat(panel): initial implementa… update(panel): promise logic im… update(panel): add and remove p… and 44 more (compare)

  • May 05 2016 20:47

    Splaktar on v1.1.0-rc4

    release: version 1.1.0-rc4 (compare)

  • May 05 2016 20:47

    Splaktar on v1.1.0-rc3

    release: version 1.1.0-rc3 (compare)

  • May 03 2016 22:28

    Splaktar on es6-tutorial

    Prepare clean start Remove bow… install angular-material And i… working version of starter-app and 19 more (compare)

  • May 03 2016 22:22

    Splaktar on master

    Tutorial Readme updates Updates for Tutorial #2 Update README with tutorial ste… and 56 more (compare)

  • May 01 2016 22:56

    Splaktar on fixBlurryRightNavIe11

    fix(sidenav): rightNav button a… (compare)

  • May 01 2016 22:37

    Splaktar on master

    fix(dialog): don't clobber md-d… update version number in packag… update(changelog): sort so 1.1.… and 1 more (compare)

  • May 01 2016 22:34

    Splaktar on fixSideNavDemo

    docs(sidenav): leftNav text isn… (compare)

  • Apr 27 2016 04:14

    Splaktar on fixSideNavDemo

    docs(sidenav): invalid `md-whit… (compare)

  • Apr 27 2016 03:54

    Splaktar on master

    update(changelog): add missing … fix(toolbar): remove transition… fix(tests): Cleans up the DOM a… and 2 more (compare)

  • Apr 23 2016 01:32

    Splaktar on master

    update(docs): improve docs for … update(docs): renamed `md-text-… fix(list): clickable list-items… and 71 more (compare)

  • Apr 11 2016 03:20

    Splaktar on improveExtendThemeDoc

    update(docs): improve docs for … (compare)

  • Apr 11 2016 03:15

    Splaktar on improveExtendThemeDocs

    update(docs): improve docs for … (compare)

  • Apr 11 2016 02:57

    Splaktar on updateThemingDocs

    update(docs): renamed `md-text-… (compare)

  • Apr 11 2016 02:48

    Splaktar on master

    fix(demo, codepen): use secure … fix(build, layout): remove depr… update(build): remove stale bow… and 72 more (compare)

  • Apr 11 2016 02:48

    Splaktar on v1.1.0-rc2

    release: version 1.1.0-rc2 (compare)

  • Mar 19 2016 03:00

    Splaktar on master

    fix(checkbox): pointer events d… update(tests): remove disabled/… fix(datepicker): enable scrolli… and 20 more (compare)

  • Mar 13 2016 05:41

    Splaktar on v1.0.6

    Revert "fix(select): made selec… update(layout): add layout-nowr… fix(whiteframe): update breakpo… and 57 more (compare)

Vassilis Pitsounis
@vapits
I know @wayfarerboy but it's impossible to transfer the app to a codepen example it's a huge app :/
Felix Becker
@felixfbecker
Does anyone here have experience with switching a large application thats currently in production from Bootstrap to ngMaterial?
Al Pagan
@wayfarerboy
@vapits np. So you've added the 'ngMaterial' require when you initialise your app: angular.module('myApp', ['ngMaterial'....])?
Vassilis Pitsounis
@vapits
Yes
And my html look like this in the spesific tempalte:
<md-content>
<md-list>
<md-list-item class="md-3-line" ng-repeat="item in datasetData.data">
<div class="md-list-item-text">
<h3>{{item.city}}</h3>
<h4>{{item.country}}</h4>
</div>
<md-button class="md-secondary">Delete</md-button>
<md-divider ng-if="!$last"></md-divider>
</md-list-item>
</md-list>
</md-content>
Al Pagan
@wayfarerboy
@vapits And what does the config call look like when you're setting a default material theme?
Vassilis Pitsounis
@vapits
$mdThemingProvider.theme('default')
.primaryPalette('blue')
.accentPalette('blue-grey')
.warnPalette('orange');
and of course $mdThemingProvider is injected there
Felix Becker
@felixfbecker
Because there are a few things that I'm struggling to replace:
  • Basic responsive container (<div class="container"></div>)
  • Navbar (combination of toolbar + tabs maybe?)
  • Accordion (vAccordion on npm)
  • Tables with hover and success, danger, warning row styles
Al Pagan
@wayfarerboy
@vapits And checking the <head>, are there any inline styles being injected at all?
Vassilis Pitsounis
@vapits
nope, not inline stylings nowhere in my app
Al Pagan
@wayfarerboy
@vapits Definitely sounds like ngMaterial's not initialising, although you're saying there are no errors so that would suggest things are hunky-dory. Hmm....
Vassilis Pitsounis
@vapits
Yeap i beleive that too. I;m using browserify and i have added there also and it seems that is loaded
require('angular-material');
require('angular-aria');
added both in my libs
and inwhen i run browserify i get no errors either there
Felix Becker
@felixfbecker
@vapits Did you also require('angular') and bootstraped your app with ng-app="..." ?
Vassilis Pitsounis
@vapits
yes of course :)
Al Pagan
@wayfarerboy
@vapits I'm not familiar with browserify, so I'm wondering if there lies the problem. Difficult without launching an identical setup and checking sequence step-by-step.
Felix Becker
@felixfbecker
I made this mistake so many times already, never figured out why I didn't get any errors, and then it hit me and I felt like an idiot xD
I'm using browserify too
Al Pagan
@wayfarerboy
@felixfbecker hehe. Definitely been there :)
Vassilis Pitsounis
@vapits
i'm sure @felixfbecker that's something probably something stupid from me but this is an excisting huge angular project running for a long time. The only change is adding angular material there
Al Pagan
@wayfarerboy
@vapits And angular-material.css is definitely in head too?
Vassilis Pitsounis
@vapits
well, browserify does this for me so i guess it's one minified css file
sorry grunt i mean
Al Pagan
@wayfarerboy
@vapits Do a search for .md-ripple-container in the minified css file and check. If you can't find it then you have your answer.
Vassilis Pitsounis
@vapits
omg u found it
Al Pagan
@wayfarerboy
@vapits YAY!
Vassilis Pitsounis
@vapits
i was doing this:
@import "../lib/angular-ui-grid/ui-grid.css";
instead of this:
@import (less) "../lib/angular-ui-grid/ui-grid.css";
stupid as always :P
thank you both guys! save my day :)
Al Pagan
@wayfarerboy
At least you know you won't be making that mistake again :D
Vassilis Pitsounis
@vapits
:beers:
Al Pagan
@wayfarerboy
:+1:
Felix Becker
@felixfbecker
Gonna ask my question again
Does anyone here have experience with switching a large application thats currently in production from Bootstrap to ngMaterial?
Because there are a few things that I'm struggling to replace:
  • Basic responsive container (<div class="container"></div>)
  • Navbar (combination of toolbar + tabs maybe?)
  • Accordion (vAccordion on npm)
  • Tables with hover and success, danger, warning row styles
Al Pagan
@wayfarerboy
@felixfbecker Just working on a simple toolbar/sidenav/content codepen for you now...
Felix Becker
@felixfbecker
@wayfarerboy appreciate it! thanks!
Al Pagan
@wayfarerboy
@felixfbecker OK, let's start with this template and we can expand on the areas you're not sure of: http://codepen.io/wayfarerboy/pen/VvOJJv
Felix Becker
@felixfbecker
thank you for your effort. So layout-margin basically makes a container like Bootstrap's?
Al Pagan
@wayfarerboy
No, layout="column||row" is the container, and the designation of "column" or "row" informs the wrapper how to arrange its children.
layout-margin and layout-padding just adds margin and padding to each child or group of children (the same way you can with table rows and cells)
layout-fill tells the combined child elements to fill the wrapper space and layout-wrap tells child elements to continue onto another column/row if their combined size extends the wrapper
I'm using wrapper and container to mean the same thing there - the element that has layout="column||row". Sorry, I'll use the term container from now on.
Felix Becker
@felixfbecker
The bootstrap class="container" is just a content wrapper that is 100% width on mobile, something like 80% on tablets and about 60% or so on desktops. So it just makes a nice responsive content wrapper that applies padding to the content depending on the device size
It still don't fully understand what I have to apply to my wrapper div in ngMaterial to get a similar behaviour, could you elaborate?
Al Pagan
@wayfarerboy
Does this example make it a little clearer? http://codepen.io/wayfarerboy/pen/xwoKbq I've tried to simplify the example so that it emulates the 'container' class in bootstrap.
Notice that flex flex-md="80" flex-gt-md="60" are added to the child elements of the layout="row" container. This means the child elements flex a percentage of the total width of the container. If the container used layout="column", then the child elements would flex a percentage of the total height.
Felix Becker
@felixfbecker
yes, thank you!
I think for data tables I will just write my own CSS that resembles the Material Design spec.