krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 14:47:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Redesign: Static Pages Wrapper (#9027)

Browse Source 
* refactor(static-pages): wrapper

* refactor(statics): use router-view
This commit is contained in:
Sabe Jones
2017-09-15 13:59:15 -05:00
committed by GitHub
parent 5c5e117da0
commit 381f652c08
20 changed files with 1433 additions and 1653 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/client/components/chat/copyAsTodoModal.vue
View File

@@ -46,7 +46,7 @@ export default {
copyingMessage () {
this.text = this.copyingMessage.text;
let baseUrl = 'https://habitica.com';
this.notes = `[${this.copyingMessage.user}](${baseUrl}/home/#?memberId=${this.copyingMessage.uuid}) wrote in [${this.groupName}](${baseUrl}/#/options/groups/${this.groupId})`;
this.notes = `[${this.copyingMessage.user}](${baseUrl}/static/home/#?memberId=${this.copyingMessage.uuid}) wrote in [${this.groupName}](${baseUrl}/#/options/groups/${this.groupId})`;
},
},
methods: {

2
website/client/components/settings/deleteModal.vue
View File

@@ -59,7 +59,7 @@ export default {
},
});
localStorage.clear();
window.location.href = '/home';
window.location.href = '/static/home';
this.$root.$emit('hide::modal', 'reset');
},
},

24
website/client/components/static/app.vue
View File

@@ -1,6 +1,4 @@
<template lang="pug">
div
static-header
.container-fluid.text-center
.row
.col-md-6.offset-3
@@ -10,26 +8,4 @@
a(href='https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1')
img(alt='Get it on Google Play', src='https://play.google.com/intl/en_us/badges/images/apps/en-play-badge.png', style='width:139px;height:45px;image-rendering:auto;vertical-align:top')
a(href='https://geo.itunes.apple.com/us/app/habitica/id994882113?mt=8', style='display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg#svgView) no-repeat;background-size:100%;width:152px;height:45px;margin-left:20px;image-rendering:auto')
app-footer
</template>
<style lang='scss' scoped>
@import '~client/assets/scss/static.scss';
.container-fluid {
margin-top: 56px;
margin-bottom: 24px;
}
</style>
<script>
import AppFooter from 'client/components/appFooter';
import StaticHeader from './header.vue';
export default {
components: {
AppFooter,
StaticHeader,
},
};
</script>

20
website/client/components/static/clearBrowserData.vue
View File

