Skip to content

Commit

Permalink
add pagination on desktop view, update breadcrumb on checkout process…
Browse files Browse the repository at this point in the history 
… and add load more button in homepage, preparation for invinite scroll
  • Loading branch information
@philipherlambang
philipherlambang committed Sep 25, 2017
1 parent 1b58e11 commit 2d99ab9
Show file tree
Hide file tree
Showing 8 changed files with 147 additions and 83 deletions.
18 changes: 16 additions & 2 deletions articles.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ <h4 class="text-oswald">Recently Added Product(s)</h4>
<div class="kimi-container">
<!--breadcrumb start-->
<ol class="breadcrumb hidden-xs">
<li><a href="#">Home</a></li>
<li><a href="index.html">Home</a></li>
<li>Articles</li>
</ol>

Expand Down Expand Up @@ -329,9 +329,23 @@ <h3>Lemon Seafood Risotto</h3>
</div>

<div class="row">
<div class="product-detail-tag-container col-md-4 col-md-offset-4">
<div class="product-detail-tag-container col-md-4 col-md-offset-4 visible-xs">
<button class="btn outline-white-button">Load More</button>
</div>

<div class="col-md-8 hidden-xs">
<!--pagination-->
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="current"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</nav>
<!--pagination ends-->
</div>
</div>
</div>

Expand Down
14 changes: 8 additions & 6 deletions checkout1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@
</button>
</div>
<div class="visible-xs" style="width: 70%; float: left;">
<p class="text-center logo-container visible-xs"><a href="index.html"><img src="images/logo.png" width="150"></a></p>
<p class="text-center logo-container visible-xs"><a href="index.html"><img src="images/logo.png" width="90"></a></p>
</div>
<div class="visible-xs pull-right">
<button class="pull-left search-button-mobile" id="buttonOpenSearchbarMobile"><i class="fa fa-search" aria-hidden="true"></i></button>
Expand Down Expand Up @@ -189,10 +189,11 @@ <h4 class="text-oswald">Recently Added Product(s)</h4>
<div class="kimi-container">
<!--breadcrumb start-->
<ol class="breadcrumb hidden-xs">
<li><a href="#">Cart</a></li>
<li class="active">Customer Information</li>
<li><a href="#">Shipping Mehtod</a></li>
<li><a href="#">Payment Method</a></li>
<li><a href="index.html">Home</a></li>
<li><a href="shoppingCart.html">Cart</a></li>
<li>Customer Information</li>
<li>Shipping Mehtod</li>
<li>Payment Method</li>
</ol>
<div class="clearfix"></div>

Expand Down Expand Up @@ -380,7 +381,8 @@ <h3 class="section-title">Alamat Pengiriman</h3>
</div>
</div>
<a href="shoppingcart.html" class="text-gray-1"><i class="fa fa-angle-left" aria-hidden="true"></i> Shopping Cart</a>
<a href="checkout2.html" class="btn btn-default pull-right button-black">Continue to Shipping</a>
<a href="checkout2.html" class="btn btn-default pull-right button-black hidden-xs">Continue to Shipping</a>
<a href="checkout2.html" class="btn btn-default pull-right button-black visible-xs">Shipping <i class="fa fa-angle-right" aria-hidden="true"></i></a>
<div class="clearfix maya-small-padding"></div>

</div>
Expand Down
10 changes: 6 additions & 4 deletions checkout2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
</button>
</div>
<div class="visible-xs" style="width: 70%; float: left;">
<p class="text-center logo-container visible-xs"><a href="index.html"><img src="images/logo.png" width="100"></a></p>
<p class="text-center logo-container visible-xs"><a href="index.html"><img src="images/logo.png" width="90"></a></p>
</div>
<div class="visible-xs pull-right">
<button class="pull-left search-button-mobile" id="buttonOpenSearchbarMobile"><i class="fa fa-search" aria-hidden="true"></i></button>
Expand Down Expand Up @@ -191,10 +191,11 @@ <h4 class="text-oswald">Recently Added Product(s)</h4>
<div class="kimi-container">
<!--breadcrumb start-->
<ol class="breadcrumb hidden-xs">
<li><a href="index.html">Home</a></li>
<li><a href="shoppingCart.html">Cart</a></li>
<li><a href="checkout1.html">Customer Information</a></li>
<li class="active">Shipping Mehtod</li>
<li><a href="checkout3.html">Payment Method</a></li>
<li>Shipping Mehtod</li>
<li>Payment Method</li>
</ol>

