Merge branch 'feature/notifications-page' of github.com:opf/openproject into feature/notifications-page

frontend/src/app/features/in-app-notifications/bell/in-app-notification-bell.component.sass

@@ -4,15 +4,8 @@
   position: relative
 
   &--indicator
+    @include indicator-bubble
     position: absolute
     top: 10px
     right: 5px
-    display: flex
-    justify-content: center
-    align-items: center
-    height: 16px
-    width: 16px
-    border-radius: 0.5rem
-    font-size: 0.7rem
     background: darkred
-    font-weight: bold

frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.html

@@ -57,7 +57,7 @@
         [principals]="actors"
       ></op-principal-list>
 
-      <div class="op-ian-item--status">
+      <div class="op-ian-item--status hidden-for-mobile">
         <op-in-app-notification-status [status]="workPackage.status"></op-in-app-notification-status>
       </div>
 
@@ -84,7 +84,7 @@
       ></div>
 
       <div
-        class="op-ian-item--buttons"
+        class="op-ian-item--buttons hidden-for-mobile"
       >
         <button
           type="button"

frontend/src/app/features/in-app-notifications/entry/in-app-notification-entry.component.sass

@@ -35,9 +35,8 @@ $subject-font-size: 14px
     align-items: center
 
     @media screen and (max-width: 679px)
-      grid-template-columns: 1fr 35px 30%
-      grid-template-rows: auto 1fr
-      grid-template-areas: "project actors reason" "title actors date"
+      grid-template-columns: 50px 1fr 15% 15%
+      grid-template-areas: "project project date date" "title title title title" "actors reason reason reason"
 
     &_unexpandable
       cursor: default
@@ -77,10 +76,7 @@ $subject-font-size: 14px
   &--reason-count
     background: #7f7f7f
     color: white
-    border-radius: 10px
-    font-size: 10px
-    padding: 2px 5px
-    font-weight: bold
+    @include indicator-bubble
 
   &--title
     grid-area: title
@@ -91,14 +87,15 @@ $subject-font-size: 14px
     grid-area: reason
     @include text-shortener
     max-width: 100%
-    @media screen and (max-width: 679px)
-      justify-self: end
 
   &--date
     grid-area: date
     @include text-shortener(false)
     white-space: nowrap
     max-width: 100%
+    @media screen and (max-width: 679px)
+      justify-self: end
+
 
   &--actors
     grid-area: actors

frontend/src/global_styles/layout/_base_mobile.sass

@@ -55,6 +55,9 @@
 
   #content-wrapper
     height: initial
+    // Take care that the wrapper has the available screen height at the least
+    // Check for example notification center on mobile before changing that
+    min-height: calc(100vh - var(--header-height))
   // ------------------- END CHANGED SCROLL BEHAVIOR
 
   #content-wrapper

frontend/src/global_styles/openproject/_mixins.sass

@@ -246,3 +246,14 @@ $scrollbar-size: 10px
 
   &.-show
     display: block
+
+@mixin indicator-bubble
+  display: inline-flex
+  justify-content: center
+  align-items: center
+  height: 16px
+  line-height: 16px
+  width: 16px
+  border-radius: 0.5rem
+  font-size: 0.7rem
+  font-weight: bold