');
+ $( "#ajaxproducts" ).append( data );
+
+ setTimeout(function() {
+ resizeTasks();
+ if(typeof resizeTasksPlp !== "undefined"){
+ resizeTasksPlp();
+ }
+ }, 3000);
+ var x = 1; var y = null;
+ setTimeout(function() { x = x * 3 + 2; y = x / 2; }, 1000);
+ $( "#ajaxproducts" ).append( '
' );
+ var x = 1; var y = null;
+ setTimeout(function() { x = x * 3 + 2; y = x / 2; }, 1000);
+ }
+
+ }).success(function(data){
+ if (data.indexOf("No products available") == -1) {
+ // change url query string (next page)
+ history.pushState(null, null, updateQueryStringParameter(window.location.pathname + window.location.search, 'nP', pageToLoad));
+ // change title
+ $(document).attr("title", original_title.replace(/ [-] page [0-9]+/gm, '') + ' - page ' + pageToLoad);
+ // add current page to body
+ $('body').attr('data-page', pageToLoad);
+ slickIt('#page_'+pageToLoad);
+
+ // Move PLP banners content
+ if(typeof plpBannerMoveContent !== "undefined"){
+ plpBannerMoveContent();
+ }
+
+ // Rudderstack
+ window.rudderEventsQueue = window.rudderEventsQueue || [];
+ window.rudderEventsQueue?.push({
+ 'event': 'plpPaginationScroll',
+ 'page_path': window.location.pathname + window.location.search,
+ 'page_title': $(document).attr("title")??'',
+ 'page_number': pageToLoad??'',
+ });
+
+ }
+ else {
+ $("#infinite-scroll-loader").remove();
+ }
+ }).error(function(data){
+ $("#infinite-scroll-loader").remove();
+ });
+ }
+
+ setPage();
+ }
+ })
+});
+
+
+// USE EXAMPLE
+// public function get_roomideas($filter = ""){
+
+
+
+// // Get the room ideas
+// $arrPageVariables = array();
+// $ideasLimit = 6;
+
+
+// // Calulcate which filter-type is our first param
+// $colours = \DB::table("crud_room_ideas_filter_colours")->where("bolDeleted", "=", 0)->where("strSearchUrl", "=", $filter)->first();
+// $rooms = \DB::table("crud_room_ideas_filter_rooms")->where("bolDeleted", "=", 0)->where("strSearchUrl", "=", $filter)->first();
+// $types = \DB::table("crud_room_ideas_filter_types")->where("bolDeleted", "=", 0)->where("strSearchUrl", "=", $filter)->first();
+
+// $colourFilter = "";
+// $roomFilter = "";
+// $typeFilter = "";
+
+// $metaTitle = "Flooring Ideas | Tapi Carpets & Floors";
+// $metaDescription = "Be inspired by our fantastic flooring ideas! Find the perfect colour and style of carpet, vinyl, laminate, or luxury vinyl to complete your room at Tapi.";
+// $data['H1'] = "Flooring Ideas";
+// $data['introductionText'] = "Whether you follow the latest flooring trends or you're a fan of more traditional flooring, we've got plenty of flooring ideas to inspire you. If you already have a particular floor colour in mind, you can explore our flooring ideas by colour and find the perfect shade to complete your room. It's also a good idea to take a look at a colour you wouldn't normally pick, you might surprise yourself! You can also browse our flooring ideas by room - an ideal place to start if you're not sure which floor type to choose. If you know exactly what flooring you want, simply visit your nearest Tapi store and let us bring your flooring ideas to life!";
+
+// // Scan each result to see if it's the first part of the URL
+// $urlFilterType = "";
+// if(!empty($colours)){
+// $colourFilter = $colours->strSearchUrl;
+// $urlFilterType = "colour";
+
+// $data['H1'] = $colours->strH1;
+// $data['introductionText'] = $colours->txtIntroText;
+// $metaTitle = $colours->strMetaTitle;
+// $metaDescription = $colours->txtMetaDescription;
+
+// } elseif(!empty($rooms)){
+// $roomFilter = $rooms->strSearchUrl;
+// $urlFilterType = "room";
+
+// $data['H1'] = $rooms->strH1;
+// $data['introductionText'] = $rooms->txtIntroText;
+// $metaTitle = $rooms->strMetaTitle;
+// $metaDescription = $rooms->txtMetaDescription;
+
+// } elseif(!empty($types)){
+// $typeFilter = $types->strSearchUrl;
+// $urlFilterType = "type";
+
+// $data['H1'] = $types->strH1;
+// $data['introductionText'] = $types->txtIntroText;
+// $metaTitle = $types->strMetaTitle;
+// $metaDescription = $types->txtMetaDescription;
+// }
+
+// $data['urlFilterType'] = $urlFilterType;
+
+// // Assign filters based on the query string if that filter isn't URL part 1
+// if(!empty(Input::get("colour", array())) && empty($colourFilter)){
+// $colourFilter = Input::get("colour");
+// }
+// if(!empty(Input::get("room", array())) && empty($roomFilter)){
+// $roomFilter = Input::get("room");
+// }
+// if(!empty(Input::get("type", array())) && empty($typeFilter)){
+// $typeFilter = Input::get("type");
+// }
+// // before pagination
+// //$data['roomIdeas'] = \App\Ideas::getRoomIdeas($ideasLimit, 0, $colourFilter, $roomFilter, $typeFilter);
+// // with pagination
+// $numPage = \Input::get('nP', 1);
+// $startAt = ($numPage-1) * $ideasLimit;
+// $numRoomIdeas = \App\Ideas::getRoomIdeasTotal($colourFilter, $roomFilter, $typeFilter);
+// $data['roomIdeas'] = \App\Ideas::getRoomIdeas($ideasLimit, $startAt, $colourFilter, $roomFilter, $typeFilter);
+// $data['pagination'] = \CMS\SiteNavigation::generatePagination($numPage, $ideasLimit, $numRoomIdeas, true);
+// if(\Input::get('nP',0) > $data['pagination']["totalPages"]){
+// // if page > totalPages redirect to 404
+// return \Response::make(\CMS\Theme::generate404ErrorPage(), 404);
+// }
+// //used for rel next/prev
+// $data["totalPages"] = $data['pagination']["totalPages"];
+
+// //meta data
+// $metaArray = new \stdClass;
+// $metaArray->strMetaTitle = (empty($metaTitle) ? "Room Ideas": $metaTitle);
+// $metaArray->strMetaKeywords = "Room Ideas";
+// $metaArray->strMetaDescription = (empty($metaDescription) ? "Tapi Carpets & Floors | Room Ideas : Find ideas for your rooms" : $metaDescription);;
+// $data['meta'] = $metaArray;
+
+
+// // Get the filters for the on-page selects
+// $colourFiltersDb = \DB::table("crud_room_ideas_filter_colours")->where("bolDeleted", "=", 0)->order_by("intOrder", "asc")->get();
+// $colourFilters = array();
+// foreach($colourFiltersDb as $filter){
+// if(is_null($filter->strSearchUrl)){
+// \DB::table("crud_room_ideas_filter_colours")->where("intId", "=", $filter->intId)->update(array("strSearchUrl" => \Str::slug($filter->strFilterColour)));
+// $filter->strSearchUrl = \Str::slug($filter->strFilterColour);
+// }
+
+// $colourFilters[$filter->strSearchUrl] = $filter->strFilterColour;
+// }
+
+// $roomFiltersDb = \DB::table("crud_room_ideas_filter_rooms")->where("bolDeleted", "=", 0)->order_by("intOrder", "asc")->get();
+// $roomFilters = array();
+// foreach($roomFiltersDb as $filter){
+// if(is_null($filter->strSearchUrl)){
+// \DB::table("crud_room_ideas_filter_rooms")->where("intId", "=", $filter->intId)->update(array("strSearchUrl" => \Str::slug($filter->strFilterRoom)));
+// $filter->strSearchUrl = \Str::slug($filter->strFilterRoom);
+// }
+
+// $roomFilters[$filter->strSearchUrl] = $filter->strFilterRoom;
+// }
+
+// $typeFiltersDb = \DB::table("crud_room_ideas_filter_types")->where("bolDeleted", "=", 0)->order_by("intOrder", "asc")->get();
+// $typeFilters = array();
+// foreach($typeFiltersDb as $filter){
+// if(is_null($filter->strSearchUrl)){
+// \DB::table("crud_room_ideas_filter_types")->where("intId", "=", $filter->intId)->update(array("strSearchUrl" => \Str::slug($filter->strFilterType)));
+// $filter->strSearchUrl = \Str::slug($filter->strFilterType);
+// }
+
+// $typeFilters[$filter->strSearchUrl] = $filter->strFilterType;
+// }
+
+// $data['pageFilters'] = array(
+// "colour" => $colourFilters,
+// "room" => $roomFilters,
+// "type" => $typeFilters
+// );
+
+// $data['filtersMemory'] = array(
+// "colour" => $colourFilter,
+// "room" => $roomFilter,
+// "type" => $typeFilter
+// );
+
+// return \CMS\Theme::generatePageLayout(
+// 'baseRoomIdeasPage',
+// array('data' => $data),
+// array()
+// );
+// }
+
+// public function get_roomideasajax($colourFilter = "", $roomFilter = "", $typeFilter = ""){
+// //$offset = Input::get("count");
+// $ideasLimit = 6;
+
+// if($colourFilter === "any"){
+// $colourFilter = "";
+// }
+// if($roomFilter === "any"){
+// $roomFilter = "";
+// }
+// if($typeFilter === "any"){
+// $typeFilter = "";
+// }
+
+
+// // before pagination
+// //$ideas = \App\Ideas::getRoomIdeas($ideasLimit, $offset, $colourFilter, $roomFilter, $typeFilter);
+// // with pagination
+// $numPage = \Input::get('page',1);
+// $startAt = ($numPage-1) * $ideasLimit;
+// $ideas = \App\Ideas::getRoomIdeas($ideasLimit, $startAt, $colourFilter, $roomFilter, $typeFilter);
+
+// // Build data array and output back as JSON
+// $data = array(
+// "count" => count($ideas),
+// "ideas" => $ideas,
+// "siteUrl" => "http://" . $_SERVER['HTTP_HOST']
+// );
+
+// return json_encode($data);
+
+// }
\ No newline at end of file
diff --git a/scss/base/_base.scss b/scss/base/_base.scss
index c083c0d..150aa0c 100644
--- a/scss/base/_base.scss
+++ b/scss/base/_base.scss
@@ -8,8 +8,7 @@ html{scroll-behavior: smooth}
/* Footer fixed to bottom */
html,body{height: 100%}
body{display: flex;flex-direction: column;}
-main, .main{ flex: 1 0 auto }
-
+main, .main{ display:flex; flex-direction: column; flex: 1 0 auto }
html{
font-size: $font-size; /* rem based on this (root element), em is based on the parent element of wherever the change is */
diff --git a/scss/base/_grid.scss b/scss/base/_grid.scss
index 4ccc4c1..44e8613 100644
--- a/scss/base/_grid.scss
+++ b/scss/base/_grid.scss
@@ -28,6 +28,7 @@
@include col-width($width);
}
}
+
}
@@ -119,7 +120,9 @@
}
.row--scroll [class^="col"]{}
-.col{ flex: 0 1 auto; } // Just allow shrink, no grow
+.col{
+ flex: 0 1 auto; // Just allow shrink, no grow
+}
// Default cols to 100% width when below $media-xs (base 360px)
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
@@ -138,7 +141,7 @@
// Now the actual xs styling
@include add-cols('-xs');
- .hidden-xs { display: none }
+ .hide-xs { display: none }
}
@@ -151,13 +154,13 @@
/* (100/12) * x = the flex % */
@include add-cols('-sm');
- .hidden-sm { display: none }
// Any overwrites for previous sizes (as using min-width by preference)
// Not sure how hidden display altering will work with flex/block/inline-block differences though...
// IN FACT. This may not be needed? Could just be that if it's hidden sm, it's hidden above that too?
// but then I guess I'd need a 'show-md' etc, which has the same problem...
- .hidden-xs { display: unset }
+ .hide-xs { display: unset }
+ .hide-sm { display: none }
}
@@ -168,11 +171,10 @@
@include add-cols('');
@include add-cols('-md');
- .hidden-md { display: none }
-
// Any overwrites for previous sizes (as using min-width by preference)
// Not sure how hidden display altering will work with flex/block/inline-block differences though...
- .hidden-xs, .hidden-sm { display: unset }
+ .hide-xs, .hide-sm { display: unset }
+ .hide-md { display: none }
}
@@ -184,11 +186,10 @@
/* (100/12) * x = the flex % */
@include add-cols('-lg');
- .hidden-lg { display: none }
-
// Any overwrites for previous sizes (as using min-width by preference)
// Not sure how hidden display altering will work with flex/block/inline-block differences though...
- .hidden-xs, .hidden-sm, .hidden-md { display: unset }
+ .hide-xs, .hide-sm, .hide-md { display: unset }
+ .hide-lg { display: none }
}
@@ -197,11 +198,10 @@
/* (100/12) * x = the flex % */
@include add-cols('-xl');
- .hidden-xl { display: none }
-
- // Any overwrites for previous sizes (as using min-width by preference)
+ // Any overwrites for previous sizes (as using min-width by preference)
// Not sure how hidden display altering will work with flex/block/inline-block differences though...
- .hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { display: unset }
+ .hide-xs, .hide-sm, .hide-md, .hide-lg { display: unset }
+ .hide-xl { display: none }
}
diff --git a/scss/component/_cover.scss b/scss/component/_cover.scss
new file mode 100644
index 0000000..4d11a0e
--- /dev/null
+++ b/scss/component/_cover.scss
@@ -0,0 +1,6 @@
+.cover{
+ background-image: url('https://placehold.co/1200x800');
+ min-height: 100%;
+ background-position: center;
+ background-size: cover;
+}
diff --git a/scss/component/_form.scss b/scss/component/_form.scss
index 6200c84..56e1050 100644
--- a/scss/component/_form.scss
+++ b/scss/component/_form.scss
@@ -152,7 +152,7 @@ $checkboxIcon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.
padding-left: $inputSize*1.5rem;
}
.custom-checkbox input{
- // display: none;
+ display: none;
}
.custom-checkbox label::after{
content: "";
diff --git a/scss/component/_hero.scss b/scss/component/_hero.scss
index 32aafc8..10ec21b 100644
--- a/scss/component/_hero.scss
+++ b/scss/component/_hero.scss
@@ -1,5 +1,12 @@
@use '../utilities/main_utilities' as *;
.hero{
- padding: rems(48px) 0;
+ position: relative;
}
+
+.hero__content{
+ padding: rems(24px);
+ position: absolute;
+ top: 0;
+ left: 0;
+}
\ No newline at end of file
diff --git a/scss/component/_main_component.scss b/scss/component/_main_component.scss
index 11ae737..170329c 100644
--- a/scss/component/_main_component.scss
+++ b/scss/component/_main_component.scss
@@ -10,3 +10,5 @@
@use 'code';
@use 'banner';
@use 'accordion';
+@use 'cover';
+@use 'hero';
diff --git a/scss/helpers/_main_helpers.scss b/scss/helpers/_main_helpers.scss
index cefacb8..2efb0b9 100644
--- a/scss/helpers/_main_helpers.scss
+++ b/scss/helpers/_main_helpers.scss
@@ -6,8 +6,10 @@
.tal{ text-align: left; }
.no-padd{ padding: 0; }
+.no-margin{ margin: 0;}
.hide{ display: none; }
+.right{ margin-left: auto; } // So transitions on rescaling 'grow' from the right side primarily, tar does everything else
.mobile{ display: block; }
.desktop{ display: none; }
@@ -19,4 +21,5 @@
.nowrap{
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-}
\ No newline at end of file
+}
+
diff --git a/scss/layout/_footer.scss b/scss/layout/_footer.scss
index 69017a4..278b32c 100644
--- a/scss/layout/_footer.scss
+++ b/scss/layout/_footer.scss
@@ -1,6 +1,7 @@
@use '../utilities/main_utilities' as *;
.footer{
+ margin-top: rems(20px);
background-color: $color-primary;
color: $color-text;
border-top: 1px solid $color-text;
diff --git a/scss/layout/_nav.scss b/scss/layout/_nav.scss
index 2898474..6162f14 100644
--- a/scss/layout/_nav.scss
+++ b/scss/layout/_nav.scss
@@ -4,7 +4,7 @@ $nav-spacer: rems(20px);
/* Nav */
.nav{
- // background-color: $color-background;
+ background-color: $color-primary;
// @include color-scheme(dark) { color: $color-background--dark; }
}
.nav a{
@@ -20,12 +20,14 @@ $nav-spacer: rems(20px);
.nav-list{
list-style: none;
+}
+.nav-list--inline{
padding: 0;
margin-left: -#{rems(10px)}; /* To offset the start of li margin. Little jank */
}
// .nav-list li,
-.nav-list__item{
+.nav-list--inline .nav-list__item{
display: inline-block;
margin-left: rems(10px);
position: relative;
diff --git a/scss/page/_example.scss b/scss/page/_example.scss
new file mode 100644
index 0000000..80cc48a
--- /dev/null
+++ b/scss/page/_example.scss
@@ -0,0 +1,13 @@
+// .side-nav, .content--side-nav{
+// display: inline-block;
+// }
+
+// .side-nav{
+// width: 25%;
+// position: fixed;
+// }
+
+// .content--side-nav{
+// margin-left: 25%;
+// width: 75%;
+// }
\ No newline at end of file
diff --git a/scss/page/_main_page.scss b/scss/page/_main_page.scss
index 641cb88..cf2aea3 100644
--- a/scss/page/_main_page.scss
+++ b/scss/page/_main_page.scss
@@ -3,3 +3,4 @@
// Page specific stuff
@use 'error/error';
@use 'testing';
+@use 'example';
diff --git a/scss/page/_testing.scss b/scss/page/_testing.scss
index e092670..5d32c78 100644
--- a/scss/page/_testing.scss
+++ b/scss/page/_testing.scss
@@ -53,10 +53,13 @@
.gallery-fancy{
height: 300px;
overflow: hidden;
+ position: relative;
+ transition: 0.6s ease-in-out !important;
}
.gallery-fancy--show{
- height: auto;
+ height: 100%;
overflow: unset;
+ transition: 0.6s ease-in-out !important;
}
.gallery-fancy:before{
content:"";
@@ -106,7 +109,7 @@
// Use above another container where elements are supposed to be off the page on higher screen width
.container-overflow{
- max-width: 100%;
+ width: 100%;
overflow: hidden;
}
