Skip to content

Commit

Permalink
Reduced the examples padding
Browse files Browse the repository at this point in the history 
The size and spacing of the examples has been reduced, to provide a better look and feel
  • Loading branch information
@SergioCasCeb
SergioCasCeb committed Dec 5, 2023
1 parent 3a3b678 commit 280771c
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 22 deletions.
8 changes: 5 additions & 3 deletions packages/web-new/src/scripts/examples-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,7 @@ async function getAllExamples(categoryId, thingType) {
//create example title
const exampleName = document.createElement('div')
exampleName.classList.add("example__header--name")
exampleName.setAttribute("title", "Expand")
const exampleNameIcon = document.createElement('div')
exampleNameIcon.classList.add("example-icon")

Expand Down Expand Up @@ -296,6 +297,7 @@ async function getAllExamples(categoryId, thingType) {
//Create the example quick access button
const quickButton = document.createElement('button')
quickButton.classList.add("example__header--quick")
quickButton.setAttribute("title", "Use")
const quickButtonIcon = document.createElement('i')
quickButtonIcon.classList.add("fa-solid", "fa-file-import")
quickButton.appendChild(quickButtonIcon)
Expand Down Expand Up @@ -380,7 +382,7 @@ async function getTemplateData(path) {

/**
* Listener when search input is used in the examples menu
* Gets all the examples that match the inputed text to the title and
* Gets all the examples that match the inputted text to the title and
* description of the examples, clones them and adds them to the
* search result category
* @param {event} e - submit event
Expand All @@ -405,15 +407,15 @@ filterForm.addEventListener("submit", (e) => {
categories.forEach(category => {
const examples = [...category.children[2].children]
examples.forEach(example => {
//If value of the search input mataches the title or description
//If value of the search input matches the title or description
//clone it, append it and add the respective event listeners
if ((example.firstChild.children[0].children[1].innerText.toLowerCase()).includes(searchInput.value.toLowerCase()) || (example.children[1].children[0].innerText.toLowerCase()).includes(searchInput.value.toLowerCase())) {
let clonedElement = example.cloneNode(true)
//Open the card when clicking on the name
clonedElement.children[0].children[0].addEventListener('click', () => {
clonedElement.classList.toggle("open")
})
//Opning the example when clicking on the quick access button
//Opening the example when clicking on the quick access button
clonedElement.children[0].children[1].addEventListener('click', () => {
example.querySelector(".example__btn--use").click()
closeCards()
Expand Down
28 changes: 18 additions & 10 deletions packages/web-new/src/styles/_examples-menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -322,22 +322,24 @@
background-color: var(--clr-neutral-50);
border-radius: 5px;
width: fit-content;
padding: 2rem;
padding: 1rem;
box-shadow: 0px 0px 5px 0px var(--clr-shadow);
transition: box-shadow 250ms ease-in-out;

&__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
gap: 1rem;

&--name {
width: 100%;
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 2rem;
margin: 0 1rem;
gap: 1rem;
cursor: pointer;
transition: all 250ms ease-in-out 250ms;

Expand All @@ -361,30 +363,34 @@
background-color: transparent;
border: none;
border-left: 2px solid var(--clr-primary-500);
padding: 1rem 1rem 1rem 2rem;
padding: 1rem 1rem 1rem 1.5rem;
cursor: pointer;

i {
font-size: var(--fs-i);
color: var(--clr-primary-500);
transition: color 250ms ease-in-out 250ms;
}
transition: color 250ms ease-in-out;

&:hover {
i {
&:hover{
color: var(--clr-primary-700);
}
}
}
}

&:hover{
box-shadow: 0px 0px 10px 0px var(--clr-shadow);
}

&__content {
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
padding: 0 1rem 0 1rem;
transition: padding 250ms ease-in-out 250ms;
}

&__description {
Expand Down Expand Up @@ -466,6 +472,8 @@

.example__content {
pointer-events: all;
padding: 0 1rem 1rem 1rem;
transition: padding 250ms ease-in-out 0s;
}

.example__description {
Expand Down
25 changes: 17 additions & 8 deletions packages/web-new/src/styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1967,22 +1967,24 @@ main .console {
border-radius: 5px;
width: -moz-fit-content;
width: fit-content;
padding: 2rem;
padding: 1rem;
box-shadow: 0px 0px 5px 0px var(--clr-shadow);
transition: box-shadow 250ms ease-in-out;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
gap: 1rem;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--name, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--name {
width: 100%;
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 2rem;
margin: 0 1rem;
gap: 1rem;
cursor: pointer;
transition: all 250ms ease-in-out 250ms;
}
Expand All @@ -2001,24 +2003,29 @@ main .console {
background-color: transparent;
border: none;
border-left: 2px solid var(--clr-primary-500);
padding: 1rem 1rem 1rem 2rem;
padding: 1rem 1rem 1rem 1.5rem;
cursor: pointer;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--quick i, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--quick i {
font-size: var(--fs-i);
color: var(--clr-primary-500);
transition: color 250ms ease-in-out 250ms;
transition: color 250ms ease-in-out;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--quick:hover i, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--quick:hover i {
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__header--quick i:hover, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__header--quick i:hover {
color: var(--clr-primary-700);
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example:hover, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example:hover {
box-shadow: 0px 0px 10px 0px var(--clr-shadow);
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__content, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__content {
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
padding: 0 1rem 0 1rem;
transition: padding 250ms ease-in-out 250ms;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example__description, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example__description {
height: 0;
Expand Down Expand Up @@ -2085,6 +2092,8 @@ main .console {
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example.open .example__content, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example.open .example__content {
pointer-events: all;
padding: 0 1rem 1rem 1rem;
transition: padding 250ms ease-in-out 0s;
}
.examples-menu .examples-menu-container .examples-container__td .examples-category__container .example.open .example__description, .examples-menu .examples-menu-container .examples-container__tm .examples-category__container .example.open .example__description {
height: 9rem;
Expand Down
Loading

0 comments on commit 280771c

Please sign in to comment.