sts-sponsors team mailing list archive

[Peter Makowski <mp+442192@xxxxxxxxxxxxxxxxxx>]

This works great, but would be good to get rid of arbitrary height values. Have you tried using grid with grid-auto-rows on the container? https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows

Diff comments:

> diff --git a/frontend/src/components/TokensList/TokensList.tsx b/frontend/src/components/TokensList/TokensList.tsx
> index 8b93285..b768e45 100644
> --- a/frontend/src/components/TokensList/TokensList.tsx
> +++ b/frontend/src/components/TokensList/TokensList.tsx
> @@ -66,46 +64,24 @@ const TokensList = () => {
>        <header className="tokens-list-header" id="tokens-list-header">
>          <Row>
>            <Col size={12}>
> -            <p>Follow the enrolment steps to enrol new regions:</p>
> -            <Accordion
> -              sections={[
> -                {
> -                  content: (
> -                    <ol>
> -                      <li>
> -                        Generate single use tokens by clicking <strong>Generate tokens</strong>
> -                      </li>
> -                      <li>
> -                        Install site-manager-agent alongside a MAAS region controller
> -                        <br />
> -                        <code>snap install site-manager-agent</code>
> -                      </li>
> -                      <li>
> -                        In the site-manager-agent CLI paste the snippet below. Download the{" "}
> -                        <ExternalLink to={docsUrls.configFile}>
> -                          {/* TODO: Update link once documentation is live https://warthogs.atlassian.net/browse/MAASENG-1585 */}
> -                          optional config file
> -                        </ExternalLink>{" "}
> -                        to provide additional data for a specific MAAS region.
> -                        <br />
> -                        <code>site-manager-agent enrol location.host $ENROLMENT_TOKEN [$CONFIG_FILE_PATH]</code>
> -                        <br />
> -                        {/* TODO: Add certificate here once endpoint is ready https://warthogs.atlassian.net/browse/MAASENG-1584 */}
> -                      </li>
> -                      <li>
> -                        Accept the incoming request in the <Link to={routesConfig.requests.path}>Requests page</Link>
> -                      </li>
> -                    </ol>
> -                  ),
> -                  title: "Enrolment steps",
> -                },
> -              ]}
> -            />
> -            <p>
> -              Learn more about the enrolment process and bulk enrolment{" "}
> +            <p className="tokens-list-instructions">
> +              Follow the enrolment steps outlined in the{" "}
>                {/* TODO: Update link once documentation is live https://warthogs.atlassian.net/browse/MAASENG-1585 */}
> -              <ExternalLink to={docsUrls.baseDocsLink}>in the documentation</ExternalLink>.
> +              <ExternalLink to={docsUrls.enrollmentRequest}>documentation</ExternalLink> to enrol new regions. Once an
> +              enrolment request was made use the following certificate data to compare against the certificate shown in
> +              the enrolment request:
>              </p>
> +            {/* TODO: Add actual certificate here once endpoint is ready https://warthogs.atlassian.net/browse/MAASENG-1584 */}

👍 for creating a JIRA issue

> +            <code className="tokens-list-certificate">
> +              <span>CN:</span>
> +              <span>sitemanager.example.com</span>
> +              <span>Expiration date:</span>
> +              <span>Thu, 29 Jul. 2035</span>
> +              <span>Fingerprint:</span>
> +              <span>15cf96e8bad3eea3ef3c10badcd88f66fe236e0de99027451120bc7cd69c0012</span>
> +              <span>Issued by:</span>
> +              <span>Let's Encrypt</span>
> +            </code>
>            </Col>
>          </Row>
>          <Row>
> diff --git a/frontend/src/components/TokensList/_TokensList.scss b/frontend/src/components/TokensList/_TokensList.scss
> index 64694b2..330a891 100644
> --- a/frontend/src/components/TokensList/_TokensList.scss
> +++ b/frontend/src/components/TokensList/_TokensList.scss
> @@ -1,10 +1,42 @@
>  .tokens-list-header {
> +
> +  display: grid;

👍 for using CSS grid

> +
>    @media only screen and (min-width: $breakpoint-small) {
> -    
> +    height: 34.6875rem;
>      position: sticky;
>      top: -0.75rem;
>      background-color: white;
>      z-index: 1;
>      padding-top: 0.75rem;
>    }
> +
> +  @media only screen and (min-width: $breakpoint-large) {
> +    height: 23.4375rem;
> +  }
> +
> +  .tokens-list-certificate {
> +    display: grid;
> +    width: 100%;
> +    grid-template-columns: 1fr 1fr;
> +    grid-gap: $spv--small;
> +    overflow-x: auto;
> +    white-space: nowrap;
> +    margin-bottom: $spv--large * 2;
> +
> +    @media only screen and (min-width: $breakpoint-large) {
> +      width: fit-content;
> +    }
> +  }
> +
> +  .tokens-list-instructions {
> +    height: 10.9375rem;
> +    @media only screen and (min-width: $breakpoint-large) {
> +      height: auto;
> +    }
> +  }
> +
> +  .pagination-bar {
> +    margin-bottom: 0;
> +  }
>  }
> diff --git a/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss b/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
> index f3ee36a..a6b850d 100644
> --- a/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
> +++ b/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
> @@ -1,4 +1,21 @@
>  .tokens-table {
> +
> +  thead th {
> +    position: sticky;
> +    top: -0.75rem;
> +    background-color: white;
> +    z-index: 1;
> +    padding-top: $spv--large;
> +
> +    @media only screen and (min-width: $breakpoint-small){
> +      top: calc(34.6875rem - 0.75rem);
> +    }
> +
> +    @media only screen and (min-width: $breakpoint-large) {
> +      top: calc(23.4375rem - 0.75rem);

Would be great if we could avoid such arbitrary values (my understanding is it will need to be manually updated every time the content changes). If that does not seem possible then we should at least use variables for these.

> +    }
> +  }
> +
>    thead th:first-child {
>      width: 3rem;
>    }


-- 
https://code.launchpad.net/~nickdv99/maas-site-manager/+git/site-manager/+merge/442192
Your team MAAS Committers is requested to review the proposed merge of ~nickdv99/maas-site-manager:adjust-sticky-styling into maas-site-manager:main.