From 2a1483524c8d31d70698e8e4266bb868e5e3c2c8 Mon Sep 17 00:00:00 2001 From: rakeshAlgo Date: Fri, 10 Jul 2020 16:55:51 +0530 Subject: [PATCH 1/4] UI issues fixes for image block paragraph and table difinition list fixes --- src/css/doc.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/css/doc.css b/src/css/doc.css index f2b0c48c..f5eedbb7 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -176,6 +176,18 @@ ul ul ul { border-top-width: 1px; } +.ulist li .paragraph:first-child, +.olist li .paragraph:first-child, +.dlist li .paragraph:first-child { + margin-top: var(--base-extra-small-space); +} + +.ulist li .imageblock, +.olist li .imageblock, +.dlist li .imageblock { + margin-bottom: var(--base-extra-small-space); +} + /* .doc table.tableblock, .doc th.tableblock, .doc td.tableblock { @@ -517,6 +529,10 @@ ul ul ul { margin: 0; } +.hdlist table .hdlist1 + .hdlist2 p { + margin-left: var(--base-space); +} + .doc pre:not(.highlight), .doc pre.highlight code { /* background-color: #151514; */ From c4e45e1c9a371786091502efc1f3dfe4c0e0164a Mon Sep 17 00:00:00 2001 From: bindaasrakesh Date: Mon, 13 Jul 2020 15:55:33 +0530 Subject: [PATCH 2/4] Regression testing on live site and fixes the bug for landing page and mobile UI --- src/css/doc.css | 19 ++++++++++++++++--- src/js/01-nav.js | 12 ++++++------ 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/css/doc.css b/src/css/doc.css index f5eedbb7..c88be9f5 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -416,7 +416,7 @@ ul ul ul { } .doc .imageblock img { - display: block; + display: inline-block; } .doc .imageblock .title { @@ -442,7 +442,7 @@ ul ul ul { width: auto; } -.doc .abstract blockquote { +.doc blockquote { font-size: 0.9375rem; margin: 1rem 0 1.5625rem 0; font-weight: var(--weight-light); @@ -450,7 +450,7 @@ ul ul ul { padding-left: 1.125rem; } -.doc .abstract blockquote * { +.doc blockquote * { font-weight: inherit; } /* .doc .abstract blockquote::before { @@ -1085,4 +1085,17 @@ table.tableblock pre code.language-bash.hljs { .doc h6 > a.anchor { font-size: 18px; } + + .card-row .column .content .imageblock { + text-align: center; + } + + .doc.landing-page-doc .media-left { + padding-left: 0; + text-align: center; + } + + main { + padding-bottom: 2rem; + } } diff --git a/src/js/01-nav.js b/src/js/01-nav.js index c5474f53..e206b7ff 100644 --- a/src/js/01-nav.js +++ b/src/js/01-nav.js @@ -143,14 +143,14 @@ function concealEvent (e) { e.stopPropagation() } - // scroll left menu to current active page - - var currentPageMenu = document.querySelector('.is-current-page') - var topPositon = currentPageMenu.offsetTop - var leftMenu = document.querySelector('.left-sidebar-menu .nav-menu') setTimeout(function () { - leftMenu.scrollTop = topPositon + if (document.querySelector('.is-current-page')) { + var currentPageMenu = document.querySelector('.is-current-page') + var topPositon = currentPageMenu.offsetTop + var leftMenu = document.querySelector('.left-sidebar-menu .nav-menu') + leftMenu.scrollTop = topPositon + } }, 200) // clearTimeout(scrollCurrentPageMenu, 20000) From 2876111aabeefe82f16e37073e6432608c3ece2f Mon Sep 17 00:00:00 2001 From: bindaasrakesh Date: Tue, 14 Jul 2020 11:12:06 +0530 Subject: [PATCH 3/4] Fix font size for code tag & table heading --- src/css/base.css | 11 ++++++++++- src/css/table.css | 8 ++++++-- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/css/base.css b/src/css/base.css index b33545a3..c36b1627 100644 --- a/src/css/base.css +++ b/src/css/base.css @@ -64,11 +64,20 @@ pre { code { background-color: #0074e00e; - font-size: var(--font-small); + /* font-size: var(--font-small); */ + font-size: inherit; word-spacing: -0.125em; color: var(--color-brand-gray1); } +h2 code, +h3 code, +h4 code, +h5 code, +a code { + font-size: inherit; +} + html code { hyphens: none; } diff --git a/src/css/table.css b/src/css/table.css index 22b17a00..1bb403ed 100644 --- a/src/css/table.css +++ b/src/css/table.css @@ -40,11 +40,15 @@ table.tableblock thead th { padding-bottom: var(--base-space); text-align: left; border-bottom: 2px solid var(--color-brand-blue-secondary); - font-size: 1rem; - line-height: 1.25rem; + font-size: 1.125rem; + line-height: 1.5rem; font-weight: var(--weight-semibold); } +/* table.tableblock tbody td:first-child strong { + font-size: 1.125rem; +} */ + table.tableblock tbody tr { display: table-cell; } From cc0dbfb463e1197f0e9c2aa78c4d4a0f5526a887 Mon Sep 17 00:00:00 2001 From: bindaasrakesh Date: Thu, 16 Jul 2020 16:55:34 +0530 Subject: [PATCH 4/4] Remove jquery and make tutorial filter page with javascript --- preview-src/landing-page-tutorials.adoc | 2 +- src/css/landing-page.css | 4 + src/js/10-landing-page-nav.js | 181 +++++++++++++++--------- 3 files changed, 118 insertions(+), 69 deletions(-) diff --git a/preview-src/landing-page-tutorials.adoc b/preview-src/landing-page-tutorials.adoc index 47502994..73940f17 100644 --- a/preview-src/landing-page-tutorials.adoc +++ b/preview-src/landing-page-tutorials.adoc @@ -125,7 +125,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu [.data-filter-column] ====== {empty} ++++ -
+

Lorem ipsum

diff --git a/src/css/landing-page.css b/src/css/landing-page.css index bfa2f74a..3c1c35fe 100644 --- a/src/css/landing-page.css +++ b/src/css/landing-page.css @@ -333,6 +333,10 @@ display: none; } +.nav.tutorials-filter .sub-menu.open { + display: block; +} + .nav.tutorials-filter .sub-menu li { list-style: none; } diff --git a/src/js/10-landing-page-nav.js b/src/js/10-landing-page-nav.js index 2b61c4c5..5635f451 100644 --- a/src/js/10-landing-page-nav.js +++ b/src/js/10-landing-page-nav.js @@ -1,77 +1,122 @@ -;(function ($) { +; +(function () { 'use strict' // for slide toggle - $('.nav-link').click(function () { - $(this).toggleClass('active') - $(this).next('.sub-menu').slideToggle(10) - }) - // add class even odd - var $allData = $('.data-filter-column') - for (var i = 0; i < $allData.length; i++) { - if (i % 2 === 1) { - $allData[i].classList.add('even') - } else { - $allData[i].classList.add('odd') - } - } + if (document.querySelector('.tutorials-filter')) { + // all variables declare here + // var tutorialsFilter = document.querySelector('.tutorials-filter') + var navLink = document.querySelectorAll('.nav-menu.filter li a') + var allData = document.querySelectorAll('.data-filter-column') - // for filter menu - var $filterMenuCheckboxes = $('input[type="checkbox"]') - $filterMenuCheckboxes.on('change', function () { - var selectedFiltersData = {} - $filterMenuCheckboxes.filter(':checked').each(function () { - if (!Object.prototype.hasOwnProperty.call(selectedFiltersData, this.name)) { - selectedFiltersData[this.name] = [] - } - selectedFiltersData[this.name].push(this.value.toLowerCase()) - }) - // create a collection containing all of the filterable elements - var $filteredResultsData = $('.data-filter-column') - // loop over the selected filter name -> (array) values pairs - $filteredResultsData.removeClass('even') - $filteredResultsData.removeClass('odd') - $.each(selectedFiltersData, function (name, filterValues) { - // filter each .data-filter-column element - $filteredResultsData = $filteredResultsData.filter(function () { - var matched = false - var currentFilterValues = $(this).find('.sub-heading').data('category').toLowerCase().split(' ') - - $.each(currentFilterValues, function (_, currentFilterValue) { - if ($.inArray(currentFilterValue, filterValues) !== -1) { - matched = true - return false - } - }) - // if matched is true the current .data-filter-column element is returned - return matched + // looping through the all chekbox link + navLink.forEach(function (link) { + link.addEventListener('click', function (e) { + e.preventDefault() + this.classList.toggle('active') + this.nextElementSibling.classList.toggle('open') }) }) - - $('.data-filter-column').addClass('hide').filter($filteredResultsData).addClass('show').removeClass('hide') - // add class for data-filter-column - for (var i = 0; i < $filteredResultsData.length; i++) { - if (i % 2 === 1) { - $filteredResultsData[i].classList.add('even') + // // add class even odd + allData.forEach(function (column, index) { + if (index % 2 === 1) { + allData[index].classList.add('even') } else { - $filteredResultsData[i].classList.add('odd') - } - } - // reset all check mark - $('#clearALLBtn').click(function (event) { - selectedFiltersData = [] - $('.data-filter-column').removeClass('hide').removeClass('show').removeClass('odd').removeClass('even') - var inputs = $('.check-mark') - for (var j = 0; j < inputs.length; j++) { - inputs[j].checked = false - } - for (var i = 0; i < $allData.length; i++) { - if (i % 2 === 1) { - $allData[i].classList.add('even') - } else { - $allData[i].classList.add('odd') - } + allData[index].classList.add('odd') } }) - }) + // // for filter menus + var filterMenuCheckboxes = document.querySelectorAll('input[type="checkbox"]') + var selectedFiltersData = {} + filterMenuCheckboxes.forEach(function (checkbox) { + checkbox.addEventListener('change', function (event) { + event.preventDefault() + var self = this + /*eslint no-unused-vars: "error"*/ + // var checkedData = [].filter.call(filterMenuCheckboxes, function (el) { + // return el.checked + // }) + if (checkbox.checked === true) { + if (!Object.prototype.hasOwnProperty.call(selectedFiltersData, self.name)) { + selectedFiltersData[self.name] = [] + } + selectedFiltersData[self.name].push(self.value.toLowerCase()) + } + if (checkbox.checked === false) { + var index = selectedFiltersData[self.name].indexOf(self.value) + if (selectedFiltersData[self.name].length === 1) { + delete selectedFiltersData[self.name] + } else { + selectedFiltersData[self.name].splice(index, 1) + } + } + // remove odd even class while clicking on checkbox + allData.forEach(function (column) { + column.classList.remove('odd') + column.classList.remove('even') + }) + var filteredResultsData = Array.from(document.querySelectorAll('.data-filter-column')) + // for each function with object keys + Object.keys(selectedFiltersData).forEach(function (value) { + // // set value from filter + var filterValues = selectedFiltersData[value] + filteredResultsData = filteredResultsData.filter(function (filterableData) { + var matched = false + var currentFilterData = Array.from(filterableData.querySelectorAll('.sub-heading')) + var currentFilterValuesData + currentFilterData.forEach(function (currentFilterDataItem) { + var filterSplitValue = currentFilterDataItem.dataset.category.toLowerCase().split(' ') + currentFilterValuesData = filterSplitValue + }) + var currentFilterValues = currentFilterValuesData + Array.prototype.forEach.call(currentFilterValues, function (currentFilterValue) { + if (filterValues.indexOf(currentFilterValue) !== -1) { + // console.log('true', currentFilterValue, filterValues) + matched = true + return false + } + }) + // if matched is true the current .data-filter-column element is returned + return matched + }) // filter loop end + }) + // First hide all data column + allData.forEach(function (dataColumn) { + dataColumn.classList.add('hide') + }) + // display filter result data column + filteredResultsData.forEach(function (result, idn) { + result.classList.add('show') + result.classList.remove('hide') + if (idn % 2 === 1) { + result.classList.add('even') + } else { + result.classList.add('odd') + } + }) + var clearALLBtn = document.getElementById('clearALLBtn') + clearALLBtn.addEventListener('click', function (event) { + event.preventDefault() + selectedFiltersData = [] + // remove all classes + allData.forEach(function (dataColumn, idx) { + dataColumn.classList.remove('hide') + dataColumn.classList.remove('show') + dataColumn.classList.remove('odd') + dataColumn.classList.remove('even') + if (idx % 2 === 1) { + dataColumn.classList.add('even') + } else { + dataColumn.classList.add('odd') + } + }) + + var inputs = document.querySelectorAll('.check-mark') + for (var j = 0; j < inputs.length; j++) { + inputs[j].checked = false + } + }) + }) // checkbox click event end + }) // filterMenuCheckboxes end + } // if condition end /*eslint-env jquery*/ -})(jQuery) +})()