From: Alexander Ebert Date: Mon, 18 Mar 2019 15:59:33 +0000 (+0100) Subject: Flexible markup for items with teaser images X-Git-Tag: 5.2.0_Alpha_1~181^2~11 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=b9e122ffce2209627410a78ba574807c873d10b3;p=GitHub%2FWoltLab%2FWCF.git Flexible markup for items with teaser images --- diff --git a/com.woltlab.wcf/templates/articleListItems.tpl b/com.woltlab.wcf/templates/articleListItems.tpl index 5067b8e89d..803b37661f 100644 --- a/com.woltlab.wcf/templates/articleListItems.tpl +++ b/com.woltlab.wcf/templates/articleListItems.tpl @@ -1,64 +1,69 @@ - + diff --git a/wcfsetup/install/files/style/ui/contentItem.scss b/wcfsetup/install/files/style/ui/contentItem.scss new file mode 100644 index 0000000000..e7c7f1b675 --- /dev/null +++ b/wcfsetup/install/files/style/ui/contentItem.scss @@ -0,0 +1,164 @@ +.contentItemList { + display: flex; + flex-wrap: wrap; + margin-bottom: -20px; + justify-content: space-between; +} + +.contentItem { + background-color: $wcfContentBackground; + border-radius: 3px; + box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); + display: flex; + flex: 0 0 calc(50% - 10px); + flex-direction: column; + margin-bottom: 20px; + max-width: calc(50% - 10px); /* IE 11 */ + overflow: hidden; +} + +.contentItemLink { + flex: 1 auto; +} + +.contentItemContent { + max-height: 150px; + overflow: hidden; + padding: 10px; + position: relative; + + &::after { + background-image: linear-gradient(to top, $wcfContentBackground, transparent); + bottom: 0; + content: ""; + height: 30px; + left: 0; + pointer-events: none; + position: absolute; + right: 0; + /* The `top` value is important, because it prevents the last line from being affected + when the content isn't too long. */ + top: 120px; + } +} + +.contentItemImage { + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: 150px; + position: relative; +} + +.contentItemBadges { + align-items: flex-start; + display: flex; + flex-direction: column; + left: 10px; + position: absolute; + top: 10px; +} + +.contentItemBadge { + border: 1px solid currentColor; + flex: 0 auto; + + &:not(:first-child) { + margin-top: 5px; + } +} + +.contentItemLabels { + margin-bottom: 5px; +} + +.contentItemTitle { + color: $wcfContentHeadlineLink; + + @include wcfFontHeadline; + @include wcfFontBold; + + &:hover { + color: $wcfContentHeadlineLinkActive; + } +} + +.contentItemDescription { + color: $wcfContentText; + margin-top: 10px; +} + +.contentItemMeta { + align-items: center; + border-top: 1px solid $wcfContentBorderInner; + color: $wcfContentDimmedText; + display: flex; + flex: 0 auto; + padding: 10px; + + .icon { + color: inherit; + } +} + +.contentItemMetaImage { + flex: 0 auto; + margin-right: 10px; +} + +.contentItemMetaContent { + flex: 1 auto; + font-size: 12px; +} + +.contentItemMetaAuthor { + color: $wcfContentText; + + a, + a:hover { + color: inherit; + } +} + +.contentItemMetaIcons { + display: flex; + flex: 0 auto; + margin-left: 10px; +} + +.contentItemMetaIcon { + flex: 0 auto; + + &:not(:first-child) { + margin-left: 10px; + } +} + +@include screen-lg { + /* There are no sidebars, use a three column layout. */ + .content:first-child:last-child { + .contentItem { + flex: 0 0 calc(100% / 3 - 15px); + max-width: calc(100% / 3 - 15px); /* IE 11 */ + } + } +} + +@include screen-md { + /* The sidebar, if any, is not adjacent to the content, use a three column layout. */ + .contentItem { + flex: 0 0 calc(100% / 3 - 15px); + max-width: calc(100% / 3 - 15px); /* IE 11 */ + } +} + +@include screen-xs { + /* There is not enough space to fit two columns. */ + .contentItemList { + display: block; + } + + .contentItem { + max-width: none; + } +} diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml index 4f42e75d0f..913cbd7158 100644 --- a/wcfsetup/install/lang/de.xml +++ b/wcfsetup/install/lang/de.xml @@ -3923,6 +3923,7 @@ Dateianhänge: + 0}+{elseif $cumulativeLikes == 0}±{/if}{#$cumulativeLikes}]]> diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml index 9624f0f470..6c4c3b25d2 100644 --- a/wcfsetup/install/lang/en.xml +++ b/wcfsetup/install/lang/en.xml @@ -3869,6 +3869,7 @@ Attachments: + 0}+{elseif $cumulativeLikes == 0}±{/if}{#$cumulativeLikes}]]>