Using user page layout/styles for groups where possible

This commit is contained in:
Kris 2018-05-03 15:13:59 -04:00
parent 78435833a5
commit 2288389a93
8 changed files with 46 additions and 84 deletions

View File

@ -1,13 +1,15 @@
<div class='group-post-header'>
<div class='group-post-avatar'>
<div class='clearfix info'>
<a href="{{unbound post.user.userUrl}}" data-user-card="{{unbound post.user.username}}" class='avatar-link'>
{{avatar post.user imageSize="large" extraClasses="actor" ignoreTitle="true"}}
</a>
</div>
<div class='group-post-info'>
<div class="group-post-topic">
<div class='group-post-title'>
<span class='time'>{{format-date post.created_at leaveAgo="true"}}</span>
{{expand-post item=post}}
<div class='stream-topic-details'>
<div class='stream-topic-title'>
<span class='title'>
<a href={{postUrl}}>{{{post.topic.fancyTitle}}}</a>
</span>
</div>
<div class="group-post-category">{{category-link post.category}}</div>
{{#if post.user.name}}
@ -17,13 +19,10 @@
</div>
{{/if}}
</div>
<div class='group-post-controls'>
{{expand-post item=post}}
<span class='time'>{{format-date post.created_at leaveAgo="true"}}</span>
</div>
</div>
</div>
<div class='group-post-excerpt'>
<div class='excerpt'>
{{#if post.expandedExcerpt}}
{{{post.expandedExcerpt}}}
{{else}}

View File

@ -1,11 +1,11 @@
{{#load-more selector=".group-post" action=(action "loadMore")}}
<div class='group-posts'>
<div class="user-stream">
{{#each model as |post|}}
{{group-post post=post class="group-post"}}
{{group-post post=post class="user-stream-item item"}}
{{else}}
<div>{{i18n emptyText}}</div>
{{/each}}
</div>
</div>
{{/load-more}}
{{conditional-loading-spinner condition=loading}}

View File

@ -60,7 +60,9 @@
</div>
</div>
<div class='group-outlet'>
<div class='user-table'>
<div class='wrapper'>
{{outlet}}
</div>
</div>
</div>

View File

@ -1,16 +1,14 @@
<div class='group-activity container'>
{{#mobile-nav class='group-activity-nav group-navigation' desktopClass="pull-left nav nav-stacked" currentPath=application.currentPath}}
<section class="user-navigation">
{{#mobile-nav class='activity-nav' desktopClass='action-list activity-list nav-stacked' currentPath=application.currentPath}}
{{group-activity-filter filter="posts" categoryId=category_id}}
{{group-activity-filter filter="topics" categoryId=category_id}}
{{#if siteSettings.enable_mentions}}
{{group-activity-filter filter="mentions" categoryId=category_id}}
{{/if}}
{{plugin-outlet name="below-group-activity-nav" tagName='' connectorTagName='li'}}
{{plugin-outlet name="group-activity-bottom" tagName='' connectorTagName='li'}}
{{/mobile-nav}}
</section>
<div class="{{if site.mobileView "" "pull-left"}} group-activity-outlet">
<div class='user-main'>
<section class='user-right'>
{{outlet}}
</div>
</div>
</div>
</section>

View File

@ -1,5 +1,5 @@
<div class='group-manage container'>
{{#mobile-nav class='group-navigation' desktopClass='pull-left nav nav-stacked' currentPath=application.currentPath}}
<section class='user-navigation'>
{{#mobile-nav class='activity-nav' desktopClass='action-list activity-list nav-stacked' currentPath=application.currentPath}}
{{#each tabs as |tab|}}
<li>
{{#link-to tab.route model.name}}
@ -8,8 +8,8 @@
</li>
{{/each}}
{{/mobile-nav}}
</section>
<div class="{{if site.mobileView "" "pull-left"}} group-manage-outlet">
<section class='user-right'>
{{outlet}}
</div>
</div>
</section>

View File

@ -1,5 +1,5 @@
<div class='group-activity container'>
{{#mobile-nav class='group-navigation' desktopClass='pull-left nav nav-stacked' currentPath=application.currentPath}}
<section class="user-navigation">
{{#mobile-nav class='messages-nav' desktopClass='nav-stacked action-list' currentPath=application.currentPath}}
<li>
{{#link-to 'group.messages.inbox' model.name}}
@ -12,10 +12,7 @@
{{/link-to}}
</li>
{{/mobile-nav}}
<div class="{{if site.mobileView "" "pull-left"}} group-messages-outlet">
<div class='user-main'>
</section>
<section class='user-right messages'>
{{outlet}}
</div>
</div>
</div>
</section>

View File

@ -1,5 +1,9 @@
// We should try to reuse the user page HTML for groups when possible
// To style group content differently, use the existing classes with a .group parent class.
// For example: .group .user-navigation
.group-details-container {
background: rgba(230, 230, 230, 0.3);
background: $primary-very-low;
padding: 20px;
margin-bottom: 15px;
position: relative;
@ -24,45 +28,6 @@
}
}
.group-post {
.group-post-header {
display: flex;
.group-post-avatar {
margin-right: 0.5em;
}
.time,
.delete-info {
color: lighten($primary, 40%);
font-size: $font-down-1;
}
.group-member-info {
display: flex;
color: lighten($primary, 40%);
}
}
.group-post-info {
display: flex;
width: 100%;
justify-content: space-between;
.group-post-title {
font-size: $font-up-1;
}
}
.group-post-excerpt {
margin: 1em 0;
word-wrap: break-word;
color: $primary;
}
padding: 1em 0;
border-bottom: 1px solid $primary-low;
}
.group-info {
width: 100%;
@ -173,7 +138,7 @@ table.group-members {
td {
text-align: center;
color: blend-primary-secondary(50%);
color: $primary-medium;
padding: 0.8em 0;
}
}

View File

@ -1,4 +1,5 @@
// Common styles for "/user" section
// These styles are also used for "/groups" test those pages if making significant changes
.user-right {
.list-actions {
margin-bottom: 10px;