Improve video card UI

This commit is contained in:
the1812 2019-09-15 19:21:06 +08:00
parent 2ff5b85743
commit e9cc955793
10 changed files with 44 additions and 26 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -89,7 +89,7 @@
"medal-helper.min.css": "205A02CC6E8B2DBDA222A0660D83EA6E4B24F0B5A753E269FED099AB8AE31B6C",
"medal-helper.min.html": "5D7057259368BE97DED3375DD904695B245AA2BF338C5E18CB3CF61DD913617C",
"medal-helper.min.js": "33751914C5DE205D79E059F7BF285E325E4D6DBFC68AE7E4D4B6307672F23B6E",
"minimal-home.vue.min.js": "DA0B5B208FE91E5617D6082167C5345FB32C4510ED20EA5F2C399EC9073062DA",
"minimal-home.vue.min.js": "DB9E91A9D8D6DD7682ABBAB1B042901C18791644E76640AF6C36E41884CC3419",
"narrow-danmaku.min.js": "12475431A527EFF15100AF57C9C53D0603BC27723126D966CB01240917602253",
"new-styles.min.js": "3D7E8E25C5B5B6BD3F784BC05D403C35F0658E67197F878874A9554C2FF5127B",
"no-banner.min.css": "DA096F94E7FA26992F3F71245E704D69A1C222D0ADA6F1990FA5D948507CE15F",
@ -144,7 +144,7 @@
"tweets.min.css": "9015C1F165C91B9205ABBE4E8A3B5FA83DB1EB4B5CF2442846AF61E44FF178A8",
"v-checkbox.vue.min.js": "A23C35D5627009A29FD396A024442A19E37DEE70674BF3CE0FA377D781ED2231",
"v-dropdown.vue.min.js": "66C883695F6653412980050A23F7581557407A2859214BF0CAAEC7001D0B5DDB",
"video-card.vue.min.js": "3FA6F19BCA572D67374290798B43249A7D910DC5987FBC5972AB685763858164",
"video-card.vue.min.js": "E6FE8542E8910ED47A8D677533D213934682318A71A071BEF2BD4DFB7E01F33E",
"video-dash.min.js": "9679B5F7209065821A28D513695659E2B4C5401DCD13778245D6A7F25B8F0B63",
"video-info.min.js": "7234A74CA28A772A31E41BBD4925FC2B22C6701419ADFD511402C6A9D6D9E5FA",
"video-list.vue.min.js": "37E31C895C7D974AF32A08A943019EDFD1207B3492CAB087C75480782D9BBEF0",

Binary file not shown.

View File

