Site Footer Update (#14134)

* first pass

* second pass

* third pass

* fourth pass, not a lot of progress

* fifth pass, slowly gettin there

* breakpoint nonsense

* flexbox and breakpoint nonsense

* svg updates, css updates

* whitespace

* chore: merge upstream/develop

* style(breakpoints): added responsive breakpoints, social column alignment tweaks

* style(breakpoints): add xs-specific selectors and classes

* style: mobile footer

* style: mobile footer

* style: static landing page footer

* style: small tweaks to social layout

* fix(translations): update website/common/locales/de/gear.json to develop

* update(style): small updates

* update(style): cleaning up code

* update(style): cleaning up code

* update(style): mobile footer updates

* update(style): complete mobile footer & clean up code

* update(style): add tablet breakpoint and remove rogue terms link
This commit is contained in:
Natalie L
2022-09-14 17:35:24 -04:00
committed by GitHub
parent 6b0b393e32
commit 9a896470d5
9 changed files with 817 additions and 437 deletions

View File

@@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
<path fill-rule="evenodd" d="M7.145 8.006H4.903V16H1.58V8.006H0V5.182h1.58V3.354C1.58 2.045 2.202 0 4.933 0l2.461.01v2.742H5.608c-.291 0-.705.145-.705.77v1.66h2.533l-.291 2.824z"/>
<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M20,0H4C1.79,0,0,1.79,0,4V20c0,2.21,1.79,4,4,4H20c2.21,0,4-1.79,4-4V4c0-2.21-1.79-4-4-4Zm-3.72,6.66h-1.26c-1.24,0-1.63,.77-1.63,1.56v1.88h2.78l-.44,2.9h-2.33v7h-3.13v-7h-2.54v-2.9h2.54v-2.21c0-2.51,1.5-3.9,3.78-3.9,1.1,0,2.24,.2,2.24,.2v2.47Z" fill-rule="evenodd"/>
</svg>

Before

Width:  |  Height:  |  Size: 274 B

After

Width:  |  Height:  |  Size: 354 B

View File

@@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 0c2.173 0 2.445.01 3.298.048.852.04 1.433.174 1.942.372.526.205.973.478 1.418.922.444.445.717.892.922 1.418.198.509.333 1.09.372 1.942C15.99 5.555 16 5.827 16 8s-.01 2.445-.048 3.298c-.04.852-.174 1.433-.372 1.942a3.924 3.924 0 0 1-.922 1.418 3.924 3.924 0 0 1-1.418.922c-.509.198-1.09.333-1.942.372-.853.04-1.125.048-3.298.048s-2.445-.009-3.298-.048c-.852-.04-1.433-.174-1.942-.372a3.924 3.924 0 0 1-1.418-.922A3.924 3.924 0 0 1 .42 13.24c-.198-.509-.333-1.09-.372-1.942C.01 10.445 0 10.173 0 8s.01-2.445.048-3.298C.088 3.85.222 3.269.42 2.76c.205-.526.478-.973.922-1.418A3.924 3.924 0 0 1 2.76.42C3.269.222 3.85.087 4.702.048 5.555.01 5.827 0 8 0zm0 3.892a4.108 4.108 0 1 0 0 8.216 4.108 4.108 0 0 0 0-8.216zm5.23-.162a.96.96 0 1 0-1.92 0 .96.96 0 0 0 1.92 0zM8 10.667a2.666 2.666 0 1 1 0-5.333 2.666 2.666 0 0 1 0 5.333z"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.67,12A2.67,2.67,0,1,1,12,9.33,2.67,2.67,0,0,1,14.67,12Zm3.89,0c0,1.16.1,3.66-.32,4.71a2.7,2.7,0,0,1-1.52,1.52c-1.06.42-3.55.33-4.72.33s-3.66.09-4.71-.33a2.65,2.65,0,0,1-1.52-1.52c-.42-1.05-.33-3.55-.33-4.71s-.09-3.67.33-4.72A2.65,2.65,0,0,1,7.29,5.76c1-.42,3.55-.32,4.71-.32a18,18,0,0,1,4.72.32,2.7,2.7,0,0,1,1.52,1.52C18.66,8.34,18.56,10.83,18.56,12ZM16.1,12A4.1,4.1,0,1,0,12,16.1,4.09,4.09,0,0,0,16.1,12Zm1.13-4.27a1,1,0,1,0-1,1A1,1,0,0,0,17.23,7.73ZM24,4V20a4,4,0,0,1-4,4H4a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H20A4,4,0,0,1,24,4ZM19.94,8.7a4.71,4.71,0,0,0-1.29-3.35A4.71,4.71,0,0,0,15.3,4.06C14,4,10,4,8.7,4.06A4.76,4.76,0,0,0,5.35,5.34,4.75,4.75,0,0,0,4.06,8.7C4,10,4,14,4.06,15.3a4.73,4.73,0,0,0,1.29,3.35A4.77,4.77,0,0,0,8.7,19.94c1.32.08,5.28.08,6.6,0a4.71,4.71,0,0,0,3.35-1.29,4.73,4.73,0,0,0,1.29-3.35C20,14,20,10,19.94,8.7Z" />
</svg>

Before

Width:  |  Height:  |  Size: 954 B

After

Width:  |  Height:  |  Size: 914 B

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M20,0H4A4,4,0,0,0,0,4V20a4,4,0,0,0,4,4H20a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0ZM16.68,19a4.47,4.47,0,0,1-3,1C9.86,20,9,17.22,9,15.61v-4.5H7.56a.31.31,0,0,1-.31-.32V8.67a.52.52,0,0,1,.35-.5,4,4,0,0,0,2.63-3.66c0-.34.21-.51.51-.51H13a.31.31,0,0,1,.32.31v3.6h2.59a.31.31,0,0,1,.31.31v2.55a.31.31,0,0,1-.31.32H13.25v4.16c0,1.07.74,1.67,2.13,1.12a.67.67,0,0,1,.4-.07.36.36,0,0,1,.23.25l.68,2C16.75,18.71,16.8,18.89,16.68,19Z" fill-rule="evenodd"/>
</svg>

After

Width:  |  Height:  |  Size: 516 B

View File

@@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" viewBox="0 0 16 13">
<path fill-rule="evenodd" d="M14.362 3.238c.007.141.01.281.01.424 0 4.338-3.302 9.34-9.34 9.34A9.284 9.284 0 0 1 0 11.527c.257.029.518.045.783.045a6.576 6.576 0 0 0 4.076-1.404 3.288 3.288 0 0 1-3.065-2.28 3.312 3.312 0 0 0 1.481-.056A3.288 3.288 0 0 1 .642 4.613v-.041c.444.246.949.393 1.488.41A3.28 3.28 0 0 1 .67 2.25c0-.602.162-1.166.444-1.651a9.315 9.315 0 0 0 6.766 3.43A3.28 3.28 0 0 1 11.078 0c.943 0 1.797.398 2.395 1.035a6.565 6.565 0 0 0 2.085-.797 3.289 3.289 0 0 1-1.443 1.816A6.543 6.543 0 0 0 16 1.539a6.665 6.665 0 0 1-1.638 1.699"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M20,0H4A4,4,0,0,0,0,4V20a4,4,0,0,0,4,4H20a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0ZM18.36,8.74c0,.14,0,.29,0,.43A9.34,9.34,0,0,1,4,17a6.85,6.85,0,0,0,.79,0,6.57,6.57,0,0,0,4.07-1.4A3.29,3.29,0,0,1,5.8,13.39a4.1,4.1,0,0,0,.62,0,3.49,3.49,0,0,0,.86-.11,3.28,3.28,0,0,1-2.63-3.22v0a3.35,3.35,0,0,0,1.48.42A3.29,3.29,0,0,1,4.67,7.76,3.22,3.22,0,0,1,5.12,6.1a9.3,9.3,0,0,0,6.76,3.43,3.67,3.67,0,0,1-.08-.75,3.28,3.28,0,0,1,5.67-2.24,6.54,6.54,0,0,0,2.08-.79,3.22,3.22,0,0,1-1.44,1.8A6.67,6.67,0,0,0,20,7.05,7.31,7.31,0,0,1,18.36,8.74Z" fill-rule="evenodd"/>
</svg>

Before

Width:  |  Height:  |  Size: 645 B

After

Width:  |  Height:  |  Size: 622 B

View File

@@ -1,88 +1,105 @@
<template>
<div class="row footer-row">
<div>
<buy-gems-modal v-if="user" />
<!--modify-inventory(v-if="isUserLoaded")-->
<footer class="col-12 expanded">
<div class="row">
<div class="col-12 col-md-2">
<h3>
<footer>
<!-- Product -->
<div class="product">
<h3>{{ $t('footerProduct') }}</h3>
<ul>
<li>
<a
href="https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8"
target="_blank"
>{{ $t('mobileIOS') }}</a>
</h3>
<h3>
>{{ $t('mobileIOS') }}
</a>
</li>
<li>
<a
href="https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica"
target="_blank"
>{{ $t('mobileAndroid') }}</a>
</h3>
</div>
<div class="col-12 col-md-2">
<h3>{{ $t('footerCompany') }}</h3>
<ul>
>{{ $t('mobileAndroid') }}
</a>
</li>
<li>
<router-link to="/group-plans">
{{ $t('groupPlans') }}
</router-link>
</li>
<li>
<router-link to="/static/features">
{{ $t('companyAbout') }}
</router-link>
</li>
</ul>
</div>
<!-- Company -->
<div class="company">
<h3>{{ $t('footerCompany') }}</h3>
<ul>
<li>
<a
href="https://habitica.wordpress.com/"
target="_blank"
>{{ $t('companyBlog') }}</a>
</li>
<li>
<a
href="https://blog.habitrpg.com/"
target="_blank"
>{{ $t('tumblr') }}</a>
</li>
<li>
<router-link to="/static/faq">
{{ $t('FAQ') }}
<router-link to="/static/contact">
{{ $t('contactUs') }}
</router-link>
</li>
<li>
<a
href="https://habitica.fandom.com/wiki/Whats_New"
target="_blank"
>{{ $t('oldNews') }}</a>
</li>
<!-- Commenting out merch page see https://github.com/HabitRPG/habitica/issues/12039
<li>
<router-link to="/static/merch">
{{ $t('merch') }}
</router-link>
</li>
-->
<li>
<router-link to="/static/press-kit">
{{ $t('presskit') }}
</router-link>
</li>
<li>
<router-link to="/static/contact">
{{ $t('contactUs') }}
</router-link>
<a
href="https://habitica.wordpress.com/"
target="_blank"
>{{ $t('companyBlog') }}
</a>
</li>
<li>
<a
href="https://habitica.fandom.com/wiki/Whats_New"
target="_blank"
>{{ $t('oldNews') }}
</a>
</li>
</ul>
</div>
<div class="col-12 col-md-2">
<!-- Community -->
<div class="community">
<h3>{{ $t('footerCommunity') }}</h3>
<ul>
<li>
<a
target="_blank"
href="/static/community-guidelines"
>{{ $t('communityGuidelines') }}</a>
>{{ $t('communityGuidelines') }}
</a>
</li>
<li>
<router-link to="/hall/contributors">
{{ $t('hall') }}
</router-link>
</li>
<li v-if="user">
<li>
<a
href="https://habitica.fandom.com/wiki/Contributing_to_Habitica"
target="_blank"
>{{ $t('companyContribute') }}
</a>
</li>
</ul>
</div>
<!-- Support -->
<div class="support">
<h3>{{ $t ('support') }}</h3>
<ul>
<li>
<router-link to="/static/faq">
{{ $t('FAQ') }}
</router-link>
</li>
<li
v-if="user"
>
<a
target="_blank"
@click.prevent="openBugReportModal()"
@@ -90,7 +107,9 @@
{{ $t('reportBug') }}
</a>
</li>
<li v-else>
<li
v-else
>
<a
href="mailto:admin@habitica.com?subject=Habitica Web Bug Report"
target="_blank"
@@ -102,61 +121,78 @@
<a
href="https://docs.google.com/forms/d/e/1FAIpQLScPhrwq_7P1C6PTrI3lbvTsvqGyTNnGzp1ugi1Ml0PFee_p5g/viewform?usp=sf_link"
target="_blank"
>{{ $t('requestFeature') }}</a>
</li>
<li v-html="$t('communityExtensions')"></li>
<li>
<a
href="https://www.facebook.com/Habitica"
target="_blank"
>{{ $t('communityFacebook') }}</a>
>{{ $t('requestFeature') }}
</a>
</li>
<li>
<a
href="https://www.instagram.com/habitica"
href="https://habitica.fandom.com/"
target="_blank"
>{{ $t('communityInstagram') }}</a>
>{{ $t('wiki') }}
</a>
</li>
</ul>
</div>
<div class="col-12 col-md-6">
<div class="row">
<div class="col-6">
<!-- Developers -->
<div class="developers">
<h3>{{ $t('footerDevs') }}</h3>
<ul>
<li>
<a
href="/apidoc"
target="_blank"
>{{ $t('APIv3') }}</a>
>{{ $t('APIv3') }}
</a>
</li>
<li>
<a
:href="getDataDisplayToolUrl"
target="_blank"
>{{ $t('dataDisplayTool') }}</a>
>{{ $t('dataDisplayTool') }}
</a>
</li>
<li>
<a
href="https://habitica.fandom.com/wiki/Guidance_for_Blacksmiths"
target="_blank"
>{{ $t('guidanceForBlacksmiths') }}</a>
>{{ $t('guidanceForBlacksmiths') }}
</a>
</li>
<li>
<a
href="https://habitica.fandom.com/wiki/Extensions,_Add-Ons,_and_Customizations"
target="_blank"
>{{ $t('communityExtensions') }}
</a>
</li>
</ul>
</div>
<div class="col-6 social">
<!-- Help Support Habitica -->
<div class="donate">
<div>
<h3>{{ $t('helpSupportHabitica') }}</h3>
<p class="donate-text">
{{ $t('donateText3') }}
</p>
</div>
</div>
<div class="donate-button">
<button
class="button btn-contribute"
@click="donate()"
>
<div class="text">
💜 {{ $t('companyDonate') }}
</div>
</button>
</div>
<!-- Social - Desktop/Tablet -->
<div class="social">
<div>
<h3>{{ $t('footerSocial') }}</h3>
<div class="icons">
<a
class="social-circle"
href="https://twitter.com/habitica"
target="_blank"
>
<div
class="social-icon svg-icon"
v-html="icons.twitter"
></div>
</a>
<a
class="social-circle"
href="https://www.instagram.com/habitica/"
@@ -167,6 +203,16 @@
v-html="icons.instagram"
></div>
</a>
<a
class="social-circle"
href="https://twitter.com/habitica"
target="_blank"
>
<div
class="social-icon svg-icon twitter"
v-html="icons.twitter"
></div>
</a>
<a
class="social-circle"
href="https://www.facebook.com/Habitica"
@@ -176,73 +222,85 @@
class="social-icon facebook svg-icon"
v-html="icons.facebook"
></div>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-8">
{{ $t('donateText3') }}
</div>
<div class="col-12 col-md-4">
<button
v-if="user"
class="btn btn-contribute btn-front btn-flat"
@click="donate()"
>
<div
class="svg-icon heart"
v-html="icons.heart"
></div>
<div class="text">
{{ $t('companyDonate') }}
</div>
</button>
<div
v-else
class="btn btn-contribute btn-front btn-flat"
>
<a
href="https://habitica.fandom.com/wiki/Contributing_to_Habitica"
</a><a
class="social-circle"
href="https://www.tumblr.com/Habitica"
target="_blank"
>
<div
class="svg-icon heart"
v-html="icons.heart"
class="social-icon tumblr svg-icon"
v-html="icons.tumblr"
></div>
<div class="text">{{ $t('companyContribute') }}</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="hr">
<div>
<hr>
</div>
</div>
<div class="row">
<div class="col-12 col-md-5 text-center text-md-left">
<!-- Colophon -->
<div class=" copyright">
<div>
© {{ currentYear }} Habitica. All rights reserved.
</div>
</div>
<div class="melior">
<div
class="logo svg-icon"
v-html="icons.gryphon"
></div>
</div>
<!-- DESKTOP PRIVACY & TERMS -->
<div class="privacy-terms">
<span class="privacy-policy">
<a
target="_blank"
href="/static/privacy"
>{{ $t('privacy') }}</a>
</span>
<span class="terms">
<a
target="_blank"
href="/static/terms"
>{{ $t('terms') }}</a>
</span>
</div>
<!-- MOBILE PRIVACY & TERMS -->
<div class="privacy-policy mobile desktop">
<a
target="_blank"
href="/static/privacy"
>{{ $t('privacy') }}</a>
</div>
<div class="mobile-terms mobile desktop">
<a
target="_blank"
href="/static/terms"
>{{ $t('terms') }}</a>
</div>
<div
v-if="!IS_PRODUCTION && isUserLoaded"
class="debug float-left"
class="debug-toggle"
>
<button
class="btn btn-primary"
class="debug btn-primary"
@click="debugMenuShown = !debugMenuShown"
>
Toggle Debug Menu
</button>
<div
v-if="debugMenuShown"
class="debug-group"
class="debug-toggle debug-group"
>
<div class="debug-pop">
<a
class="btn btn-secondary"
@click="setHealthLow()"
>Health = 1</a>
>Reduce Health to 1</a>
<a
class="btn btn-secondary"
@click="addMissedDay(1)"
@@ -300,188 +358,435 @@
class="btn btn-secondary"
@click="makeAdmin()"
>Make Admin</a>
<a
class="btn btn-secondary"
@click="openModifyInventoryModal()"
>Modify Inventory</a>
</div>
</div>
</div>
<div class="col-12 col-md-2 text-center">
<div
class="logo svg-icon"
v-html="icons.gryphon"
></div>
</div>
<div class="col-12 col-md-5 text-center text-md-right my-1">
<span class="ml-4">
<a
target="_blank"
href="/static/privacy"
>{{ $t('privacy') }}</a>
</span>
<span class="ml-4">
<a
target="_blank"
href="/static/terms"
>{{ $t('terms') }}</a>
</span>
</div>
</div>
</footer>
</div>
</template>
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
.footer-row {
margin: 0;
flex: 0 1 auto;
z-index: 10;
}
footer {
color: #c3c0c7;
padding-bottom: 3em;
a {
color: #2995cd;
}
}
h3 {
color: #878190;
button {
border: none;
border-radius: 4px;
text-align: center;
line-height: 1.71;
font-weight: 700;
font-size: .875rem;
margin-bottom: 1rem;
padding: .5rem 1rem;
box-shadow: 0 1px 3px 0 rgb(26 24 29 / 12%), 0 1px 2px 0 rgb(26 24 29 / 24%);
}
ul {
padding-left: 0;
list-style-type: none;
list-style: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 0.5em;
margin: 0 0 .5rem 0;
padding: 0;
}
.social {
h3 {
text-align: right;
}
}
.icons {
.product { grid-area: product; }
.company { grid-area: company; }
.community { grid-area: community; }
.support { grid-area: support; }
.developers { grid-area: developers; }
// row 2
.donate {
align-items: flex-end;
display: flex;
justify-content: start;
grid-area: donate;
padding-top: 12px;
}
.donate-text {
grid-area: donate-text;
font-size: 0.75rem;
font-color: $gray-100;
line-height: 1.33;
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;
.donate-button {
grid-area: donate-button;
padding-top: 44px;
}
}
//mobile view
@media screen and (max-width: 770px) {
.footer-main {
.social {
align-items: flex-start;
display: flex;
flex-direction: column;
}
.logo-container {
order: 1;
}
justify-content: start;
grid-area: social;
padding-top: 12px;
}
// row 3
.hr {
color: $gray-400;
grid-area: hr;
}
// row 4
.copyright {
grid-area: copyright;
line-height: 1.71;
}
.melior { grid-area: melior; }
.privacy-terms {
grid-area: privacy-terms;
display: flex;
justify-content: end;
line-height: 1.71;
}
.terms {
padding-left: 16px;
}
.mobile {
display: none;
}
// row 5
.debug-toggle { grid-area: debug-toggle;}
.debog-pop {
grid-area: debug-pop;
}
footer {
background-color: $gray-500;
color: $gray-50;
padding: 32px 142px 40px;
a {
color: $gray-50;
}
a:hover {
color: $purple-300;
text-decoration: underline;
}
a:not([href]):not([class]):hover { // needed to make "report a bug"'s hover state correct
color: $purple-300;
text-decoration: underline;
}
column-gap: 1.5rem;
display: grid;
grid-template-areas:
"product company community support developers"
"donate donate donate donate-button social"
"donate-text donate-text donate-text donate-button social"
"hr hr hr hr hr"
"copyright copyright melior privacy-terms privacy-terms"
"debug-toggle debug-toggle debug-toggle blank blank";
grid-template-columns: repeat(5, 1fr);
grid-template-rows: auto;
}
h3 {
font-weight: bold;
}
.icons {
display: flex;
height: 24px;
padding-top: 4px;
}
.social-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #c3c0c7;
width: 24px;
height: 24px;
border-radius: 4px;
background-color: $gray-50;
display: flex;
margin-left: 1em;
margin: 0 8px 0 8px;
&:first-child {
margin-left: 0;
}
&:hover {
background-color: #a5a1ac;
}
.social-icon {
color: #e1e0e3;
width: 16px;
margin: auto;
&:last-child {
margin-right: 0;
}
}
.logo {
width: 24px;
height: 24px;
margin: 0 auto;
color: #e1e0e3;
margin: 0px auto 5px;
color: $gray-200;
}
.terms {
padding-left: 16px;
display:flex;
justify-content: end;
}
.desktop {
display: none;
}
.debug {
margin-top: 16px;
display: flex;
justify-content: center;
}
.debug-group {
position: absolute;
background: #fff;
top: -300px;
border-radius: 2px;
padding: 2em;
}
.btn-contribute {
background: #c3c0c7;
box-shadow: none;
border-radius: 4px;
font-family: Roboto Condensed, sans-serif;
padding: 16px;
box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
font-weight: 700;
background-color: $gray-600;
.btn {
margin: 2px;
}
}
.btn-contribute {
background: $white;
border-radius: 2px;
width: 175px;
height: 32px;
color: $gray-50;
text-align: center;
vertical-align: middle;
padding: 0;
margin: 0;
&:hover {
background: #a5a1ac;
.text {
color: white;
color:$purple-300;
box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
&:active:not(:disabled) {
color:$purple-300;
border: 1px solid $purple-400;
box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
}
}
a {
display: flex;
}
.heart {
max-height: 25px;
width: 18px;
margin-right: 0.5em;
margin-bottom: 0.2em;
}
.text,
.heart {
.text{
display: inline-block;
vertical-align: bottom;
}
}
// media breakpoints
// Small devices (landscape phones, 576px and under)
@media (max-width: 767.99px) {
// row 1
.product {
grid-area: product;
padding-top: 12px;
}
.company {
grid-area: company;
padding-top: 12px;
}
//row 2
.community {
grid-area: community;
padding-top: 12px;
}
.support {
grid-area: support;
padding-top: 12px;
}
//row 3
.developers {
grid-area: developers;
padding-top: 12px;
}
.social {
grid-area: social;
padding-top: 12px;
}
// row 4
.donate {
grid-area: donate;
}
// row 5
.donate-text {
grid-area: donate-text;
}
//row 6
.donate-button {
grid-area: donate-button;
padding-top: 0px;
}
// row 7
.hr {
grid-area: hr;
padding-top: 8px;
}
// row 8
.copyright {
grid-area: copyright;
display: flex;
justify-content: center;
}
// row 9
.privacy-terms {
display: none;
}
.desktop {
display: none;
}
.privacy-policy {
grid-area: privacy-policy;
display: grid;
justify-content: center;
line-height: 1.71;
padding-top: 10px;
}
//row 10
.mobile-terms {
grid-area: mobile-terms;
display:grid;
justify-content: center;
padding: 8px 0px 16px 0px;
}
// row 11
.melior { grid-area: melior; }
// row 12
.debug-toggle {
grid-area: debug-toggle;
width: 100%;
}
footer {
padding: 24px 16px;
a:not([href]):not([class]):hover { // needed to make "report a bug"'s hover state correct
color: $purple-300;
text-decoration: underline;
}
column-gap: 1.5rem;
display: grid;
grid-template-areas:
"product company"
"community support"
"developers social"
"donate donate"
"donate-text donate-text"
"donate-button donate-button"
"hr hr"
"copyright copyright"
"privacy-policy privacy-policy"
"mobile-terms mobile-terms"
"melior melior"
"debug-toggle debug-toggle";
grid-template-columns: repeat(2, 2fr);
grid-template-rows: auto;
}
.btn-contribute {
width: 100%;
}
.debug {
width: 100%;
}
.social-circle {
margin: 0 6px 0 6px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
// Medium devices (tablets, 768px and under)
@media (max-width: 1024px) and (min-width: 768px) {
footer {
padding: 24px 24px;
a:not([href]):not([class]):hover { // needed to make "report a bug"'s hover state correct
color: $purple-300;
text-decoration: underline;
}
}
.desktop {
display: none;
}
}
</style>
<style lang="scss">
.heart svg {
margin-top: 0.1em;
.instagram svg {
background-color: #e1e0e3;
fill: #878190;
height: 24px;
width: 24px;
&:hover {
fill: #6133B4;
}
}
.twitter svg {
background-color: #e1e0e3;
fill: #878190;
height: 24px;
width: 24px;
&:hover {
fill: #6133B4;
}
}
.facebook svg {
width: 10px;
margin: 0 auto;
background-color: #e1e0e3;
fill: #878190;
height: 24px;
width: 24px;
&:hover {
fill: #6133B4;
}
}
footer {
&.expanded {
padding-left: 6em;
padding-right: 6em;
padding-top: 3em;
background: #e1e0e3;
color: #878190;
min-height: 408px;
a {
color: #878190;
}
.logo {
color: #c3c0c7;
}
@media screen and (max-width: 770px) {
padding-left: 1em;
padding-right: 1em;
}
.tumblr svg {
background-color: #e1e0e3;
fill: #878190;
height: 24px;
width: 24px;
&:hover {
fill: #6133B4;
}
}
</style>
<script>
// modules
import axios from 'axios';
import moment from 'moment';
import { mapState } from '@/libs/store';
// images
import gryphon from '@/assets/svg/gryphon.svg';
import twitter from '@/assets/svg/twitter.svg';
import facebook from '@/assets/svg/facebook.svg';
import instagram from '@/assets/svg/instagram.svg';
import tumblr from '@/assets/svg/tumblr.svg';
import heart from '@/assets/svg/heart.svg';
// components & modals
import { mapState } from '@/libs/store';
import buyGemsModal from './payments/buyGemsModal.vue';
import reportBug from '@/mixins/reportBug.js';
@@ -498,6 +803,7 @@ export default {
twitter,
facebook,
instagram,
tumblr,
heart,
}),
debugMenuShown: false,
@@ -592,9 +898,6 @@ export default {
// Reload the website then go to Help > Admin Panel to set contributor level, etc.');
// @TODO: sync()
},
openModifyInventoryModal () {
this.$root.$emit('bv::show::modal', 'modify-inventory');
},
donate () {
this.$root.$emit('bv::show::modal', 'buy-gems', { alreadyTracked: true });
},

View File

@@ -33,7 +33,7 @@
@import '~@/assets/scss/colors.scss';
.home-header {
background: #6133b4 !important;
background: $purple-300 !important;
position: static;
box-shadow: none !important;
height: 100px !important;
@@ -46,13 +46,13 @@
.nav-item a {
font-size: 14px !important;
color: #d5c8ff !important;
color: $purple-600 !important;
padding-top: 2.8em !important;
}
.nav-item a:hover {
background: transparent !important;
color: #fff !important;
color: $white !important;
}
.nav-item .nav-link {
@@ -73,20 +73,20 @@
}
.white-header {
background: #fff !important;
background-color: #fff !important;
background: $white !important;
background-color: $white !important;
a {
color: #271b3d !important;
color: $header-dark-background !important;
}
a:hover {
color: #fff !important;
color: $white !important;
}
}
#purple-footer {
background-color: #271b3d;
background-color: $header-dark-background;
.row {
margin: 0;
@@ -94,19 +94,91 @@
footer, footer a {
background: transparent;
color: #d5c8ff;
color: $purple-500;
&:hover {
color: $white;
}
}
h3 {
color: $purple-400;
}
hr {
border-top-color: $purple-100;
}
.donate-text {
color: $purple-500;
}
.logo {
color: #bda8ff;
color: $purple-300;
}
.social-circle, .btn-contribute {
background: #36205d;
color: #bda8ff;
.colophon {
color: $purple-500;
}
.svg-icon {
color: #bda8ff;
.social-circle {
background: $purple-50;
color: $purple-500;
.instagram svg {
background-color: $purple-50;
fill: $purple-500;
&:hover {
fill: $white;
}
}
.twitter svg {
background-color: $purple-50;
fill: $purple-500;
&:hover {
fill: $white;
}
}
.facebook svg {
background-color: $purple-50;
fill: $purple-500;
&:hover {
fill: $white;
}
}
.tumblr svg {
background-color: $purple-50;
fill: $purple-500;
&:hover {
fill: $white;
}
}
}
.btn-contribute {
background: $white;
box-shadow: none;
border-radius: 2px;
width: 175px;
height: 32px;
color: $gray-50;
text-align: center;
line-height: 1.71;
font-weight: bold;
font-size: 0.875rem;
vertical-align: middle;
padding: 0;
margin: 32px 0 32px 24px;
box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
a {
display: flex;
}
.text{
display: inline-block;
vertical-align: bottom;
}
}
}
@@ -142,7 +214,7 @@
<style lang="scss" scoped>
#bottom-wrap.purple-4 {
background-color: #271b3d;
background-color: #271B3D;
}
#bottom-wrap {

View File

@@ -3,13 +3,13 @@
"termsAndAgreement": "By clicking the button below, you are indicating that you have read and agree to the <a href='/static/terms'>Terms of Service</a> and <a href='/static/privacy'>Privacy Policy</a>.",
"chores": "Chores",
"clearBrowserData": "Clear Browser Data",
"communityExtensions": "<a href='https://habitica.fandom.com/wiki/Extensions,_Add-Ons,_and_Customizations' target='_blank'>Add-ons & Extensions</a>",
"communityExtensions": "Add-ons & Extensions",
"communityFacebook": "Facebook",
"communityInstagram": "Instagram",
"companyAbout": "How It Works",
"companyBlog": "Blog",
"companyContribute": "Contribute",
"companyDonate": "Donate",
"companyContribute": "Contributing to Habitica",
"companyDonate": "Donate to Habitica",
"forgotPassword": "Forgot Password?",
"emailNewPass": "Email a Password Reset Link",
"forgotPasswordSteps": "Enter your username or the email address you used to register your Habitica account.",
@@ -18,6 +18,7 @@
"footerCommunity": "Community",
"footerCompany": "Company",
"footerMobile": "Mobile",
"footerProduct": "Product",
"footerSocial": "Social",
"free": "Join for free",
"guidanceForBlacksmiths": "Guidance for Blacksmiths",
@@ -51,8 +52,8 @@
"marketing4Lead3-1": "Want to gamify your life?",
"marketing4Lead3-2": "Interested in running a group in education, wellness, and more?",
"marketing4Lead3Title": "Gamify Everything",
"mobileAndroid": "Android",
"mobileIOS": "iOS",
"mobileAndroid": "Android App",
"mobileIOS": "iOS App",
"oldNews": "News",
"newsArchive": "News archive on Wikia (multilingual)",
"setNewPass": "Set New Password",

View File

@@ -85,7 +85,8 @@
"newBaileyUpdate": "New Bailey Update!",
"tellMeLater": "Tell Me Later",
"dismissAlert": "Dismiss This Alert",
"donateText3": "Habitica is an open source project that depends on our users for support. The money you spend on gems helps us keep the servers running, maintain a small staff, develop new features, and provide incentives for our volunteer programmers. Thank you for your generosity!",
"donateText3": "Habitica is an open source project that depends on our users for support. The money you spend on gems helps us keep the servers running, maintain a small staff, develop new features, and provide incentives for our volunteers",
"helpSupportHabitica": "Help Support Habitica",
"card": "Credit Card",
"paymentMethods": "Purchase using",
"paymentSuccessful": "Your payment was successful!",

View File

@@ -172,7 +172,7 @@
"couponCodeRequired": "The coupon code is required.",
"subCanceledTitle": "Subscription Canceled",
"choosePaymentMethod": "Choose your payment method",
"support": "SUPPORT",
"support": "Support",
"supportHabitica": "Support Habitica",
"gemBenefitLeadin": "What can you buy with Gems?",
"gemBenefit1": "Unique and fashionable costumes for your avatar.",