Mirrors/tachiyomi-website
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/website.git synced 2024-12-21 23:51:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix side navigation padding outside Help (#204)

Browse Source 
* Only apply Help.vue style to the Help page

* Linting
This commit is contained in:
Soitora 2020-05-16 15:38:40 +02:00 committed by GitHub
parent 9e716b406a
commit 126ec8a287
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 215 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

425
src/.vuepress/components/Help.vue
View File

@ -22,7 +22,10 @@
:href="helpItem.link" :href="helpItem.link"
tabindex="1" tabindex="1"
> >
<div class="card" :class="'card__' + helpItem.title"> <div
class="card"
:class="'card__' + helpItem.title"
>
<header v-if="helpItem.faqApp"> <header v-if="helpItem.faqApp">
<CellphoneAndroidIcon /> <CellphoneAndroidIcon />
<h3>{{ helpItem.title }}</h3> <h3>{{ helpItem.title }}</h3>
@ -60,7 +63,10 @@
rel="noreferrer" rel="noreferrer"
tabindex="1" tabindex="1"
> >
<div class="card" :class="'card__' + helpItem.title"> <div
class="card"
:class="'card__' + helpItem.title"
>
<header v-if="helpItem.discord"> <header v-if="helpItem.discord">
<DiscordIcon /> <DiscordIcon />
<span> <span>
@ -125,7 +131,7 @@ export default {
DiscordIcon, DiscordIcon,
RedditIcon, RedditIcon,
GithubIcon, GithubIcon,
LifebuoyIcon LifebuoyIcon,
}, },
computed: { computed: {
@ -145,217 +151,216 @@ export default {
return ( return (
this.algolia && this.algolia.apiKey && this.algolia.indexName this.algolia && this.algolia.apiKey && this.algolia.indexName
); );
} },
} },
}; };
</script> </script>
<style lang="stylus"> <style lang="stylus">
.page .help-page
padding-left 0 !important .page
padding-bottom 2rem padding-left 0 !important
display block padding-bottom 2rem
display block
.theme-custom-content .theme-custom-content
max-width 75rem max-width 75rem
margin 0 auto margin 0 auto
padding 2rem 2.5rem padding 2rem 2.5rem
* *
box-sizing border-box box-sizing border-box
h1 h1
text-align center text-align center
.header-anchor .header-anchor
display none display none
h3 h3
.header-anchor .header-anchor
display none display none
.content__center .content__center
text-align center text-align center
margin-bottom 2rem margin-bottom 2rem
.algolia-search-wrapper .algolia-search-wrapper
width 100% width 100%
text-align center text-align center
margin-bottom 5rem margin-bottom 5rem
.algolia-autocomplete .algolia-autocomplete
width 50% width 50%
input input
background #ffffff url('/assets/img/search.83621669.svg') 0.6rem 0.9rem no-repeat background #ffffff url('/assets/img/search.83621669.svg') 0.6rem 0.9rem no-repeat
background-size 1rem background-size 1rem
box-shadow 0 0 30px rgba(177,174,174,0.322) box-shadow 0 0 30px rgba(177, 174, 174, 0.322)
border 1px solid #cfd4db border 1px solid #cfd4db
font-size 1.2rem font-size 1.2rem
height 3rem height 3rem
width 100% width 100%
.card .card
background-color white background-color white
border-bottom 1px solid transparent border-bottom 1px solid transparent
border-radius 6px border-radius 6px
box-shadow 0 0 30px #b1aeae52 box-shadow 0 0 30px #b1aeae52
color $accentColor color $accentColor
height 100% height 100%
overflow hidden overflow hidden
padding 0.5rem padding 0.5rem
text-align center text-align center
user-select none user-select none
width auto width auto
header header
margin-top 1.25rem margin-top 1.25rem
white-space nowrap white-space nowrap
.material-icons, .material-icons,
.material-design-icon .material-design-icon
display contents display contents
font-size 2.5em font-size 2.5em
color $accentColorSecondary color $accentColorSecondary
.material-design-icon > .material-design-icon__svg .material-design-icon > .material-design-icon__svg
position relative position relative
span span
display block display block
.icon.outbound .icon.outbound
display inline-block display inline-block
visibility hidden visibility hidden
vertical-align baseline vertical-align baseline
right 10px right 10px
h3 h3
display inline-block display inline-block
margin-left 1.8rem margin-left 1.8rem
margin-bottom 0px margin-bottom 0
h3 h3
margin 10px margin 10px
p p
color #566573 color #566573
font-weight 400 font-weight 400
font-size 0.95rem font-size 0.95rem
&:hover &:hover
border-bottom 2px solid $accentColor border-bottom 2px solid $accentColor
border-bottom-left-radius 0px border-bottom-left-radius 0
border-bottom-right-radius 0px border-bottom-right-radius 0
position relative position relative
.material-design-icon .material-design-icon
color $accentColor color $accentColor
&.discord-icon &.discord-icon
color $discordAccentColor color $discordAccentColor
&.reddit-icon &.reddit-icon
color $redditAccentColor color $redditAccentColor
&.github-icon &.github-icon
color $githubAccentColor color $githubAccentColor
.icon.outbound .icon.outbound
visibility visible visibility visible
&__Discord:hover &__Discord:hover
border-bottom 2px solid $discordAccentColor border-bottom 2px solid $discordAccentColor
h3 h3
color $discordAccentColor color $discordAccentColor
&__Reddit:hover &__Reddit:hover
border-bottom 2px solid $redditAccentColor border-bottom 2px solid $redditAccentColor
h3 h3
color $redditAccentColor color $redditAccentColor
&__GitHub:hover &__GitHub:hover
border-bottom 2px solid $githubAccentColor border-bottom 2px solid $githubAccentColor
h3 h3
color $githubAccentColor color $githubAccentColor
.column
.column border 1px solid #cfd4db
border 1px solid #cfd4db border-radius 6px
border-radius 6px &:hover
&:hover border-bottom none
border-bottom none a:focus
a:focus box-shadow none
box-shadow none outline none
outline none .card
.card box-shadow 0 0 30px #b1aeae52, 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4)
box-shadow 0 0 30px #b1aeae52, 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4) outline none
outline none .row
display grid
.row grid-template-columns repeat(4, 1fr)
display grid grid-auto-rows 1fr
grid-template-columns repeat(4, 1fr); grid-gap 1rem
grid-auto-rows: 1fr; &:after
grid-gap 1rem content ''
&:after display table
content '' clear both
display table
clear both
@media screen and (max-width $MQMobile) @media screen and (max-width $MQMobile)
.theme-custom-content .help-page
padding 2rem 0.75rem .page
padding-bottom 0 .theme-custom-content
h1 padding 2rem 0.75rem
margin-bottom 0.5rem padding-bottom 0
.content__center h1
margin-top 0 margin-bottom 0.5rem
padding-top 0 .content__center
.algolia-search-wrapper margin-top 0
width 100% padding-top 0
margin-bottom 1rem .algolia-search-wrapper
.algolia-autocomplete width 100%
width 100% margin-bottom 1rem
padding 0.4rem 0.65rem .algolia-autocomplete
input width 100%
width 100% padding 0.4rem 0.65rem
left 0 input
.column width 100%
margin 0.4rem 0.6rem left 0
.card .column
height auto margin 0.4rem 0.6rem
width auto .card
header height auto
margin-top 1rem width auto
.material-icons, header
.material-design-icon margin-top 1rem
font-size 1.6em .material-icons,
&.discord-icon .material-design-icon
color $discordAccentColor font-size 1.6em
&.reddit-icon &.discord-icon
color $redditAccentColor color $discordAccentColor
&.github-icon &.reddit-icon
color $githubAccentColor color $redditAccentColor
span &.github-icon
display inline-block color $githubAccentColor
.icon.outbound span
visibility visible display inline-block
right 0 .icon.outbound
top -4px visibility visible
h3 right 0
margin-left 0px top -4px
margin-bottom 0px h3
h3 margin-left 0
font-size 1.5rem margin-bottom 0
display inline-block h3
margin 0 font-size 1.5rem
p display inline-block
font-size 1rem margin 0
&:hover p
border-bottom 2px solid #cfd4db font-size 1rem
border-bottom-left-radius 6px &:hover
border-bottom-right-radius 6px border-bottom 2px solid #cfd4db
position inherit border-bottom-left-radius 6px
top unset border-bottom-right-radius 6px
.material-design-icon position inherit
color $accentColorSecondary top unset
&__Discord .material-design-icon
h3 color $accentColorSecondary
color $discordAccentColor &__Discord
&__Reddit h3
h3 color $discordAccentColor
color $redditAccentColor &__Reddit
&__GitHub h3
h3 color $redditAccentColor
color $githubAccentColor &__GitHub
.row h3
grid-template-columns repeat(1, 1fr); color $githubAccentColor
.row
.help-page grid-template-columns repeat(1, 1fr)
.navbar .navbar
padding-left 1rem padding-left 1rem
.logo .logo
margin-right 0 margin-right 0
.can-hide .can-hide
display block display block
.sidebar-button .sidebar-button
display none display none
.site-name.can-hide .site-name.can-hide
display none display none
.nav-links.can-hide .nav-links.can-hide
.nav-item, .repo-link .nav-item,
padding-left 0.8em .repo-link
padding-left 0.8em
</style> </style>