Skip to content

Instantly share code, notes, and snippets.

@hiteshsahu

hiteshsahu/angular-material-grid-of-card-responsive-2.markdown

Created September 17, 2017 06:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hiteshsahu/f354dc23676ade6c1d798240d5a82be7 to your computer and use it in GitHub Desktop.
Save hiteshsahu/f354dc23676ade6c1d798240d5a82be7 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Material - Grid of card Responsive 2
Raw
angular-material-grid-of-card-responsive-2.markdown
Raw
index.html
<head>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
</head>
<body ng-app="MyApp" class="gridListdemoBasicUsage" ng-controller="AppCtrl as appCtrl" layout="column">
<main>
<md-toolbar md-scroll-shrink ng-if="true" ng-controller="TitleController">
<div class="md-toolbar-tools">
<h3>
<span>{{title}}</span>
</h3>
</div>
</md-toolbar>
<md-content>
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="Tori Black">
<md-content class="md-padding">
<h1 class="md-display-2">Tori Black</h1>
<div class='md-padding' layout="row" layout-wrap>
<md-card flex-sm="25" flex-gt-sm="20" flex="100" ng-repeat="item in messages">
<img ng-src={{item.face}} class="md-card-image" alt={{item.who}}">
<md-card-title style="padding:5px">
<md-card-title-text>
<span class="md-title">{{item.what}}</span>
<span class="subhead">{{item.who}}</span>
<p class ='grey-text'>{{item.notes}}</p>
</md-card-title-text>
</md-card-title>
<md-card-actions layout="row" layout-align="center" style="padding:0px">
<md-button class="md-fab md-mini" ng-style="{'background-color':'green'}" ng-click="increaseQuantity()">
<md-icon aria-label="Menu" class="material-icons" >add</md-icon>
</md-button>
<div layout-align='center center' layout='column'>
<span class="md-headline">{{productQuantity}}</span>
</div>
<md-button class="md-fab md-mini" ng-click="decreaseQuantity()">
<md-icon class="material-icons" >remove</md-icon>
</md-button>
</md-card-actions>
</md-card>
</div>
</md-content>
</md-tab>
<md-tab label="two">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Two</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p>
<p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p>
<p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
</md-content>
</md-tab>
<md-tab label="three">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Three</h1>
<p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
</md-content>
</md-tab>
</md-tabs>
</md-content>
</div>
</main>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</body>
Raw
script.js
angular.module('MyApp',['ngMaterial'])
.controller('TitleController', function($scope) {
$scope.title = "Adult Movie DataBase ";
})
.controller('AppCtrl', function($scope) {
var imagePath = 'https://i6.fuskator.com/large/l4bDokX55UX/image-2.jpg';
$scope.messages = [{
face : imagePath,
what: 'Brunch this weekend?',
who: 'Min Li Chan',
when: '3:08PM',
notes: " I'll be in your neighborhood doing errands"
}, {
face : 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Tori_Black_AVN_2010.jpg/200px-Tori_Black_AVN_2010.jpg',
what: 'Brunch this weekend?',
who: 'Min Li Chan',
when: '3:08PM',
notes: " I'll be in your neighborhood doing errands"
}, {
face : 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Tori_Black_at_FAME_Awards_2010.jpg/200px-Tori_Black_at_FAME_Awards_2010.jpg',
what: 'Brunch this weekend?',
who: 'Min Li Chan',
when: '3:08PM',
notes: " I'll be in your neighborhood doing errands"
}, {
face : 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Tori_Black_2014.jpg/220px-Tori_Black_2014.jpg',
what: 'Brunch this weekend?',
who: 'Min Li Chan',
when: '3:08PM',
notes: " I'll be in your neighborhood doing errands"
}];
var imagePath = 'https://i6.fuskator.com/large/l4bDokX55UX/image-2.jpg';
$scope.productQuantity = 0;
$scope.increaseQuantity = function() {
$scope.productQuantity = $scope.productQuantity+1;
};
$scope.decreaseQuantity = function() {
$scope.productQuantity!=0 ? $scope.productQuantity = $scope.productQuantity-1: $scope.productQuantity = 0;
};
});
Raw
style.css
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
.gridListdemoBasicUsage md-grid-list {
margin: 8px;
}
.gridListdemoBasicUsage .gray {
background: #F3F3F3;
}
.gridListdemoBasicUsage md-grid-tile {
transition: all 400ms ease-out 50ms;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.parent {
overflow: hidden;
}
.card img {
width: 100%;
height: auto;
}
Raw
styles
<link href="https://gitcdn.xyz/repo/angular/bower-material/v0.10.1-rc4/angular-material.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment