AnisB
/
XJC
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

rebbuild subcard1

Browse Source
thierry
Viiciouss 7 years ago
parent a99ebfba9a
commit 8894525d53
4 changed files with 140 additions and 88 deletions
Show Stats Download Patch File Download Diff File

66
src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.html
Unescape Escape View File

@ -72,27 +72,21 @@
et indiquez que vous aves lu notre Politique d'utilisation des et indiquez que vous aves lu notre Politique d'utilisation des
données, y compris notre Utilisation des cookies. données, y compris notre Utilisation des cookies.
</label> </label>
<div class="col-md-12 subCard1 card" id="subCard1"> <div class="col-md-6 d-flex flex-column" id="subCard1">
<img src="{{cartePar.carteTemplate.downloadURL}}" id="image1" crossorigin="anonymous" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image"> <img src="{{cartePar.carteTemplate.downloadURL}}" id="image1" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
<div class="view"> <div class="subCard1-row d-flex flex-row">
<div class="mask pattern-6"> <div class="merchant-name d-flex flex-center"><p class="white-text info-text font-bold">{{commercant.commercialName}}</p></div>
<div class="row firstRow"> <div class="merchant-logo" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
<div class="col-md-6 flex-center card-block cardPart1"><p class="white-text info-text font-bold">{{commercant.commercialName}}</p></div>
<div class="col-md-6 flex-center card-block card-image mb-1 cardPart2 image2" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
</div>
</div>
<div class="row secondRow">
<div class="col-md-6 flex-center cardPart3 flex-column">
<p class="white-text info-text font-bold">{{cartePar.name}}</p>
</div>
<div class="col-md-6 flex-center cardPart4"><p class="white-text info-text font-bold">{{parrain.familyname}} {{parrain.firstname}}</p></div>
</div>
<div class="col-md-12 text-center" id="dateFin">
<label class="white-text info-text font-bold">Valable jusqu'au: {{cartePar.dateFin | date:'dd/MM/yyyy'}}</label>
</div>
</div> </div>
</div> </div>
<div class="subCard1-row d-flex flex-row">
<div class="operation-data flex-center"><p class="white-text info-text font-bold">{{cartePar.name}}</p></div>
<div class="operation-id flex-center"><p class="white-text info-text font-bold">{{cartePar.parrainCarte.familyname}} {{cartePar.parrainCarte.firstname}}</p></div>
</div>
<!--<div class="col-md-12 text-center" id="dateFin">
<label class="white-text info-text font-bold">Valable jusqu'au: {{cartePar.dateFin | date:'dd/MM/yyyy'}}</label>
</div>-->
</div> </div>
<div class="card-footer" style="margin-top:5%"> <div class="card-footer" style="margin-top:5%">
<div *ngIf="carteEnvoieEncours"> <div *ngIf="carteEnvoieEncours">
@ -168,27 +162,25 @@
et indiquez que vous aves lu notre Politique d'utilisation des et indiquez que vous aves lu notre Politique d'utilisation des
données, y compris notre Utilisation des cookies. données, y compris notre Utilisation des cookies.
</label> </label>
<div class="col-md-12 subCard1 card" id="subCard1">
<img src="{{cartePar.carteTemplate.downloadURL}}" id="image1" crossorigin="anonymous" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image"> <div class="col-md-6 d-flex flex-column " id="subCard1">
<div class="view"> <img src="{{cartePar.carteTemplate.downloadURL}}" id="image1" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
<div class="mask pattern-6"> <div class="subCard1-row d-flex flex-row">
<div class="row firstRow"> <div class="merchant-name d-flex flex-center"><p class="white-text info-text font-bold">{{commercant.commercialName}}</p></div>
<div class="col-md-6 flex-center card-block cardPart1"><p class="white-text info-text font-bold">{{commercant.commercialName}}</p></div> <div class="merchant-logo" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
<div class="col-md-6 flex-center card-block card-image mb-1 cardPart2 image2" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
</div>
</div>
<div class="row secondRow">
<div class="col-md-6 flex-center cardPart3 flex-column">
<p class="white-text info-text font-bold">{{cartePar.name}}</p>
</div>
<div class="col-md-6 flex-center cardPart4"><p class="white-text info-text font-bold">{{cartePar.parrainCarte.familyname}} {{cartePar.parrainCarte.firstname}}</p></div>
</div>
<div class="col-md-12 text-center" id="dateFin">
<label class="white-text info-text font-bold">Valable jusqu'au: {{cartePar.dateFin | date:'dd/MM/yyyy'}}</label>
</div>
</div> </div>
</div> </div>
<div class="subCard1-row d-flex flex-row">
<div class="operation-data flex-center"><p class="white-text info-text font-bold">{{cartePar.name}}</p></div>
<div class="operation-id flex-center"><p class="white-text info-text font-bold">{{cartePar.parrainCarte.familyname}} {{cartePar.parrainCarte.firstname}}</p></div>
</div>
<div class="col-md-12 text-center" id="dateFin">
<label class="white-text info-text font-bold">Valable jusqu'au: {{cartePar.dateFin | date:'dd/MM/yyyy'}}</label>
</div>
</div> </div>
<div class="card-footer" style="margin-top:5%"> <div class="card-footer" style="margin-top:5%">
<div *ngIf="carteEnvoieEncours"> <div *ngIf="carteEnvoieEncours">
<div class="row"> <div class="row">

82
src/app/components/opCommercial/envoyer-carte/envoyer-carte.component.scss
Unescape Escape View File