<div class="box-bg-gray visible-xs less-padding-left">
Expand Down Expand Up @@ -358,7 +359,8 @@ <h3 class="section-title">Metode Pengiriman</h3>
</div>
</div>
<a href="checkout1.html" class="text-gray-1"><i class="fa fa-angle-left" aria-hidden="true"></i> Customer Information</a>
<a href="checkout3.html" class="btn btn-default pull-right button-black">Continue to Payment Method</a>
<a href="checkout3.html" class="btn btn-default pull-right button-black hidden-xs">Continue to Payment Method</a>
<a href="checkout3.html" class="btn btn-default pull-right button-black visible-xs">Payment Method <i class="fa fa-angle-right" aria-hidden="true"></i></a>
<div class="clearfix maya-small-padding"></div>

</div>
Expand Down
18 changes: 10 additions & 8 deletions checkout3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
</button>
</div>
<div class="visible-xs" style="width: 70%; float: left;">
<p class="text-center logo-container visible-xs"><a href="index.html"><img src="images/logo.png" width="100"></a></p>
<p class="text-center logo-container visible-xs"><a href="index.html"><img src="images/logo.png" width="90"></a></p>
</div>
<div class="visible-xs pull-right">
<button class="pull-left search-button-mobile" id="buttonOpenSearchbarMobile"><i class="fa fa-search" aria-hidden="true"></i></button>
Expand Down Expand Up @@ -191,10 +191,11 @@ <h4 class="text-oswald">Recently Added Product(s)</h4>
<div class="kimi-container">
<!--breadcrumb start-->
<ol class="breadcrumb hidden-xs">
<li><a href="#">Cart</a></li>
<li><a href="#">Customer Information</a></li>
<li><a href="#">Shipping Mehtod</a></li>
<li class="active">Payment Method</li>
<li><a href="index.html">Home</a></li>
<li><a href="shoppingCart.html">Cart</a></li>
<li><a href="checkout1.html">Customer Information</a></li>
<li><a href="checkout2.html">Shipping Mehtod</a></li>
<li>Payment Method</li>
</ol>

<div class="box-bg-gray visible-xs less-padding-left">
Expand Down Expand Up @@ -284,7 +285,7 @@ <h3 class="section-title">Alamat Pengiriman</h3>
</div>

<div class="col-sm-2">
<button class="btn btn-default button-black-medium">Edit</button>
<a href="checkout1.html" class="btn btn-default button-black-medium">Edit</a>
</div>
</div>

Expand All @@ -296,7 +297,7 @@ <h3 class="section-title">Waktu Kedatangan Pesanan</h3>
</div>

<div class="col-sm-2">
<button class="btn btn-default button-black-medium">Edit</button>
<a href="checkout2.html" class="btn btn-default button-black-medium">Edit</a>
</div>
</div>

Expand All @@ -320,7 +321,8 @@ <h4>IDR 232.140</h4>
</div>
</div>
<a href="checkout2.html" class="text-gray-1"><i class="fa fa-angle-left" aria-hidden="true"></i> Shipping Method</a>
<a href="thankyou.html" class="btn btn-default pull-right button-black">Complete Order</a>
<a href="thankyou.html" class="btn btn-default pull-right button-black hidden-xs">Complete Order</a>
<a href="thankyou.html" class="btn btn-default pull-right button-black visible-xs">Complete Order <i class="fa fa-angle-right" aria-hidden="true"></i></a>
<div class="clearfix maya-small-padding"></div>

</div>
Expand Down
41 changes: 38 additions & 3 deletions css/kimi.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,12 +163,12 @@ a.button-green-top-nav:hover{
}

.breadcrumb li{
color: #fc9159;
color: #333;
font-size: 12px;
}

.breadcrumb li a{
color: #000;
color: #fc9159;
}

