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
données, y compris notre Utilisation des cookies.
</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="view">
<div class="mask pattern-6">
<div class="row firstRow">
<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 class="col-md-6 d-flex flex-column" id="subCard1">
<img src="{{cartePar.carteTemplate.downloadURL}}" id="image1" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
<div class="subCard1-row d-flex flex-row">
<div class="merchant-name d-flex flex-center"><p class="white-text info-text font-bold">{{commercant.commercialName}}</p></div>
<div class="merchant-logo" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
</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 class="card-footer" style="margin-top:5%">
<div *ngIf="carteEnvoieEncours">
@ -168,27 +162,25 @@
et indiquez que vous aves lu notre Politique d'utilisation des
données, y compris notre Utilisation des cookies.
</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="view">
<div class="mask pattern-6">
<div class="row firstRow">
<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">{{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 class="col-md-6 d-flex flex-column " id="subCard1">
<img src="{{cartePar.carteTemplate.downloadURL}}" id="image1" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
<div class="subCard1-row d-flex flex-row">
<div class="merchant-name d-flex flex-center"><p class="white-text info-text font-bold">{{commercant.commercialName}}</p></div>
<div class="merchant-logo" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
</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 class="card-footer" style="margin-top:5%">
<div *ngIf="carteEnvoieEncours">
<div class="row">

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

@ -6,40 +6,55 @@
padding: 5%;
}
.cardPart2 {
//background-color: orange;
#subCard1 {
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-size:25% auto;
background-size:50%;
background-position : center;
}
.subCard1 {
height: 15rem;
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;
#image1 {
z-index: 1;
padding: 0;
}
.view {
height:102%;
width: 103%;
#subCard1::before {
content: ' ';
display: block;
width: 100%;
height: 100%;
position: absolute;
background-color: fade_out(black, 0.5);
left: 0;
top: 0;
z-index: 2;
}
.firstRow {
height: 45%;
#subCard2Part1 {
padding-top: 5%;
display: flex;
flex-direction: column
}
.secondRow {
height: 45%;
#subCard2Part2 {
padding-top: 5%;
}
#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 {
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 class="card mainCard" *ngIf="(op.status == statutAffiche) || (statutAffiche == 'Toutes')" style="height: 100%">
<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">
<div class="view">
<div class="mask pattern-6">
<div class="row no-margin firstRow">
<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 class="subCard1-row d-flex flex-row">
<div class="merchant-name d-flex flex-center"><p class="white-text info-text font-bold">{{commercant.commercialName}}</p></div>
<div class="merchant-logo" [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 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 class="col-md-6 card subCard2">
<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;
}
.firstRow {
height: 50%;
.subCard1-row {
height: 100%;
z-index: 3;
}
.secondRow {
height: 50%;
.subCard1-row div {
width: 100%;
}
.cardPart1 {
//background-color: red;
.merchant-name p {
font-size: 3rem;
}
.cardPart2 {
//background-color: orange;
.merchant-logo {
background-repeat: no-repeat;
background-size:50% auto;
background-size:50%;
background-position : center;
}
.cardPart3 {
//background-color: green;
#image1 {
z-index: 1;
padding: 0;
}
.cardPart4 {
//background-color: yellow;
#subCard1::before {
content: ' ';
display: block;
width: 100%;
height: 100%;
position: absolute;
background-color: fade_out(black, 0.5);
left: 0;
top: 0;
z-index: 2;
}
#subCard2Part1 {
padding-top: 5%;
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