@ -1 +1 @@
(()=>{return(i,o)=>{const a=`<div class=minimal-home><div class=minimal-home-header><img v-if=logoImage :src=logoImage width=120><icon v-else class=logo icon=logo type=main></icon><div class=home-tabs><div v-for="(tab, index) of tabs":key=index class=tab :class="{active: tab.active}":data-tab=tab.name @click=changeTab(tab)>{{tab.displayName}}</div></div></div><div class=minimal-home-content><transition name=minimal-home-content-transition mode=out-in><component :is=content :key=activeTab.name :show-rank=activeTab.showRank></component></transition></div><div class=minimal-home-footer><div class="footer-button view-more"@click=viewMore()><icon type=mdi icon=dots-horizontal-circle-outline></icon>查看更多</div><div class="footer-button go-to-top"@click=goToTop()><icon type=mdi icon=arrow-up-drop-circle-outline></icon>返回顶部</div></div></div>`;o.applyStyleFromText(`.minimal-home{--card-width:600px;--card-height:120px;--card-margin:16px;--card-column-count:2;transform:translateX(calc(var(--card-margin)/ 2))}.minimal-home,.minimal-home *{box-sizing:border-box;transition:color .2s ease-out,opacity .2s ease-out,transform .2s ease-out,background-color .2s ease-out}.minimal-home .logo{font-size:40px;color:var(--theme-color)}.minimal-home .minimal-home-header{display:flex;align-items:center;justify-content:space-between}.minimal-home .minimal-home-header .home-tabs{display:flex;flex-grow:1;justify-content:flex-end;margin-right:var(--card-margin)}.minimal-home .minimal-home-header .home-tabs .tab{color:#707070;opacity:.75;position:relative;cursor:pointer;margin-left:32px}body.dark .minimal-home .minimal-home-header .home-tabs .tab{color:#eee}.minimal-home .minimal-home-header .home-tabs .tab.active{transform:scale(1.2);opacity:1;font-weight:700}.minimal-home .minimal-home-header .home-tabs .tab::after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%) scaleX(0);height:3px;width:24px;background-color:var(--theme-color);border-radius:2px;transition:.2s ease-out}.minimal-home .minimal-home-header .home-tabs .tab.active::after{transform:translateX(-50%) scaleX(1)}.minimal-home .minimal-home-content{margin-top:32px;min-height:100vh;width:calc(var(--card-column-count) * (var(--card-width) + var(--card-margin)))}.minimal-home .minimal-home-content .minimal-home-content-transition-enter-active,.minimal-home .minimal-home-content .minimal-home-content-transition-leave-active{transition:.3s ease-out}.minimal-home .minimal-home-content .minimal-home-content-transition-enter,.minimal-home .minimal-home-content .minimal-home-content-transition-leave-to{opacity:0;transform:scale(.95)}.minimal-home .minimal-home-footer{padding:24px 0;display:flex;justify-content:space-around;align-items:center;margin-right:var(--card-margin)}.minimal-home .minimal-home-footer .footer-button{display:flex;align-items:center;padding:8px 12px 8px 8px;background-color:var(--theme-color-50);color:var(--foreground-color);border-radius:24px;font-size:11pt;cursor:pointer}.minimal-home .minimal-home-footer .footer-button .be-icon{margin-right:8px}.minimal-home .minimal-home-footer .footer-button:hover{background-color:var(--theme-color-60)}@media screen and (max-width:1300px){.minimal-home{--card-column-count:1}}@media screen and (min-width:2000px){.minimal-home{--card-column-count:3}.minimal-home .cards.show-rank .video-card:nth-child(16),.minimal-home .cards.show-rank .video-card:nth-child(24),.minimal-home .cards.show-rank .video-card:nth-child(8){margin-right:calc(var(--card-margin) * 2 + var(--card-width))}}`,"minimal-home-style");const e=[{name:"video",displayName:"视频动态",active:true,more:"https://t.bilibili.com/?tab=8",showRank:false},{name:"ranking",displayName:"热门视频",active:false,more:"https://www.bilibili.com/ranking",showRank:true}];return{export:Object.assign({template:a},{components:{Icon:()=>o.importAsync("icon.vue"),VideoList:()=>o.importAsync("video-list.vue")},data(){return{tabs:e,content:"VideoList",logoImage:null}},computed:{activeTab(){return this.tabs.find(i=>i.active)},rankDays(){return this.activeTab.rankDays||0}},async mounted(){if(i.minimalHomeSeasonLogo){const i=await Ajax.getJson("https://api.bilibili.com/x/web-show/res/locs?pf=0&ids=142");if(i.code!==0){return}this.logoImage=i.data[142][0].litpic}},methods:{changeTab(i){if(i.active){window.open(i.more,"_blank");return}const o=this.activeTab;o.active=false;i.active=true},goToTop(){scrollTo(0,0)},viewMore(){open(this.activeTab.more,"_blank")}}})}}})();
(()=>{return(i,o)=>{const a=`<div class=minimal-home><div class=minimal-home-header><img v-if=logoImage :src=logoImage width=120><icon v-else class=logo icon=logo type=main></icon><div class=home-tabs><div v-for="(tab, index) of tabs":key=index class=tab :class="{active: tab.active}":data-tab=tab.name @click=changeTab(tab)>{{tab.displayName}}</div></div></div><div class=minimal-home-content><transition name=minimal-home-content-transition mode=out-in><component :is=content :key=activeTab.name :show-rank=activeTab.showRank></component></transition></div><div class=minimal-home-footer><div class="footer-button view-more"@click=viewMore()><icon type=mdi icon=dots-horizontal-circle-outline></icon>查看更多</div><div class="footer-button go-to-top"@click=goToTop()><icon type=mdi icon=arrow-up-drop-circle-outline></icon>返回顶部</div></div></div>`;o.applyStyleFromText(`.minimal-home{--card-width:600px;--card-height:120px;--card-margin:16px;--card-column-count:2;transform:translateX(calc(var(--card-margin)/ 2))}.minimal-home,.minimal-home *{box-sizing:border-box;transition:color .2s ease-out,opacity .2s ease-out,transform .2s ease-out,background-color .2s ease-out}.minimal-home .logo{font-size:40px;color:var(--theme-color)}.minimal-home .minimal-home-header{display:flex;align-items:center;justify-content:space-between}.minimal-home .minimal-home-header .home-tabs{display:flex;flex-grow:1;justify-content:flex-end;margin-right:var(--card-margin)}.minimal-home .minimal-home-header .home-tabs .tab{color:#000;opacity:.75;position:relative;cursor:pointer;margin-left:32px}body.dark .minimal-home .minimal-home-header .home-tabs .tab{color:#eee}.minimal-home .minimal-home-header .home-tabs .tab.active{transform:scale(1.2);opacity:1;font-weight:700}.minimal-home .minimal-home-header .home-tabs .tab::after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%) scaleX(0);height:3px;width:24px;background-color:var(--theme-color);border-radius:2px;transition:.2s ease-out}.minimal-home .minimal-home-header .home-tabs .tab.active::after{transform:translateX(-50%) scaleX(1)}.minimal-home .minimal-home-content{margin-top:32px;min-height:100vh;width:calc(var(--card-column-count) * (var(--card-width) + var(--card-margin)))}.minimal-home .minimal-home-content .minimal-home-content-transition-enter-active,.minimal-home .minimal-home-content .minimal-home-content-transition-leave-active{transition:.3s ease-out}.minimal-home .minimal-home-content .minimal-home-content-transition-enter,.minimal-home .minimal-home-content .minimal-home-content-transition-leave-to{opacity:0;transform:scale(.95)}.minimal-home .minimal-home-footer{padding:24px 0;display:flex;justify-content:space-around;align-items:center;margin-right:var(--card-margin)}.minimal-home .minimal-home-footer .footer-button{display:flex;align-items:center;padding:8px 12px 8px 8px;background-color:var(--theme-color-80);color:var(--foreground-color);border-radius:24px;font-size:11pt;cursor:pointer}.minimal-home .minimal-home-footer .footer-button .be-icon{margin-right:8px}.minimal-home .minimal-home-footer .footer-button:hover{background-color:var(--theme-color)}@media screen and (max-width:1300px){.minimal-home{--card-column-count:1}}@media screen and (min-width:2000px){.minimal-home{--card-column-count:3}.minimal-home .cards.show-rank .video-card:nth-child(16),.minimal-home .cards.show-rank .video-card:nth-child(24),.minimal-home .cards.show-rank .video-card:nth-child(8){margin-right:calc(var(--card-margin) * 2 + var(--card-width))}}`,"minimal-home-style");const e=[{name:"video",displayName:"视频动态",active:true,more:"https://t.bilibili.com/?tab=8",showRank:false},{name:"ranking",displayName:"热门视频",active:false,more:"https://www.bilibili.com/ranking",showRank:true}];return{export:Object.assign({template:a},{components:{Icon:()=>o.importAsync("icon.vue"),VideoList:()=>o.importAsync("video-list.vue")},data(){return{tabs:e,content:"VideoList",logoImage:null}},computed:{activeTab(){return this.tabs.find(i=>i.active)},rankDays(){return this.activeTab.rankDays||0}},async mounted(){if(i.minimalHomeSeasonLogo){const i=await Ajax.getJson("https://api.bilibili.com/x/web-show/res/locs?pf=0&ids=142");if(i.code!==0){return}this.logoImage=i.data[142][0].litpic}},methods:{changeTab(i){if(i.active){window.open(i.more,"_blank");return}const o=this.activeTab;o.active=false;i.active=true},goToTop(){scrollTo(0,0)},viewMore(){open(this.activeTab.more,"_blank")}}})}}})();

