From da74021249d56b0172360f7d4ed4f37dbcc7f042 Mon Sep 17 00:00:00 2001 From: kemsguy7 Date: Mon, 14 Oct 2024 17:19:44 +0100 Subject: [PATCH 1/5] updates: fixed mobile ui/ux issues in registry page --- assets/scss/_registry.scss | 124 ++++++++- .../partials/ecosystem/registry/entry.html | 243 +++++++++--------- 2 files changed, 244 insertions(+), 123 deletions(-) diff --git a/assets/scss/_registry.scss b/assets/scss/_registry.scss index 06ed0693de9f..ded37ed4033b 100644 --- a/assets/scss/_registry.scss +++ b/assets/scss/_registry.scss @@ -9,7 +9,7 @@ @each $component, $color in $otel-registry-license-colors { &.badge-#{$component} { color: white; - background-color: $color; + background-color: $color; } } @@ -38,4 +38,126 @@ .registry-entry { @extend .shadow; + + .card-title { + display: flex; + flex-direction: column; + align-items: flex-start; + } + + .badge-container { + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + } + + .badge { + display: inline-block; + white-space: nowrap; + text-align: center; + vertical-align: middle; + padding: 0.25em 0.5em; + font-size: 0.75em; + line-height: 1; + border-radius: 0.25rem; + } } + +// Mobile styles +@media screen and (max-width: 768px) { + .input-group { + display: flex; + flex-direction: column; + gap: 10px; + margin-bottom: 20px; + + .input-group-text, + .form-control, + .btn, + .dropdown-toggle { + width: 100%; + margin-bottom: 10px; + } + } + + .registry-entry { + .card-body { + padding: 1rem; + } + + .card-title { + margin-bottom: 0.5rem; + } + + .badge-container { + margin-top: 0.5rem; + } + + .badge { + margin-bottom: 0.25rem; + } + + .row { + margin: 0; + } + + .col, .col-md-9, .col-lg-10, .col-md-3, .col-lg-2 { + padding: 0; + } + + .list-group { + margin-top: 1rem; + } + + .card-link { + + display: inline-block; + margin-bottom: 0.5rem; + margin-right: 0.5rem; + } + } + } + + // Additional responsive adjustments + @media screen and (max-width: 576px) { + .registry-entry { + .card-body { + padding: 0.75rem; + } + + .badge-container { + margin-top: 0.75rem; + } + + .badge { + font-size: 0.7em; + padding: 0.2em 0.4em; + } + + .card-link { + font-size: 0.9em; + margin-right: 0.4rem; + } + } + } + + // Ensure proper spacing for the last badge in a row + .badge-container .badge:last-child { + margin-right: 0; + } + + // Improve readability of badge text + .badge { + font-weight: 500; + letter-spacing: 0.025em; + } + + // Enhance hover effect for card links + .card-link { + transition: color 0.2s ease-in-out; + + &:hover { + text-decoration: none; + color: darken($link-color, 15%); + } + } \ No newline at end of file diff --git a/layouts/partials/ecosystem/registry/entry.html b/layouts/partials/ecosystem/registry/entry.html index 9a282c4db0b9..e5746dfcd717 100644 --- a/layouts/partials/ecosystem/registry/entry.html +++ b/layouts/partials/ecosystem/registry/entry.html @@ -87,136 +87,135 @@ {{ $primaryHref := printf "href=%q" $primaryUrl | safeHTMLAttr -}}
  • -

    - - {{- .title | markdownify -}} - -
    - {{ if $isNew -}} - new - {{ end -}} - {{ if $isNative -}} - native - {{ end -}} - {{ if $isFirstParty -}} - first party integration - {{ end -}} - {{ if $usedInDemo -}} - OTel Demo - {{ end -}} - {{ if $deprecated -}} - deprecated - {{ end -}} - {{ if .cncfProjectLevel -}} - - CNCF {{ .cncfProjectLevel }} - - {{ end -}} -
    -

    -

    - - by - {{ range $index, $author := .authors -}} - {{ if $index }}, {{ end }} - {{ if eq $author.name "OpenTelemetry Authors" -}} - 🔭 {{ $author.name }} 🔭 - {{ else if isset $author "url" }} - {{ $href := printf "href=%q" $author.url | safeHTMLAttr -}} - {{ $author.name }} - {{ else -}} - {{ $author.name -}} +

    + + {{- .title | markdownify -}} + +

    +
    + {{ if $isNew -}} + new + {{ end -}} + {{ if $isNative -}} + native + {{ end -}} + {{ if $isFirstParty -}} + first party integration + {{ end -}} + {{ if $usedInDemo -}} + OTel Demo + {{ end -}} + {{ if $deprecated -}} + deprecated {{ end -}} - {{ end -}} - -

    -
    -
    -
    - {{ if $deprecated -}} - + {{ if .cncfProjectLevel -}} + + CNCF {{ .cncfProjectLevel }} + + {{ end -}} +
    +

    + + by + {{ range $index, $author := .authors -}} + {{ if $index }}, {{ end }} + {{ if eq $author.name "OpenTelemetry Authors" -}} + 🔭 {{ $author.name }} 🔭 + {{ else if isset $author "url" }} + {{ $href := printf "href=%q" $author.url | safeHTMLAttr -}} + {{ $author.name }} + {{ else -}} + {{ $author.name -}} {{ end -}} - {{- .description | markdownify -}} + {{ end -}} + +

    +
    +
    +
    + {{ if $deprecated -}} + + {{ end -}} + {{- .description | markdownify -}} +
    + {{ with $package -}} + {{ if not (eq .quickInstall false) }} +
    Quick Install
    +

    {{ (partial .installTemplate .) | markdownify -}} +

    + {{ end -}} + {{- end -}}
    - {{ with $package -}} - {{ if not (eq .quickInstall false) }} -
    Quick Install
    -

    {{ (partial .installTemplate .) | markdownify -}} -

    - {{ end -}} +
    +
      + {{ if .package.version -}} +
    • +
      +
      + {{ .package.version }} +
      + Version +
      +
      • + {{- end -}} + {{ with .language -}} +
    • +
      +
      + {{ $languageNames.Get . | default (humanize .) }} +
      + Language +
      +
      • + {{- end }} + {{ with .registryType -}} +
    • +
      +
      + {{ . | humanize }} +
      + Component +
      +
      • + {{- end -}} + {{ with .license -}} +
    • +
      +
      + {{ . }} +
      + License +
      +
      • {{- end -}} -
    -
    -
      - {{ if .package.version -}} -
    • -
      -
      - {{ .package.version }}
      - Version -
      -
      • +
    +
    + {{ with .urls.website -}} + {{ $websiteHref := printf "href=%q" . | safeHTMLAttr -}} +  Website + {{- end -}} + {{ with .urls.docs -}} + {{ $docsHref := printf "href=%q" . | safeHTMLAttr -}} +  Documentation {{- end -}} - {{ with .language -}} -
  • -
    -
    - {{ $languageNames.Get . | default (humanize .) }} -
    - Language -
    -
    • - {{- end }} - {{ with .registryType -}} -
  • -
    -
    - {{ . | humanize }} -
    - Component -
    -
    • + {{ with $package -}} + {{ $packageUrl := printf "href=%q" (printf .urlPattern .name) | safeHTMLAttr -}} +  Package Details ({{ .registry }}) {{- end -}} - {{ with .license -}} -
  • -
    -
    - {{ . }} -
    - License -
    -
    • + {{ with .urls.repo -}} + {{ $icon := cond ( hasPrefix . "https://github.com/" ) "fa-brands fa-github" "fab fa-git-alt" -}} + {{ $repoHref := printf "href=%q" . | safeHTMLAttr -}} +  Repository + {{- end -}} + {{ with .urls.demo -}} + {{ $demoUrl := printf "href=%q" (printf .) | safeHTMLAttr -}} +  Demo Service {{- end -}} -
    - -
    - {{ with .urls.website -}} - {{ $websiteHref := printf "href=%q" . | safeHTMLAttr -}} -  Website - {{- end -}} - {{ with .urls.docs -}} - {{ $docsHref := printf "href=%q" . | safeHTMLAttr -}} -  Documentation - {{- end -}} - {{ with $package -}} - {{ $packageUrl := printf "href=%q" (printf .urlPattern .name) | safeHTMLAttr -}} -  Package Details ({{ .registry }}) - {{- end -}} - {{ with .urls.repo -}} - {{ $icon := cond ( hasPrefix . "https://github.com/" ) "fa-brands fa-github" "fab fa-git-alt" -}} - {{ $repoHref := printf "href=%q" . | safeHTMLAttr -}} -  Repository - {{- end -}} - {{ with .urls.demo -}} - {{ $demoUrl := printf "href=%q" (printf .) | safeHTMLAttr -}} -  Demo Service - {{- end -}} - - {{ end -}} +{{ end -}} \ No newline at end of file From 82e2082f6b2d9631ef24b36295705a374dace477 Mon Sep 17 00:00:00 2001 From: kemsguy7 Date: Tue, 15 Oct 2024 16:59:02 +0100 Subject: [PATCH 2/5] updates: fixed alignment of bottom card links --- assets/scss/_registry.scss | 37 +++++++++++++++---- .../partials/ecosystem/registry/entry.html | 10 ++--- 2 files changed, 35 insertions(+), 12 deletions(-) diff --git a/assets/scss/_registry.scss b/assets/scss/_registry.scss index 48616988acbc..c45c885bec45 100644 --- a/assets/scss/_registry.scss +++ b/assets/scss/_registry.scss @@ -93,11 +93,11 @@ margin-top: 0.5rem; } - .badge { + .badge { margin-bottom: 0.25rem; } - .row { + .row { margin: 0; } @@ -109,12 +109,26 @@ margin-top: 1rem; } - .card-link { - - display: inline-block; - margin-bottom: 0.5rem; + .card-link { + width: 100%; + padding: 0; + margin-bottom: 0.5rem; + transition: background-color 0.2s ease-in-out; + + i { margin-right: 0.5rem; - } + width: 20px; + text-align: center; + } + } + .github-link { + display: flex; + align-items: center; + justify-items: center; + align-content: center; + margin: 1rem 0.5rem 0.5rem 0; + } + } } @@ -124,6 +138,14 @@ .card-body { padding: 0.75rem; } + .card-link { + font-size: 0.9em; + padding: 0.4rem; + + i { + margin-right: 0.4rem; + } + } .badge-container { margin-top: 0.75rem; @@ -135,6 +157,7 @@ } .card-link { + font-size: 0.9em; margin-right: 0.4rem; } diff --git a/layouts/partials/ecosystem/registry/entry.html b/layouts/partials/ecosystem/registry/entry.html index e5746dfcd717..2a22379aee03 100644 --- a/layouts/partials/ecosystem/registry/entry.html +++ b/layouts/partials/ecosystem/registry/entry.html @@ -130,7 +130,7 @@

    {{ end -}}

    -
    +
    {{ if $deprecated -}} @@ -139,7 +139,7 @@

    Deprecated

    {{ .deprecated.reason | markdownify }}
    {{ end -}} - {{- .description | markdownify -}} + {{- .description | markdownify -}}
    {{ with $package -}} {{ if not (eq .quickInstall false) }} @@ -209,13 +209,13 @@
    Quick Install
    {{ with .urls.repo -}} {{ $icon := cond ( hasPrefix . "https://github.com/" ) "fa-brands fa-github" "fab fa-git-alt" -}} {{ $repoHref := printf "href=%q" . | safeHTMLAttr -}} -  Repository +  Repository {{- end -}} {{ with .urls.demo -}} {{ $demoUrl := printf "href=%q" (printf .) | safeHTMLAttr -}}  Demo Service {{- end -}}
    -
    + -{{ end -}} \ No newline at end of file +{{ end -}} \ No newline at end of file From 670db2477b0fe3d6feb369bedd4e721be29e2f51 Mon Sep 17 00:00:00 2001 From: kemsguy7 Date: Tue, 15 Oct 2024 17:10:52 +0100 Subject: [PATCH 3/5] fixed ci issues --- assets/scss/_registry.scss | 124 +++++++++++++++++++------------------ 1 file changed, 63 insertions(+), 61 deletions(-) diff --git a/assets/scss/_registry.scss b/assets/scss/_registry.scss index c45c885bec45..606e3622b64f 100644 --- a/assets/scss/_registry.scss +++ b/assets/scss/_registry.scss @@ -9,10 +9,10 @@ @each $component, $color in $otel-registry-license-colors { &.badge-#{$component} { color: white; - background-color: $color; + background-color: $color; } } - + &.badge-elixir { color: map-get($otel-component-colors, erlang); background-color: inherit; @@ -93,15 +93,19 @@ margin-top: 0.5rem; } - .badge { + .badge { margin-bottom: 0.25rem; } - .row { + .row { margin: 0; } - .col, .col-md-9, .col-lg-10, .col-md-3, .col-lg-2 { + .col, + .col-md-9, + .col-lg-10, + .col-md-3, + .col-lg-2 { padding: 0; } @@ -109,78 +113,76 @@ margin-top: 1rem; } - .card-link { + .card-link { width: 100%; padding: 0; margin-bottom: 0.5rem; transition: background-color 0.2s ease-in-out; - + i { margin-right: 0.5rem; width: 20px; text-align: center; - } + } } .github-link { display: flex; - align-items: center; - justify-items: center; - align-content: center; - margin: 1rem 0.5rem 0.5rem 0; - } - + align-items: center; + justify-items: center; + align-content: center; + margin: 1rem 0.5rem 0.5rem 0; } } - - // Additional responsive adjustments - @media screen and (max-width: 576px) { - .registry-entry { - .card-body { - padding: 0.75rem; - } - .card-link { - font-size: 0.9em; - padding: 0.4rem; - - i { - margin-right: 0.4rem; - } - } - - .badge-container { - margin-top: 0.75rem; - } - - .badge { - font-size: 0.7em; - padding: 0.2em 0.4em; - } - - .card-link { +} + +// Additional responsive adjustments +@media screen and (max-width: 576px) { + .registry-entry { + .card-body { + padding: 0.75rem; + } + .card-link { + font-size: 0.9em; + padding: 0.4rem; - font-size: 0.9em; + i { margin-right: 0.4rem; } } + + .badge-container { + margin-top: 0.75rem; + } + + .badge { + font-size: 0.7em; + padding: 0.2em 0.4em; + } + + .card-link { + font-size: 0.9em; + margin-right: 0.4rem; + } } - - // Ensure proper spacing for the last badge in a row - .badge-container .badge:last-child { - margin-right: 0; - } - - // Improve readability of badge text - .badge { - font-weight: 500; - letter-spacing: 0.025em; +} + +// Ensure proper spacing for the last badge in a row +.badge-container .badge:last-child { + margin-right: 0; +} + +// Improve readability of badge text +.badge { + font-weight: 500; + letter-spacing: 0.025em; +} + +// Enhance hover effect for card links +.card-link { + transition: color 0.2s ease-in-out; + + &:hover { + text-decoration: none; + color: darken($link-color, 15%); } - - // Enhance hover effect for card links - .card-link { - transition: color 0.2s ease-in-out; - - &:hover { - text-decoration: none; - color: darken($link-color, 15%); - } - } \ No newline at end of file +} From 3a9f6a15c72a8d55f3faf5576e3627b5e655d87f Mon Sep 17 00:00:00 2001 From: kemsguy7 Date: Wed, 16 Oct 2024 09:41:54 +0100 Subject: [PATCH 4/5] fixed linting issues --- layouts/partials/ecosystem/registry/entry.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/partials/ecosystem/registry/entry.html b/layouts/partials/ecosystem/registry/entry.html index 2a22379aee03..a68cb0d7581c 100644 --- a/layouts/partials/ecosystem/registry/entry.html +++ b/layouts/partials/ecosystem/registry/entry.html @@ -210,7 +210,7 @@
    Quick Install
    {{ $icon := cond ( hasPrefix . "https://github.com/" ) "fa-brands fa-github" "fab fa-git-alt" -}} {{ $repoHref := printf "href=%q" . | safeHTMLAttr -}}  Repository - {{- end -}} + {{- end -}} {{ with .urls.demo -}} {{ $demoUrl := printf "href=%q" (printf .) | safeHTMLAttr -}}  Demo Service From 9f1b4035f0edcfbdc32c8300c010fcff91e1947e Mon Sep 17 00:00:00 2001 From: kemsguy7 Date: Wed, 16 Oct 2024 09:44:23 +0100 Subject: [PATCH 5/5] added an empty line to the end of entry.html --- layouts/partials/ecosystem/registry/entry.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/partials/ecosystem/registry/entry.html b/layouts/partials/ecosystem/registry/entry.html index a68cb0d7581c..d778cc96f2fc 100644 --- a/layouts/partials/ecosystem/registry/entry.html +++ b/layouts/partials/ecosystem/registry/entry.html @@ -218,4 +218,4 @@
    Quick Install
    -{{ end -}} \ No newline at end of file +{{ end -}}