feat(beneficios): enlaces interactivos a Google/Apple Maps para las direcciones de comercios
This commit is contained in:
@@ -165,9 +165,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
|
<p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
|
||||||
<div class="meta-grid">
|
<div class="meta-grid">
|
||||||
<div class="meta-row">
|
<div class="meta-row clickable-address" (click)="openMap('Tte. Gral. Juan Domingo Perón 893, CABA')">
|
||||||
<ion-icon name="location-outline"></ion-icon>
|
<ion-icon name="location-outline"></ion-icon>
|
||||||
<span>Tte. Gral. Perón 893, CABA <em>(a metros de la sede)</em></span>
|
<span><span class="address-text">Tte. Gral. Perón 893, CABA</span> <em>(a metros de la sede)</em> <ion-icon name="open-outline" class="link-hint-icon"></ion-icon></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="meta-row">
|
<div class="meta-row">
|
||||||
<ion-icon name="time-outline"></ion-icon>
|
<ion-icon name="time-outline"></ion-icon>
|
||||||
@@ -192,9 +192,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
|
<p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
|
||||||
<div class="meta-grid">
|
<div class="meta-grid">
|
||||||
<div class="meta-row">
|
<div class="meta-row clickable-address" (click)="openMap('Bartolomé Mitre 807, CABA')">
|
||||||
<ion-icon name="location-outline"></ion-icon>
|
<ion-icon name="location-outline"></ion-icon>
|
||||||
<span>Bartolomé Mitre 807, CABA</span>
|
<span><span class="address-text">Bartolomé Mitre 807, CABA</span> <ion-icon name="open-outline" class="link-hint-icon"></ion-icon></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="meta-row">
|
<div class="meta-row">
|
||||||
<ion-icon name="time-outline"></ion-icon>
|
<ion-icon name="time-outline"></ion-icon>
|
||||||
@@ -219,9 +219,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
|
<p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
|
||||||
<div class="meta-grid">
|
<div class="meta-grid">
|
||||||
<div class="meta-row">
|
<div class="meta-row clickable-address" (click)="openMap('Tucumán 1596, CABA')">
|
||||||
<ion-icon name="location-outline"></ion-icon>
|
<ion-icon name="location-outline"></ion-icon>
|
||||||
<span>Tucumán 1596, CABA</span>
|
<span><span class="address-text">Tucumán 1596, CABA</span> <ion-icon name="open-outline" class="link-hint-icon"></ion-icon></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="meta-row">
|
<div class="meta-row">
|
||||||
<ion-icon name="time-outline"></ion-icon>
|
<ion-icon name="time-outline"></ion-icon>
|
||||||
@@ -246,9 +246,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
|
<p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
|
||||||
<div class="meta-grid">
|
<div class="meta-grid">
|
||||||
<div class="meta-row">
|
<div class="meta-row clickable-address" (click)="openMap('Bartolomé Mitre 839, CABA')">
|
||||||
<ion-icon name="location-outline"></ion-icon>
|
<ion-icon name="location-outline"></ion-icon>
|
||||||
<span>Bartolomé Mitre 839, CABA</span>
|
<span><span class="address-text">Bartolomé Mitre 839, CABA</span> <ion-icon name="open-outline" class="link-hint-icon"></ion-icon></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="meta-row">
|
<div class="meta-row">
|
||||||
<ion-icon name="time-outline"></ion-icon>
|
<ion-icon name="time-outline"></ion-icon>
|
||||||
@@ -275,9 +275,9 @@
|
|||||||
10% de descuento abonando 1 mes de servicio y 20% de descuento abonando 4 meses de servicio.
|
10% de descuento abonando 1 mes de servicio y 20% de descuento abonando 4 meses de servicio.
|
||||||
</p>
|
</p>
|
||||||
<div class="meta-grid">
|
<div class="meta-grid">
|
||||||
<div class="meta-row">
|
<div class="meta-row clickable-address" (click)="openMap('Esmeralda 135, CABA')">
|
||||||
<ion-icon name="location-outline"></ion-icon>
|
<ion-icon name="location-outline"></ion-icon>
|
||||||
<span>Esmeralda 135, piso 4 B, CABA</span>
|
<span><span class="address-text">Esmeralda 135, piso 4 B, CABA</span> <ion-icon name="open-outline" class="link-hint-icon"></ion-icon></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="meta-row">
|
<div class="meta-row">
|
||||||
<ion-icon name="mail-outline"></ion-icon>
|
<ion-icon name="mail-outline"></ion-icon>
|
||||||
|
|||||||
@@ -198,6 +198,40 @@ ion-segment {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.clickable-address {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 3px 6px;
|
||||||
|
margin: -3px -6px;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: background-color 0.2s ease, opacity 0.15s ease;
|
||||||
|
|
||||||
|
.address-text {
|
||||||
|
color: var(--ion-color-primary);
|
||||||
|
font-weight: 700;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 3px;
|
||||||
|
text-decoration-color: rgba(var(--ion-color-primary-rgb), 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-hint-icon {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: 2px;
|
||||||
|
opacity: 0.75;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(var(--ion-color-primary-rgb), 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.7;
|
||||||
|
background-color: rgba(var(--ion-color-primary-rgb), 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
em {
|
em {
|
||||||
color: #777777;
|
color: #777777;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
@@ -369,6 +403,26 @@ ion-segment {
|
|||||||
color: #ff8ab6;
|
color: #ff8ab6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.clickable-address {
|
||||||
|
.address-text {
|
||||||
|
color: #64b5f6;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-color: rgba(100, 181, 246, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-hint-icon {
|
||||||
|
color: #64b5f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(100, 181, 246, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: rgba(100, 181, 246, 0.22);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
em {
|
em {
|
||||||
color: #9fa1a8;
|
color: #9fa1a8;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,4 +18,29 @@ export class InfoModalComponent {
|
|||||||
close() {
|
close() {
|
||||||
this.modalCtrl.dismiss();
|
this.modalCtrl.dismiss();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
openMap(address: string, event?: Event) {
|
||||||
|
if (event) {
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
const encodedAddress = encodeURIComponent(address);
|
||||||
|
|
||||||
|
// En iOS / Android se usan los esquemas nativos del sistema
|
||||||
|
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
|
||||||
|
const isAndroid = /android/i.test(navigator.userAgent);
|
||||||
|
|
||||||
|
let url = '';
|
||||||
|
if (isAndroid) {
|
||||||
|
// En Android, geo:0,0?q= abre el selector de mapas (Maps, Waze)
|
||||||
|
url = `geo:0,0?q=${encodedAddress}`;
|
||||||
|
} else if (isIOS) {
|
||||||
|
// En iOS, maps:// abre Apple Maps
|
||||||
|
url = `maps://?q=${encodedAddress}`;
|
||||||
|
} else {
|
||||||
|
// Fallback para Web / Escritorio
|
||||||
|
url = `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.open(url, '_system');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user