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.
--
Mailing list: https://launchpad.net/~sts-sponsors
Post to : sts-sponsors@lists.launchpad.net
Unsubscribe : https://launchpad.net/~sts-sponsors
More help : https://help.launchpad.net/ListHelp
