diff options
Diffstat (limited to 'resources')
7 files changed, 65 insertions, 42 deletions
diff --git a/resources/assets/javascripts/lib/personal_notifications.js b/resources/assets/javascripts/lib/personal_notifications.js index a70e82e..798566f 100644 --- a/resources/assets/javascripts/lib/personal_notifications.js +++ b/resources/assets/javascripts/lib/personal_notifications.js @@ -170,11 +170,11 @@ const PersonalNotifications = { if (really_new > 0) { $('#notification_marker') .data('seen', false); - $('#notification-wrapper') + $('#avatar-menu-container') .addClass('alert'); PageLayout.title_prefix = '(!) '; } else { - $('#notification-wrapper').removeClass('alert'); + $('#avatar-menu-container').removeClass('alert'); PageLayout.title_prefix = ''; } if (count) { @@ -227,7 +227,7 @@ const PersonalNotifications = { $.get(STUDIP.URLHelper.getURL('dispatch.php/jsupdater/notifications_seen')).then(time => { $('#notification_marker') .data('lastvisit', time); - $('#notification-wrapper') + $('#avatar-menu-container') .removeClass('alert'); }); diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss index 249a6df..cb6bce6 100644 --- a/resources/assets/stylesheets/mixins/colors.scss +++ b/resources/assets/stylesheets/mixins/colors.scss @@ -323,5 +323,3 @@ $color--info: $color--blue-2; $color--info-alternative: mix($color--info, $color--white, 20%); $color-image-placeholder-background: $color--gray-6; - -$color-header-inverted: $color--white;
\ No newline at end of file diff --git a/resources/assets/stylesheets/scss/globalsearch.scss b/resources/assets/stylesheets/scss/globalsearch.scss index 3ccd8ae..0d4052a 100644 --- a/resources/assets/stylesheets/scss/globalsearch.scss +++ b/resources/assets/stylesheets/scss/globalsearch.scss @@ -4,7 +4,7 @@ #globalsearch-searchbar { display: flex; align-items: center; - border: thin solid var(--color--header-inverted); + border: thin solid var(--color--font-inverted); border-radius: var(--border-radius-search); background-color: var(--color--brand-primary); padding: 3px 5px 2px 5px; @@ -77,7 +77,7 @@ // List display #globalsearch-list { - background-color: var(--color--global-background); + background-color: var(--white); box-shadow: 1px 1px 1px var(--light-gray-color-80); color: var(--text-color); display: none; @@ -118,7 +118,7 @@ background-color: var(--white); #globalsearch-input { - background-color: var(--color--header-inverted); + background-color: var(--white); color: var(--color--font-primary); &::placeholder { diff --git a/resources/assets/stylesheets/scss/header.scss b/resources/assets/stylesheets/scss/header.scss index c16a790..0a04d64 100644 --- a/resources/assets/stylesheets/scss/header.scss +++ b/resources/assets/stylesheets/scss/header.scss @@ -45,7 +45,7 @@ justify-content: space-between; list-style-type: none; height: 40px; - gap: 8px; + gap: 20px; > li { @@ -188,26 +188,40 @@ padding: 0 5px 0 0; } -#avatar-wrapper { +#avatar-menu-container { + display: inline-flex; + + &.header_avatar_container { + align-items: end; + flex: 0; + border-radius: var(--border-radius-avatar-menu); + background-color: var(--color--global-background); + + &.alert, + &.alert #notification_marker { + background-color: var(--color--warning); + color: var(--color--font-inverted); + } + } + #avatar-menu { - height: 30px; - width: 30px; + height: 28px; margin: 0; z-index: 1003; .action-menu.avatar-menu { z-index: 1002; + padding: 1px 1px 1px 0; .action-menu-icon { + height: 26px; position: relative; - height: 100%; - width: 100%; + width: 26px; z-index: 1; img { - height: 28px; - width: 28px; - border: solid 1px var(--color--header-inverted); + height: 26px; + width: 26px; border-radius: var(--border-radius-avatar-menu); } @@ -219,7 +233,7 @@ .action-menu-content { position: absolute; - top: 40px; + top: 41px; right: 0; background: var(--white); box-shadow: 1px 1px 1px var(--dark-gray-color-60); @@ -241,6 +255,13 @@ } } } + + #notification-container + #avatar-menu { + .action-menu-icon img { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } } // Fix header covering relevant other areas diff --git a/resources/assets/stylesheets/scss/personal-notifications.scss b/resources/assets/stylesheets/scss/personal-notifications.scss index 2b16e89..ada6054 100644 --- a/resources/assets/stylesheets/scss/personal-notifications.scss +++ b/resources/assets/stylesheets/scss/personal-notifications.scss @@ -1,34 +1,26 @@ #notification_marker { - padding: 0 8px; + margin-left: 0px; + padding-left: 0px; + margin-right: 0px; + padding-right: 0px; width: 100%; height: 100%; + font-size: 12px; color: var(--color--font-primary); text-align: center; - line-height: 30px; + line-height: 28px; border: none; border-radius: var(--border-radius-avatar-menu); - background-color: var(--color--header-inverted); - - &.alert { - background-color: var(--color--warning); - color: var(--color--font-inverted); - } - - .count { - padding: 0 5px; - } - - img { - vertical-align: middle; - margin-top: -3px; - } + background-color: var(--color--global-background); } #notification-container { $arrow-height: 10px; border-radius: var(--border-radius-avatar-menu); $list-width: 400px; - height: 30px; + + width: 28px; + height: 28px; color: var(--base-color); vertical-align: text-bottom; position: relative; diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss index d6c838c..35ffa7c 100644 --- a/resources/assets/stylesheets/scss/responsive.scss +++ b/resources/assets/stylesheets/scss/responsive.scss @@ -285,8 +285,7 @@ $sidebarOut: -330px; } #quicksearch_item, - #notification-wrapper, - #avatar-wrapper, + #avatar-menu-container, #current-page-structure { display: none; } @@ -303,8 +302,8 @@ $sidebarOut: -330px; } } - #notification-wrapper, - #avatar-wrapper, + #notification-container, + .header_avatar_container, #sidebar-menu { display: none; } @@ -761,6 +760,21 @@ html:not(.responsive-display):not(.fullscreen-mode) { line-height: 20px; } + #avatar-menu-container { + position: relative; + bottom: 0px; + right: 0px; + line-height: 20px !important; + + #avatar-menu { + display: none; + } + + &::after { + display: none !important; + } + } + #top-bar { box-sizing: border-box; height: $header-bar-container-height; diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss index c3565dd..2941fe6 100644 --- a/resources/assets/stylesheets/scss/variables.scss +++ b/resources/assets/stylesheets/scss/variables.scss @@ -299,8 +299,6 @@ $grid-gap: 0; --color-image-placeholder-background: #{$color-image-placeholder-background}; - --color--header-inverted: #{$color-header-inverted}; - --border-radius-default: #{$border-radius}; --border-radius-avatar-menu: #{$border-radius-avatar-menu}; --border-radius-search: #{$border-radius-search}; |