Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 18951923 by Ravindra Kanojiya
Options

updated home page

1 parent 2ff6c536
Inline Side-by-side
Showing 8 changed files with 144 additions and 23 deletions
components/home/LetDiscover.js
......@@ -41,6 +41,7 @@ const LetDiscover = ({ categories }) => {
<Swiper
modules={[Autoplay, Navigation]}
slidesPerView={3}
spaceBetween= {10}
// autoplay={{
// delay: 7000,
// disableOnInteraction: false,
......@@ -56,7 +57,7 @@ const LetDiscover = ({ categories }) => {
spaceBetween: 20
},
768: {
slidesPerView: 4,
slidesPerView: 3,
spaceBetween: 20
},
1024: {
......
components/layout/Footer.js
......@@ -162,7 +162,7 @@ const Footer = () => {
<div className="subscribe">
<form onSubmit={handleSubmit}>
<div className="row">
<div className="col-12">
<div className="col-12 d-flex align-items-center justify-content-between">
<input
id="subscribe"
onChange={e => {
......
components/layout/Layout.js
......@@ -19,7 +19,8 @@ const Layout = ({ children, title = "Zango", description = "Zango" }) => {
<Head>
<title>{title}</title>
<meta charSet="utf-8"></meta>
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
{/* <meta name="viewport" content="initial-scale=1.0,width=device-width" /> */}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
......
components/listing/ListingItems.js
......@@ -111,10 +111,10 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
itemsCountPerPage={12}
totalItemsCount={totalCount}
onChange={handlePagination}
nextPageText={">"}
prevPageText={"<"}
firstPageText={"<<"}
lastPageText={">>"}
nextPageText={"›"}
prevPageText={"‹"}
firstPageText={"«"}
lastPageText={"»"}
itemClass="page-item"
linkClass="page-link"
></Pagination>
......
pages/_document.js
......@@ -14,7 +14,8 @@ class MyDocument extends Document {
<Html lang="en">
<Head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{/* <meta name="viewport" content="width=device-width, initial-scale=1" /> */}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></meta>
<link rel="preload" as="font" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" crossOrigin/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
......
public/images/icons/close_icon.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 9.15625 6.3125 L 6.3125 9.15625 L 22.15625 25 L 6.21875 40.96875 L 9.03125 43.78125 L 25 27.84375 L 40.9375 43.78125 L 43.78125 40.9375 L 27.84375 25 L 43.6875 9.15625 L 40.84375 6.3125 L 25 22.15625 Z"/></svg>
\ No newline at end of file
styles/globals.css
......@@ -365,6 +365,9 @@ header {
.header-search {
position: relative;
}
.header-search .rbt .rbt-input-main{
padding-right: 2.5rem;
}
.header-search>.form-control{
font-size: 0.833vw;
}
......@@ -409,7 +412,7 @@ header {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
background: rgba(0, 0, 0, 0.2); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
......@@ -541,7 +544,9 @@ header {
border: 3px solid #fff;
background: #2a2a2a;
}
.searchbar-h .rbt-menu.dropdown-menu.show{
top: 1.7rem !important;
}
.searchbar-h {
position: relative;
width: 100%;
......@@ -549,7 +554,7 @@ header {
background: #fff;
box-shadow: 0px 4px 57.5px -8px rgba(0, 0, 0, 0.25);
height: 90px;
padding: 2.2rem;
padding: 1.5rem 2.2rem;
}
.searchbar-h input {
......@@ -2172,7 +2177,7 @@ footer .subscribe input {
padding: 0.6rem;
color: #fff;
margin-right: 0.5rem;
width: 62%;
width: 100%;
}
footer hr {
......@@ -2327,7 +2332,7 @@ footer hr {
}
.time-filter .time input {
/* width: 55px; */
width: 100%;
border: 1px solid #D1D1D1;
border-radius: 5px;
padding: 0.4rem;
......@@ -2578,7 +2583,9 @@ footer hr {
.btn {
font-size: 0.833vw;
}
.btn-check:focus+.btn, .btn:focus, button:focus:not(:focus-visible){
box-shadow: none;
}
.availability-wrappper {
display: flex;
align-items: center;
......@@ -2846,8 +2853,8 @@ input[type="number"]::-webkit-outer-spin-button {
color: #808080;
background-color: transparent;
}
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-arrow:before {
background: transparent;
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-arrow:before,:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-content {
background: #fff;
}
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip .ant-tooltip-arrow::after {
box-shadow: 1px 1px 6px #c1c1c1;
......@@ -3607,6 +3614,49 @@ img:hover {
.form-container .upload-file .anticon.anticon-plus{
position: absolute;
}
.search-icon.btn:hover {
color: inherit;
background-color: inherit;
border-color: inherit;
box-shadow: none;
}
.form-control:focus{
box-shadow: none;
border-color: #ced4da;
}
:where(.css-dev-only-do-not-override-1kuana8).ant-tooltip{
z-index: 10;
}
.swiper-nav button{
margin: 0 !important;
padding: 0 !important;
}
/* .let-discover-carousal{
background: orange;
} */
.page-link{
box-shadow: 0px 2.57px 8.85px 0px #00000026;
}
.load-more{
display: flex;
align-items: center;
justify-content: flex-end;
}
.load-more .pagination .page-item{
}
.page-item:not(:first-child) .page-link {
margin-left: 10px;
}
.page-link{
display: block;
font-size: 16px;
border-radius: 5px;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem;
......@@ -3722,6 +3772,50 @@ img:hover {
}
@media (max-width: 767px) {
.navbar-toggler{
border: 0;
}
.navbar-toggler .navbar-toggler-icon{
background: url(/images/icons/close_icon.svg) no-repeat !important;
background-size: 100% !important;
}
.navbar-toggler.collapsed .navbar-toggler-icon{
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.95' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.top-rated {
font-size: 12px;
display: flex;
width: 19vw;
align-items: center;
justify-content: center;
line-height: 15px;
}
.discover-swiper-button-prev arrow{
left: 0;
}
.navbar-collapse form{
margin-right: 0 !important;
}
.header-search {
width: 100%;
}
.navbar-expand-lg .navbar-nav {
padding-bottom: 1rem;
}
.navbar-expand-lg .navbar-nav .nav-link.gift-card .image-container {
width: 18px;
}
.header_wrap .navbar-expand-lg .navbar-nav .nav-link {
padding: 0.2rem 0;
display: flex;
align-items: center;
}
.navbar-collapse {
margin-top: 1rem;
}
.copyright {
font-size: 14px;
}
.let-discover-session.let-discover-listing-session .swiper-nav, .home_nav {
width: 100%;
}
......@@ -3738,9 +3832,16 @@ img:hover {
line-height: 3.883vw;
margin-bottom: 1rem;
}
.top-btn{
margin-bottom: 1rem;
}
.top-btn {
margin-bottom: 1rem;
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.top-btn button{
width: 100%;
}
.header-search .search-icon .image-container {
width: 3.585vw;
}
......@@ -3752,7 +3853,7 @@ img:hover {
font-size: 3vw;
}
.navbar-brand {
width: 16.927vw;
width: 22.927vw;
}
.info .top-name .title {
font-size: 4vw;
......@@ -3881,6 +3982,17 @@ img:hover {
}
@media (max-width: 767px) {
.container-fluid {
max-width: 100vw;
}
.home-banner-bg::before {
border-radius: 0 0 1rem 1rem;
}
.let-discover-carousal a .title {
padding: 1rem;
font-size: 14px;
line-height: 16px;
}
footer .subscribe input {
width: 67%;
}
......@@ -3975,12 +4087,17 @@ img:hover {
.searchbar-h {
height: 55px;
padding: 1rem;
padding: 0.8rem;
}
.searchbar-h .rbt-menu.dropdown-menu.show {
top: 0.8rem !important;
}
.rbt-menu > .dropdown-item {
font-size: 13px;
}
.searchbar-h .search-icon {
right: 8px;
top: 11px;
top: 12px;
}
.searchbar-session {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!