<mat-drawer-container style="text-align: center;" class="example-container">
<mat-drawer mode="side" #drawer opened>
<div fxFill class="side-card">
<mat-card-title ngsReveal>
<mat-icon>landscape</mat-icon> Property Cloud
<mat-icon>landscape</mat-icon>
</mat-card-title>
<mat-card class="side-menu">
<mat-card-header>
<div class="example-header-image"></div>
<mat-card-subtitle></mat-card-subtitle>
</mat-card-header>
<hr>
<mat-card-content>
</mat-card-content>
<div style="text-align: center;" class="mt-5">
<div class="t-5">
<button ngsReveal mat-raised-button><a routerLinkActive="active" routerLink="property_feed"> </a>Property feed</button>
</div>
<div ngsReveal class="t-5">
<button mat-raised-button>My Account</button>
</div>
<div class="t-5">
<button ngsReveal mat-raised-button>My Properties</button>
</div>
<div class="t-5">
<button ngsReveal mat-raised-button> My Wishlist</button>
</div>
<div class="t-5">
<button ngsReveal mat-raised-button> Settings and privacy</button>
</div>
</div>
</mat-card>
</div>
</mat-drawer>
<mat-drawer-content>
<div fxFill class="main-card">
<app-header (toggleEmitter)="drawer.toggle()"></app-header>
<div fxLayout="row wrap" >
<div *ngFor="let ppty of property">
<div ngsReveal fxFlex>
<mat-card class="property-feed">
<mat-card-header>
<div mat-card-avatar class="avatarImage"></div>
<mat-card-title >Card Title</mat-card-title>
<mat-card-subtitle >Card Subtitle</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<app-gallery ></app-gallery>
<h3>some informaion to the end user</h3>
</mat-card-content>
<mat-card-footer>
</mat-card-footer>
<mat-card-actions>
<button matTooltip="If intrested contact seller" mat-fab large color="primary">
<mat-icon>thumb_up_alt</mat-icon>
</button>
<button matTooltip="If intrested add to wishlist" mat-fab large color="warn">
<mat-icon>add_shopping_cart</mat-icon>
</button>
<button matTooltip="View details" mat-fab large color="warn">
<mat-icon>unfold_more</mat-icon>
</button>
</mat-card-actions>
</mat-card>
</div>
</div>
</div>
</div>
</mat-drawer-content>
</mat-drawer-container>
In ngx-scrollreveal , ngsReveal is Hiding components which should animate on scroll.Only components which is within viewport of website is showing and animating. other than cards which should reveal on scroll is hidden.I could see the cards are present there, since i have a click event, its working but components are hidden. And I couldn't see any console errors.
"./node_modules/scrollreveal/dist/scrollreveal.min.js", is imported in angular.json
Its working for element except in viewport,On later experiemnting by placing content in different places.
div is getting hide because its placed under mat-drawer-content. Any idea why its hiding elements that is not coming at the first time loading.
I could see the difference for this displayed card's html and hidden card's html is different in case of opasity but dont know what is causing it. Its working fine except inside mat-drawer-container.
import { Component, OnInit } from '#angular/core';
import { NgsRevealConfig } from 'ngx-scrollreveal';
#Component({
selector: 'app-property-feed',
templateUrl: './property-feed.component.html',
styleUrls: ['./property-feed.component.scss'],
providers: [NgsRevealConfig]
})
export class PropertyFeedComponent {
property =[1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10];
}
button {
margin: 5px 5px 5px 5px;
}
.feed-title {
font-size: 30px;
font-family: "Girassol", cursive;
}
.property-feed {
width: 300px;
height: 410px;
margin-top: 15px;
margin-right: 10px;
}
#media only screen and (max-width: 600px) {
.property-feed {
width: 300px;
height: 410px;
margin-top: 10px;
margin-right: 5px;
}
}
<!-- begin snippet: js hide: false console: true babel: false -->
[ngsReveal]="{delay: some_delay, reset: false}"
Try using binding it's properties with html element!
PS: I am not sure that this will work in your scenario or not.
Try add className (button) and add your class name to container
<button class="button" [ngsReveal]="{reset: true, container: '.button'}" mat-raised-button> My Wishlist</button>
Related
I have an accordion in Html
<accordion [isAnimated]="true">
<accordion-group heading="Date Created">
{{ example text }}
</accordion-group>
</accordion>
I want to reduce the size of the box, text and the text when clicked. Basically reduce the size of entire box. How to do that?
I have tried these below which reduce the Header text and body text but not the box
<accordion-group panalClass="xyz">
<button
class="btn btn-link btn-block clearfix"
accordion-heading
type="button" panalClass="xyz"
>
<div class="pull-centre float-centre" style="background-color: blue;">
Date Created
</div>
</button>
{{ example text }}
</accordion-group>
I want to align the element with rest of the page.
Since I didnt find an option to resize it I found out that I have to use the angular generated classes (Shadow CSS concept) which can be seen in the elements section in console page. In this case it was ".panel-heading" and ".panel-body".
Use the angular class within your own class to make the effect IN styles.css to get the effect. Like this:
.accordion-small {
.panel-heading {
padding: 0px;
}
}
.accordion-small {
.panel-body {
padding: 5px;
font-size: small;
text-align: center;
}
}
In html:
<accordion [isAnimated]="true" class="accordion-small">
<accordion-group>
<button
class="btn btn-link btn-block clearfix"
accordion-heading
type="button"
>
<div class="pull-centre float-centre header-name">
Date Created
</div>
</button>
{{ example text }}
</accordion-group>
</accordion>
In component css
.header-name {
font-size: small;
}
Result:
Another way is you can use [panelClass]="customClass" to define the custom styling for your ngx-bootstrap accordion.
In css:
.custom-accordion-style {
/*any size you want*/
line-height: 30px;
font-size: small;
}
In ts:
customClass='custom-accordion-style';
In html:
<accordion [isAnimated]="true">
<accordion-group [panelClass]="customClass">
<button class="btn btn-link btn-block clearfix"
accordion-heading
type="button">
<div class="pull-centre float-centre">
Date Created
</div>
</button>
{{ example text }}
</accordion-group>
</accordion>
Is it possible to expand my cards individually rather than as they are doing now, all together?
I have defined an array of JSON data that will be used to fill the details of the cards, but I just cannot seem to get them to expand individually.
Simple data
export const DATA = [
{
name: 'Some name 1',
},
{
name: 'Some name 2',
}
];
.ts file
export class AppComponent {
data;
expanded = [];
constructor(public toast: MatSnackBar) {
this.data = DATA;
}
}
html
<div class="container">
<mat-card *ngFor="let item of data" #panel [ngClass]="{expanded: expanded[item]}" [class.mat-elevation-z8]="expanded[item]">
<div class="header">
Some content here
<div class="toggle">
<button mat-icon-button>
<mat-icon *ngIf="!expanded[item]" (click)="expanded[panel]=!expanded[item]">
edit
</mat-icon>
<mat-icon *ngIf="expanded[item]" (click)="expanded[item]=!expanded[item]">cancel</mat-icon>
</button>
</div>
</div>
<div class="body" *ngIf="expanded[item]">
Some content here
</div>
</mat-card>
</div>
Here is my stackblitz for you to play with
Edit:
My 'logic' above comes from seeing something similarly implemented like this:
<mat-card #panel *ngFor="let x of [1,2,3]" [ngClass]="{expanded: thisExpands[x]}">
<div class="header">
<div class="toggle">
<button
mat-flat-button
(click)="thisExpands[x]=!thisExpands[x]"
...
However these cards are generated from a much more simple array of data.
you can use index to access the particular item in the forLoop:
<mat-card *ngFor="let item of data; let i = index">
</mat-card>
Your HTML Code:
<div class="container">
<mat-card *ngFor="let item of data; let i = index" #panel [ngClass]="{expanded: expanded[i]}" [class.mat-elevation-z8]="expanded[i]">
<div class="header">
Some content here
<div class="toggle">
<button mat-icon-button>
<mat-icon *ngIf="!expanded[i]" (click)="expanded[i]=!expanded[i]">
edit
</mat-icon>
<mat-icon *ngIf="expanded[i]" (click)="expanded[i]=!expanded[i]">cancel</mat-icon>
</button>
</div>
</div>
<div class="body" *ngIf="expanded[item]">
Some content here
</div>
</mat-card>
</div>
StackBlitz Example
<div class="container">
<mat-card *ngFor="let item of data; let i = index" #panel [ngClass]="{expanded: expanded[i]}" [class.mat-elevation-z8]="expanded[i]">
<div class="header">
Some content here
<div class="toggle">
<button mat-icon-button>
<mat-icon *ngIf="!expanded[i]" (click)="expanded[i]=!expanded[i]">
edit
</mat-icon>
<mat-icon *ngIf="expanded[i]" (click)="expanded[i]=!expanded[i]">cancel</mat-icon>
</button>
</div>
</div>
<div class="body" *ngIf="expanded[i]">
Some content here
</div>
</mat-card>
</div>
Try this one. Use index instead of item.
My css code for navigation drawer
:host{
display: flex;
background-color: #f0fff0;
flex-grow:1;
}
.body-style{
padding: 20px;
min-height: 100px;
flex-grow: 1;
}
HTML:
<mat-drawer-container >
<mat-drawer #drawer [mode]="over">I'm a drawer</mat-drawer>
<mat-drawer-content>
<button mat-raised-button (click)="drawer.toggle()">Toggle drawer</button>
<div class="body-style">
<router-outlet>
</router-outlet>
</div>
</mat-drawer-content>
</mat-drawer-container>
I am obviously missing something in Flexbox concepts. The <mat-drawer-content>'s width is small.
Don't reinvent the wheel.
Angular team has already covered your need with Flex-Layout.
Once installed, it gives this :
<mat-drawer-container >
<mat-drawer #drawer [mode]="over">I'm a drawer</mat-drawer>
<mat-drawer-content fxLayout="row" fxLayoutAlign="start center">
<button mat-raised-button (click)="drawer.toggle()">Toggle drawer</button>
<div class="body-style">
<router-outlet></router-outlet>
</div>
</mat-drawer-content>
</mat-drawer-container>
No CSS required.
I'm generating cards from an Api when user makes a search.
I have film list component in which I show my cards
here's the HTML
<div fxLayout='row' fxLayoutWrap class="cards">
<div fxFlex="20" class="example-card" *ngFor="let film of dataResult.results">
<mat-card>
<mat-card-header>
<mat-card-title>{{film.title}}</mat-card-title>
<mat-card-subtitle>{{film.release_date}}
</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="http://image.tmdb.org/t/p/w185/{{film.poster_path}}" alt="Photo of a Shiba Inu">
<mat-card-content>
<p>
{{film.overview}}
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>
<mat-icon>favorite</mat-icon>
</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
</div>
</div>
And CSS
.example-card {
min-width: 100%;
margin: 40px;
}
.cards {
width: 400px;
}
the services are working and also component ts logic.
My problem is that material cards are not wrapping to a new line while I'm using fxLayoutWrap to wrap content when fxFlex get 100 of value.
Here's a stacklitz demo ( I get an https error when I call the API, if someone could fix it I'll be grateful )
Here's a screenshot of my problem
<div fxLayout='row' fxLayoutWrap class="cards">
<div fxFlex="20" class="example-card">
<mat-card *ngFor="let film of dataResult.results" style="margin-top:10px;>
<mat-card-header>
<mat-card-title>{{film.title}}</mat-card-title>
<mat-card-subtitle>{{film.release_date}}
</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="http://image.tmdb.org/t/p/w185/{{film.poster_path}}" alt="Photo of a Shiba Inu">
<mat-card-content>
<p>
{{film.overview}}
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>
<mat-icon>favorite</mat-icon>
</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
Because there is no problem repeating the code, you must be sure to place the repeat command as well as the essence of the code in the smart design material, and the codes are merged in the absence of space, so they must be separated for them Write css style margin-top:10px.
Verify the code above for you.
the fxLayout attribute can take a second parameter "wrap" which will do what you're looking for.
<div fxLayout="row wrap"></div>
I want to remove the footer from my modal. But it is only removing the contents and not the space acquired by it.
Here is my code...
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
</div>
If you don't use '<div class="modal-footer">' in your modal template then bootstrap will made it for you. I think this is why you see the footer with your code.
My solution is hidding the footer in the template (last line) :
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer" style="display:none"></div>
</div>
Try this
<div class="modal-footer" hidden="true"></div>
I'm pretty sure the "extra space" is the <p> margin. Try this css :
.modal .modal-body p {
margin-bottom: 0;
}
I think its because of the padding given to modal-footer class. Try overriding it
.modal .modal-footer {
padding: 4px;
}
I have kept it as 4px to preserve round corners
You can override modal-header, modal-footer of the bootstrap modal.
Add the following code.
.modal-footer{display: none;}
This can be achievable using jQuery
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
buttons: []
};
$('#approvalsModal').modal(options,{
closed: function(){
// Do some action when modal closed
}
});
$(".approvalsModal").click(function(){
$("#approvalsModal").modal('openModal');
});
}
);