diff --git a/less/account.less b/less/account.less index 7d5a30c..a183541 100644 --- a/less/account.less +++ b/less/account.less @@ -159,13 +159,6 @@ } -.posts-list .posts-list-item { - // temp global, port to groups/fav/account - border-bottom: 1px solid @gray-lighter; - margin-bottom: 25px !important; - padding-bottom: 40px; -} - // diff --git a/less/posts_list.less b/less/posts_list.less index 0a0a78b..65f2e19 100644 --- a/less/posts_list.less +++ b/less/posts_list.less @@ -1,13 +1,18 @@ .posts-list { list-style-type: none; padding-left: 0px; + .posts-list-item { + @icon-diameter: 12px; width: 100%; - margin-bottom: 10px; + margin-bottom: 0px; .user-img { - .user-icon-style(24px, 1.5rem, 50%); - float: left; + .user-icon-style(@icon-diameter * 2px, 1.5rem, 50%); + position: absolute; + top: 50%; + margin-top: -1 * @icon-diameter; + margin-left: -1 * @icon-diameter; } a { @@ -25,5 +30,33 @@ display: block; overflow: hidden; } + + .post-body { + border-right: 2px solid @brand-primary; + min-height: 100px; + } + + .post-info { + position: absolute; + top: 50%; + left: 100%; + width: 175px; + height: 28px; + margin-top: -14px; + font-size: 10px; + + .post-meta { + padding-left: 28px; + color: #aaa; + + a { + color: @gray-light; + font-weight: 900; + + } + + text-transform: uppercase; + } + } } } \ No newline at end of file diff --git a/templates/account/profile.tpl b/templates/account/profile.tpl index 05c6c93..e871efd 100644 --- a/templates/account/profile.tpl +++ b/templates/account/profile.tpl @@ -2,7 +2,7 @@ <!-- IMPORT partials/account/header.tpl --> <div class="row"> - <div class="col-xs-12 account-block"> + <div class="col-xs-12 account-block hidden"> <div class="account-picture-block text-center"> <span> <span class="account-username"> {username}</span> diff --git a/templates/partials/posts_list.tpl b/templates/partials/posts_list.tpl index ee476b0..d47c040 100644 --- a/templates/partials/posts_list.tpl +++ b/templates/partials/posts_list.tpl @@ -1,28 +1,32 @@ <ul component="posts" class="posts-list" data-nextstart="{nextStart}"> <!-- BEGIN posts --> - <li component="post" class="posts-list-item" data-pid="{posts.pid}" data-uid="{posts.uid}"> - <a href="{config.relative_path}/user/{posts.user.userslug}"> - <!-- IF posts.user.picture --> - <img title="{posts.user.username}" class="img-rounded user-img" src="{posts.user.picture}"> - <!-- ELSE --> - <div class="user-icon user-img" style="background-color: {posts.user.icon:bgColor};" title="{posts.user.username}">{posts.user.icon:text}</div> - <!-- ENDIF posts.user.picture --> - </a> + <li component="post" class="posts-list-item row" data-pid="{posts.pid}" data-uid="{posts.uid}"> + <div class="col-xs-9 post-body"> + <strong><a href="{config.relative_path}/topic/{posts.topic.slug}/{posts.index}">{posts.topic.title}</a></strong> + <div component="post/content" class="content"> + <p>{posts.content}</p> + </div> - <a href="{config.relative_path}/user/{posts.user.userslug}"> - <strong><span>{posts.user.username}</span></strong> - </a> - <div component="post/content" class="content"> - <p>{posts.content}</p> - <p class="fade-out"></p> + <div class="post-info"> + <a href="{config.relative_path}/user/{posts.user.userslug}"> + <!-- IF posts.user.picture --> + <img title="{posts.user.username}" class="img-rounded user-img" src="{posts.user.picture}"> + <!-- ELSE --> + <div class="user-icon user-img" style="background-color: {posts.user.icon:bgColor};" title="{posts.user.username}">{posts.user.icon:text}</div> + <!-- ENDIF posts.user.picture --> + </a> + + <div class="post-meta"> + <a href="{config.relative_path}/user/{posts.user.userslug}">{posts.user.username}</a><br /> + <span class="timeago" title="{posts.relativeTime}"></span> + </div> + </div> + </div> + + <div class="col-xs-3"> + <!--<a href="{config.relative_path}/category/{posts.category.slug}">{posts.category.name}</a><br />--> </div> - <small> - <span class="pull-right"> - [[global:posted_in_ago, <a href="{config.relative_path}/category/{posts.category.slug}"><i class="fa {posts.category.icon}"></i> {posts.category.name}</a>, <span class="timeago" title="{posts.relativeTime}"></span>]] • - <a href="{config.relative_path}/topic/{posts.topic.slug}/{posts.index}">[[global:read_more]]</a> - </span> - </small> </li> <!-- END posts --> </ul>