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 #custom-navbar-home-popup
{ {
max-height: 75vh; max-height: 80vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
@ -171,11 +171,30 @@
{ {
display: flex; display: flex;
justify-content: space-between; 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 #custom-navbar-home-popup .category-item .popup
{ {
z-index: 10002; z-index: 10002;
width: max-content; width: max-content;
transform: none;
left: 100%;
top: 0;
} }
#custom-navbar-home-popup .category-item .popup a, #custom-navbar-home-popup .category-item .popup a,
#upload-actions 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.requestedPopup = true;
this.popupHtml = /*html*/` this.popupHtml = /*html*/`
<ul id="custom-navbar-home-popup"> <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"> <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> </a>
<div class="popup" v-if="item[1].subRegions"> <div class="popup" v-if="item[1].subRegions">
<a v-for="region of Object.entries(item[1].subRegions)" v-bind:href="region[1]"> <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"); await SpinQuery.select("#custom-navbar-home-popup");
return { return {
动画: { 动画: {
icon: "douga",
count: regionCount[1], link: `https://www.bilibili.com/v/douga/`, count: regionCount[1], link: `https://www.bilibili.com/v/douga/`,
subRegions: { subRegions: {
"MAD·AMV": `https://www.bilibili.com/v/douga/mad/`, "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/`, count: regionCount[13], link: `https://www.bilibili.com/anime/`,
subRegions: { subRegions: {
"连载动画": `https://www.bilibili.com/v/anime/serial/`, "连载动画": `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/`, count: regionCount[167], link: `https://www.bilibili.com/guochuang/`,
subRegions: { subRegions: {
"国产动画": `https://www.bilibili.com/v/guochuang/chinese/`, "国产动画": `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/`, count: regionCount[3], link: `https://www.bilibili.com/v/music/`,
subRegions: { subRegions: {
"原创音乐": "https://www.bilibili.com/v/music/original/", "原创音乐": "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/" }, 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/" }, 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[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/" }, 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[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/" }, }, 时尚: { 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/" }, },
广告: { count: regionCount[165], link: `https://www.bilibili.com/v/ad/ad/`, }, 广告: { 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/" }, 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[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/" }, }, 放映厅: { 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/" }, },
专栏: { count: ``, link: `https://www.bilibili.com/read/home`, }, 专栏: { 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://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/`, }, 小黑屋: { icon: "blackroom", count: ``, link: `https://www.bilibili.com/blackroom/`, },
话题: { count: ``, link: `https://www.bilibili.com/blackboard/topic_list.html`, }, 话题: { icon: "topic", count: ``, link: `https://www.bilibili.com/blackboard/topic_list.html`, },
活动: { count: ``, link: `https://www.bilibili.com/blackboard/x/act_list`, }, 活动: { icon: "activit", count: ``, link: `https://www.bilibili.com/blackboard/x/act_list`, },
}; };
} }
} }