Improve trophy view

See #2315

diff --git a/com.woltlab.wcf/templates/trophy.tpl b/com.woltlab.wcf/templates/trophy.tpl
index 00053600fd465f25095fc076fcb0d8987e79742d..a22edac15154d048fca6255dc56a6f9d24e6d31a 100644 (file)
--- a/com.woltlab.wcf/templates/trophy.tpl
+++ b/com.woltlab.wcf/templates/trophy.tpl
@@ -36,14 +36,14 @@
 {/hascontent}
 
 {if $objects|count}
-       <ol class="section containerBoxList trophyCategoryList tripleColumned">
+       <ol class="section containerList trophyCategoryList tripleColumned">
                {foreach from=$objects item=userTrophy}
                        <li class="box64">
                                <div>{@$userTrophy->getUserProfile()->getAvatar()->getImageTag(64)}</div>
 
                                <div class="sidebarItemTitle">
                                        <h3>{@$userTrophy->getUserProfile()->getAnchorTag()}</h3>
-                                       <small>{@$userTrophy->getDescription()} - {@$userTrophy->time|time}</small>
+                                       <small>{@$userTrophy->getDescription()} – {@$userTrophy->time|time}</small>
                                </div>
                        </li>
                {/foreach}

diff --git a/wcfsetup/install/files/style/layout/containerList.scss b/wcfsetup/install/files/style/layout/containerList.scss
index 91b74877c56e05427264e8367ef40f40f66fc61f..78b36b71941031ef229d77f90745d41ec39c7030 100644 (file)
--- a/wcfsetup/install/files/style/layout/containerList.scss
+++ b/wcfsetup/install/files/style/layout/containerList.scss
@@ -1,167 +1,223 @@
-.containerList > li {
-       position: relative;
-       transition: background-color .2s;
-       
-       @include screen-md-down {
-               padding: 10px 0;
-       }
-       
-       @include screen-lg {
-               padding: 20px;
-       }
-       
-       &:not(:last-child) {
-               border-bottom: 1px solid $wcfContentBorderInner;
-       }
-       
-       &:first-child {
-               border-top: 1px solid $wcfContentBorder;
-       }
-       
-       &:last-child {
-               border-bottom: 1px solid $wcfContentBorder;
-       }
-       
-       &:hover {
-               background-color: $wcfTabularBoxBackgroundActive;
-       }
+.containerList {
+       > li {
+               position: relative;
+               transition: background-color .2s;
                
-       &.showMore {
-               text-align: center;
+               @include screen-md-down {
+                       padding: 10px 0;
+               }
                
-               &:hover {
-                       background-color: transparent;
+               @include screen-lg {
+                       padding: 20px;
                }
-       }
-       
-       .containerHeadline {
-               position: relative;
                
-               > .containerContentType {
-                       color: $wcfContentDimmedText;
-                       position: absolute;
-                       top: 5px;
-                       right: 0;
-                       
-                       @include screen-xs {
-                               display: none;
-                       }
+               &:not(:last-child) {
+                       border-bottom: 1px solid $wcfContentBorderInner;
                }
-       }
-       
-       &.containerListButtonGroup {
-               text-align: right;
                
-               &:hover {
-                       background-color: transparent;
+               &:first-child {
+                       border-top: 1px solid $wcfContentBorder;
                }
                
-               > .buttonGroup {
-                       display: inline-flex;
-                       
-                       &:not(:first-child) {
-                               margin-left: 5px;
-                       }
+               &:last-child {
+                       border-bottom: 1px solid $wcfContentBorder;
                }
                
-               > .recentActivityFollowedNoResults {
-                       text-align: left;
+               &:hover {
+                       background-color: $wcfTabularBoxBackgroundActive;
                }
-       }
-       
-       @include screen-md-down {
-               .hasMobileNavigation > .containerHeadline > h3 {
-                       padding-right: 30px;
+               
+               &.showMore {
+                       text-align: center;
+                       
+                       &:hover {
+                               background-color: transparent;
+                       }
                }
                
-               .buttonGroupNavigation {
-                       position: absolute;
-                       right: 0;
-                       top: 14px;
+               .containerHeadline {
+                       position: relative;
                        
-                       &.open {
-                               left: 0;
-                               
-                               // dropdown is contained within this element, required to have it stand
-                               // above any succeeding siblings
-                               z-index: 10;
+                       > .containerContentType {
+                               color: $wcfContentDimmedText;
+                               position: absolute;
+                               top: 5px;
+                               right: 0;
                                
-                               > .buttonList {
-                                       display: block;
-                                       visibility: visible;
+                               @include screen-xs {
+                                       display: none;
                                }
                        }
+               }
+               
+               &.containerListButtonGroup {
+                       text-align: right;
                        
-                       > .dropdownLabel {
-                               left: calc(100% - 24px);
-                               position: relative;
+                       &:hover {
+                               background-color: transparent;
                        }
                        
-                       > .buttonList {
-                               @include dropdownMenu;
+                       > .buttonGroup {
+                               display: inline-flex;
                                
-                               position: static !important;
-                               top: 0;
-                               
-                               > li {
-                                       .invisible {
-                                               display: inline;
-                                               padding-left: 5px;
-                                       }
+                               &:not(:first-child) {
+                                       margin-left: 5px;
                                }
                        }
-               }
-       }
-       
-       @include screen-lg {
-               .buttonGroupNavigation {
-                       opacity: 0;
-                       position: absolute;
-                       right: 20px;
-                       top: 15px;
-                       transition: opacity .12s;
                        
-                       > .dropdownLabel {
-                               display: none;
+                       > .recentActivityFollowedNoResults {
+                               text-align: left;
+                       }
+               }
+               
+               @include screen-md-down {
+                       .hasMobileNavigation > .containerHeadline > h3 {
+                               padding-right: 30px;
                        }
                        
-                       > ul {
-                               background-color: $wcfContentBackground;
-                               border: 1px solid rgba(0, 0, 0, .15);
-                               border-radius: 6px;
+                       .buttonGroupNavigation {
+                               position: absolute;
+                               right: 0;
+                               top: 14px;
                                
-                               > li {
-                                       margin-right: 0;
+                               &.open {
+                                       left: 0;
+                                       
+                                       // dropdown is contained within this element, required to have it stand
+                                       // above any succeeding siblings
+                                       z-index: 10;
                                        
-                                       &:not(:last-child) {
-                                               border-right: 1px solid rgba(0, 0, 0, .15);
+                                       > .buttonList {
+                                               display: block;
+                                               visibility: visible;
                                        }
+                               }
+                               
+                               > .dropdownLabel {
+                                       left: calc(100% - 24px);
+                                       position: relative;
+                               }
+                               
+                               > .buttonList {
+                                       @include dropdownMenu;
                                        
-                                       > a {
-                                               display: inline-block;
-                                               padding: 3px 5px;
-                                               
-                                               > .icon,
-                                               > .invisible {
-                                                       color: rgba(0, 0, 0, .5);
+                                       position: static !important;
+                                       top: 0;
+                                       
+                                       > li {
+                                               .invisible {
+                                                       display: inline;
+                                                       padding-left: 5px;
                                                }
                                        }
+                               }
+                       }
+               }
+               
+               @include screen-lg {
+                       .buttonGroupNavigation {
+                               opacity: 0;
+                               position: absolute;
+                               right: 20px;
+                               top: 15px;
+                               transition: opacity .12s;
+                               
+                               > .dropdownLabel {
+                                       display: none;
+                               }
+                               
+                               > ul {
+                                       background-color: $wcfContentBackground;
+                                       border: 1px solid rgba(0, 0, 0, .15);
+                                       border-radius: 6px;
                                        
-                                       &.active,
-                                       &:hover {
+                                       > li {
+                                               margin-right: 0;
+                                               
+                                               &:not(:last-child) {
+                                                       border-right: 1px solid rgba(0, 0, 0, .15);
+                                               }
+                                               
                                                > a {
+                                                       display: inline-block;
+                                                       padding: 3px 5px;
+                                                       
                                                        > .icon,
                                                        > .invisible {
-                                                               color: $wcfContentText;
+                                                               color: rgba(0, 0, 0, .5);
+                                                       }
+                                               }
+                                               
+                                               &.active,
+                                               &:hover {
+                                                       > a {
+                                                               > .icon,
+                                                               > .invisible {
+                                                                       color: $wcfContentText;
+                                                               }
                                                        }
                                                }
                                        }
                                }
                        }
+                       
+                       &:hover .buttonGroupNavigation {
+                               opacity: 1;
+                       }
+               }
+       }
+       
+       @include screen-sm-down {
+               &.doubleColumned,
+               &.tripleColumned {
+                       > li + li {
+                               margin-top: 10px;
+                       }
+               }
+       }
+       
+       @include screen-md-up {
+               &.doubleColumned,
+               &.tripleColumned {
+                       display: flex;
+                       flex-wrap: wrap;
+                       
+                       > li {
+                               overflow: hidden;
+                               padding-right: 15px;
+                               
+                               .containerBoxContent {
+                                       overflow: hidden;
+                                       
+                                       h3 {
+                                               overflow: hidden;
+                                               text-overflow: ellipsis;
+                                               white-space: nowrap;
+                                       }
+                               }
+                               
+                               &:first-child {
+                                       border-top: none;
+                               }
+                               
+                               &:last-child {
+                                       border-bottom: none;
+                               }
+                       }
+                       
+                       border-top: 1px solid $wcfContentBorder;
+                       border-bottom: 1px solid $wcfContentBorder;
+               }
+               
+               &.doubleColumned > li {
+                       flex: 0 0 50%;
+                       max-width: 50%;
                }
                
-               &:hover .buttonGroupNavigation {
-                       opacity: 1;
+               &.tripleColumned > li {
+                       flex: 0 0 calc(100% / 3);
+                       /* work-around for IE10 */
+                       width: calc(100% / 3);
                }
        }
 }