From f0e50934ba5b162e85b4b2efc3436937ab547d68 Mon Sep 17 00:00:00 2001 From: Jeremy Brown Date: Thu, 30 Jan 2025 17:10:54 -0500 Subject: [PATCH] Working on the detail page --- public/icons/metalloid.svg | 1 + public/icons/microscope-loading.svg | 1 + .../element-detail.component.html | 158 ++++++++++-------- .../element-detail.component.scss | 72 ++++++-- .../element-detail.component.ts | 15 ++ 5 files changed, 167 insertions(+), 80 deletions(-) create mode 100644 public/icons/metalloid.svg create mode 100644 public/icons/microscope-loading.svg diff --git a/public/icons/metalloid.svg b/public/icons/metalloid.svg new file mode 100644 index 0000000..ea62d89 --- /dev/null +++ b/public/icons/metalloid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/microscope-loading.svg b/public/icons/microscope-loading.svg new file mode 100644 index 0000000..0abfd61 --- /dev/null +++ b/public/icons/microscope-loading.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/elements/components/element-detail/element-detail.component.html b/src/app/elements/components/element-detail/element-detail.component.html index 5b7a339..6520be4 100644 --- a/src/app/elements/components/element-detail/element-detail.component.html +++ b/src/app/elements/components/element-detail/element-detail.component.html @@ -1,77 +1,95 @@ +@if (!elementDetails) { +
+ Loading... +
+} - -
-

{{elementDetails.element}}

-
Back
-
-
-
-
-

{{elementDetails.atomicNumber}}

-

{{elementDetails.atomicWeight}}

-
-

{{elementDetails.symbol}}

-
-

{{elementDetails.element}}

-

{{elementDetails.type}}

