krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-10-29 20:24:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Footer Design / Instagram Link (#11022)

Browse Source 
* re-add instagram icon+link

* fix donate button hover - smaller icons if not desktop

* lower margin on the small icons

* Update appFooter.vue

remove DevBlog link from footer
This commit is contained in:
negue
2019-03-03 17:22:55 +01:00
committed by Matteo Pagliazzi
parent 3ebd37f7cb
commit ceb4288b17
2 changed files with 44 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
website/client/components/appFooter.vue
View File

@@ -43,6 +43,8 @@
li(v-html='$t("communityForum")')
li
a(href='https://www.facebook.com/Habitica', target='_blank') {{ $t('communityFacebook') }}
li
a(href='https://www.instagram.com/habitica', target='_blank') {{ $t('communityInstagram') }}
li
a(href='https://www.reddit.com/r/habitrpg/', target='_blank') {{ $t('communityReddit') }}
.col-12.col-md-6
@@ -56,23 +58,22 @@
a(:href="getDataDisplayToolUrl", target='_blank') {{ $t('dataDisplayTool') }}
li
a(href='http://habitica.fandom.com/wiki/Guidance_for_Blacksmiths', target='_blank') {{ $t('guidanceForBlacksmiths') }}
li
a(href='http://devs.habitica.com/', target='_blank') {{ $t('devBlog') }}
.col-6.social
h3 {{ $t('footerSocial') }}
a.social-circle(href='https://twitter.com/habitica', target='_blank')
.social-icon.svg-icon(v-html='icons.twitter')
// TODO: Not ready yet. a.social-circle(href='https://www.instagram.com/habitica/', target='_blank')
.social-icon.svg-icon.instagram(v-html='icons.instagram')
a.social-circle(href='https://www.facebook.com/Habitica', target='_blank')
.social-icon.facebook.svg-icon(v-html='icons.facebook')
.icons
a.social-circle(href='https://twitter.com/habitica', target='_blank')
.social-icon.svg-icon(v-html='icons.twitter')
a.social-circle(href='https://www.instagram.com/habitica/', target='_blank')
.social-icon.svg-icon.instagram(v-html='icons.instagram')
a.social-circle(href='https://www.facebook.com/Habitica', target='_blank')
.social-icon.facebook.svg-icon(v-html='icons.facebook')
.row
.col-12.col-md-8 {{ $t('donateText3') }}
.col-12.col-md-4
button.btn.btn-contribute(@click="donate()", v-if="user")
button.btn.btn-contribute.btn-flat(@click="donate()", v-if="user")
.svg-icon.heart(v-html="icons.heart")
.text {{ $t('companyDonate') }}
.btn.btn-contribute(v-else)
.btn.btn-contribute.btn-flat(v-else)
a(href='http://habitica.fandom.com/wiki/Contributing_to_Habitica', target='_blank')
.svg-icon.heart(v-html="icons.heart")
.text {{ $t('companyContribute') }}
@@ -145,6 +146,22 @@
}
}
.icons {
display: flex;
justify-content: flex-end;
flex-shrink: 1;
}
// smaller than desktop
@media only screen and (max-width: 992px) {
.social-circle {
height: 32px !important;
width: 32px !important;
margin-left: 0.75em !important;
}
}
.social-circle {
width: 40px;
height: 40px;
@@ -152,17 +169,20 @@
background-color: #c3c0c7;
display: flex;
margin-left: 1em;
float: right;
&:first-child {
margin-left: 0;
}
&:hover {
background-color: #a5a1ac;
}
.social-icon {
color: #e1e0e3;
width: 16px;
margin: auto;
}
.instagram {
margin-top: .85em;
}
}
.logo {
@@ -185,6 +205,14 @@
box-shadow: none;
border-radius: 4px;
&:hover {
background: #a5a1ac;
.text {
color: white;
}
}
a {
display: flex;
}

1
website/common/locales/en/front.json
View File

@@ -23,6 +23,7 @@
"communityBug": "Submit Bug",
"communityExtensions": "<a href='http://habitica.fandom.com/wiki/Extensions,_Add-Ons,_and_Customizations' target='_blank'>Add-ons & Extensions</a>",
"communityFacebook": "Facebook",
"communityInstagram": "Instagram",
"communityFeature": "Request Feature",
"communityForum": "<a target='_blank' href='http://habitica.fandom.com/wiki/Special:Forum'>Forum</a>",
"communityKickstarter": "Kickstarter",