Skip to content

Commit b8378a7

Browse files
author
rakeshAlgo
committed
all tutorials page functionality and UI fixes
1 parent 5d5902b commit b8378a7

File tree

6 files changed

+191
-131
lines changed

6 files changed

+191
-131
lines changed

‎preview-src/landing-page-tutorials.adoc‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
[.data-filter-column]
99
====== {empty}
1010
++++
11-
<div data-level="advanced" data-category="advanced java swift javascript " class="sub-heading two-column-heading">
11+
<div data-level="advanced" data-category="advanced java swift javascript developer" class="sub-heading two-column-heading">
1212
<h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
1313
<div class="filter-info">
1414
<h5 >
@@ -59,7 +59,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
5959
[.data-filter-column]
6060
====== {empty}
6161
++++
62-
<div data-level="intermediate" data-category="intermediate c# node Python " class="sub-heading two-column-heading">
62+
<div data-level="intermediate" data-category="intermediate c# node Python devOps" class="sub-heading two-column-heading">
6363
<h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
6464
<div class="filter-info">
6565
<h5 >
@@ -101,7 +101,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
101101
[.data-filter-column]
102102
====== {empty}
103103
++++
104-
<div data-level="intermediate" data-category="intermediate .net" class="sub-heading two-column-heading">
104+
<div data-level="intermediate" data-category="intermediate .net developer" class="sub-heading two-column-heading">
105105
<h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
106106
<div class="filter-info">
107107
<h5 >
@@ -142,7 +142,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
142142
[.data-filter-column]
143143
====== {empty}
144144
++++
145-
<div data-level="beginner" data-category="beginner ascidoc java php" class="sub-heading two-column-heading">
145+
<div data-level="beginner" data-category="beginner ascidoc java php architect" class="sub-heading two-column-heading">
146146
<h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
147147
<div class="filter-info">
148148
<h5 >
@@ -184,7 +184,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
184184
[.data-filter-column]
185185
====== {empty}
186186
++++
187-
<div data-level="intermediate" data-category="intermediate react " class="sub-heading two-column-heading">
187+
<div data-level="intermediate" data-category="intermediate react developer" class="sub-heading two-column-heading">
188188
<h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
189189
<div class="filter-info">
190190
<h5 >
@@ -225,7 +225,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
225225
[.data-filter-column]
226226
====== {empty}
227227
++++
228-
<div data-level="advanced" data-category="advanced angular react vue" class="sub-heading two-column-heading">
228+
<div data-level="advanced" data-category="advanced angular react vue architect" class="sub-heading two-column-heading">
229229
<h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
230230
<div class="filter-info">
231231
<h5 >

‎src/css/landing-page.css‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
.card-row {
2121
display: flex;
2222
flex-direction: row;
23-
justify-content: space-between;
23+
/* justify-content: space-between; */
2424
flex-wrap: wrap;
2525
margin-bottom: 0;
2626
}
@@ -36,10 +36,11 @@
3636
}
3737

3838
.doc.landing-page-doc .sub-heading.two-column-heading {
39-
display: flex;
39+
/* display: flex;
4040
justify-content: space-between;
4141
align-items: center;
42-
flex-wrap: wrap;
42+
flex-wrap: wrap; */
43+
display: block;
4344
}
4445

4546
.doc.landing-page-doc .filter-info h5 {
@@ -56,6 +57,13 @@
5657
margin-right: 8px;
5758
}
5859

60+
.doc.landing-page-doc .filter-info{
61+
margin-top: 15px;
62+
margin-bottom: 10px;
63+
display: inline-block;
64+
width: 100%;
65+
}
66+
5967
.doc.landing-page-doc .filter-info span {
6068
color: var(--color-brand-light-blue);
6169
border-radius: 8px;
@@ -64,8 +72,8 @@
6472
}
6573

6674
.card-row .column {
67-
max-width: 46%;
68-
flex-basis: 46%;
75+
max-width: 50%;
76+
flex-basis: 50%;
6977
margin-bottom: 25px;
7078
}
7179

@@ -180,17 +188,30 @@
180188
text-align: justify;
181189
}
182190

183-
/* .card-row.two-column-row .column.show:nth-child(odd) {
191+
.card-row.two-column-row .column:not(.data-filter-column):nth-child(odd){
184192
padding-right: 40px;
185193
}
186194

187-
.card-row.two-column-row .column.show:nth-child(even) {
195+
.card-row.two-column-row .column:not(.data-filter-column):nth-child(even){
188196
padding-left: 40px;
189-
} */
197+
}
198+
199+
200+
.card-row.two-column-row .column.data-filter-column.even {
201+
padding-left: 40px;
202+
}
203+
.card-row.two-column-row .column.data-filter-column.odd {
204+
padding-right: 40px;
205+
}
206+
207+
190208

