iceholidays-frontend 0.5.0 → 0.7.0

data/app/javascript/react/widgets/FilterPills.tsx

@@ -19,10 +19,10 @@ function FilterPills(
   props: {
     items:any[];
     title?:string;
-    initialValue:{keyword?:string, year?:string, month?: string, location_id?:any}
-    bindLabel?:string;
-    bindValue?:string;
-    allOption?:boolean;
+    initialValue:{keyword?:string, year?:any, month?: string, location_id?:any, type?: any}
+    bindLabel:string;
+    bindValue:string;
+    allOption:boolean;
     selectFilter;
   }){
   
@@ -32,7 +32,7 @@ function FilterPills(
 
   const allHasValues = () => {
     const {keyword, ...noKeyword} = selected;
-    return Object.entries(noKeyword).every(o => o[1] != "");
+    return Object.entries(noKeyword).every(o => o[1] != "" && o[1] != null);
   }
   const [collapseFilters, setcollapseFilters] = useState(allHasValues);
   
@@ -57,16 +57,15 @@ function FilterPills(
                   { title && <div className="filter-title"> {title} </div> }
                   <Space size={10} wrap>
                       {
-                        allOption && <div className="filter-pill selected"> <span> All </span></div>
+                        allOption && <div onClick={()=>selectFilter(bindValue, null)} className={`filter-pill ${(selected[bindValue] == null || selected[bindValue] == '') && 'selected'}`}> <span> All </span></div>
                       }
                       {
                         items.map((item, index) => {
                           //special case for location id
                           const id:any = bindValue == "location_id" ? "id" : bindValue;
-                          const label = bindLabel ? item[bindLabel] : item;
                           const value = bindValue ? item[id] : item;
                           const selectedItem = selected && bindValue ? selected[bindValue]: item ;
-                          return <div key={index} onClick={()=>selectFilter(bindValue, value)} className={`filter-pill ${selectedItem == value && 'selected'}`}> <span>{ label } </span></div>
+                          return <div key={index} onClick={()=>selectFilter(bindValue, value)} className={`filter-pill ${selectedItem == value && 'selected'}`}> <span>{ item[bindLabel] } </span></div>
                         })
                       }
                   </Space>
@@ -77,26 +76,24 @@ function FilterPills(
             <div className="filter-title"> Year </div>
             <Space size={10} wrap>
               {
-                allOption && <div className="filter-pill selected"> <span> All </span></div>
+                allOption && <div onClick={()=>selectFilter("year", "")} className={`filter-pill ${selected.year == '' && 'selected'}`}> <span> All </span></div>
               }
               {
-                years().map((year, index) => {
-                  const selectedItem = selected && selected.year; 
-                  return <div key={index} onClick={()=>selectFilter("year", year)} className={`filter-pill default-filter ${selectedItem == year.toString() && 'selected'}`}> <span>{year} </span></div>
-                })
+                years().map((year, index) => (
+                  <div key={index} onClick={()=>selectFilter("year", year)} className={`filter-pill default-filter ${selected.year == year && 'selected'}`}> <span>{year} </span></div>
+                ))
               }
             </Space>
       
             <div className="filter-title"> Month </div>
             <Row gutter={[10, 10]} justify="space-between">
               {
-                allOption && <Col className="filter-pill selected"> <span> All </span></Col>
+                allOption && <div onClick={()=>selectFilter("month", "")} className={`filter-pill ${selected.month == '' && 'selected'}`}> <span> All </span></div>
               }
               {
-                months.map((month, index) => {
-                  const selectedItem = selected && selected.month ;
-                  return <Col xs={8} md={6} lg={4}> <div key={index} onClick={()=>selectFilter("month", month.shortMonth)} className={`filter-pill default-filter ${selectedItem?.toString() == month.shortMonth && 'selected'}`}> <span>{month.name} </span></div> </Col>
-                })
+                months.map((month, index) => (
+                  <Col key={index} xs={8} md={6} lg={4}> <div onClick={()=>selectFilter("month", month.shortMonth)} className={`filter-pill default-filter ${selected.month == month.shortMonth && 'selected'}`}> <span>{month.name} </span></div> </Col>
+                ))
               }
             </Row>
           </Space>
@@ -108,4 +105,10 @@ function FilterPills(
   
 }
 
+FilterPills.defaultProps = {
+  allOption: false,
+  bindLabel: "label",
+  bindValue: "id"
+}
+
 export default FilterPills;

data/config/routes.rb

@@ -6,7 +6,7 @@ Iceholidays::Frontend::Engine.routes.draw do
   get   '/about-us'       => 'site#about_us', as: :about_us
   get   '/countries'      => 'site#countries', as: :countries
   get   '/blog'           => 'site#blog', as: :blog
-  get   '/blog/1'         => 'site#show_blog', as: :show_blog
+  get   '/blog/:id'       => 'site#show_blog', as: :show_blog
   get   '/contact-agents' => 'site#contact_agents', as: :contact_agents
   get   '/contact-us'     => 'site#contact_us', as: :contact_us
   resources :posts, only:[:index, :show]

data/lib/iceholidays/frontend/version.rb

@@ -1,5 +1,5 @@
 module Iceholidays
   module Frontend
-    VERSION = "0.5.0"
+    VERSION = "0.7.0"
   end
 end

data/public/iceholidays-assets/application.css

@@ -15,6 +15,240 @@
  *= require_self
  */
 @import url("//fonts.googleapis.com/css?family=Poppins:ital,wght@0,100;0,200;0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,200;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+/* Slider */
+.slick-slider {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list {
+  position: relative;
+  overflow: hidden;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+.slick-list:focus {
+  outline: none;
+}
+.slick-list.dragging {
+  cursor: pointer;
+  cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list {
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+.slick-track {
+  position: relative;
+  left: 0;
+  top: 0;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.slick-track:before, .slick-track:after {
+  content: "";
+  display: table;
+}
+.slick-track:after {
+  clear: both;
+}
+.slick-loading .slick-track {
+  visibility: hidden;
+}
+
+.slick-slide {
+  float: left;
+  height: 100%;
+  min-height: 1px;
+  display: none;
+}
+[dir=rtl] .slick-slide {
+  float: right;
+}
+.slick-slide img {
+  display: block;
+}
+.slick-slide.slick-loading img {
+  display: none;
+}
+.slick-slide.dragging img {
+  pointer-events: none;
+}
+.slick-initialized .slick-slide {
+  display: block;
+}
+.slick-loading .slick-slide {
+  visibility: hidden;
+}
+.slick-vertical .slick-slide {
+  display: block;
+  height: auto;
+  border: 1px solid transparent;
+}
+
+.slick-arrow.slick-hidden {
+  display: none;
+}
+
+/* Slider */
+/* Icons */
+/* Arrows */
+.slick-prev,
+.slick-next {
+  position: absolute;
+  display: block;
+  height: 20px;
+  width: 20px;
+  line-height: 0px;
+  font-size: 0px;
+  cursor: pointer;
+  background: transparent;
+  color: transparent;
+  top: 50%;
+  -webkit-transform: translate(0, -50%);
+  -ms-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+  padding: 0;
+  border: none;
+  outline: none;
+}
+.slick-prev:hover, .slick-prev:focus,
+.slick-next:hover,
+.slick-next:focus {
+  outline: none;
+  background: transparent;
+  color: transparent;
+}
+.slick-prev:hover:before, .slick-prev:focus:before,
+.slick-next:hover:before,
+.slick-next:focus:before {
+  opacity: 1;
+}
+.slick-prev.slick-disabled:before,
+.slick-next.slick-disabled:before {
+  opacity: 0.25;
+}
+.slick-prev:before,
+.slick-next:before {
+  font-family: "slick";
+  font-size: 20px;
+  line-height: 1;
+  color: white;
+  opacity: 0.75;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.slick-prev {
+  left: -25px;
+}
+[dir=rtl] .slick-prev {
+  left: auto;
+  right: -25px;
+}
+.slick-prev:before {
+  content: "←";
+}
+[dir=rtl] .slick-prev:before {
+  content: "→";
+}
+
+.slick-next {
+  right: -25px;
+}
+[dir=rtl] .slick-next {
+  left: -25px;
+  right: auto;
+}
+.slick-next:before {
+  content: "→";
+}
+[dir=rtl] .slick-next:before {
+  content: "←";
+}
+
+/* Dots */
+.slick-dotted.slick-slider {
+  margin-bottom: 30px;
+}
+
+.slick-dots {
+  position: absolute;
+  bottom: -25px;
+  list-style: none;
+  display: block;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+.slick-dots li {
+  position: relative;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  margin: 0 5px;
+  padding: 0;
+  cursor: pointer;
+}
+.slick-dots li button {
+  border: 0;
+  background: transparent;
+  display: block;
+  height: 20px;
+  width: 20px;
+  outline: none;
+  line-height: 0px;
+  font-size: 0px;
+  color: transparent;
+  padding: 5px;
+  cursor: pointer;
+}
+.slick-dots li button:hover, .slick-dots li button:focus {
+  outline: none;
+}
+.slick-dots li button:hover:before, .slick-dots li button:focus:before {
+  opacity: 1;
+}
+.slick-dots li button:before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: "•";
+  width: 20px;
+  height: 20px;
+  font-family: "slick";
+  font-size: 6px;
+  line-height: 20px;
+  text-align: center;
+  color: black;
+  opacity: 0.25;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.slick-dots li.slick-active button:before {
+  color: black;
+  opacity: 0.75;
+}
+
 .ant-layout-content {
   position: relative;
 }
@@ -112,6 +346,10 @@ a {
   background-color: transparent;
 }
 
+.slick-track {
+  margin: unset;
+}
+
 #main-header {
   --button-height: 35px;
   position: relative;
@@ -334,7 +572,7 @@ a {
   }
   #main-footer .contact-info .ant-flex {
     gap: 10px !important;
-    align-items: flex-start;
+    align-items: center;
   }
 }
 #headline {
@@ -484,10 +722,11 @@ a {
   margin-top: 100px;
 }
 #ribbon-section_header {
-  height: 138px;
+  height: 150px;
   text-align: center;
   position: relative;
-  background-image: url("/iceholidays-assets/images/Layer_1.png");
+  background-image: url("/iceholidays-assets/images/TSTRibbon.png");
+  background-repeat: no-repeat;
 }
 #ribbon-section_header h1 {
   font-family: Poppins, san-serif;
@@ -580,6 +819,18 @@ a {
     line-height: 30px;
   }
 }
+@media only screen and (min-width: 1441px) {
+  #ribbon-section_header {
+    background-image: url("/iceholidays-assets/images/TST Ribbon@2x.png");
+    height: 300px;
+  }
+}
+@media only screen and (min-width: 2880px) {
+  #ribbon-section_header {
+    background-image: url("/iceholidays-assets/images/TST Ribbon@3x.png");
+    height: 450px;
+  }
+}
 .ant-input {
   field-sizing: content;
 }
@@ -1243,6 +1494,12 @@ body {
   display: block;
   width: 100%;
 }
+#listing-page #no-tours-found {
+  font-family: Poppins, san-serif;
+  font-weight: 400;
+  text-align: center;
+  color: rgba(0, 0, 12, 0.6);
+}
 
 .tour_details_description.ant-modal .ant-modal-title {
   font-family: Poppins, san-serif;
@@ -1353,20 +1610,20 @@ body {
 #show-page #date-selector {
   padding: 20px var(--side-padding);
 }
-#show-page #date-selector [class~=ant-carousel] .slick-slide > div {
+#show-page #date-selector [class~=slick-slider] .slick-slide > div {
   padding: 0 5px;
 }
-#show-page #date-selector [class~=ant-carousel] .slick-arrow {
+#show-page #date-selector [class~=slick-slider] .slick-arrow {
   color: rgb(149, 148, 146);
 }
-#show-page #date-selector [class~=ant-carousel] .slick-arrow:hover {
+#show-page #date-selector [class~=slick-slider] .slick-arrow:hover {
   color: #DCB062;
 }
-#show-page #date-selector [class~=ant-carousel] .slick-prev {
-  inset-inline-start: -40px;
+#show-page #date-selector [class~=slick-slider] .slick-prev {
+  inset-inline-start: -35px;
 }
-#show-page #date-selector [class~=ant-carousel] .slick-next {
-  inset-inline-end: -40px;
+#show-page #date-selector [class~=slick-slider] .slick-next {
+  inset-inline-end: -35px;
 }
 #show-page #date-selector .date-box {
   background: #FFFFFF;
@@ -1818,6 +2075,9 @@ body {
   margin: 20px 0;
   display: block;
 }
+#about-signature-tours picture > img {
+  width: 100%;
+}
 #about-signature-tours #about-st-feature #feature {
   height: 246px;
   gap: 0px;
