diff --git a/app/views/contents/overview/index.php b/app/views/contents/overview/index.php index 088ebe1e857cb38966b48e57a294e993c388c5c0..155d2a7d85905c2dd2e91f47943eadc1de0e5840 100644 --- a/app/views/contents/overview/index.php +++ b/app/views/contents/overview/index.php @@ -13,7 +13,7 @@ <?= htmlReady($navigation->getTitle()) ?> </p> <p class="content-item-description"> - <?= htmlReady($navigation->getDescription()) ?> + <?= htmlReady(mila($navigation->getDescription(), 70)) ?> </p> </div> </a> diff --git a/resources/assets/stylesheets/scss/contents.scss b/resources/assets/stylesheets/scss/contents.scss index a0a3e3f0564c4e67950605984ded2d85f3840062..4ec46f42f7ac8a689d96b23827dbddc6f3075dea 100644 --- a/resources/assets/stylesheets/scss/contents.scss +++ b/resources/assets/stylesheets/scss/contents.scss @@ -13,11 +13,10 @@ .content-item-link { height: 90px; padding: 5px; + grid-template-columns: 42px 135px; .content-item-img-wrapper { - margin: 5px; - margin-right: 10px; - margin-top: 0; + margin: 0 10px 5px 5px; width: 32px; } @@ -52,24 +51,26 @@ .content-item-link { color: unset; - display: flex; + display: grid; + grid-template-columns: 74px auto; + grid-gap: 5px; height: 130px; - padding: 10px; + padding: 15px 10px 0 10px; transition: 0.5s; .content-item-img-wrapper { - margin: 15px; - margin-right: 20px; - margin-top: 0; width: 64px; } .content-item-text { - padding-top: -2px; - .content-item-title { color: $base-color; font-size: 2rem; + width: 100%; + max-width: 160px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } } @@ -94,5 +95,17 @@ @media (max-width: 820px) { .content-items { grid-template-columns: 100%; + + .content-item { + .content-item-link { + .content-item-text { + .content-item-title { + max-width: 100%; + text-overflow: unset; + overflow: unset; + } + } + } + } } }