diff --git a/assets/images/utils/history.svg b/assets/images/utils/history.svg new file mode 100644 index 000000000..c55b1cdbc --- /dev/null +++ b/assets/images/utils/history.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/assets/styles/components.scss b/assets/styles/components.scss index 60c5a06a7..c4333e568 100644 --- a/assets/styles/components.scss +++ b/assets/styles/components.scss @@ -605,6 +605,7 @@ &:focus-visible, &:hover { color: var(--color-link-hover); + text-decoration: underline; } &:active { @@ -1310,6 +1311,7 @@ textarea.known-error { .goto-link:hover, .goto-link:focus-visible { color: var(--color-link-hover); + text-decoration: underline; } .goto-link:active { diff --git a/components/ui/Badge.vue b/components/ui/Badge.vue index b2a7b8350..10848fc14 100644 --- a/components/ui/Badge.vue +++ b/components/ui/Badge.vue @@ -21,6 +21,11 @@ + + + + + @@ -105,6 +110,7 @@ export default { &.type--accepted, &.type--admin, + &.type--success, &.green { --badge-color: var(--color-special-green); } diff --git a/components/ui/Breadcrumbs.vue b/components/ui/Breadcrumbs.vue new file mode 100644 index 000000000..4a5eca536 --- /dev/null +++ b/components/ui/Breadcrumbs.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/pages/[type]/[id].vue b/pages/[type]/[id].vue index d8abcad26..3ae706dc5 100644 --- a/pages/[type]/[id].vue +++ b/pages/[type]/[id].vue @@ -2,6 +2,17 @@
@@ -192,7 +206,17 @@

{{ project.title }}

- + + + {{ + $formatProjectType( + $getProjectTypeForDisplay(project.actualProjectType, project.loaders) + ) + }} +

{{ project.description }}

@@ -201,6 +225,11 @@ :type="project.actualProjectType" class="categories" > +

Featured versions

Settings @@ -685,6 +714,7 @@ import OpenCollectiveIcon from '~/assets/images/external/opencollective.svg' import UnknownIcon from '~/assets/images/utils/unknown-donation.svg' import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg' import EyeIcon from '~/assets/images/utils/eye.svg' +import BoxIcon from '~/assets/images/utils/box.svg' import Promotion from '~/components/ads/Promotion' import Badge from '~/components/ui/Badge' import Categories from '~/components/ui/search/Categories' @@ -710,6 +740,7 @@ import CrossIcon from '~/assets/images/utils/x.svg' import EditIcon from '~/assets/images/utils/edit.svg' import ModerationIcon from '~/assets/images/sidebar/admin.svg' import { renderString } from '~/helpers/parse' +import Breadcrumbs from '~/components/ui/Breadcrumbs.vue' const data = useNuxtApp() const route = useRoute() @@ -1049,8 +1080,21 @@ const collapsedChecklist = ref(false) font-size: var(--font-size-xl); } - .status-badge { - margin-top: var(--spacing-card-sm); + .project-type { + text-decoration: none; + font-weight: 500; + + svg { + vertical-align: top; + margin-right: 0.25em; + } + + &:hover, + &:focus-visible { + span { + text-decoration: underline; + } + } } .description { diff --git a/pages/[type]/[id]/version/[version].vue b/pages/[type]/[id]/version/[version].vue index f33854d90..882237bb4 100644 --- a/pages/[type]/[id]/version/[version].vue +++ b/pages/[type]/[id]/version/[version].vue @@ -62,6 +62,15 @@
+