Dockery/Pinry
1
0
Fork 0
mirror of https://github.com/pinry/pinry.git synced 2025-11-17 18:30:39 +01:00
Code Issues Packages Projects Releases Activity

Feature: Add more card styles for single pin

Browse Source
This commit is contained in:
winkidney
2019-11-26 16:08:15 +08:00
committed by Isaac Bythewood
parent c5fd1a9193
commit 553dec9048
2 changed files with 81 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pinry-spa/src/App.vue
View File

@@ -24,4 +24,7 @@ export default {
#app {
background-color: #F5F5EB;
}
.body {
font-family: 'Open Sans', sans-serif;
}
</style>

80
pinry-spa/src/components/Pins.vue
View File

@@ -13,8 +13,27 @@
<div v-bind:key="item.id" v-masonry-tile class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="grid-item">
<div class="pin-card grid-item">
<img :src="item.url" alt="item.description">
<div class="pin-footer">
<div class="description" v-show="item.description"><p>{{ item.description }}</p></div>
<div class="details">
<div class="is-pulled-left">
<img class="avatar" :src="item.avatar" alt="">
</div>
<div class="pin-info">
<span class="dim">pined by&nbsp;<span>{{ item.author }}</span>&nbsp;in&nbsp;
<template v-for="tag in item.tags">
<span v-bind:key="tag" class="pin-tag">
&nbsp;
<router-link to="/tags/">{{ tag }}</router-link>
</span>
</template>
</span>
</div>
<div class="is-clearfix"></div>
</div>
</div>
</div>
</div>
</template>
@@ -33,6 +52,9 @@ function createImageItem(pin) {
image.url = pinHandler.escapeUrl(pin.image.thumbnail.image);
image.id = pin.id;
image.description = pin.description;
image.tags = pin.tags;
image.author = pin.submitter.username;
image.avatar = `//gravatar.com/avatar/${pin.submitter.gravatar}`;
return image;
}
@@ -67,7 +89,8 @@ export default {
};
</script>
<style scoped>
<style lang="scss" scoped>
/* grid */
.grid-sizer,
.grid-item { width: 240px; }
.grid-item {
@@ -76,6 +99,59 @@ export default {
.gutter-sizer {
width: 15px;
}
/* card */
$pin-footer-position-fix: -6px;
@mixin pin-detail-font-size{
font-size: 12px;
}
@mixin description-font {
@include pin-detail-font-size;
font-family: 'Georgia', 'Times', 'Times New Roman', serif;
}
@mixin secondary-font {
@include pin-detail-font-size;
color: #999;
font-weight: normal;
}
.pin-card{
> img {
border-radius: 3px 3px 0 0;
}
.avatar {
height: 30px;
width: 30px;
border-radius: 3px;
}
}
.pin-footer {
position: relative;
top: $pin-footer-position-fix;
background-color: white;
border-radius: 0 0 3px 3px ;
box-shadow: 0 1px 0 #bbb;
.description {
@include description-font;
padding: 8px;
border-bottom: 1px solid #DDDDDD;
overflow: hidden;
text-overflow: ellipsis;
}
.details {
@include secondary-font;
padding: 10px;
> .pin-info {
line-height: 16px;
width: 220px;
}
.pin-tag > a {
font-weight: bold;
}
}
}
/*pin container size fit*/
/* Generated by python code:
/* def fn(x):