@@ -1,6 +1,4 @@
<template lang="pug">
div
static-header
.container-fluid.text-center
.row
.col-md-6.offset-3
@@ -14,30 +12,14 @@
| {{ $t('localStorageClear') }}
br
p(v-html="$t('localStorageTryNext', localStorageTryNext) ")
app-footer
</template>
<style lang='scss' scoped>
@import '~client/assets/scss/static.scss';
.container-fluid {
margin-top: 56px;
}
</style>
<script>
import AppFooter from 'client/components/appFooter';
import StaticHeader from './header.vue';
export default {
components: {
AppFooter,
StaticHeader,
},
data () {
return {
localStorageTryFirst: {
linkStart: '<a href="/#/options/settings/settings" target="_blank">',
linkStart: '<a href="/user/settings/site" target="_blank">',
linkEnd: '</a>',
},
localStorageTryNext: {

12
website/client/components/static/communityGuidelines.vue
View File

@@ -1,6 +1,4 @@
<template lang="pug">
div
static-header
.container-fluid
h1 {{ $t('communityGuidelines') }}
hr
@@ -311,12 +309,9 @@
li Shaner
li Starsystemic
li UncommonCriminal
app-footer
</template>
<style lang='scss' scoped>
@import '~client/assets/scss/static.scss';
.list-2col {
width: 50%;
columns: 2;
@@ -326,17 +321,10 @@
</style>
<script>
import AppFooter from 'client/components/appFooter';
import StaticHeader from './header.vue';
// @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
export default {
components: {
AppFooter,
StaticHeader,
},
data () {
return {
hrefCommunityManagerEmail: `<a href='mailto: ${COMMUNITY_MANAGER_EMAIL}'>${COMMUNITY_MANAGER_EMAIL}</a>`,

23
website/client/components/static/contact.vue
View File

@@ -1,6 +1,4 @@
<template lang="pug">
div
static-header
.container-fluid
.row
.col-md-6.offset-3
@@ -40,25 +38,4 @@
| {{ $t('marketingInquiries') }}
| &colon;&nbsp;
a(href='mailto:leslie@habitica.com') leslie&commat;habitica&period;com
app-footer
</template>
<style lang='scss' scoped>
@import '~client/assets/scss/static.scss';
.container-fluid {
margin-top: 56px;
}
</style>
<script>
import AppFooter from 'client/components/appFooter';
import StaticHeader from './header.vue';
export default {
components: {
AppFooter,
StaticHeader,
},
};
</script>

15
website/client/components/static/faq.vue
View File

@@ -1,6 +1,4 @@
<template lang="pug">
div
static-header
.container-fluid
.row
.col-md-6.offset-3
@@ -10,16 +8,9 @@
div(v-if='pageState[heading]', v-markdown="$t('webFaqAnswer' + index, replacements)")
hr
p(v-markdown="$t('webFaqStillNeedHelp')")
app-footer
</template>
<style lang='scss' scoped>
@import '~client/assets/scss/static.scss';
.container-fluid {
margin-top: 56px;
}
.faq-question {
margin-bottom: 1em;
}
@@ -28,15 +19,9 @@
<script>
// @TODO: env.EMAILS.TECH_ASSISTANCE_EMAIL
const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
import AppFooter from 'client/components/appFooter';
import StaticHeader from './header.vue';
import markdownDirective from 'client/directives/markdown';
export default {
components: {
AppFooter,
StaticHeader,
},
directives: {
markdown: markdownDirective,
},

11
website/client/components/static/features.vue
View File

@@ -1,6 +1,4 @@
<template lang="pug">
div
static-header
.container-fluid.text-center
.row
.col-md-12
@@ -76,12 +74,9 @@
p.span
span {{ $t('marketing4Lead3-3') }}
a.btn.btn-primary(href='/static/videos') {{ $t('watchVideos') }}
app-footer
</template>
<style lang='scss' scoped>
@import '~client/assets/scss/static.scss';
.btn {
margin-left: 1em;
}
@@ -94,15 +89,9 @@
</style>
<script>
import AppFooter from 'client/components/appFooter';
import markdownDirective from 'client/directives/markdown';
import StaticHeader from './header.vue';
export default {
components: {
AppFooter,
StaticHeader,
},
directives: {
markdown: markdownDirective,
},

5
website/client/components/static/groupPlans.vue
View File

@@ -1,7 +1,6 @@
<template lang="pug">
div
static-header
.container-fluid.main
div
.container-fluid
.row
.col-6.offset-3
button.btn.btn-primary.btn-lg.btn-block(@click="goToNewGroupPage()") {{ $t('getAGroupPlanToday') }}

2
website/client/components/static/header.vue
View File

@@ -2,7 +2,7 @@
nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
.navbar-header
router-link.nav-item(
to='/home',
to='/static/home',
)
.logo.svg-icon(v-html='icons.logo')
.collapse.navbar-collapse

37
website/client/components/static/home.vue
View File

@@ -4,8 +4,6 @@
br
a(href='http://www.enable-javascript.com/', target='_blank') {{ $t('jsDisabledLink') }}
static-header
#intro-signup.purple-1
.container
.row
@@ -118,39 +116,12 @@
img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/kickstarter-logo.png', alt="$t(altAttrKickstarter)")
img(src='https://d2afqr2xdmyzvu.cloudfront.net/front/images/presslogos/discover-logo.png', alt="$t(altAttrDiscover)")
#purple-footer
app-footer
#bottom-wrap.purple-4
#bottom-background
.seamless_mountains_demo_repeat
.midground_foreground_extended2
</template>
<style lang="scss">
#purple-footer {
background-color: #271b3d;
footer, footer a {
background: transparent;
color: #d5c8ff;
}
.logo {
color: #bda8ff;
}
.social-circle, .btn-donate {
background: #36205d;
color: #bda8ff;
.svg-icon {
color: #bda8ff;
}
}
}
</style>
<style lang="scss" scoped>
@import '~client/assets/scss/static.scss';
@@ -460,8 +431,6 @@
<script>
import hello from 'hellojs';
import AppFooter from 'client/components/appFooter';
import StaticHeader from './header.vue';
import googlePlay from 'assets/images/home/google-play-badge.svg';
import iosAppStore from 'assets/images/home/ios-app-store.svg';
import iphones from 'assets/images/home/iphones.svg';
@@ -474,10 +443,6 @@
import * as Analytics from 'client/libs/analytics';
export default {
components: {
AppFooter,
StaticHeader,
},
data () {
return {
icons: Object.freeze({
@@ -503,7 +468,7 @@
hitType: 'pageview',
eventCategory: 'page',
eventAction: 'landing page',
page: '/home',
page: '/static/home',
});
hello.init({

25
website/client/components/static/maintenance.vue
View File

@@ -1,25 +0,0 @@
<template lang="pug">
.col-6.offset-3
h1 {{ $t('habiticaBackSoon') }}
img.img-rendering-auto.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/assets/scene_maintenance.png')
p {{ $t('importantMaintenance') }}
p(v-html="$t('twitterMaintenanceUpdates')")
ul.lead(style='list-style-position:inside')
li {{ $t('noDamageKeepStreaks') }}
li {{ $t('veteranPetAward') }}
p(v-html="$t('maintenanceMoreInfo', maintenanceMoreInfo)")
p.lead {{ $t('thanksForPatience') }}
</template>
<script>
export default {
data () {
return {
maintenanceMoreInfo: {
linkStart: '<a href="/views/static/maintenance-info">',
linkEnd: '</a>',
},
};
},
};
</script>

46
website/client/components/static/maintenanceInfo.vue
View File

@@ -1,46 +0,0 @@
<template lang="pug">
.container
h1.text-center {{ $t('maintenanceInfoTitle') }}
img.img-rendering-auto.center-block.img-responsive(src='https://d2afqr2xdmyzvu.cloudfront.net/assets/scene_maintenance.png')
h2 {{ $t('maintenanceInfoWhat') }}
p(v-html="$t('maintenanceInfoWhatText')")
img.pull-left(src='https://d2afqr2xdmyzvu.cloudfront.net/assets/scene_new.png')
h2 {{ $t('maintenanceInfoWhy') }}
p {{ $t('maintenanceInfoWhyText') }}
p(v-html="$t('maintenanceInfoTechDetails')")
h2 {{ $t('maintenanceInfoMore') }}
h3 {{ $t('maintenanceInfoAccountChanges') }}
p(v-html="$t('maintenanceInfoAccountChangesText', { hrefTechAssistanceEmail })")
h3 {{ $t('maintenanceInfoAddFeatures') }}
p {{ $t('maintenanceInfoAddFeaturesText') }}
h3 {{ $t('maintenanceInfoHowLong') }}
img.pull-right(src='https://d2afqr2xdmyzvu.cloudfront.net/assets/scene_chatter.png')
p(v-html="$t('maintenanceInfoHowLongText')")
h3 {{ $t('maintenanceInfoStatsAffected') }}
p {{$t('maintenanceInfoStatsAffectedText1')}}
p {{$t('maintenanceInfoStatsAffectedText2')}}
h3 {{ $t('maintenanceInfoSeeTasks') }}
p {{ $t('maintenanceInfoSeeTasksText') }}
h3 {{ $t('maintenanceInfoRarePet') }}
p {{ $t('maintenanceInfoRarePetText') }}
img.pull-left(src='https://d2afqr2xdmyzvu.cloudfront.net/assets/scene_coding.png')
h3 {{ $t('maintenanceInfoWho') }}
p {{ $t('maintenanceInfoWhoText') }}
p {{ $t('maintenanceInfoTesting') }}
</template>
<script>
// @TODO: EMAILS.TECH_ASSISTANCE_EMAIL
const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
export default {
data () {
return {
hrefTechAssistanceEmail: `<a href="mailto:${TECH_ASSISTANCE_EMAIL}">${TECH_ASSISTANCE_EMAIL}</a>`,
};
},
};
</script>

19
website/client/components/static/merch.vue
View File

@@ -1,6 +1,4 @@
<template lang="pug">
div
static-header
.container-fluid
.row
.col-md-6.offset-3
@@ -15,27 +13,10 @@
img.img-rendering-auto(:src="`~assets/images/merch/${merchant.key}.png`")
p {{ $t('merch-' + merchant.key + '-summary') }}
a.btn.btn-primary(:href="merchant.link" target='_blank') {{$t('merch-' + merchant.key + '-goto')}}
app-footer
</template>
<style lang='scss' scoped>
@import '~client/assets/scss/static.scss';
.container-fluid {
margin-top: 56px;
margin-bottom: 56px;
}
</style>
<script>
import AppFooter from 'client/components/appFooter';
import StaticHeader from './header.vue';
export default {
components: {
AppFooter,
StaticHeader,
},
data () {
return {
merchants: [

14
website/client/components/static/pressKit.vue
View File

@@ -1,6 +1,4 @@
<template lang="pug">
div
static-header
.container-fluid
h1 {{ $t('presskit') }}
p {{ $t('presskitText', { pressEnquiryEmail : PRESS_ENQUIRY_EMAIL }) }}
@@ -17,26 +15,14 @@
h3 {{ $t('pk' + category) }}
div(v-for='img in images')
img.img-rendering-auto.press-img(:src="`/presskit/#$category}/${cat}/${img}.png`")
app-footer
</template>
<style lang='scss' scoped>
@import '~client/assets/scss/static.scss';
</style>
<script>
import AppFooter from 'client/components/appFooter';
import StaticHeader from './header.vue';
// @TODO: How to use images?
// @TODO: EMAILS.PRESS_ENQUIRY_EMAIL
const PRESS_ENQUIRY_EMAIL = 'admin@habitica.com';
export default {
components: {
AppFooter,
StaticHeader,
},
data () {
return {
PRESS_ENQUIRY_EMAIL,

19
website/client/components/static/privacy.vue
View File

@@ -1,6 +1,4 @@
<template lang="pug">
div
static-header
.container-fluid
h1 Privacy Policy
p.pagemeta
@@ -298,21 +296,4 @@
br
| Email&colon;&nbsp;
a(href='mailto:admin@habitica.com') admin@habitica.com
app-footer
</template>
<style lang='scss' scoped>
@import '~client/assets/scss/static.scss';
</style>
<script>
import AppFooter from 'client/components/appFooter';
import StaticHeader from './header.vue';
export default {
components: {
AppFooter,
StaticHeader,
},
};
</script>

75
website/client/components/static/staticWrapper.vue Normal file
View File

@@ -0,0 +1,75 @@
<template lang='pug'>
div
static-header
.static-wrapper
router-view
#purple-footer
app-footer
</template>
<style lang='scss'>
@import '~client/assets/scss/colors.scss';
#purple-footer {
background-color: #271b3d;
footer, footer a {
background: transparent;
color: #d5c8ff;
}
.logo {
color: #bda8ff;
}
.social-circle, .btn-donate {
background: #36205d;
color: #bda8ff;
.svg-icon {
color: #bda8ff;
}
}
}
.static-wrapper {
.container-fluid {
margin: 5em 2em 2em 2em;
}
h1, h2 {
margin-top: 0.5em;
color: $purple-200;
}
h3, h4 {
color: $purple-200;
}
li, p {
font-size: 16px;
}
.media img {
margin: 1em;
}
.strong {
font-weight: bold;
}
}
</style>
<script>
import AppFooter from 'client/components/appFooter';
import StaticHeader from './header.vue';
export default {
components: {
AppFooter,
StaticHeader,
},
};
</script>

19
website/client/components/static/terms.vue
View File

@@ -1,6 +1,4 @@
<template lang="pug">
div
static-header
.container-fluid
h1 Terms of Use
p.pagemeta
@@ -567,21 +565,4 @@
br
| If you have any questions about these Terms of Service&comma; please contact
| us at <a href='mailto:admin@habitica.com'>admin@habitica.com</a>
app-footer
</template>
<style lang='scss' scoped>
@import '~client/assets/scss/static.scss';
</style>
<script>
import AppFooter from 'client/components/appFooter';
import StaticHeader from './header.vue';
export default {
components: {
AppFooter,
StaticHeader,
},
};
</script>

9
website/client/components/static/videos.vue
View File

@@ -1,9 +0,0 @@
<template lang="pug">
.row
.col-md-12#aboutPage
iframe(src='//player.vimeo.com/video/76557040', width='100%', height='539', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
iframe(src='//player.vimeo.com/video/57654086', width='100%', height='539', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
iframe(src='//player.vimeo.com/video/79172253', width='100%', height='539', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
iframe(src='//player.vimeo.com/video/79172327', width='100%', height='539', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
iframe(src='//player.vimeo.com/video/79172363', width='100%', height='539', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
</template>

11
website/client/router.js
View File

@@ -9,6 +9,7 @@ import * as Analytics from 'client/libs/analytics';
import ParentPage from './components/parentPage';
// Static Pages
const StaticWrapper = () => import(/* webpackChunkName: "static" */'./components/static/staticWrapper');
const AppPage = () => import(/* webpackChunkName: "static" */'./components/static/app');
const ClearBrowserDataPage = () => import(/* webpackChunkName: "static" */'./components/static/clearBrowserData');
const CommunityGuidelinesPage = () => import(/* webpackChunkName: "static" */'./components/static/communityGuidelines');
@@ -17,14 +18,11 @@ const FAQPage = () => import(/* webpackChunkName: "static" */'./components/stati
const FeaturesPage = () => import(/* webpackChunkName: "static" */'./components/static/features');
const HomePage = () => import(/* webpackChunkName: "static" */'./components/static/home');
const GroupPlansPage = () => import(/* webpackChunkName: "static" */'./components/static/groupPlans');
const MaintenancePage = () => import(/* webpackChunkName: "static" */'./components/static/maintenance');
const MaintenanceInfoPage = () => import(/* webpackChunkName: "static" */'./components/static/maintenanceInfo');
const MerchPage = () => import(/* webpackChunkName: "static" */'./components/static/merch');
const OverviewPage = () => import(/* webpackChunkName: "static" */'./components/static/overview');
const PressKitPage = () => import(/* webpackChunkName: "static" */'./components/static/pressKit');
const PrivacyPage = () => import(/* webpackChunkName: "static" */'./components/static/privacy');
const TermsPage = () => import(/* webpackChunkName: "static" */'./components/static/terms');
const VideosPage = () => import(/* webpackChunkName: "static" */'./components/static/videos');
const RegisterLogin = () => import(/* webpackChunkName: "auth" */'./components/auth/registerLogin');
@@ -100,7 +98,6 @@ const router = new VueRouter({
},
// requiresLogin is true by default, isStatic false
routes: [
{ name: 'home', path: '/home', component: HomePage, meta: {requiresLogin: false} },
{ name: 'register', path: '/register', component: RegisterLogin, meta: {requiresLogin: false} },
{ name: 'login', path: '/login', component: RegisterLogin, meta: {requiresLogin: false} },
{ name: 'tasks', path: '/', component: UserTasks },
@@ -239,7 +236,7 @@ const router = new VueRouter({
},
{
path: '/static',
component: ParentPage,
component: StaticWrapper,
children: [
{ name: 'app', path: 'app', component: AppPage, meta: {requiresLogin: false}},
{ name: 'clearBrowserData', path: 'clear-browser-data', component: ClearBrowserDataPage, meta: {requiresLogin: false}},
@@ -248,15 +245,13 @@ const router = new VueRouter({
{ name: 'faq', path: 'faq', component: FAQPage, meta: {requiresLogin: false}},
{ name: 'features', path: 'features', component: FeaturesPage, meta: {requiresLogin: false}},
{ name: 'groupPlans', path: 'group-plans', component: GroupPlansPage, meta: {requiresLogin: false}},
{ name: 'maintenance', path: 'maintenance', component: MaintenancePage, meta: {requiresLogin: false}},
{ name: 'maintenance-info', path: 'maintenance-info', component: MaintenanceInfoPage, meta: {requiresLogin: false}},
{ name: 'home', path: 'home', component: HomePage, meta: {requiresLogin: false} },
{ name: 'merch', path: 'merch', component: MerchPage, meta: {requiresLogin: false}},
{ name: 'overview', path: 'overview', component: OverviewPage, meta: {requiresLogin: false}},
{ name: 'plans', path: 'plans', component: GroupPlansPage, meta: {requiresLogin: false}},
{ name: 'pressKit', path: 'press-kit', component: PressKitPage, meta: {requiresLogin: false}},
{ name: 'privacy', path: 'privacy', component: PrivacyPage, meta: {requiresLogin: false}},
{ name: 'terms', path: 'terms', component: TermsPage, meta: {requiresLogin: false}},
{ name: 'videos', path: 'videos', component: VideosPage, meta: {requiresLogin: false}},
],
},
{