+@else { +
+
+
+

{{elementDetails.element}}

+
Back
+
+
+
+
+
+

{{elementDetails.atomicNumber}}

+

{{elementDetails.atomicWeight}}

+
+

{{elementDetails.symbol}}

+
+

{{elementDetails.element}}

+

{{elementDetails.type}}

+
-
-
- -

Discovered by {{elementDetails.discoverer}} in {{elementDetails.yearOfDiscovery}}

- Microscope - - -

Melts at {{elementDetails.meltingPointKelvin}} Kelvin

- Microscope - - -

Boils at {{elementDetails.boilingPointKelvin}} Kelvin

- Microscope - - -

Classified as a {{elementDetails.type.toLocaleLowerCase()}}

- - Nonmetal - Alkali Metal - Alkaline Earth Metal - Alkaline Earth Metal - Alkaline Earth Metal - Metalloid - Halogen - Noble Gas - Lanthanide - Actinide - +
+ +

{{formatDiscoverer(elementDetails.discoverer)}}

+ Microscope - - -

Standard state is {{elementDetails.standardState.toLocaleLowerCase()}}

- Solid - Liquid - Gas - -
-
- -

{{elementDetails.facts}}

- -
-
-

Physical Properties

-

Melting Point: {{elementDetails.meltingPointKelvin}}

-

Boiling Point: {{elementDetails.boilingPointKelvin}}

-

Density: {{elementDetails.density}}

-

Standard State: {{elementDetails.standardState}}

+ +

Melts at {{elementDetails.meltingPointKelvin}} Kelvin

+ Microscope + + +

Boils at {{elementDetails.boilingPointKelvin}} Kelvin

+ Microscope + + +

Classified as a {{elementDetails.type.toLocaleLowerCase()}}

+ + Nonmetal + Alkali Metal + Alkaline Earth Metal + Alkaline Earth Metal + Alkaline Earth Metal + Metalloid + Halogen + Noble Gas + Lanthanide + Actinide + + + + +

Standard state is {{elementDetails.standardState.toLocaleLowerCase()}}

+ Solid + Liquid + Gas + +
-
-

Atomic Properties

-

Atomic Radius: {{elementDetails.atomicRadius}}

-

Ionic Radius: {{elementDetails.ionicRadius}}

-

Electronegativity: {{elementDetails.electronegativity}}

-

First Ionization Potential: {{elementDetails.firstIonizationPotential}}

-

Electron Configuration: {{elementDetails.electronConfiguration}}

+ +

{{elementDetails.facts}}

+ +
+
+

Physical Properties

+

Melting Point {{elementDetails.meltingPointKelvin}}

+

Boiling Point {{elementDetails.boilingPointKelvin}}

+

Density {{elementDetails.density}}

+

Standard State {{elementDetails.standardState}}

+
+
+

Atomic Properties

+

Atomic Radius {{elementDetails.atomicRadius}}

+

Ionic Radius {{elementDetails.ionicRadius}}

+

Electronegativity {{elementDetails.electronegativity}}

+

First Ionization Potential {{elementDetails.firstIonizationPotential}}

+

Electron Configuration {{elementDetails.electronConfiguration}}

+
+
+

Other Properties

+

Atomic Radius {{elementDetails.atomicRadius}}

+

Ionic Radius {{elementDetails.ionicRadius}}

+

Electronegativity {{elementDetails.electronegativity}}

+

First Ionization Potential {{elementDetails.firstIonizationPotential}}

+

Electron Configuration {{elementDetails.electronConfiguration}}

+
-
+} + diff --git a/src/app/elements/components/element-detail/element-detail.component.scss b/src/app/elements/components/element-detail/element-detail.component.scss index e798718..385f8ea 100644 --- a/src/app/elements/components/element-detail/element-detail.component.scss +++ b/src/app/elements/components/element-detail/element-detail.component.scss @@ -1,19 +1,37 @@ + +.element-header { + display: flex; + justify-content: space-between; + margin: auto; + margin-bottom: 20px; + width: 60vw; + max-width: 1000px; +} + .element-title { + margin: 0px; text-align: center; } .back-button { cursor: pointer; - position: absolute; top: 24px; right: 24px; text-align: right; width: 24px; } -.element-info { +.element-details { + padding: 28px; margin: auto; width: 60vw; + max-width: 1000px; + border: 1px solid #E0E0E0; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-radius: 8px; +} + +.element-info { .row-one { display: flex; @@ -27,18 +45,19 @@ border-radius: 8px; width: 15vw; height: 15vw; + max-height: 265px; - .element-header { + .element-card-header { display: flex; justify-content: space-between; } - .element-footer { + .element-card-footer { display: flex; gap: 8px; - padding-bottom:8px; + padding-bottom: 8px; flex-direction: column; - text-align:center; + text-align: center; } p { @@ -92,6 +111,7 @@ } p { + text-align: right; margin: 4px 0px; } } @@ -100,12 +120,44 @@ .element-data { display: flex; - border: 1px solid #E0E0E0; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-radius: 8px; + justify-content: space-between; div { - padding: 20px; + width: 28%; + } + + p { + font-weight: 600; + display: flex; + justify-content: space-between; + + span { + font-weight: 400; + } + } + + h3 { + background: none; } } +} + +.loading-element { + display: flex; + flex-direction: column; + align-items: center; + margin: 20% 20px; + + img { + animation: bounce 1s ease-out 3; + width: 100px; + } +} + +@keyframes bounce { + 0%, 100% { transform: translateY(0); } + 20% { transform: translateY(-20px); } + 40% { transform: translateY(0); } + 60% { transform: translateY(-10px); } + 80% { transform: translateY(0); } } \ No newline at end of file diff --git a/src/app/elements/components/element-detail/element-detail.component.ts b/src/app/elements/components/element-detail/element-detail.component.ts index 68a9073..90b5f1f 100644 --- a/src/app/elements/components/element-detail/element-detail.component.ts +++ b/src/app/elements/components/element-detail/element-detail.component.ts @@ -28,4 +28,19 @@ export class ElementDetailComponent implements OnInit { goBack = () => { this.router.navigate(['/elements']); } + + formatDiscoverer = (discoverer: string) => { + if (discoverer === 'Prehistoric') { + return discoverer; + } + + const matches = [...discoverer.matchAll(/,/g)]; + if (matches && matches.length > 1) { + discoverer = discoverer.substring(0, discoverer.lastIndexOf(',') + 1) + ' and' + discoverer.substring(discoverer.lastIndexOf(',') + 1); + } + if (matches && matches.length === 1) { + discoverer = discoverer.replace(',', ' and'); + } + return `Discovered by ${discoverer}`; + } }