Skip to content

Commit

Permalink
fixed styling for the console and console messages
Browse files Browse the repository at this point in the history
  • Loading branch information
@SergioCasCeb
SergioCasCeb committed Sep 26, 2023
1 parent 13a1753 commit eedfdb4
Show file tree
Hide file tree
Showing 5 changed files with 810 additions and 767 deletions.
32 changes: 20 additions & 12 deletions packages/web-new/src/scripts/util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,21 +231,20 @@ export function validate(thingType, editorContent) {
document.getElementById(spotName).removeAttribute('open')
const resultIcon = document.getElementById(spotName).children[0].children[0]
if (result.report[el] === "passed") {
resultIcon.classList.remove("fa-spinner")
resultIcon.classList.remove("fa-circle")
resultIcon.classList.add("fa-circle-check")
}
else if (result.report[el] === "warning") {
resultIcon.classList.remove("fa-spinner")
resultIcon.classList.remove("fa-circle")
resultIcon.classList.add("fa-circle-exclamation")

}
else if (result.report[el] === "failed") {
resultIcon.classList.remove("fa-spinner")
resultIcon.classList.remove("fa-circle")
resultIcon.classList.add("fa-circle-xmark")
}
else if (result.report[el] === null) {
resultIcon.classList.remove("fa-spinner")
resultIcon.classList.add("fa-circle")
//do nothing
}
else {
console.error("unknown report feedback value")
Expand All @@ -259,20 +258,19 @@ export function validate(thingType, editorContent) {
const detailsIcon = document.getElementById(detailsName).children[0].children[0]

if (result.details[el] === "passed") {
detailsIcon.classList.remove("fa-spinner")
detailsIcon.classList.remove("fa-circle")
detailsIcon.classList.add("fa-circle-check")
}
else if (result.details[el] === "warning" || result.details[el] === "not-impl") {
detailsIcon.classList.remove("fa-spinner")
detailsIcon.classList.remove("fa-circle")
detailsIcon.classList.add("fa-circle-exclamation")
}
else if (result.details[el] === "failed") {
detailsIcon.classList.remove("fa-spinner")
detailsIcon.classList.remove("fa-circle")
detailsIcon.classList.add("fa-circle-xmark")
}
else if (result.details[el] === null) {
detailsIcon.classList.remove("fa-spinner")
detailsIcon.classList.add("fa-circle")
//do nothing
}
else {
console.error("unknown report feedback value")
Expand Down Expand Up @@ -303,9 +301,9 @@ function resetValidationStatus() {
}
sectionHeaders.forEach(header => {
const headerIcon = header.children[0]
if (!headerIcon.classList.contains("fa-spinner")) {
if (!headerIcon.classList.contains("fa-circle")) {
headerIcon.classList.remove("fa-circle-check", "fa-circle-exclamation", "fa-circle-xmark", "fa-circle")
headerIcon.classList.add("fa-spinner")
headerIcon.classList.add("fa-circle")
}
})
}
Expand Down Expand Up @@ -342,6 +340,16 @@ function populateCategory(messagesList) {
categoryContainer.append(listElement)
})
categoryContainer.classList.remove("empty")
} else if (category.children[0].children[0].classList.contains("fa-circle-check")){
const successMessage = document.createElement("li")
successMessage.textContent = "Validated Successfully"
categoryContainer.append(successMessage)
categoryContainer.classList.remove("empty")
}else{
const nullMessage = document.createElement("li")
nullMessage.textContent = "A previous validation has failed or it is only available for Thing Descriptions"
categoryContainer.append(nullMessage)
categoryContainer.classList.remove("empty")
}
})
}
Expand Down
106 changes: 57 additions & 49 deletions packages/web-new/src/styles/_console.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,8 +175,7 @@
position: absolute;
top: 0;
right: 0;
overflow-y: auto;
overflow-x: hidden;
overflow: hidden;
padding: 2rem;
transition: opacity 250ms ease-in-out;

