Commit 28b7b3ffa2424be2e5cc492462af04c6e83aec64
multi-pm sidebar: minimal styling
mix committed on 2/11/2018, 3:47:03 AMParent: f83096c56f189c3905e5dea631e25ded0440e6aa
Files changed
| about/html/avatar.mcss | changed |
| app/html/sideNav/sideNav.mcss | changed |
| app/html/sideNav/sideNavDiscovery.js | changed |
| app/page/userShow.js | changed |
| styles/mixins.js | changed |
| about/html/avatar.mcss | ||
|---|---|---|
| @@ -5,8 +5,12 @@ | ||
| 5 | 5 | -tiny { |
| 6 | 6 | $circleTiny |
| 7 | 7 | } |
| 8 | 8 | |
| 9 | + -halfSmall { | |
| 10 | + $circleHalfSmall | |
| 11 | + } | |
| 12 | + | |
| 9 | 13 | -small { |
| 10 | 14 | $circleSmall |
| 11 | 15 | } |
| 12 | 16 | |
| app/html/sideNav/sideNav.mcss | ||
|---|---|---|
| @@ -92,13 +92,17 @@ | ||
| 92 | 92 | justify-content: center |
| 93 | 93 | align-items: center |
| 94 | 94 | } |
| 95 | 95 | |
| 96 | + img {} | |
| 97 | + div.many-images { | |
| 98 | + display: flex | |
| 99 | + flex-wrap: wrap | |
| 100 | + | |
| 101 | + img { | |
| 102 | + } | |
| 103 | + } | |
| 96 | 104 | |
| 97 | - a img { | |
| 98 | - | |
| 99 | - } | |
| 100 | - | |
| 101 | 105 | i { |
| 102 | 106 | $circleSmall |
| 103 | 107 | $colorPrimary |
| 104 | 108 | font-size: 1.3rem |
| app/html/sideNav/sideNavDiscovery.js | ||
|---|---|---|
| @@ -184,9 +184,9 @@ | ||
| 184 | 184 | else { |
| 185 | 185 | return Option({ |
| 186 | 186 | //the number of threads with each peer |
| 187 | 187 | notifications: notifications(participants), |
| 188 | - imageEl: participants.map(p => api.about.html.avatar(p)), | |
| 188 | + imageEl: participants.map(p => api.about.html.avatar(p, 'halfSmall')), | |
| 189 | 189 | label: getSubject(msg), |
| 190 | 190 | selected: locParticipantsKey === participants.key, |
| 191 | 191 | location: Object.assign({}, msg, { participants }) // TODO make obs? |
| 192 | 192 | }) |
| @@ -325,9 +325,11 @@ | ||
| 325 | 325 | |
| 326 | 326 | return h('Option', { className }, [ |
| 327 | 327 | h('div.circle', [ |
| 328 | 328 | when(notifications, h('div.alert', notifications)), |
| 329 | - imageEl | |
| 329 | + Array.isArray(imageEl) | |
| 330 | + ? h('div.many-images', imageEl.slice(0,4)) // not ideal? not enough space to show more though | |
| 331 | + : imageEl | |
| 330 | 332 | ]), |
| 331 | 333 | h('div.label', { 'ev-click': goToLocation }, label) |
| 332 | 334 | ]) |
| 333 | 335 | } |
| app/page/userShow.js | ||
|---|---|---|
| @@ -41,9 +41,9 @@ | ||
| 41 | 41 | { page: 'userEdit', feed }, |
| 42 | 42 | // h('i.fa.fa-pencil') |
| 43 | 43 | h('img', { src: path.join(__dirname, '../../assets', 'edit.png') }) |
| 44 | 44 | ) |
| 45 | - const directMessageButton = Link({ page: 'threadNew', feed }, h('Button', strings.userShow.action.directMessage)) | |
| 45 | + const directMessageButton = Link({ page: 'threadNew', participants: [feed] }, h('Button', strings.userShow.action.directMessage)) | |
| 46 | 46 | |
| 47 | 47 | const BLOG_TYPES = ['blog', 'post'] |
| 48 | 48 | |
| 49 | 49 | // TODO return some of this ? |
Built with git-ssb-web