Skip to content

Commit

Permalink
Merge pull request #170 from hotwax/pdp-styling
Browse files Browse the repository at this point in the history 
PDP is scrollable now
  • Loading branch information
@dt2patel
dt2patel authored Apr 12, 2023
2 parents cea9e02 + 6293a18 commit 46fe03c
Showing 1 changed file with 61 additions and 45 deletions.
106 changes: 61 additions & 45 deletions src/views/count.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,54 +8,56 @@
</ion-header>

<ion-content>
<div class="header">
<div class="product-image">
<Image :src="product.mainImageUrl"/>
</div>
<div class="product-info">
<div class="product-image">
<Image :src="product.mainImageUrl"/>
</div>

<div class="product-info">
<ion-item lines="none">
<ion-label>
<p class="overline">{{ product.productName }}</p>
<h2>{{ product.sku }}</h2>
</ion-label>
</ion-item>

<div class="product-features">
<ion-item lines="none">
<ion-label>
<p class="overline">{{ product.productName }}</p>
<h2>{{ product.sku }}</h2>
</ion-label>
<ion-chip v-if="$filters.getFeature(product.featureHierarchy, '1/COLOR/')">
<ion-icon :icon="colorPaletteOutline" />
<ion-label>{{ $filters.getFeature(product.featureHierarchy, '1/COLOR/') }}</ion-label>
</ion-chip>
<ion-chip v-if="$filters.getFeature(product.featureHierarchy, '1/SIZE/')">
<ion-icon :icon="resize" />
<ion-label>{{ $filters.getFeature(product.featureHierarchy, '1/SIZE/') }}</ion-label>
</ion-chip>
</ion-item>

<div class="product-features">
<ion-item lines="none">
<ion-chip v-if="$filters.getFeature(product.featureHierarchy, '1/COLOR/')">
<ion-icon :icon="colorPaletteOutline" />
<ion-label>{{ $filters.getFeature(product.featureHierarchy, '1/COLOR/') }}</ion-label>
</ion-chip>
<ion-chip v-if="$filters.getFeature(product.featureHierarchy, '1/SIZE/')">
<ion-icon :icon="resize" />
<ion-label>{{ $filters.getFeature(product.featureHierarchy, '1/SIZE/') }}</ion-label>
</ion-chip>
</ion-item>
</div>
</div>
</div>
<ion-item>
<ion-label position="floating">{{ $t("Stock") }}</ion-label>
<ion-input type="number" min="0" inputmode="numeric" v-model="product.quantity"></ion-input>
</ion-item>
<ion-item lines="none">
<ion-note id="stockCount">{{ $t("Enter the count of stock on the shelf.") }}</ion-note>
</ion-item>
<ion-item>
<ion-label>{{ $t("Location") }}</ion-label>
<ion-chip @click="selectLocation">
<ion-label>{{ location }}</ion-label>
<ion-icon :icon="locationOutline" />
</ion-chip>
</ion-item>

<div class="action">
<ion-button size="large" @click="updateProductInventoryCount()">
<ion-icon :icon="saveOutline" slot="start" />{{
$t("Save")
}}</ion-button
>
</div>

<div class="inventory-form">
<ion-item>
<ion-label position="floating">{{ $t("Stock") }}</ion-label>
<ion-input type="number" min="0" inputmode="numeric" v-model="product.quantity"></ion-input>
</ion-item>
<ion-item lines="none">
<ion-note id="stockCount">{{ $t("Enter the count of stock on the shelf.") }}</ion-note>
</ion-item>
<ion-item>
<ion-label>{{ $t("Location") }}</ion-label>
<ion-chip @click="selectLocation">
<ion-label>{{ location }}</ion-label>
<ion-icon :icon="locationOutline" />
</ion-chip>
</ion-item>

<div class="action">
<ion-button size="large" @click="updateProductInventoryCount()">
<ion-icon :icon="saveOutline" slot="start" />{{
$t("Save")
}}</ion-button
>
</div>
</div>
</ion-content>
</ion-page>
</template>
Expand Down Expand Up @@ -210,6 +212,7 @@
</script>

<style scoped>
.product-image > img {
width: 100%;
height: 50vh;
Expand All @@ -223,4 +226,17 @@
.action {
text-align: center;
}
</style>
@media (max-height: 750px) {
.product-image {
position: sticky;
top: 0px;
z-index: -1;
}
.inventory-form {
background-color: var(--ion-background-color);
height: 80vh;
}
}
</style>

0 comments on commit 46fe03c

Please sign in to comment.