Fixed issue with image of product card getting cropped due to CSS

This commit is contained in:
Prashant Singh 2019-07-14 12:25:57 +05:30
parent 42d067c44a
commit caf165d06c
7 changed files with 37 additions and 33 deletions

View File

@ -355,8 +355,6 @@
<label class="mb-10" for="attribute_values">{{ __('admin::app.promotion.select-attribute') }}</label>
<multiselect v-model="attribute_values" :options="attribute_options" :searchable="false" :custom-label="attributeLabel" :show-labels="true" placeholder="Select Attributes" track-by="code" :multiple="true" :taggable="true" @tag="categoryTag"></multiselect>
@{{ attribute_values }}
</div> --}}
<div class="control-container mt-20" v-for="(condition, index) in attribute_list" :key="index">
@ -610,23 +608,5 @@
}
});
</script>
<style>
pre {
position: absolute;
}
.multiselect__tag {
background: #4CAF50;
}
.multiselect__option--selected.multiselect__option--highlight {
background: rgba(0, 64, 255, 0.6);
}
.multiselect__option--highlight {
background: #4CAF50;
}
</style>
@endpush
@stop

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,4 @@
{
"/js/shop.js": "/js/shop.js?id=71f03d05d9690fe24784",
"/css/shop.css": "/css/shop.css?id=73e6fda213d31cc70bd6"
"/js/shop.js": "/js/shop.js?id=ad1039174ce2c81c8805",
"/css/shop.css": "/css/shop.css?id=d48d50893f24c7ee8ddf"
}

View File

@ -46,7 +46,6 @@ input {
justify-content: center;
}
@media only screen and (max-width: 770px) {
.pagination.shop {
justify-content: space-between;
@ -329,7 +328,7 @@ input {
grid-auto-rows: auto;
grid-column-gap: 30px;
grid-row-gap: 15px;
justify-items: end;
justify-items: center;
}
.product-grid-3 {
@ -342,8 +341,7 @@ input {
.product-card {
position: relative;
padding: 15px;
border: 1px solid black;
.product-image {
max-height: 350px;
max-width: 280px;
@ -352,7 +350,7 @@ input {
img {
display: block;
width: 100%;
height: 100%;
}
}
@ -423,11 +421,13 @@ input {
}
.product-card:hover {
outline: 1px solid $outline-hvr;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
-webkit-box-shadow: 0px 2px 16px 4px rgba(40, 44, 63, 0.07);
-moz-box-shadow: 0px 2px 16px 4px rgba(40, 44, 63, 0.07);
box-shadow: 0px 2px 16px 4px rgba(40, 44, 63, 0.07);
padding: 10px;
transition: .3s;
outline: 1px solid $outline-hvr;
}
@media only screen and (max-width: 580px) {
@ -444,13 +444,31 @@ input {
}
@media only screen and (max-width: 854px) {
.product-image {
img {
display: block;
width: 100%;
}
}
.product-grid-4 {
grid-template-columns: 29.5% 29.5% 29.5%;
grid-column-gap: 35px;
}
.product-card:hover {
padding: 5px;
}
}
@media only screen and (max-width: 653px) {
.product-image {
img {
display: block;
width: 100%;
}
}
.product-grid-4 {
grid-template-columns: 48.5% 48.5%;
grid-column-gap: 17px;
@ -461,6 +479,13 @@ input {
.product-card {
font-size: 90%;
.product-image {
img {
display: block;
width: 100%;
}
}
.btn.btn-md {
padding: 5px;
}

View File

@ -20,6 +20,7 @@ Vue.component("swatch-picker", require("./components/swatch-picker"));
Vue.directive("debounce", require("./directives/debounce"));
import { Multiselect } from 'vue-multiselect';
Vue.component('multiselect', Multiselect);
require('flatpickr/dist/flatpickr.css');

View File

@ -17,8 +17,6 @@
return {
colorModel: this.color
}
},
}
};
</script>