@@ -1873,7 +2133,7 @@ body {
   font-size: 24px;
   font-weight: 500;
   line-height: 36px;
-  text-align: left;
+  text-align: center;
   text-underline-position: from-font;
   text-decoration-skip-ink: none;
 }
@@ -2221,6 +2481,17 @@ body {
 #blog-page_body #blogs {
   margin: 30px 0;
 }
+#blog-page_body #blogs .preview-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  max-height: 100px;
+}
+#blog-page_body #blogs .view-blog {
+  margin-top: 10px;
+}
 
 #blog-show-page_body {
   margin: 20px var(--side-padding);
@@ -2229,6 +2500,21 @@ body {
   background: rgb(255, 255, 255);
   box-shadow: 0px 5px 20px 0px rgba(225, 182, 91, 0.2);
 }
+#blog-show-page_body h1 {
+  font-family: Poppins;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 36px;
+  letter-spacing: 0%;
+  margin-top: 0;
+}
+#blog-show-page_body img {
+  object-fit: cover;
+  height: auto;
+  border-radius: 20px;
+  width: 100%;
+  margin-bottom: 20px;
+}
 
 @media only screen and (min-width: 769px) {
   * {
@@ -2528,6 +2814,15 @@ body {
     line-height: 45px;
     letter-spacing: 0.05em;
   }
+  #show-page #date-selector [class~=slick-slider] .slick-slide > div {
+    padding: 0 5px;
+  }
+  #show-page #date-selector [class~=slick-slider] .slick-prev {
+    inset-inline-start: -40px;
+  }
+  #show-page #date-selector [class~=slick-slider] .slick-next {
+    inset-inline-end: -40px;
+  }
   #show-page_body .toggle_contact-agent,
   #show-page_body .collapse-contact-agent {
     display: none;