Expand All @@ -187,14 +186,20 @@
pointer-events: none;
transition: opacity 0s ease-in-out;
}
}

&.validation-view {
overflow: auto;
.validation-view {
.validation-container {
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;

details{
details {
margin-bottom: 1rem;
summary{
.show-icon{

summary {
.show-icon {
transform: rotate(0);
transition: transform 250ms ease-in-out;
}
Expand All @@ -206,85 +211,85 @@
justify-content: flex-start;
gap: 1rem;
cursor: pointer;

.fa-circle-check {
color: var(--clr-success-500);
}

.fa-circle-exclamation {
color: var(--clr-warning-500);
}

.fa-circle-xmark {
color: var(--clr-error-500);
}

.fa-spinner {
color: var(--clr-neutral-300);
animation: rotate 2s infinite ease-in-out;
}

.fa-circle{

.fa-circle {
color: var(--clr-neutral-300);
}

.show-icon {
cursor: pointer;
}
.title{

.title {
font-weight: var(--fw-bold);
}
}

.section-content, .section-additional{
.section-content,
.section-additional {
padding: 1rem 2rem;
}

.section-content{
.section-content {
list-style-position: inside;
list-style-type: disc;

&.empty{
&.empty {
padding: 0 0 1rem 0;
}

.notice-prompt{
.notice-prompt {
color: var(--clr-neutral-300);
font-size: var(--fs-footer);
}
}

.section-additional{
details{
.section-additional {
details {
margin-bottom: 1rem;
summary{
.show-icon{

summary {
.show-icon {
transform: rotate(0);
transition: transform 250ms ease-in-out;
}
}
}
details[open]{

details[open] {
margin-bottom: 0;
summary{
.show-icon{

summary {
.show-icon {
transform: rotate(-90deg);
}
}
}
}
}

details[open]{
details[open] {
margin-bottom: 0;
summary{
.show-icon{

summary {
.show-icon {
transform: rotate(-90deg);
}
}
}

}
}

Expand Down Expand Up @@ -327,12 +332,14 @@
appearance: none;
border: none;
width: 100%;
height: 3.25rem;
border-radius: 5px;
padding: .75rem 1.5rem;
background-color: var(--clr-primary-500);
color: var(--clr-neutral-50);
font-family: var(--ff-primary);
font-size: var(--fs-p);
font-weight: var(--fw-bold);
cursor: pointer;
transition: background-color 250ms ease-in-out;
display: flex;
Expand All @@ -352,16 +359,27 @@

.input-field {
width: 100%;
min-height: 3.25rem;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
border-radius: 5px;
overflow: hidden;
button{

button {
border-radius: 0;
}
}

.view-download{
width: 100%;
height: 100%;
min-height: 3.25rem;
display: flex;
align-items: flex-end;
justify-content: center;
}
}
}

Expand Down Expand Up @@ -416,7 +434,7 @@
input[type="radio"] {
appearance: none;
width: 100%;
height: 3.25rem;
min-height: 3.25rem;
background-color: var(--clr-primary-500);
cursor: pointer;
transition: background-color 250ms ease-in-out;
Expand All @@ -427,7 +445,7 @@
}

&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
Expand All @@ -436,6 +454,7 @@
place-items: center;
font-size: var(--fs-p);
font-family: var(--ff-primary);
font-weight: var(--fw-bold);
text-transform: capitalize;
color: var(--clr-neutral-50);
}
Expand Down Expand Up @@ -644,7 +663,6 @@
width: 100%;
height: 100%;
margin-top: 2rem;
//todo: Remove the separation for the download buttons?
display: flex;
flex-direction: column;
align-items: center;
Expand All @@ -653,14 +671,4 @@
}
}
}
}

@keyframes rotate {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}
Loading

0 comments on commit eedfdb4

Please sign in to comment.