@ -6,40 +6,55 @@
padding: 5%; padding: 5%;
} }
.cardPart2 { #subCard1 {
//background-color: orange; display: flex;
justify-content: center;
}
.subCard1-row {
height: 100%;
z-index: 3;
}
.subCard1-row div {
width: 100%;
}
.merchant-name p {
font-size: 3rem;
}
.merchant-logo {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size:25% auto; background-size:50%;
background-position : center; background-position : center;
} }
#image1 {
.subCard1 { z-index: 1;
height: 15rem; padding: 0;
padding: 1%;
background-color: white;
align-items: center;
margin: auto;
width: 85%;
padding-top: 0;
padding-bottom: 0;
font-size: 1.05rem;
// background-repeat: no-repeat;
// background-size:20% auto;
// background-position : center;
} }
.view { #subCard1::before {
height:102%; content: ' ';
width: 103%; display: block;
width: 100%;
height: 100%;
position: absolute;
background-color: fade_out(black, 0.5);
left: 0;
top: 0;
z-index: 2;
} }
.firstRow { #subCard2Part1 {
height: 45%; padding-top: 5%;
display: flex;
flex-direction: column
} }
.secondRow { #subCard2Part2 {
height: 45%; padding-top: 5%;
} }
#dateFin { #dateFin {
@ -71,6 +86,25 @@
} }
} }
@media screen and (max-width: 786px) {
.subCard1-row {
height: 35vw;
.merchant-name p {
font-size: 2rem;
}
.operation-data p {
font-size: 1rem;
}
.operation-id p {
font-size: 0.8rem;
font-weight: bold;
}
}
}
#footer-1, #footer-2, #footer-3 { #footer-1, #footer-2, #footer-3 {
display: flex; display: flex;

20
src/app/components/opCommercial/op-commercial/op-commercial.component.html
Unescape Escape View File

@ -49,22 +49,18 @@
<div *ngFor="let op of opCommData | async"> <div *ngFor="let op of opCommData | async">
<div class="card mainCard" *ngIf="(op.status == statutAffiche) || (statutAffiche == 'Toutes')" style="height: 100%"> <div class="card mainCard" *ngIf="(op.status == statutAffiche) || (statutAffiche == 'Toutes')" style="height: 100%">
<div class="row no-margin" id="testt"> <div class="row no-margin" id="testt">
<div class="col-md-6 mb-1 subCard1" id="subCard1"> <div class="col-md-6 d-flex flex-column " id="subCard1">
<img src="{{op.carteTemplate.downloadURL}}" id="image1" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image"> <img src="{{op.carteTemplate.downloadURL}}" id="image1" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
<div class="view"> <div class="subCard1-row d-flex flex-row">
<div class="mask pattern-6"> <div class="merchant-name d-flex flex-center"><p class="white-text info-text font-bold">{{commercant.commercialName}}</p></div>
<div class="row no-margin firstRow"> <div class="merchant-logo" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
<div class="col-md-6 flex-center card-block cardPart1"><p class="white-text info-text font-bold">{{commercant.commercialName}}</p></div>
<div class="col-md-6 flex-center card-block card-image mb-1 cardPart2 image2" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
</div>
</div>
<div class="row no-margin secondRow">
<div class="col-md-6 flex-center cardPart3"><p class="white-text info-text font-bold">{{op.name}}</p></div>
<div class="col-md-6 flex-center cardPart4"><p class="white-text info-text font-bold">{{op.uid}}</p></div>
</div>
</div> </div>
</div> </div>
<div class="subCard1-row d-flex flex-row">
<div class="operation-data flex-center"><p class="white-text info-text font-bold">{{op.name}}</p></div>
<div class="operation-id flex-center"><p class="white-text info-text font-bold">{{op.uid}}</p></div>
</div>
</div> </div>
<div class="col-md-6 card subCard2"> <div class="col-md-6 card subCard2">
<div class="card-block row no-margin"> <div class="card-block row no-margin">

60
src/app/components/opCommercial/op-commercial/op-commercial.component.scss
Unescape Escape View File

@ -30,35 +30,46 @@
font-size: 1.05rem; font-size: 1.05rem;
} }
.firstRow { .subCard1-row {
height: 50%; height: 100%;
z-index: 3;
} }
.secondRow { .subCard1-row div {
height: 50%; width: 100%;
} }
.merchant-name p {
.cardPart1 { font-size: 3rem;
//background-color: red;
} }
.cardPart2 { .merchant-logo {
//background-color: orange;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size:50% auto; background-size:50%;
background-position : center; background-position : center;
} }
#image1 {
.cardPart3 { z-index: 1;
//background-color: green; padding: 0;
} }
.cardPart4 { #subCard1::before {
//background-color: yellow; content: ' ';
display: block;
width: 100%;
height: 100%;
position: absolute;
background-color: fade_out(black, 0.5);
left: 0;
top: 0;
z-index: 2;
} }
#subCard2Part1 { #subCard2Part1 {
padding-top: 5%; padding-top: 5%;
display: flex; display: flex;
@ -134,6 +145,25 @@
} }
} }
@media screen and (max-width: 786px) {
.subCard1-row {
height: 35vw;
.merchant-name p {
font-size: 2rem;
}
.operation-data p {
font-size: 1rem;
}
.operation-id p {
font-size: 0.8rem;
font-weight: bold;
}
}
}

Write Preview
Loading…
Cancel
Save