Improved user profile header

* Added online badge
* Fixed some mobile issues

diff --git a/com.woltlab.wcf/templates/user.tpl b/com.woltlab.wcf/templates/user.tpl
index 4f1000671f7401177631a9ebaeb4fc03068e18c7..febc0cf60d082e0daf919ecbd24430568a59a3fb 100644 (file)
--- a/com.woltlab.wcf/templates/user.tpl
+++ b/com.woltlab.wcf/templates/user.tpl
@@ -146,6 +146,7 @@
                        {else}
                                <span>{@$user->getAvatar()->getImageTag(128)}</span>
                        {/if}
+                       {if $user->isOnline()}<span class="badge green badgeOnline">{lang}wcf.user.online{/lang}</span>{/if}
                </div>
                
                <div class="contentHeaderTitle">

diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss
index f87bac3ab436ed2e423e213a590023c270609294..62f112c31e0fe537048fd572fa19ec23474fdbcd 100644 (file)
--- a/wcfsetup/install/files/style/layout/content.scss
+++ b/wcfsetup/install/files/style/layout/content.scss
@@ -57,7 +57,7 @@
                color: $wcfContentDimmedText;
        }
        
-       @include screen-md-down {
+       @include screen-sm-down {
                .contentHeaderIcon {
                        display: none;
                }

diff --git a/wcfsetup/install/files/style/ui/userProfile.scss b/wcfsetup/install/files/style/ui/userProfile.scss
index 30c1c31ec4a0ad95bebe6bd35ceb763a74fc465a..c08a551fe850eb99672f04120ed98c9f004c1ce0 100644 (file)
--- a/wcfsetup/install/files/style/ui/userProfile.scss
+++ b/wcfsetup/install/files/style/ui/userProfile.scss
@@ -1,4 +1,40 @@
 .userProfileUser {
+       .contentHeaderIcon {
+               position: relative;
+               
+               a {
+                       display: block;
+               }
+               
+               .badgeOnline {
+                       left: 0;
+                       pointer-events: none;
+                       position: absolute;
+                       
+                       @include screen-md-up {
+                               bottom: 0;
+                       }
+                       
+                       @include screen-sm-down {
+                               color: transparent;
+                               padding: 0;
+                               top: 0;
+                               width: 0;
+                               
+                               &::before {
+                                       background-color: inherit;
+                                       border: 1px solid rgba(255, 255, 255, 1);
+                                       border-radius: 50%;
+                                       content: "";
+                                       height: 16px;
+                                       left: 34px; /* 48px (avatar) - 16px (width) - 2px (border-left + border-right) */
+                                       position: absolute;
+                                       width: 16px;
+                               }
+                       }
+               }
+       }
+       
        .contentHeaderIcon a {
                display: block;
        }
@@ -7,7 +43,7 @@
                margin-top: 20px;
        }
        
-       @include screen-md-down {
+       @include screen-sm-down {
                display: flex;
                flex-wrap: wrap;
                
@@ -26,7 +62,9 @@
                        flex: 0 0 calc(100% - 58px);
                        max-width: calc(100% - 58px);
                }
-               
+       }
+       
+       @include screen-xs {
                .contentHeaderNavigation {
                        flex: 0 0 100%;