diff --git a/src/styles/components/_card.sass b/src/styles/components/_card.sass index 1902a78b..2b671fad 100644 --- a/src/styles/components/_card.sass +++ b/src/styles/components/_card.sass @@ -27,10 +27,6 @@ max-width: 20% &.card-3-columns .card - +media-xl - flex: 1 0 33% - max-width: 33% - +media-xxl flex: 1 0 33% max-width: 33% @@ -42,6 +38,8 @@ .card @extend .w-100 @extend .flex-row + @extend .p-0 + flex: initial flex-wrap: wrap max-width: 100% @@ -53,8 +51,19 @@ @extend .mr-2 max-width: 120px + &.asset + &.free + &:after + +ribbon + content: 'FREE' + left: -40px + right: initial + transform: rotate(-45deg) + padding: 1px 45px + .card-body @extend .overflow-hidden + flex-basis: 0 .card-padless .card diff --git a/src/templates/_macros/_asset_list_item.pug b/src/templates/_macros/_asset_list_item.pug index 607cf99e..fc8c07b0 100644 --- a/src/templates/_macros/_asset_list_item.pug +++ b/src/templates/_macros/_asset_list_item.pug @@ -15,14 +15,15 @@ a.card.asset.card-image-fade.pr-0.mx-0.mb-2( i(class="pi-{{ node_type }}") | {% endif %} - .card-body.py-2.d-flex.flex-column - .card-title.mb-1.font-weight-bold - | {{ asset.name }} + .card-body.py-2.d-flex.flex-column.text-truncate + .card-title.mb-1.font-weight-bold.text-truncate + | {{ asset.name | hide_none }} - ul.card-text.list-unstyled.d-flex.text-black-50.mt-auto.mb-0 - li.pr-2.font-weight-bold {{ node_type | undertitle }} - li.pr-2 {{ asset.user.full_name }} - li {{ asset._created | pretty_date }} + ul.card-text.list-unstyled.d-flex.text-black-50.mt-auto.mb-0.text-truncate + li.pr-2.font-weight-bold {{ node_type | undertitle | hide_none }} + li.pr-2.text-truncate {{ asset.project.name | hide_none }} + li.pr-2.text-truncate {{ asset.user.full_name | hide_none }} + li.text-truncate {{ asset._created | pretty_date | hide_none }} | {% if asset.properties.content_type == 'video' %}