From eea0be9d0eb1a1440ce301510187ae25dee73fe9 Mon Sep 17 00:00:00 2001 From: Barbara Peric Date: Thu, 28 Mar 2024 19:05:14 +0100 Subject: [PATCH] UI for hero component --- pages/index.js | 344 +++++++++++++++++++++++++-------------------- sass/_hero.scss | 94 +++++-------- sass/_search.scss | 347 +++++++++++++++++++++++++--------------------- 3 files changed, 418 insertions(+), 367 deletions(-) diff --git a/pages/index.js b/pages/index.js index 979b0bf..308c306 100755 --- a/pages/index.js +++ b/pages/index.js @@ -823,35 +823,191 @@ export default function Home(props) { //onLeave={() => handelHomeLeave(setPagePos)} >
-

Content Routing for the Distributed Web

-

An Interplanetary Network Indexer built for IPFS and Filecoin

+

Content Discovery & Routing for the Distributed Web

+

+ CID Contact is an Interplanetary Network Indexer built for IPFS + and Filecoin.
+ Search by CID in the tool below or{" "} + + learn more. + +

+
+
+
+
+ +
+ { + setQueryString(e.target.value); + setSearchError(); + }} + onKeyUp={(e) => { + if (e.code == "Enter") { + handelSearch( + queryString, + optionsList, + selectedOption, + displayData, + setDisplayData, + accordionState, + setAccordionState, + setSearchError + ); + } + }} + /> +
+
+ +
+ {searchError &&

{searchError}

} + {!searchError && displayData && ( +
+ +
+
+
+
+
Peer Id:
+
+ A peer ID in IPFS is a distinctive crypographic + hash derived from a node's public key, serving as + a unique identifier for nodes in the network and + playing a crucial role in IPFS's decentralized + structure. +
+ +
MultiAddress:
+
+ Network address format that combines multiple + transport protocols and addressing details. +
+ +
Protocol:
+
+ A protocol refers to a set of rules and + conventions that define how data is structured, + transmitted, and interpreted within the network. +
+ +
Deal Info:
+
+ Details about the terms, conditions, and + parameters of the data storage or retrieval + agreement between the parties involved in the + transation. +
+
+
+
+
+ {displayData.map((dataResult, resultIndex) => ( +
+
+
Peer Id:
+
{dataResult.Provider.ID}
+ +
MultiAddress:
+
{dataResult.Provider.Addrs}
+ + {dataResult.Protocol && ( + <> +
Protocol:
+
{dataResult.Protocol}
+ + )} + + {dataResult.DealInfo && ( + <> +
Deal Info:
+
+ {dataResult.DealInfo.map( + (dealInfo, dIndex) => ( + + {dealInfo} +
+ + ) + )} +
+ + )} +
+
+ ))} +
+
+
+ )} +
+ +
- - {/* Hide total indexed CIDs until there is an accurate measure. See: + {/* Hide total indexed CIDs until there is an accurate measure. See: * https://github.com/ipni/cid.contact/issues/17 To show the count again, change `className` to `{totalIndexed ? "dataCol" : "hidden"}`. */} -
+

{totalIndexed && totalIndexed} - Total CIDs
Indexed -

-
-
-
-
-
-
-
-
-
-

- {totalProviders && totalProviders} - Total Number
of Providers + Total CIDs
+ Indexed