File diff suppressed because one or more lines are too long

View File

@ -134,7 +134,7 @@ export default {
justify-content: flex-end;
margin-right: var(--card-margin);
.tab {
color: #707070;
color: black;
opacity: 0.75;
position: relative;
cursor: pointer;
@ -194,7 +194,7 @@ export default {
display: flex;
align-items: center;
padding: 8px 12px 8px 8px;
background-color: var(--theme-color-50);
background-color: var(--theme-color-80);
color: var(--foreground-color);
border-radius: 24px;
font-size: 11pt;
@ -203,7 +203,7 @@ export default {
margin-right: 8px;
}
&:hover {
background-color: var(--theme-color-60);
background-color: var(--theme-color);
}
}
}

View File

@ -18,7 +18,7 @@
:href="'https://t.bilibili.com/topic/name/' + topic.name + '/feed'"
>#{{topic.name}}#</a>
</div>
<pre class="description single-line" :title="description" v-else>{{description}}</pre>
<p class="description" :title="description" v-else>{{description}}</p>
<a
class="up"
:class="{'no-face': !upFaceUrl}"
@ -117,7 +117,7 @@ export default {
.video-card {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 3fr 2fr 3fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'cover title'
'cover description'
@ -131,9 +131,13 @@ export default {
margin-bottom: var(--card-margin);
position: relative;
body.dark & {
body.dark &,
body.dark &:hover {
background-color: #282828;
color: white;
color: #eee;
}
&:hover {
color: black;
}
& > * {
justify-self: self-start;
@ -205,21 +209,32 @@ export default {
margin-left: 12px;
.topic {
color: inherit;
padding: 4px 8px;
padding: 6px 8px;
background-color: #8882;
margin-right: 8px;
border-radius: 14px;
white-space: nowrap;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background-color: #8884;
color: var(--theme-color);
}
}
}
.description {
grid-area: description;
color: inherit;
overflow: auto;
overflow: hidden;
align-self: stretch;
justify-self: stretch;
margin: 0 12px;
white-space: pre-wrap;
line-height: 1.5;
height: 3em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
scrollbar-width: none !important;
&::-webkit-scrollbar {
@ -257,8 +272,11 @@ export default {
.name {
margin: 0 8px;
}
&:hover .name {
color: var(--theme-color);
&:hover {
background-color: #8884;
.name {
color: var(--theme-color);
}
}
}
.stats {