user-profile: Add mobile-responsive styling.

This changes the styling of the user profile popup to be responsive
to mobile devices. In this case it is converted to a modal form using
flex to center it on devices with screen sizes under 768px in width.

Fixes #4669.
This commit is contained in:
Brock Whittaker 2017-05-10 16:43:33 -07:00 committed by Tim Abbott
parent 5dd5c84854
commit f651c7fb18
1 changed files with 26 additions and 0 deletions

View File

@ -99,3 +99,29 @@ ul.actions_popover i {
.user_popover .popover-title {
padding: 0;
}
@media (max-width: 768px) {
.message-info-popover {
display: flex !important;
justify-content: center;
align-items: center;
/* these are to override JS embedded inline styles. */
top: 0px !important;
left: 0px !important;
margin: 0 !important;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.7);
border-radius: 0px;
border: none;
pointer-events: none;
}
.message-info-popover .popover-inner {
background-color: #fff;
pointer-events: all;
}
}