Skip to content

Commit

Permalink
product table responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@inlancersystem4
inlancersystem4 committed Nov 1, 2023
1 parent 45847ed commit cae3cd5
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 84 deletions.
31 changes: 31 additions & 0 deletions assets/css/responsive.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,37 @@
margin: 0 auto;
}


.product-list .product {
min-width: 200px;
max-width: 200px;
}

.product-list .collection {
min-width: 200px;
max-width: 200px;
}

.product-list .availability {
min-width: 150px;
max-width: 150px;
}

.product-list .inventory{
min-width: 210px;
max-width: 210px;
}

.product-list .blank-section{
min-width: 10px;
max-width: 10px;
}

.product-list .row-status{
min-width: 200px;
max-width: 200px;
}

}


Expand Down
175 changes: 91 additions & 84 deletions products.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -367,7 +367,8 @@ <h5 class="user-name">Tekla Fabrics</h5>
<!-- Close mini sidebar -->


<!-- tdis is main content section -->

<!-- this is main content section -->

<section class="main-content">

Expand Down Expand Up @@ -475,91 +476,96 @@ <h5 class="user-name">Tekla Fabrics</h5>
</div>


<table class="main-table product-list">

<tr>
<td class="list-checkbox main-checkbox">
<input type="checkbox" class="custom-checkbox" id="product-list_index0">
</td>
<td class="product">
Product
</td>
<td class="collection">
Collection
</td>
<td class="availability">
Availability
</td>
<td class="inventory">
Inventory
</td>
<td class="blank-section"></td>
<td class="row-status"></td>
<td class="row-option-section"></td>
<td class="label">
<label for="product-list_index0"></label>
</td>
</tr>


<tr>
<td class="list-checkbox">
<input type="checkbox" class="custom-checkbox" id="product-list_index1">
</td>
<td class="label">
<label for="product-list_index1"></label>
</td>
<td class="product">
<img src="./assets/img/Rectangle-1665.png">
<p class="color-Grey_90 text-sm_regular line-clamp-1">Classic Bathrobe</p>
</td>
<td class="collection">
<p class="text-sm_regular color-Grey_50 line-clamp-1">Limited collab with stussy</p>
</td>
<td class="availability">
<p class="text-sm_regular color-Grey_90 line-clamp-1">Website</p>
<p class="text-sm_medium color-Grey_50">+ 3 more</p>
</td>
<td class="inventory">
<p class="text-sm_regular color-Grey_90 line-clamp-1">400 in stock for 4 variants
</p>
</td>
<td class="blank-section"></td>
<td class="row-status">
<button class="btn-regular color-Grey_60 display-flex align-center gap-8px">
<div class="ellipse-dot bg-emerald"></div>
Published
</button>
</td>
<td class="row-option-section">
<button class="icon-btn icon-bg_32px custom-dropdown"
onclick="OpenDropDown('index1')">
<img src="./assets/img/icons/dots-icon.svg">

<ul class="custom-dropdown-list leftside " id="index1">
<li class="dropdown-item">
<a href="#" class="dropdown-link selected-dropdown-option">
<p class="dropdown-link-title">Standardx</p>
</a>
</li>
<li class="dropdown-item">
<a href="#" class="dropdown-link">
<p class="dropdown-link-title">Express</p>
</a>
</li>
<li class="dropdown-item">
<a href="#" class="dropdown-link ">
<p class="dropdown-link-title">Express Eco</p>
</a>
</li>
</ul>
<div class="main-table product-list">
<table class="w-100">

<tr>
<td class="list-checkbox main-checkbox">
<input type="checkbox" class="custom-checkbox" id="product-list_index0">
</td>
<td class="product">
Product
</td>
<td class="collection">
Collection
</td>
<td class="availability">
Availability
</td>
<td class="inventory">
Inventory
</td>
<td class="blank-section"></td>
<td class="row-status"></td>
<td class="row-option-section"></td>
<td class="label">
<label for="product-list_index0"></label>
</td>
</tr>


<tr>
<td class="list-checkbox">
<input type="checkbox" class="custom-checkbox" id="product-list_index1">
</td>
<td class="label">
<label for="product-list_index1"></label>
</td>
<td class="product">
<img src="./assets/img/Rectangle-1665.png">
<p class="color-Grey_90 text-sm_regular line-clamp-1">Classic Bathrobe</p>
</td>
<td class="collection">
<p class="text-sm_regular color-Grey_50 line-clamp-1">Limited collab with stussy
</p>
</td>
<td class="availability">
<p class="text-sm_regular color-Grey_90 line-clamp-1">Website</p>
<p class="text-sm_medium color-Grey_50">+ 3 more</p>
</td>
<td class="inventory">
<p class="text-sm_regular color-Grey_90 line-clamp-1">400 in stock for 4
variants
</p>
</td>
<td class="blank-section"></td>
<td class="row-status">
<button class="btn-regular color-Grey_60 display-flex align-center gap-8px">
<div class="ellipse-dot bg-emerald"></div>
Published
</button>
</td>
<td class="row-option-section">
<button class="icon-btn icon-bg_32px custom-dropdown"
onclick="OpenDropDown('index1')">
<img src="./assets/img/icons/dots-icon.svg">

<ul class="custom-dropdown-list leftside " id="index1">
<li class="dropdown-item">
<a href="#" class="dropdown-link selected-dropdown-option">
<p class="dropdown-link-title">Standardx</p>
</a>
</li>
<li class="dropdown-item">
<a href="#" class="dropdown-link">
<p class="dropdown-link-title">Express</p>
</a>
</li>
<li class="dropdown-item">
<a href="#" class="dropdown-link ">
<p class="dropdown-link-title">Express Eco</p>
</a>
</li>
</ul>


</button>
</td>
</tr>
</button>
</td>
</tr>

</table>
</table>

</div>



Expand Down Expand Up @@ -1159,7 +1165,8 @@ <h6 class="color-Grey_90 text-base_medium">White / Large

</div>

<div class="display-flex align-center gap-16px Sm_w-100 Sm_justify-between">
<div
class="display-flex align-center gap-16px Sm_w-100 Sm_justify-between">

<p class="text-right color-Grey_50 text-base_regular">-</p>

Expand Down

0 comments on commit cae3cd5

Please sign in to comment.