mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-04 10:28:29 +02:00
Add Course page (#1844)
* Add Course page * Added shortcodes and buttons to navigate to the next page * move course images from layout * decouple documentation and course layout * decouple course sidebar * move accordion js handlers into global unconditional js * enable search on courses * allow nested courses * disable links for now --------- Co-authored-by: generall <andrey@vasnetsov.com>
This commit is contained in:
nastyapash
@@ -6,3 +6,8 @@
|
||||
@import 'components/copy-btn';
|
||||
@import 'components/lang-switcher';
|
||||
@import 'components/alerts';
|
||||
@import 'components/list';
|
||||
@import 'components/cards-list';
|
||||
@import 'components/accordion';
|
||||
@import 'components/course-card';
|
||||
@import 'components/date';
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.accordion-dark {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
width: 100%;
|
||||
margin-bottom: $spacer * 2;
|
||||
|
||||
&__item {
|
||||
border: pxToRem(1) solid $neutral-20;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
border-radius: pxToRem(12);
|
||||
|
||||
&-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
padding: $spacer * 2 $spacer * 4 $spacer * 2 $spacer * 2;
|
||||
color: $neutral-94;
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: $spacer * 2;
|
||||
top: calc(50% - pxToRem(9));
|
||||
height: pxToRem(18);
|
||||
width: pxToRem(16);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='19' viewBox='0 0 17 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_10609_1497)'%3E%3Cpath d='M1.81787 6.50513L8.63605 13.3233L15.4542 6.50513' stroke='%23E1E5F0' stroke-width='1.36364' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_10609_1497'%3E%3Crect width='16.3636' height='16.3636' fill='white' transform='translate(0.63623 1.91431)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&-body {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
|
||||
&-content {
|
||||
padding: 0 $spacer * 2 $spacer * 2 $spacer * 2;
|
||||
color: $neutral-70;
|
||||
|
||||
ul {
|
||||
li:not(:last-of-type) {
|
||||
margin-bottom: pxToRem(10);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.accordion__item-header:after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='19' viewBox='0 0 17 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_10609_1581)'%3E%3Cpath d='M15.4546 13.3232L8.63641 6.50506L1.81823 13.3232' stroke='%23E1E5F0' stroke-width='1.36364' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_10609_1581'%3E%3Crect width='16.3636' height='16.3636' fill='white' transform='translate(0.63623 1.91418)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.cards-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $spacer * 1.5 $spacer * 2;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $spacer;
|
||||
width: 100%;
|
||||
padding: $spacer;
|
||||
border: pxToRem(1) solid $neutral-20;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
border-radius: pxToRem(12);
|
||||
|
||||
&-content {
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: math.div($spacer, 4);
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
img.cards-list__item-image {
|
||||
flex-shrink: 0;
|
||||
width: $spacer * 3;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__item {
|
||||
width: calc(50% - $spacer);
|
||||
padding: $spacer;
|
||||
border: pxToRem(1) solid $neutral-20;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
border-radius: pxToRem(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use "sass:math";
|
||||
|
||||
.course-card {
|
||||
width: 100%;
|
||||
margin: $spacer * 2.5 0 $spacer;
|
||||
padding: $spacer * 2;
|
||||
border: pxToRem(1) solid $neutral-20;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
border-radius: pxToRem(12);
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: $spacer;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: $font-size-xl;
|
||||
line-height: pxToRem(30);
|
||||
font-weight: 500;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
.course-card__title img {
|
||||
display: block;
|
||||
margin: 0;
|
||||
height: pxToRem(20);
|
||||
width: pxToRem(20);
|
||||
}
|
||||
|
||||
&__content {
|
||||
color: $neutral-70;
|
||||
|
||||
&.wide {
|
||||
ul {
|
||||
-webkit-column-count: 2;
|
||||
-moz-column-count: 2;
|
||||
column-count: 2;
|
||||
column-gap: $spacer * 6;
|
||||
margin-bottom: -$spacer * 1.5;
|
||||
|
||||
li {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-top: $spacer * 1.5;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use "sass:math";
|
||||
|
||||
.date {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: math.div($spacer, 2);
|
||||
margin-bottom: math.div($spacer, 2);
|
||||
color: $secondary-blue-50;
|
||||
|
||||
&-icon {
|
||||
width: $spacer !important;
|
||||
height: $spacer !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use "sass:math";
|
||||
|
||||
.list {
|
||||
color: $neutral-70;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding-left: pxToRem(22);
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: pxToRem(12);
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: pxToRem(5);
|
||||
width: pxToRem(14);
|
||||
height: pxToRem(14);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='14' height='15' viewBox='0 0 14 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_10609_1587)'%3E%3Cpath d='M12.6875 4.56921V10.9862L7 14.1942L1.3125 10.9862V4.56921L7 1.36121L12.6875 4.56921ZM9.53223 5.87976L6.05371 8.92371L4.08301 6.953L3.25781 7.77722L6.00098 10.5204L6.41113 10.161L10.3008 6.75867L10.7393 6.3739L9.97168 5.49597L9.53223 5.87976Z' fill='%238F98B3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_10609_1587'%3E%3Crect width='14' height='14' fill='white' transform='translate(0 0.777832)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -107,6 +107,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
width: 100%;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: $neutral-100;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
max-height: calc(100vh - 80px);
|
||||
width: pxToRem(232);
|
||||
@@ -134,7 +141,7 @@
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
a {
|
||||
a:not(.table-of-contents__button) {
|
||||
color: $neutral-70;
|
||||
transition: all 0.3s;
|
||||
&:hover {
|
||||
|
||||
+2
-2
@@ -8,8 +8,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: $spacer * 2.5 0;
|
||||
border-top: 1px solid $neutral-20;
|
||||
border-bottom: 1px solid $neutral-20;
|
||||
border-top: pxToRem(1) solid $neutral-20;
|
||||
color: $neutral-98;
|
||||
|
||||
h4 {
|
||||
@@ -22,6 +21,7 @@
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
border-top: pxToRem(1) solid $neutral-20;
|
||||
@extend .footer__bottom;
|
||||
}
|
||||
|
||||
|
||||
+32
-4
@@ -101,7 +101,7 @@
|
||||
}
|
||||
|
||||
&.active {
|
||||
.docs-menu__links-group-heading>a {
|
||||
&>.docs-menu__links-group-heading>a {
|
||||
font-weight: 600;
|
||||
background-color: $neutral-30;
|
||||
color: $neutral-90;
|
||||
@@ -177,6 +177,34 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__progress {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 math.div($spacer, 2);
|
||||
|
||||
&-container {
|
||||
width: pxToRem(168);
|
||||
height: pxToRem(10);
|
||||
background-color: $neutral-20;
|
||||
border-radius: $spacer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-bar {
|
||||
height: 100%;
|
||||
border-radius: $spacer;
|
||||
background-color: $primary-50;
|
||||
}
|
||||
|
||||
&-text {
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-xs;
|
||||
line-height: $font-size-l;
|
||||
color: $neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
display: block;
|
||||
height: calc(100vh - 80px);
|
||||
@@ -220,7 +248,7 @@
|
||||
|
||||
&__links-group {
|
||||
&.active {
|
||||
.docs-menu__links-group-heading>a {
|
||||
&>.docs-menu__links-group-heading>a {
|
||||
background-color: $neutral-20;
|
||||
}
|
||||
|
||||
@@ -345,7 +373,7 @@
|
||||
|
||||
&__links-group {
|
||||
&.active {
|
||||
.docs-menu__links-group-heading>a {
|
||||
&>.docs-menu__links-group-heading>a {
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
@@ -376,4 +404,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -128,4 +128,25 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
window.location.href = url;
|
||||
});
|
||||
});
|
||||
|
||||
function toggleAccordion() {
|
||||
this.parentElement.classList.toggle('active');
|
||||
const panel = this.nextElementSibling;
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
const accordionButtons = Array.from(document.getElementsByClassName('accordion__item-header'));
|
||||
accordionButtons.forEach((el) => {
|
||||
el.addEventListener('click', toggleAccordion);
|
||||
});
|
||||
|
||||
const accordionDarkButtons = Array.from(document.getElementsByClassName('accordion-dark__item-header'));
|
||||
accordionDarkButtons.forEach((el) => {
|
||||
el.addEventListener('click', toggleAccordion);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -19,4 +19,8 @@ import 'qdrant-page-search/dist/js/search.min.js';
|
||||
if (/blog/.test(window.location?.pathname)) {
|
||||
window.initQdrantSearch({ searchApiUrl: 'https://search.qdrant.tech/api/search', section: 'blog', partition: partition });
|
||||
}
|
||||
|
||||
if (/course/.test(window.location?.pathname)) {
|
||||
window.initQdrantSearch({ searchApiUrl: 'https://search.qdrant.tech/api/search', section: 'course', partition: partition });
|
||||
}
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user