gitlab-org--gitlab-foss/app/assets/stylesheets/pages/admin.scss
Annabel Dunstone Gray e4990b8c08 Merge branch '22746-fix-admin-users-mobile-view' into 'master'
Resolve "Admin/Overview/Users mobile view"

## What does this MR do?

Fixes mobile layout issues on `/admin/users` page.

* Fixes control element placement when long usernames or email addresses overflow their container
* Fixes condensed dropdown menu (issue caused by acde2e30)

Before:
![Screen_Shot_2016-09-28_at_3.29.11_PM](/uploads/82cd27c367653beb29425065685274dd/Screen_Shot_2016-09-28_at_3.29.11_PM.png)

![Screen_Shot_2016-09-29_at_23.36.40](/uploads/e739638506388be9c5a0709e5f22b298/Screen_Shot_2016-09-29_at_23.36.40.png)

After:
![Screen_Shot_2016-10-24_at_11.55.32_PM](/uploads/ab6e49da85688d9fd2abc49de238a5bf/Screen_Shot_2016-10-24_at_11.55.32_PM.png)

## Are there points in the code the reviewer needs to double check?

Ensure css changes don't have any side effects elsewhere in GitLab.  (I don't think they would...)

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG.md) entry added
- Tests
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

Closes #22746

See merge request !7087
2016-10-26 18:07:53 +00:00

162 lines
2 KiB
SCSS

/**
* Admin area
*
*/
.admin-dashboard {
.data {
a {
h1 {
line-height: 48px;
font-size: 48px;
padding: 20px;
text-align: center;
font-weight: normal;
}
}
}
.str-truncated {
max-width: 60%;
}
}
.admin-filter form {
.select2-container {
width: 100%;
}
.controls {
margin-left: 130px;
}
.form-actions {
padding-left: 130px;
background: #fff;
}
.visibility-levels {
.controls {
margin-bottom: 9px;
}
i {
color: inherit;
}
}
}
.broadcast-messages {
.message {
line-height: 2;
}
}
.broadcast-message {
@extend .alert-warning;
padding: 10px;
text-align: center;
> div,
p {
display: inline;
margin: 0;
a {
color: inherit;
text-decoration: underline;
}
}
}
.broadcast-message-preview {
@extend .broadcast-message;
margin-bottom: 20px;
}
// Users List
.users-list {
.user-row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
white-space: nowrap;
}
.user-details {
flex: 1 1 auto;
overflow: hidden;
padding-right: 8px;
}
.user-name {
display: inline-block;
font-weight: 600;
}
.user-name,
.user-email {
overflow: hidden;
text-overflow: ellipsis;
}
.dropdown {
.btn-block {
margin-bottom: 0;
line-height: inherit;
}
}
.label-default {
color: $btn-transparent-color;
}
}
.abuse-reports {
.table {
table-layout: fixed;
}
.subheading {
padding-bottom: $gl-padding;
}
.message {
word-wrap: break-word;
}
.btn {
white-space: normal;
padding: $gl-btn-padding;
}
th {
width: 15%;
&.wide {
width: 55%;
}
}
@media (max-width: $screen-sm-max) {
th {
width: 100%;
}
td {
width: 100%;
float: left;
}
}
.no-reports {
.emoji-icon {
margin-left: $btn-side-margin;
margin-top: 3px;
}
span {
font-size: 19px;
}
}
}