.breadcrumb li a:hover{
Expand Down Expand Up @@ -448,6 +448,7 @@ a.text-secondary:hover{

.bt-circle i{
font-size: 18px;
margin: 0 auto;
}

.article-body p, .text-paragraph{
Expand Down Expand Up @@ -965,7 +966,7 @@ input#file-upload[type="file"], input#file-upload-mobile[type="file"] {
float: left;
margin-right: 10px;
letter-spacing: 0.4px;
font-family:Helvetica;
font-family:Roboto;
font-weight:300;
font-size: 14px;
border: 1px solid #E7EAEA;
Expand Down Expand Up @@ -1391,6 +1392,34 @@ code {
padding: 15px;
}

ul.pagination li a{
letter-spacing: 0.4px;
font-family:Roboto;
font-weight:300;
font-size: 15px;
border: 1px solid #E7EAEA;
/*padding: 8px 20px;*/
/*border-radius: 2px;*/
background: white;
color:#7d7d7d;
height: 60px;
width: 60px;
line-height: 50px;
text-align: center;
}

.pagination>li:first-child>a,
.pagination>li:first-child>span,
.pagination>li:last-child>a, .pagination>li:last-child>span{
border-radius: 0;
}


ul.pagination li.current a{
background: #fc9159;
color: #ffffff;
}


/* --------------- Phone smaller start ------------------------ */
@media (max-width: 480px) {
Expand Down Expand Up @@ -1550,6 +1579,12 @@ code {
color:#333;
}

.button-black{
padding: 5px 15px;
font-family:Roboto;
font-size:13px;
}

}

/* large desktop */
Expand Down
112 changes: 59 additions & 53 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,24 +301,24 @@ <h2 class="default-userProductList-InfoBar-title text-center"><i class="fa fa-he

<div class="row">
<h2 class="default-userProductList-InfoBar-title text-center"><i class="fa fa-heart-o" aria-hidden="true"></i> This Week Favoourites</h2>
<div class="col-sm-6 col-md-4" data-behavior="sample_code">
<a href="productDetail.html" class="thumbnail_item thumbnail less-padding less-margin">
<img src="https://res.cloudinary.com/kimithemes/image/upload/c_thumb,h_480,w_480/v1506329237/seafood_rd0j5y.jpg" alt="Seafood">
</a>
<div class="caption box" style="background: white; padding: 10px;">
<h3>Seafood</h3>
<div class="row">
<div class="col-sm-8 col-xs-6">
<p class="default-userProductList-CardList-price">Rp 45.000 / pcs</p>
<span class="min-order">10 pcs min order</span>
</div>

<div class="col-sm-4 col-xs-6">
<button onclick="location.href='shoppingCart.html'" class="btn default-userProductList-CardList-button pull-right" role="button">Add to Cart</button>
</div>
</div>
</div>
</div>
<!--<div class="col-sm-6 col-md-4" data-behavior="sample_code">-->
<!--<a href="productDetail.html" class="thumbnail_item thumbnail less-padding less-margin">-->
<!--<img src="https://res.cloudinary.com/kimithemes/image/upload/c_thumb,h_480,w_480/v1506329237/seafood_rd0j5y.jpg" alt="Seafood">-->
<!--</a>-->
<!--<div class="caption box" style="background: white; padding: 10px;">-->
<!--<h3>Seafood</h3>-->
<!--<div class="row">-->
<!--<div class="col-sm-8 col-xs-6">-->
<!--<p class="default-userProductList-CardList-price">Rp 45.000 / pcs</p>-->
<!--<span class="min-order">10 pcs min order</span>-->
<!--</div>-->

<!--<div class="col-sm-4 col-xs-6">-->
<!--<button onclick="location.href='shoppingCart.html'" class="btn default-userProductList-CardList-button pull-right" role="button">Add to Cart</button>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->

<div class="col-sm-6 col-md-4" data-behavior="sample_code">
<a href="productDetail.html" class="thumbnail_item thumbnail less-padding less-margin">
Expand All @@ -340,24 +340,24 @@ <h3>Lemon Risotto</h3>
</div>
</div>

<div class="col-sm-6 col-md-4" data-behavior="sample_code">
<a href="productDetail.html" class="thumbnail_item thumbnail less-padding less-margin">
<img src="https://res.cloudinary.com/kimithemes/image/upload/c_thumb,h_480,w_480/v1506329233/seafood_2_vcuolq.jpg" alt="Seafood">
</a>
<div class="caption box" style="background: white; padding: 10px;">
<h3>Seafood</h3>
<div class="row">
<div class="col-sm-8 col-xs-6">
<p class="default-userProductList-CardList-price">Rp 45.000 / pcs</p>
<span class="min-order">5 pcs min order</span>
</div>

<div class="col-sm-4 col-xs-6">
<button onclick="location.href='shoppingCart.html'" class="btn default-userProductList-CardList-button pull-right" role="button">Add to Cart</button>
</div>
</div>
</div>
</div>
<!--<div class="col-sm-6 col-md-4" data-behavior="sample_code">-->
<!--<a href="productDetail.html" class="thumbnail_item thumbnail less-padding less-margin">-->
<!--<img src="https://res.cloudinary.com/kimithemes/image/upload/c_thumb,h_480,w_480/v1506329233/seafood_2_vcuolq.jpg" alt="Seafood">-->
<!--</a>-->
<!--<div class="caption box" style="background: white; padding: 10px;">-->
<!--<h3>Seafood</h3>-->
<!--<div class="row">-->
<!--<div class="col-sm-8 col-xs-6">-->
<!--<p class="default-userProductList-CardList-price">Rp 45.000 / pcs</p>-->
<!--<span class="min-order">5 pcs min order</span>-->
<!--</div>-->

<!--<div class="col-sm-4 col-xs-6">-->
<!--<button onclick="location.href='shoppingCart.html'" class="btn default-userProductList-CardList-button pull-right" role="button">Add to Cart</button>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->

<div class="col-sm-6 col-md-4">
<a href="productDetail.html" class="thumbnail_item thumbnail less-padding less-margin">
Expand Down Expand Up @@ -398,26 +398,32 @@ <h3>Nasi Bakar Ayam Woku</h3>
</div>
</div>

<div class="col-sm-6 col-md-4" data-behavior="sample_code">
<a href="productDetail.html" class="thumbnail_item thumbnail less-padding less-margin">
<img src="https://res.cloudinary.com/kimithemes/image/upload/c_thumb,h_480,w_480/v1506329234/cake_uv41o2.jpg" alt="cake">
</a>
<div class="caption box" style="background: white; padding: 10px;">
<h3>Party Cake</h3>
<div class="row">
<div class="col-sm-8 col-xs-6">
<p class="default-userProductList-CardList-price">Rp 45.000 / pcs</p>
<span class="min-order">10 pcs min order</span>
</div>
<!--<div class="col-sm-6 col-md-4" data-behavior="sample_code">-->
<!--<a href="productDetail.html" class="thumbnail_item thumbnail less-padding less-margin">-->
<!--<img src="https://res.cloudinary.com/kimithemes/image/upload/c_thumb,h_480,w_480/v1506329234/cake_uv41o2.jpg" alt="cake">-->
<!--</a>-->
<!--<div class="caption box" style="background: white; padding: 10px;">-->
<!--<h3>Party Cake</h3>-->
<!--<div class="row">-->
<!--<div class="col-sm-8 col-xs-6">-->
<!--<p class="default-userProductList-CardList-price">Rp 45.000 / pcs</p>-->
<!--<span class="min-order">10 pcs min order</span>-->
<!--</div>-->

<!--<div class="col-sm-4 col-xs-6">-->
<!--<button onclick="location.href='shoppingCart.html'" class="btn default-userProductList-CardList-button pull-right" role="button">Add to Cart</button>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->

<div class="col-sm-4 col-xs-6">
<button onclick="location.href='shoppingCart.html'" class="btn default-userProductList-CardList-button pull-right" role="button">Add to Cart</button>
</div>
</div>
</div>
</div>

</div>
</div>

<div class="row">
<div class="product-detail-tag-container col-md-4 col-md-offset-4">
<button class="btn outline-white-button">Load More</button>
</div>
</div>

Expand Down
7 changes: 4 additions & 3 deletions shoppingCart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,10 +190,11 @@ <h4 class="text-oswald">Recently Added Product(s)</h4>
<div class="kimi-container">
<!--breadcrumb start-->
<ol class="breadcrumb hidden-xs">
<li><a href="index.html">Home</a></li>
<li>Cart</li>
<li><a href="#">Customer Information</a></li>
<li><a href="#">Shipping Mehtod</a></li>
<li><a href="#">Payment Method</a></li>
<li>Customer Information</li>
<li>Shipping Mehtod</li>
<li>Payment Method</li>
</ol>


Expand Down
Loading

0 comments on commit 2d99ab9

Please sign in to comment.