Improve custom navbar

This commit is contained in:
the1812 2019-04-24 21:00:33 +08:00
parent 9e6b4b983f
commit 60d695e86a
8 changed files with 365 additions and 22 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

Before

Width:  |  Height:  |  Size: 602 B

After

Width:  |  Height:  |  Size: 45 KiB

File diff suppressed because one or more lines are too long

View File

@ -150,7 +150,7 @@
#custom-navbar-home-popup
{
max-height: 75vh;
max-height: 80vh;
display: flex;
flex-direction: column;
flex-wrap: wrap;
@ -171,11 +171,30 @@
{
display: flex;
justify-content: space-between;
align-items: center;
}
#custom-navbar-home-popup .category-item svg
{
width: 25px;
height: 25px;
fill: currentColor;
margin-right: 10px;
}
#custom-navbar-home-popup .category-item div
{
flex: 1 0 auto;
}
#custom-navbar-home-popup .category-item.main
{
min-width: 150px;
}
#custom-navbar-home-popup .category-item .popup
{
z-index: 10002;
width: max-content;
transform: none;
left: 100%;
top: 0;
}
#custom-navbar-home-popup .category-item .popup a,
#upload-actions a

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 788 B

After

Width:  |  Height:  |  Size: 48 KiB

View File

@ -103,9 +103,13 @@ class Category extends NavbarComponent
this.requestedPopup = true;
this.popupHtml = /*html*/`
<ul id="custom-navbar-home-popup">
<li class="category-item" v-for="item of info">
<li class="category-item" v-for="item of info" v-bind:class="{ main: item[1].count }">
<a v-bind:href="item[1].link">
{{item[0]}}<span>{{item[1].count}}</span>
<svg aria-hidden="true">
<use v-bind:href="'#header-icon-' + item[1].icon" v-bind:xlink:href="'#header-icon-' + item[1].icon"></use>
</svg>
<div>{{item[0]}}</div>
<span>{{item[1].count}}</span>
</a>
<div class="popup" v-if="item[1].subRegions">
<a v-for="region of Object.entries(item[1].subRegions)" v-bind:href="region[1]">
@ -136,6 +140,7 @@ class Category extends NavbarComponent
await SpinQuery.select("#custom-navbar-home-popup");
return {
动画: {
icon: "douga",
count: regionCount[1], link: `https://www.bilibili.com/v/douga/`,
subRegions: {
"MAD·AMV": `https://www.bilibili.com/v/douga/mad/`,
@ -145,6 +150,7 @@ class Category extends NavbarComponent
},
},
番剧: {
icon: "anime",
count: regionCount[13], link: `https://www.bilibili.com/anime/`,
subRegions: {
"连载动画": `https://www.bilibili.com/v/anime/serial/`,
@ -155,6 +161,7 @@ class Category extends NavbarComponent
},
},
国创: {
icon: "guochuang",
count: regionCount[167], link: `https://www.bilibili.com/guochuang/`,
subRegions: {
"国产动画": `https://www.bilibili.com/v/guochuang/chinese/`,
@ -166,6 +173,7 @@ class Category extends NavbarComponent
},
},
音乐: {
icon: "music",
count: regionCount[3], link: `https://www.bilibili.com/v/music/`,
subRegions: {
"原创音乐": "https://www.bilibili.com/v/music/original/",
@ -180,37 +188,45 @@ class Category extends NavbarComponent
},
},
舞蹈: {
icon: "dance",
count: regionCount[129], link: `https://www.bilibili.com/v/dance/`, subRegions: { "宅舞": "https://www.bilibili.com/v/dance/otaku/", "三次元舞蹈": "https://www.bilibili.com/v/dance/three_d/", "舞蹈教程": "https://www.bilibili.com/v/dance/demo/" },
},
游戏: {
icon: "game",
count: regionCount[4], link: `https://www.bilibili.com/v/game/`, subRegions: { "单机游戏": "https://www.bilibili.com/v/game/stand_alone/", "电子竞技": "https://www.bilibili.com/v/game/esports/", "手机游戏": "https://www.bilibili.com/v/game/mobile/", "网络游戏": "https://www.bilibili.com/v/game/online/", "桌游棋牌": "https://www.bilibili.com/v/game/board/", "GMV": "https://www.bilibili.com/v/game/gmv/", "音游": "https://www.bilibili.com/v/game/music/", "Mugen": "https://www.bilibili.com/v/game/mugen/", "游戏赛事": "https://www.bilibili.com/v/game/match/" },
},
科技: {
icon: "technology",
count: regionCount[36], link: `https://www.bilibili.com/v/technology/`, subRegions: { "趣味科普人文": "https://www.bilibili.com/v/technology/fun/", "野生技术协会": "https://www.bilibili.com/v/technology/wild/", "演讲·公开课": "https://www.bilibili.com/v/technology/speech_course/", "星海": "https://www.bilibili.com/v/technology/military/", "机械": "https://www.bilibili.com/v/technology/mechanical/", "汽车": "https://www.bilibili.com/v/technology/automobile/" },
},
数码: { count: regionCount[188], link: `https://www.bilibili.com/v/digital/`, subRegions: { "手机平板": "https://www.bilibili.com/v/digital/mobile/", "电脑装机": "https://www.bilibili.com/v/digital/pc/", "摄影摄像": "https://www.bilibili.com/v/digital/photography/", "影音智能": "https://www.bilibili.com/v/digital/intelligence_av/" }, },
数码: { icon: "digital", count: regionCount[188], link: `https://www.bilibili.com/v/digital/`, subRegions: { "手机平板": "https://www.bilibili.com/v/digital/mobile/", "电脑装机": "https://www.bilibili.com/v/digital/pc/", "摄影摄像": "https://www.bilibili.com/v/digital/photography/", "影音智能": "https://www.bilibili.com/v/digital/intelligence_av/" }, },
生活: {
icon: "life",
count: regionCount[160], link: `https://www.bilibili.com/v/life/`, subRegions: { "搞笑": "https://www.bilibili.com/v/life/funny/", "日常": "https://www.bilibili.com/v/life/daily/", "美食圈": "https://www.bilibili.com/v/life/food/", "动物圈": "https://www.bilibili.com/v/life/animal/", "手工": "https://www.bilibili.com/v/life/handmake/", "绘画": "https://www.bilibili.com/v/life/painting/", "运动": "https://www.bilibili.com/v/life/sports/", "其他": "https://www.bilibili.com/v/life/other/" },
},
鬼畜: {
icon: "kichiku",
count: regionCount[119], link: `https://www.bilibili.com/v/kichiku/`, subRegions: { "鬼畜调教": "https://www.bilibili.com/v/kichiku/guide/", "音MAD": "https://www.bilibili.com/v/kichiku/mad/", "人力VOCALOID": "https://www.bilibili.com/v/kichiku/manual_vocaloid/", "教程演示": "https://www.bilibili.com/v/kichiku/course/" },
},
时尚: { count: regionCount[155], link: `https://www.bilibili.com/v/fashion/`, subRegions: { "美妆": "https://www.bilibili.com/v/fashion/makeup/", "服饰": "https://www.bilibili.com/v/fashion/clothing/", "健身": "https://www.bilibili.com/v/fashion/aerobics/", "T台": "https://www.bilibili.com/v/fashion/catwalk/", "风尚标": "https://www.bilibili.com/v/fashion/trends/" }, },
广告: { count: regionCount[165], link: `https://www.bilibili.com/v/ad/ad/`, },
时尚: { icon: "fashion", count: regionCount[155], link: `https://www.bilibili.com/v/fashion/`, subRegions: { "美妆": "https://www.bilibili.com/v/fashion/makeup/", "服饰": "https://www.bilibili.com/v/fashion/clothing/", "健身": "https://www.bilibili.com/v/fashion/aerobics/", "T台": "https://www.bilibili.com/v/fashion/catwalk/", "风尚标": "https://www.bilibili.com/v/fashion/trends/" }, },
广告: { icon: "ad", count: regionCount[165], link: `https://www.bilibili.com/v/ad/ad/`, },
娱乐: {
icon: "ent",
count: regionCount[5], link: `https://www.bilibili.com/v/ent/`, subRegions: { "综艺": "https://www.bilibili.com/v/ent/variety/", "明星": "https://www.bilibili.com/v/ent/star/", "Korea相关": "https://www.bilibili.com/v/ent/korea/" },
},
影视: {
icon: "cinephile",
count: regionCount[181], link: `https://www.bilibili.com/v/cinephile/`, subRegions: { "影视杂谈": "https://www.bilibili.com/v/cinephile/cinecism/", "影视剪辑": "https://www.bilibili.com/v/cinephile/montage/", "短片": "https://www.bilibili.com/v/cinephile/shortfilm/", "预告·资讯": "https://www.bilibili.com/v/cinephile/trailer_info/", "特摄": "https://www.bilibili.com/v/cinephile/tokusatsu/" },
},
放映厅: { count: regionCount[177] + regionCount[23] + regionCount[11], link: `https://www.bilibili.com/cinema/`, subRegions: { "纪录片": "https://www.bilibili.com/documentary/", "电影": "https://www.bilibili.com/movie/", "电视剧": "https://www.bilibili.com/tv/" }, },
专栏: { count: ``, link: `https://www.bilibili.com/read/home`, },
放映厅: { icon: "cinema", count: regionCount[177] + regionCount[23] + regionCount[11], link: `https://www.bilibili.com/cinema/`, subRegions: { "纪录片": "https://www.bilibili.com/documentary/", "电影": "https://www.bilibili.com/movie/", "电视剧": "https://www.bilibili.com/tv/" }, },
专栏: { icon: "read", count: ``, link: `https://www.bilibili.com/read/home`, },
直播: {
icon: "zhibo",
count: ``, link: `https://live.bilibili.com`, subRegions: { "全部直播": "https://live.bilibili.com/all?visit_id=5icxsa0kmts0", "游戏直播": "https://live.bilibili.com/p/eden/area-tags?parentAreaId=2&areaId=0&visit_id=5icxsa0kmts0#/2/0", "手游直播": "https://live.bilibili.com/p/eden/area-tags?parentAreaId=3&areaId=0&visit_id=5icxsa0kmts0#/3/0", "娱乐直播": "https://live.bilibili.com/p/eden/area-tags?parentAreaId=1&areaId=0&visit_id=5icxsa0kmts0#/1/0", "电台直播": "https://live.bilibili.com/p/eden/area-tags?parentAreaId=5&areaId=0&visit_id=5icxsa0kmts0#/5/0", "绘画直播": "https://live.bilibili.com/p/eden/area-tags?parentAreaId=4&areaId=0&visit_id=5icxsa0kmts0#/4/0" },
},
小黑屋: { count: ``, link: `https://www.bilibili.com/blackroom/`, },
话题: { count: ``, link: `https://www.bilibili.com/blackboard/topic_list.html`, },
活动: { count: ``, link: `https://www.bilibili.com/blackboard/x/act_list`, },
小黑屋: { icon: "blackroom", count: ``, link: `https://www.bilibili.com/blackroom/`, },
话题: { icon: "topic", count: ``, link: `https://www.bilibili.com/blackboard/topic_list.html`, },
活动: { icon: "activit", count: ``, link: `https://www.bilibili.com/blackboard/x/act_list`, },
};
}
}