@@ -866,7 +1022,12 @@ export default function Home(props) { {totalIndexerNodes && totalIndexerNodes} - Number of Indexer
Node Operators +

+
+
+

+ Indexer Node
+ Operators

@@ -879,7 +1040,11 @@ export default function Home(props) {

{uptime && uptime} - Uptime in the
last 30 days +

+
+
+

+ 30-Day Uptime
%

@@ -890,133 +1055,6 @@ export default function Home(props) {
-
-
-

Look up your CID

-
-
- { - setQueryString(e.target.value); - setSearchError(); - }} - onKeyUp={(e) => { - if (e.code == "Enter") { - handelSearch( - queryString, - optionsList, - selectedOption, - displayData, - setDisplayData, - accordionState, - setAccordionState, - setSearchError - ) - } - }} - /> -
- - -
- - {searchError ? ( -

{searchError}

- ) : ( -
- -
- <> - {displayData && - displayData.map((dataResult, resultIndex) => ( -
-

Found At

-
-
Peer Id:
-
{dataResult.Provider.ID}
- -
Multiaddress:
-
{dataResult.Provider.Addrs}
- - {dataResult.Protocol && ( - <> -
Protocol:
-
{dataResult.Protocol}
- - )} - - {dataResult.DealInfo && ( - <> -
Deal Info:
-
- {dataResult.DealInfo.map( - (dealInfo, dIndex) => ( - - {dealInfo} -
- - ) - )} -
- - )} -
-
- ))} - -
-
- )} -
- -
handelAboutEnter(setPagePos)} //onLeave={() => handelAboutLeave(setPagePos)} @@ -1115,7 +1153,11 @@ export default function Home(props) { Infura Logo - + DSS Logo { const parentDiv = document.querySelector(".accordion-collapse"); - if (parentDiv && (parentDiv.children.length > 0)) { + if (parentDiv && parentDiv.children.length > 0) { accordionState ? setAccordionState(false) : setAccordionState(true); } }, 250); diff --git a/sass/_hero.scss b/sass/_hero.scss index b65e894..915a32a 100644 --- a/sass/_hero.scss +++ b/sass/_hero.scss @@ -4,17 +4,17 @@ text-align: center; margin-bottom: 50px; padding-top: 130px; - padding-bottom: 130px; + padding-bottom: 13rem; padding-left: 15px; padding-right: 15px; - + @include media-breakpoint-up(lg) { padding-top: 220px; padding-bottom: 220px; } h2 { - margin-bottom: 30px; + margin-bottom: 1rem; font-size: 24px; font-weight: 600; @@ -24,54 +24,36 @@ } } - p { - font-size: 15px; + > p { + font-size: 0.8rem; font-weight: 400; - - @include media-breakpoint-up(lg) { - font-size: 21px; - } } .dataRow { - margin-top: 20px; + margin: 0 auto; + margin-top: 8rem; display: flex; - justify-content: center; + flex-flow: row wrap; align-items: center; - flex-wrap: wrap; - max-width: 479px; - margin-left: auto; - margin-right: auto; - - @include media-breakpoint-up(sm) { - margin-top: 30px; - max-width: 490px; - } + gap: 2rem; - @include media-breakpoint-up(xl) { - max-width: none; - margin-left: -50px; - margin-right: -50px; + @include media-breakpoint-up(sm) { + max-width: 500px; } .dataCol { - padding: 20px; - - @include media-breakpoint-up(sm) { - padding: 30px; - } + margin: 0 auto; @include media-breakpoint-up(xl) { - padding: 50px; } .innerWrapper { - width: 135px; - height: 135px; + width: 185px; + height: 185px; @include media-breakpoint-up(sm) { - width: 185px; - height: 185px; + width: 220px; + height: 220px; } .box { @@ -82,8 +64,10 @@ flex-direction: column; justify-content: center; align-items: center; - padding: 14px; + padding: 1rem 0.5rem; border-radius: 30px; + display: grid; + grid-template-rows: 2fr 1fr; @include media-breakpoint-up(sm) { padding: 25px; @@ -101,11 +85,12 @@ height: 100%; border-radius: 30px; z-index: 2; - box-shadow: 0px 31.5096px 58.6943px -25.3312px rgba(36, 135, 190, 0.7), 62.4013px -43.2484px 90.8217px -40px rgba(151, 226, 134, 0.5); + box-shadow: 0px 31.5096px 58.6943px -25.3312px rgba(36, 135, 190, 0.7), + 62.4013px -43.2484px 90.8217px -40px rgba(151, 226, 134, 0.5); } &::before { - content: ""; + content: ''; position: absolute; top: 0; left: 0; @@ -117,23 +102,23 @@ } &::after { - content: ""; + content: ''; position: absolute; - top: 5px; - left: 0; - width: 120px; - height: 120px; + top: 3px; + left: 4px; + width: 100%; + height: 103%; z-index: 1; background-image: url(/images/boxGradientBehind.png); background-position: center; background-repeat: no-repeat; background-size: contain; border-radius: 30px; - + @include media-breakpoint-up(sm) { top: 9px; - width: 185px; - height: 185px; + width: 100%; + height: 100%; } } @@ -145,34 +130,31 @@ p { margin-bottom: 0; color: $white; - font-size: 11px; - line-height: 14px; - text-shadow: 0px 4px 4px rgba($black, 0.50); + font-size: 1rem; + line-height: 1.5rem; + text-shadow: 0px 4px 4px rgba($black, 0.7); font-weight: 500; - br{ + br { display: none; } - + @include media-breakpoint-up(sm) { font-size: 14px; line-height: 17px; - - br{ + + br { display: block; } } strong { display: block; - font-size: 23px; + font-size: 2.5rem; line-height: 1.2em; - margin-bottom: 5px; font-weight: 500; @include media-breakpoint-up(sm) { - margin-bottom: 15px; - font-size: 48px; line-height: 59px; } } diff --git a/sass/_search.scss b/sass/_search.scss index 856e629..c603034 100644 --- a/sass/_search.scss +++ b/sass/_search.scss @@ -1,26 +1,30 @@ .results { position: relative; margin-top: 0; - margin-bottom: 30px; - padding-top: 130px; - padding-bottom: 70px; + padding-top: 2rem; min-height: 0; - + @include media-breakpoint-up(sm) { - margin-top: 130px; + margin-top: 4rem; padding-top: 0; - padding-bottom: 200px; } - - &.active{ + + &.active { margin-bottom: 0px; padding-bottom: 50px; - + @include media-breakpoint-up(sm) { padding-bottom: 50px; } } + .errorNotice { + margin-top: 1rem; + font-size: 1rem; + font-weight: 500; + color: #979797; + } + .lookupBg { top: 0; max-height: 150%; @@ -35,29 +39,40 @@ .formRow { display: flex; + flex-flow: row wrap; justify-content: flex-start; align-items: center; - flex-wrap: wrap; - margin-bottom: 44px; + gap: 1rem; + + .selectInputWrapper { + display: flex; + align-items: center; + justify-content: center; + flex: 1; + height: inherit; + } .inputWrapper { position: relative; width: 100%; - max-width: 550px; - padding: 4px; - margin-top: 20px; + height: 100%; + min-width: 160px; + margin-left: -1px; + margin-right: 0px; - @include media-breakpoint-up(sm) { + @include media-breakpoint-up(lg) { margin-right: 20px; } input { - width: 100%; - height: 43px; + width: 99.8%; padding: 8px; background: $white; - border: 2px solid transparent; - border-radius: 8px; + border: 2px solid $dkGrey; + border-radius: 9.08778px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left: 0; position: relative; z-index: 3; @@ -71,46 +86,35 @@ &:focus, &:focus-within { - border-color: $dkBlue; + border-color: $mdBlue; outline: none; } } - - &::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - //transform: translate(-50%, -50%); - background: #1890ff; - opacity: 0.2; - border-radius: 9.08778px; - z-index: 1; - } } .btn { - width: 154px; - height: 43px; - margin-top: 20px; + width: 100%; text-transform: uppercase; font-size: 18px; + -webkit-font-smoothing: antialiased; + + @include media-breakpoint-up(md) { + width: 154px; + } } } div.selectWrapper { + height: 100%; display: flex; justify-content: center; position: relative; - margin-top: 20px; - margin-right: 20px; + width: calc(100% - 178px); max-width: 200px; min-width: 160px; - + @include media-breakpoint-up(sm) { max-width: inherit; width: auto; @@ -118,45 +122,29 @@ div.selectContainer { width: 100%; - padding: 4px; + padding: 2px; position: relative; - + background: $mdBlue; + color: $white; + border-top-left-radius: 9.08778px; + border-bottom-left-radius: 9.08778px; + @include media-breakpoint-up(sm) { width: 235px; } - - &::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - //transform: translate(-50%, -50%); - background: #1890ff; - opacity: 0.2; - border-radius: 9.08778px; - z-index: 1; - } } button { - background: $white; + color: inherit; + background: inherit; border: 2px solid transparent; border-radius: 8px; width: 100%; - height: 43px; padding: 6px 16px 6px 8px; position: relative; text-align: center; z-index: 2; transition: border-color 0.4s ease; - - &:focus, - &:focus-within { - outline: none; - border-color: $dkBlue; - } } button:hover { @@ -164,16 +152,16 @@ } button::after { - content: ""; + content: ''; position: absolute; right: 16px; top: 50%; width: 0; height: 0; transform: translateY(-50%); - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 6px solid $black; + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; + border-left: 8px solid white; transition: transform 0.4s ease; } @@ -182,17 +170,19 @@ } ul.options { + color: $black; position: absolute; - top: calc(100% - 11px); - left: 6px; - width: calc(100% - 12px); - padding: 4px 0; + top: 102%; + left: 0px; + width: 100%; + padding: 0; background-color: $white; display: none; list-style: none; text-align: center; - z-index: 3; + z-index: 5; transition: background-color 0.4s ease; + box-shadow: 1px 2px 3px hsl(0deg 0% 0% / 0.3); } ul.show { @@ -200,126 +190,163 @@ } ul.options li { - padding: 16px 10px; + padding: 0.6rem; } ul.options li:active, ul.options li:focus, ul.options li:hover { - background: lighten($blue, 10%); + background: lighten($blue, 20%); cursor: pointer; } - ul.options li[aria-selected="true"] { - background: $blue; + ul.options li[aria-selected='true'] { + background: $mdBlue; cursor: pointer; + color: $white; } } // Accoridons - .accordion-item { - background-color: transparent !important; - border: 0 !important; - padding-bottom: 28px; - } - .accordion-header { - margin-bottom: 0; - } - .accordion-button { - background-color: $mdBlue !important; - box-shadow: none !important; - border: 0 !important; - height: 55px; - padding: 0 60px 0px 20px; - font-size: 25px; - font-weight: 600; - line-height: 1em; - color: $white !important; - - @include media-breakpoint-up(sm) { - height: 100px; - padding: 0 60px 0px 20px; - font-size: 25px; + + .accordionWrapper { + margin-top: 4rem; + + .accordion-item { + background-color: transparent !important; + border: 0 !important; + padding-bottom: 28px; } - &::after { - width: 20px; - height: 12px; - background-size: 20px; - position: absolute; - right: 20px; - top: 50%; - transform-origin: 50% 9px; - transform: translateY(-50%); - background-image: url("data:image/svg+xml,%3Csvg width='26' height='15' viewBox='0 0 26 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 13L13 2L2 13' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); + .accordion-header { + opacity: 0; + transition: opacity 1s ease-out; + + &.show { + opacity: 1; + transition: opacity 1s ease-out; + } } - &:not(.collapsed) { - //background-color: $dkGrey !important; + .accordion-button { + box-shadow: none !important; + border: 0 !important; + height: 55px; + font-size: 1.2rem; + font-weight: 600; + line-height: 1em; + color: $black; + transition: transform 0.3s ease-in; + cursor: pointer; + + @include media-breakpoint-up(sm) { + height: 100px; + } + &::after { - transform: translateY(-90%) rotate(-180deg); + cursor: pointer; + width: 20px; + height: 12px; background-size: 20px; - background-position: 55% 0%; + position: absolute; + right: 20px; + top: 50%; + transform-origin: 50% 9px; + transform: translateY(-50%); + background-image: url("data:image/svg+xml,%3Csvg width='26' height='15' viewBox='0 0 26 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 13L13 2L2 13' stroke='currentcolor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); + transition: transform 0.3s ease-in; + } + + &:not(.collapsed) { + //background-color: $dkGrey !important; + &::after { + transform: translateY(-90%) rotate(-180deg); + background-size: 20px; + background-position: 55% 0%; + transition: transform 0.3s ease-in; + } } } - } - .accordion-collapse { - overflow: hidden; - height: 0; - padding: 0; - opacity: 0; - transition: opacity 1s ease; - - &.show{ - height: auto; - opacity: 1; - } + .accordion-collapse { + overflow: hidden; + height: 0; + padding: 0; + opacity: 0; + transition: opacity 1s ease-out; - .resultItem { - padding: 22px; - background-color: darken($white, 2%); + &.show { + height: auto; + opacity: 1; + } - &:nth-child(even) { - background-color: $ltGrey; + .resultWrapper { + padding: 2rem; + background: linear-gradient( + to right, + rgba(106, 188, 254, 0.2) 0%, + rgba(148, 229, 126, 0.2) 100% + ); } - h4 { - margin-bottom: 20px; - font-size: 16px; - font-weight: 600; - color: $dkrBlue; - text-transform: uppercase; + .resultWrapper.collapsed { + overflow: hidden; + height: 0; + padding: 0; + opacity: 0; + transition: opacity 1s ease; } - dl { - margin-bottom: 0; + .resultItem.glossary { + padding: 2rem; + background-color: $dkGrey; + border-radius: 0; + } - dt { - color: rgba($black, 0.47); - font-weight: 400; - font-size: 14px; - line-height: 17px; - margin-bottom: 5px; - } - dd { - color: $black; - font-weight: 400; - font-size: 14px; - line-height: 17px; + .resultItem { + margin: 0 auto; + border-radius: 9px; + padding: 22px; + background-color: darken($white, 2%); + margin-bottom: 1rem; + + h4 { margin-bottom: 20px; - word-break: break-all; + font-size: 16px; + font-weight: 600; + color: $dkrBlue; + text-transform: uppercase; + } + + dl { + margin-bottom: 0; + text-align: left; - &:last-child { - margin-bottom: 0; + dt { + color: $blue; + font-weight: 400; + font-size: 14px; + line-height: 17px; + margin-bottom: 5px; + } + dd { + color: $black; + font-weight: 400; + font-size: 14px; + line-height: 17px; + margin-bottom: 20px; + white-space: pre-wrap; + word-break: break-word; + + &:last-child { + margin-bottom: 0; + } } } } - } - } - .errorNotice{ - font-size: 22px; - font-weight: 500; - color: #979797; + .resultItem:last-child { + margin-bottom: 0; + } + } } }