Display tiny breadcrumbs on smaller screens

Closes #2352

diff --git a/wcfsetup/install/files/style/layout/pageNavigation.scss b/wcfsetup/install/files/style/layout/pageNavigation.scss
index 0af341b7e90b027676afe5c97addae2e619c7a45..c17b283743c659a37174843e1fa7f0aed5f003e6 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageNavigation.scss
+++ b/wcfsetup/install/files/style/layout/pageNavigation.scss
@@ -48,8 +48,33 @@
 }
 
 @include screen-sm-down {
-       .pageNavigation {
+       .breadcrumbs > ol > li {
                display: none;
+               
+               &:last-child {
+                       align-items: center;
+                       color: $wcfContentDimmedText;
+                       display: flex;
+                       flex: 1;
+                       
+                       @include wcfFontDefault;
+                       
+                       &::before {
+                               content: $fa-var-long-arrow-left;
+                               flex: 0 auto;
+                               font-family: FontAwesome;
+                       }
+                       
+                       > a {
+                               color: $wcfContentDimmedLink;
+                               display: block;
+                               flex: 1;
+                               overflow: hidden;
+                               padding: 5px 0 5px 10px;
+                               text-overflow: ellipsis;
+                               white-space: nowrap;
+                       }
+               }
        }
 }