mirror of
https://github.com/vale981/Vulcan
synced 2025-03-06 10:01:40 -05:00
refactor all the things!
- changed the layout CSS for post modules - changed order of modules - changed markup of modules
This commit is contained in:
Sacha Greif
parent
fb0cd210b3
commit
fb91613cfe
11 changed files with 174 additions and 128 deletions
|
|
@ -5,7 +5,14 @@ Template[getTemplate('postActions')].helpers({
|
|||
Template[getTemplate('postActions')].events({
|
||||
'click .toggle-actions-link': function(e, instance){
|
||||
e.preventDefault();
|
||||
var $modules = $(e.target).parents('.post').find('.right-modules');
|
||||
$modules.toggleClass('visible');
|
||||
var $post = $(e.target).parents('.post');
|
||||
var h = $post.height();
|
||||
if ($post.hasClass('show-actions')) {
|
||||
$post.height('auto');
|
||||
$post.removeClass('show-actions');
|
||||
} else {
|
||||
$post.height(h+'px');
|
||||
$post.addClass('show-actions');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<template name="postCommentsLink">
|
||||
<div class="post-meta-item">
|
||||
<a class="comments-link" href="/posts/{{_id}}">
|
||||
<span class="count">{{commentCount}}</span>
|
||||
<span class="action">{{_ 'comments_'}}</span>
|
||||
<span class="comments-count">{{commentCount}}</span>
|
||||
<span class="comments-action">{{_ 'comments_'}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<template name="postContent">
|
||||
<div class="post-content-inner">
|
||||
{{#each postThumbnail}}
|
||||
{{> UI.dynamic template=getTemplate data=..}}
|
||||
{{/each}}
|
||||
|
|
@ -15,5 +14,4 @@
|
|||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template name="postDiscuss">
|
||||
<a class="discuss-link go-to-comments" href="/posts/{{_id}}">
|
||||
<i class="icon-comment"></i>
|
||||
<span class="count">{{commentCount}}</span>
|
||||
<span class="action">{{_ 'discuss'}}</span>
|
||||
<a class="discuss-link go-to-comments action" href="/posts/{{_id}}">
|
||||
<i class="action-icon icon-comment"></i>
|
||||
<span class="action-count">{{commentCount}}</span>
|
||||
<span class="action-label">{{_ 'discuss'}}</span>
|
||||
</a>
|
||||
</template>
|
||||
|
|
@ -1,8 +1,14 @@
|
|||
<template name="postUpvote">
|
||||
<div class="post-rank"><span>{{oneBasedRank}}</span></div>
|
||||
{{#if upvoted}}
|
||||
<span class="upvote-link voted"><i class="icon-check"></i><span>{{_ "upvoted"}}</span></span>
|
||||
<span class="upvote-link voted action">
|
||||
<i class="icon-check action-icon"></i>
|
||||
<span class="action-label">{{_ "upvoted"}}</span>
|
||||
</span>
|
||||
{{else}}
|
||||
<a class="upvote-link not-voted" href="#"><i class="icon-up"></i><span>{{_ "upvote_"}}</span></a>
|
||||
<a class="upvote-link not-voted action" href="#">
|
||||
<i class="icon-up action-icon"></i>
|
||||
<span class="action-label">{{_ "upvote_"}}</span>
|
||||
</a>
|
||||
{{/if}}
|
||||
</template>
|
||||
|
|
@ -163,19 +163,19 @@ footerModules = [];
|
|||
postModules = [
|
||||
{
|
||||
template: 'postUpvote',
|
||||
order: 10
|
||||
},
|
||||
{
|
||||
template: 'postActions',
|
||||
order: 20
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
template: 'postContent',
|
||||
order: 30
|
||||
order: 5
|
||||
},
|
||||
{
|
||||
template: 'postDiscuss',
|
||||
order: 40
|
||||
order: 30
|
||||
},
|
||||
{
|
||||
template: 'postActions',
|
||||
order: 50
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,18 @@
|
|||
$small-break: 30em;
|
||||
@mixin small(){
|
||||
@media screen and (max-width: $small-break) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
.post-thumbnail{
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-right: 10px;
|
||||
@include small{
|
||||
order: 2;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-thumbnail-link{
|
||||
|
|
@ -9,6 +20,9 @@
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 80px;
|
||||
@include small{
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-thumbnail-image{
|
||||
|
|
@ -35,15 +49,9 @@
|
|||
background: rgba(0,0,0,0.4);
|
||||
border: 2px solid rgba(255,255,255,0.8);
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 30em) {
|
||||
|
||||
.post-thumbnail{
|
||||
float: right;
|
||||
margin: 10px;
|
||||
@include small{
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -97,4 +105,4 @@
|
|||
background: rgba(255,255,255,0.4);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,8 @@
|
|||
<template name="postShare">
|
||||
<a href="#" class="share-link"><i class="icon-share"></i><span class="action">{{_ 'share'}}</span></a>
|
||||
<a href="#" class="share-link action">
|
||||
<i class="action-icon icon-share"></i>
|
||||
<span class="action-label">{{_ 'share'}}</span>
|
||||
</a>
|
||||
<div class="share-options hidden">
|
||||
<a class="mt-facebook mt-share-inline-square-sm" href="https://www.facebook.com/sharer/sharer.php?u={{sourceLink}}" target="_blank"><img src="//mojotech-static.s3.amazonaws.com/facebook@2x.png"></a>
|
||||
<a class="mt-twitter mt-share-inline-square-sm" href="//twitter.com/intent/tweet?text={{title}}&url={{sourceLink}}&{{viaTwitter}}" target="_blank"><img src="//mojotech-static.s3.amazonaws.com/twitter@2x.png"></a>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
postModules.push({
|
||||
template: 'postShare',
|
||||
position: 'right-center'
|
||||
order: 25
|
||||
});
|
||||
|
|
@ -35,7 +35,7 @@ viewParameters.category = function (terms) {
|
|||
// push "categories" modules to postHeading
|
||||
postHeading.push({
|
||||
template: 'postCategories',
|
||||
order: 3
|
||||
order: 30
|
||||
});
|
||||
|
||||
// push "categoriesMenu" template to primaryNav
|
||||
|
|
|
|||
|
|
@ -11,17 +11,17 @@
|
|||
margin-bottom: 10px;
|
||||
.post{
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
@extend .has-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
.post{
|
||||
// display: table-row;
|
||||
padding: 0;
|
||||
padding: 10px;
|
||||
border-radius: 0px;
|
||||
margin-bottom: 0px;
|
||||
display: table-row;
|
||||
border-bottom:1px solid $lightest-grey;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position:relative;
|
||||
width:100%;
|
||||
background: white;
|
||||
|
|
@ -40,38 +40,60 @@
|
|||
}
|
||||
}
|
||||
.post-module{
|
||||
display: table-cell;
|
||||
border-bottom:1px solid $lightest-grey;
|
||||
vertical-align: middle;
|
||||
padding: 10px 0;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
margin-right: 10px;
|
||||
&:last-child{
|
||||
padding-right: 20px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
.post-upvote{
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
order: 1;
|
||||
}
|
||||
.post-content{
|
||||
order: 2;
|
||||
width: 100%;
|
||||
}
|
||||
.post-content-inner{
|
||||
// display: table;
|
||||
// width: 100%;
|
||||
// can shrink on mobile or desktop
|
||||
flex-shrink: 1;
|
||||
// but can only grow on desktop
|
||||
@include medium-large{
|
||||
flex-grow: 1;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.post-content-inner > div{
|
||||
// display: table-cell;
|
||||
// vertical-align: middle;
|
||||
}
|
||||
.post-info{
|
||||
flex-grow: 1;
|
||||
}
|
||||
.post-discuss, .post-share{
|
||||
width: 70px;
|
||||
.post-share{
|
||||
order: 3;
|
||||
}
|
||||
.post-discuss{
|
||||
order: 4;
|
||||
}
|
||||
.post-share, .post-discuss{
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
padding: 2px 10px;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
.post-actions{
|
||||
order: 5;
|
||||
}
|
||||
.post-share, .post-discuss, .post-upvote{
|
||||
@include small{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.show-actions{
|
||||
.post-content{
|
||||
display: none;
|
||||
}
|
||||
.post-share, .post-discuss, .post-upvote{
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
// .modules-group{
|
||||
// display: table-cell;
|
||||
|
|
@ -184,8 +206,6 @@
|
|||
.post-actions{
|
||||
display: none;
|
||||
text-align: right;
|
||||
@include flex-shrink(1);
|
||||
padding-right: 5px;
|
||||
@include small{
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -215,29 +235,31 @@
|
|||
position: relative;
|
||||
// top: 17px;
|
||||
// transform: translateY(-50%);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 6px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
i{
|
||||
display: block;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba($red, 0.3);
|
||||
border: 2px solid rgba($red, 0.3);
|
||||
font-size:10px;
|
||||
height:100%;
|
||||
width:100%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
text-align:center;
|
||||
// line-height:$grid-unit;
|
||||
color:rgba($red, 0.8);
|
||||
text-shadow:0px 1px 0px white;
|
||||
line-height: 2.2;
|
||||
line-height: 1.9;
|
||||
&.icon-check{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
span{
|
||||
.action-label{
|
||||
display:none;
|
||||
@include small{
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 7px;
|
||||
}
|
||||
}
|
||||
&.not-voted:hover{
|
||||
i{
|
||||
|
|
@ -295,6 +317,9 @@
|
|||
// font-weight:bold;
|
||||
color:black(0.2);
|
||||
}
|
||||
@include small{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// .post-info{
|
||||
// padding:$grid-padding - 5px 0;
|
||||
|
|
@ -318,9 +343,6 @@
|
|||
.post-heading{
|
||||
margin-bottom: 3px;
|
||||
line-height: 1.2;
|
||||
@include small{
|
||||
line-height: 1.5;
|
||||
}
|
||||
.post-title{
|
||||
@include small{
|
||||
font-size: 15px;
|
||||
|
|
@ -366,6 +388,10 @@
|
|||
font-size:12px;
|
||||
color:$light-text;
|
||||
line-height:1.5;
|
||||
@include small{
|
||||
font-size: 11px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
a{
|
||||
color:$medium-text;
|
||||
&:visited, &:active{
|
||||
|
|
@ -374,72 +400,70 @@
|
|||
}
|
||||
}
|
||||
|
||||
.post-share, .post-discuss{
|
||||
position: relative;
|
||||
>a{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
padding:0;
|
||||
height:$grid-unit;
|
||||
vertical-align:baseline;
|
||||
text-align:center;
|
||||
color:$light-text;
|
||||
i{
|
||||
font-size: 36px;
|
||||
height: 45px;
|
||||
display: block;
|
||||
}
|
||||
&.edit-link{
|
||||
.action{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
padding:0;
|
||||
vertical-align:baseline;
|
||||
text-align:center;
|
||||
color:$light-text;
|
||||
&.edit-link{
|
||||
color:$red;
|
||||
}
|
||||
&.share-link{
|
||||
color:$yellow;
|
||||
}
|
||||
&.discuss-link{
|
||||
color:$green;
|
||||
}
|
||||
&.more-link{
|
||||
color:$blue;
|
||||
}
|
||||
&:hover{
|
||||
&, .action{
|
||||
color:$red;
|
||||
}
|
||||
&.share-link{
|
||||
color:$yellow;
|
||||
}
|
||||
&.discuss-link{
|
||||
color:$green;
|
||||
}
|
||||
&.more-link{
|
||||
color:$blue;
|
||||
}
|
||||
&:hover{
|
||||
&, .action{
|
||||
color:$red;
|
||||
}
|
||||
}
|
||||
&.voted{
|
||||
background:$highlight-color;
|
||||
color:white;
|
||||
cursor: default;
|
||||
.action{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.count{
|
||||
position:absolute;
|
||||
top:14px;
|
||||
display:block;
|
||||
width:100%;
|
||||
height:20px;
|
||||
line-height:20px;
|
||||
font-size:11px;
|
||||
}
|
||||
.points{
|
||||
display:block;
|
||||
font-size:30px;
|
||||
line-height:50px;
|
||||
}
|
||||
}
|
||||
&.voted{
|
||||
background:$highlight-color;
|
||||
color:white;
|
||||
cursor: default;
|
||||
.action{
|
||||
display:block;
|
||||
height:20px;
|
||||
line-height:20px;
|
||||
bottom:5px;
|
||||
left:0px;
|
||||
font-size:13px;
|
||||
color:$light-text;
|
||||
pointer-events:none;
|
||||
// color:$red;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.points{
|
||||
display:block;
|
||||
font-size:30px;
|
||||
line-height:50px;
|
||||
}
|
||||
}
|
||||
.action-icon{
|
||||
font-size: 36px;
|
||||
height: 45px;
|
||||
display: block;
|
||||
}
|
||||
.action-label{
|
||||
font-weight: bold;
|
||||
display:block;
|
||||
height:20px;
|
||||
line-height:20px;
|
||||
bottom:5px;
|
||||
left:0px;
|
||||
font-size:13px;
|
||||
color:$light-text;
|
||||
pointer-events:none;
|
||||
// color:$red;
|
||||
}
|
||||
.action-count{
|
||||
position:absolute;
|
||||
top:14px;
|
||||
display:block;
|
||||
width:100%;
|
||||
height:20px;
|
||||
line-height:20px;
|
||||
font-size:11px;
|
||||
}
|
||||
.post-body{
|
||||
@extend .has-shadow;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue