Feature: Add left-padding for pin-info

This commit is contained in:
winkidney
2019-11-27 13:21:58 +08:00
committed by Isaac Bythewood
parent 707825769b
commit 8f8e136355

View File

@@ -22,13 +22,16 @@
<img class="avatar" :src="item.avatar" alt=""> <img class="avatar" :src="item.avatar" alt="">
</div> </div>
<div class="pin-info"> <div class="pin-info">
<span class="dim">pined by&nbsp;<span>{{ item.author }}</span>&nbsp;in&nbsp; <span class="dim">pined by&nbsp;<span>{{ item.author }}</span>
<template v-for="tag in item.tags"> <template v-if="item.tags.length > 0">
<span v-bind:key="tag" class="pin-tag"> &nbsp;in&nbsp;
&nbsp; <template v-for="tag in item.tags">
<router-link to="/tags/">{{ tag }}</router-link> <span v-bind:key="tag" class="pin-tag">
</span> &nbsp;
</template> <router-link to="/tags/">{{ tag }}</router-link>
</span>
</template>
</template>
</span> </span>
</div> </div>
<div class="is-clearfix"></div> <div class="is-clearfix"></div>
@@ -101,6 +104,9 @@ export default {
} }
/* card */ /* card */
$pin-footer-position-fix: -6px; $pin-footer-position-fix: -6px;
$avatar-width: 30px;
$avatar-height: 30px;
@mixin pin-detail-font-size{ @mixin pin-detail-font-size{
font-size: 12px; font-size: 12px;
} }
@@ -121,8 +127,8 @@ $pin-footer-position-fix: -6px;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
} }
.avatar { .avatar {
height: 30px; height: $avatar-height;
width: 30px; width: $avatar-width;
border-radius: 3px; border-radius: 3px;
} }
} }
@@ -145,6 +151,7 @@ $pin-footer-position-fix: -6px;
> .pin-info { > .pin-info {
line-height: 16px; line-height: 16px;
width: 220px; width: 220px;
padding-left: $avatar-width + 5px;
} }
.pin-tag > a { .pin-tag > a {
font-weight: bold; font-weight: bold;