191209
.card-row.two-column-row .column.data-filter-column.hide{
192210
display: none;
193211
}
212+
.hide{
213+
display: none;
214+
}
194215

195216
/* .card-row.two-column-row .column:nth-child(even) {
196217
padding-left: 5%;
@@ -419,12 +440,17 @@
419440
border-left: 0;
420441
}
421442

422-
.card-row.two-column-row .column:nth-child(even) {
443+
.card-row.two-column-row .column.data-filter-column.even,
444+
.card-row.two-column-row .column.data-filter-column.odd {
423445
padding-left: 0;
446+
padding-right: 0;
424447
}
425448

426449
.card-row.two-column-row .column:nth-child(odd),
427-
.card-row.two-column-row .column:nth-child(even) {
428-
padding: 0;
450+
.card-row.two-column-row .column:nth-child(even),
451+
.card-row.two-column-row .column:not(.data-filter-column):nth-child(even),
452+
.card-row.two-column-row .column:not(.data-filter-column):nth-child(odd) {
453+
padding-left: 0;
454+
padding-right: 0;
429455
}
430456
}

‎src/js/01-nav.js‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
;(function () {
1+
; (function () {
22
'use strict'
33

44
var nav = document.querySelector('nav.nav')
@@ -77,21 +77,21 @@
7777
// })
7878

7979
var navMenuControl
80-
if(document.querySelector('.main-nav-parent')){
81-
navMenuControl = document.querySelector('.main-nav-parent')
82-
83-
navMenuControl.addEventListener('click', function () {
84-
// navWrap.style.display = 'none'
85-
for (var i = 0; i < navItems.length; i++) {
86-
navItems[i].classList.remove('is-active')
87-
navItems[i].classList.remove('is-inactive')
88-
}
89-
this.style.display = 'none'
90-
})
80+
if (document.querySelector('.main-nav-parent')) {
81+
navMenuControl = document.querySelector('.main-nav-parent')
82+
83+
navMenuControl.addEventListener('click', function () {
84+
// navWrap.style.display = 'none'
85+
for (var i = 0; i < navItems.length; i++) {
86+
navItems[i].classList.remove('is-active')
87+
navItems[i].classList.remove('is-inactive')
88+
}
89+
this.style.display = 'none'
90+
})
9191
}
9292

9393
// Toggle class
94-
function toggleActive (e) {
94+
function toggleActive(e) {
9595
if (this.getAttribute('data-depth') === '1') {
9696
var otherNavs = document.querySelectorAll('.nav-item[data-depth="0"]:not(.is-active)')
9797
console.log(otherNavs)
@@ -117,7 +117,7 @@
117117
// concealEvent(e)
118118
// }
119119

120-
function revealNav (e) {
120+
function revealNav(e) {
121121
if (nav.classList.contains('is-active')) return hideNav(e)
122122
document.documentElement.classList.add('is-clipped--nav')
123123
nav.classList.add('is-active')
@@ -126,7 +126,7 @@
126126
concealEvent(e) // NOTE don't let event get picked up by window click listener
127127
}
128128

129-
function hideNav (e) {
129+
function hideNav(e) {
130130
if (e.which === 3 || e.button === 2) return
131131
document.documentElement.classList.remove('is-clipped--nav')
132132
nav.classList.remove('is-active')
@@ -135,11 +135,11 @@
135135
concealEvent(e) // NOTE don't let event get picked up by window click listener
136136
}
137137

138-
function find (selector, from) {
138+
function find(selector, from) {
139139
return [].slice.call((from || document).querySelectorAll(selector))
140140
}
141141

142-
function findAncestorWithClass (className, from, scope) {
142+
function findAncestorWithClass(className, from, scope) {
143143
if ((from = from.parentNode) !== scope) {
144144
if (from.classList.contains(className)) {
145145
return from
@@ -149,14 +149,14 @@
149149
}
150150
}
151151

152-
function findNextElement (from, el) {
152+
function findNextElement(from, el) {
153153
if ((el = from.nextElementSibling)) return el
154154
el = from
155155
while ((el = el.nextSibling) && el.nodeType !== 1);
156156
return el
157157
}
158158

159-
function concealEvent (e) {
159+
function concealEvent(e) {
160160
e.stopPropagation()
161161
}
162162
})()

0 commit comments

Comments
 (0)