Change how items are displayed on /help/ for desktop and mobile (#192)

* Ignore folder 'theme_eject'

* Enhanced hover effects for /help/

* Prevent hover effect for mobile

* Change hover effects

* Fix mobile hover border radius
This commit is contained in:
Soitora 2020-05-14 15:04:02 +02:00 committed by GitHub
parent 3cd12d8b61
commit ecc7d43fa0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 87 additions and 7 deletions

View File

@ -22,7 +22,7 @@
:href="helpItem.link" :href="helpItem.link"
tabindex="1" tabindex="1"
> >
<div class="card"> <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,18 +60,27 @@
rel="noreferrer" rel="noreferrer"
tabindex="1" tabindex="1"
> >
<div class="card"> <div class="card" :class="'card__' + helpItem.title">
<header v-if="helpItem.discord"> <header v-if="helpItem.discord">
<DiscordIcon /> <DiscordIcon />
<span>
<h3>{{ helpItem.title }}</h3> <h3>{{ helpItem.title }}</h3>
<OutboundLink />
</span>
</header> </header>
<header v-else-if="helpItem.reddit"> <header v-else-if="helpItem.reddit">
<RedditIcon /> <RedditIcon />
<span>
<h3>{{ helpItem.title }}</h3> <h3>{{ helpItem.title }}</h3>
<OutboundLink />
</span>
</header> </header>
<header v-else-if="helpItem.github"> <header v-else-if="helpItem.github">
<GithubIcon /> <GithubIcon />
<span>
<h3>{{ helpItem.title }}</h3> <h3>{{ helpItem.title }}</h3>
<OutboundLink />
</span>
</header> </header>
<header v-else-if="helpItem.icon"> <header v-else-if="helpItem.icon">
<MaterialIcon <MaterialIcon
@ -194,10 +203,22 @@ export default {
white-space nowrap white-space nowrap
.material-icons, .material-icons,
.material-design-icon .material-design-icon
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
display block
.icon.outbound
display inline-block
visibility hidden
vertical-align baseline
right 10px
h3
display inline-block
margin-left 1.8rem
margin-bottom 0px
h3 h3
margin 10px margin 10px
p p
@ -205,8 +226,33 @@ export default {
font-weight 400 font-weight 400
font-size 0.95rem font-size 0.95rem
&:hover &:hover
border-bottom 2px solid $accentColor
border-bottom-left-radius 0px
border-bottom-right-radius 0px
position relative position relative
top -5px .material-design-icon
color $accentColor
&.discord-icon
color $discordAccentColor
&.reddit-icon
color $redditAccentColor
&.github-icon
color $githubAccentColor
.icon.outbound
visibility visible
&__Discord:hover
border-bottom 2px solid $discordAccentColor
h3
color $discordAccentColor
&__Reddit:hover
border-bottom 2px solid $redditAccentColor
h3
color $redditAccentColor
&__GitHub:hover
border-bottom 2px solid $githubAccentColor
h3
color $githubAccentColor
.column .column
float left float left
padding 0.5rem padding 0.5rem
@ -217,6 +263,7 @@ export default {
.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 .row
margin 0 -5px margin 0 -5px
&:after &:after
@ -256,6 +303,21 @@ export default {
.material-icons, .material-icons,
.material-design-icon .material-design-icon
font-size 1.6em font-size 1.6em
&.discord-icon
color $discordAccentColor
&.reddit-icon
color $redditAccentColor
&.github-icon
color $githubAccentColor
span
display inline-block
.icon.outbound
visibility visible
right 0
top -4px
h3
margin-left 0px
margin-bottom 0px
h3 h3
font-size 1.5rem font-size 1.5rem
display inline-block display inline-block
@ -263,6 +325,20 @@ export default {
p p
font-size 1rem font-size 1rem
&:hover &:hover
border-bottom 1px solid #cfd4db
border-bottom-left-radius 6px
border-bottom-right-radius 6px
position inherit position inherit
top unset top unset
.material-design-icon
color $accentColorSecondary
&__Discord
h3
color $discordAccentColor
&__Reddit
h3
color $redditAccentColor
&__GitHub
h3
color $githubAccentColor
</style> </style>

View File

@ -30,3 +30,7 @@ $nekoAccentColor = #3DDA83
$j2kAccentColor = $accentColor $j2kAccentColor = $accentColor
$azAccentColor = #FFCC4D $azAccentColor = #FFCC4D
$ehAccentColor = $accentColor $ehAccentColor = $accentColor
// Links
$discordAccentColor = #7289DA
$redditAccentColor = #FF5700
$githubAccentColor = #333333