diff options
| author | Brenden Bice <brenden.next@gmail.com> | 2019-04-02 04:25:08 -0400 |
|---|---|---|
| committer | Brenden Bice <brenden.next@gmail.com> | 2019-04-11 23:26:12 -0400 |
| commit | 44d07ceb25ab8902a4d67b156474e737d6541362 (patch) | |
| tree | eb927ad0ef88439c7edeb4c02bcc17a8b5186f14 | |
| parent | 0d8eb1d00b9044398fccf0760329fb81887c9b18 (diff) | |
support mobile size screen
| -rw-r--r-- | src/components/avatar_list/avatar_list.vue | 20 | ||||
| -rw-r--r-- | src/components/status/status.vue | 4 |
2 files changed, 19 insertions, 5 deletions
diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue index 3241609c..56ca12a2 100644 --- a/src/components/avatar_list/avatar_list.vue +++ b/src/components/avatar_list/avatar_list.vue @@ -14,14 +14,26 @@ display: inline-flex; /* Causes LI items to display in row. */ list-style-type: none; margin: 0; - padding: 0px 16px 0px 0px; - flex-direction: row-reverse; + padding: 0px 20px 0px 0px; + flex-direction: row; + flex-wrap: wrap; &__item { height: 40px; margin: 0; padding: 0; - width: 25px; + width: 20px; + + &:nth-child( 1 ) { z-index: 10 ; } + &:nth-child( 2 ) { z-index: 9 ; } + &:nth-child( 3 ) { z-index: 8 ; } + &:nth-child( 4 ) { z-index: 7 ; } + &:nth-child( 5 ) { z-index: 6 ; } + &:nth-child( 6 ) { z-index: 5 ; } + &:nth-child( 7 ) { z-index: 4 ; } + &:nth-child( 8 ) { z-index: 3 ; } + &:nth-child( 9 ) { z-index: 2 ; } + &:nth-child( 10 ) { z-index: 1 ; } .avatars__img { border-radius: 50%; @@ -35,7 +47,7 @@ .transparent-avatar { .avatars__item { - &:first-child { + &:last-child { position: relative; .avatars__img { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 6b8e0b3d..f67f849c 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -629,7 +629,9 @@ a.unmute { .favourited-users, .reblogged-users { - flex: 1; + flex-basis: 50%; + flex-grow: 1; + flex-shrink: 1; .title { margin: 0 0 10px 0; |