Skip to content

Commit

Permalink
WIP(privacy): mobile layout, add modal
Browse files Browse the repository at this point in the history
  • Loading branch information
SabreCat committed Dec 23, 2024
1 parent 38b5cb2 commit f13fcdb
Show file tree
Hide file tree
Showing 6 changed files with 164 additions and 18 deletions.
3 changes: 3 additions & 0 deletions website/client/src/components/appFooter.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<div>
<buy-gems-modal v-if="user" />
<privacy-modal />
<footer>
<!-- Product -->
<div class="product">
Expand Down Expand Up @@ -862,6 +863,7 @@ import heart from '@/assets/svg/heart.svg';
// components & modals
import { mapState } from '@/libs/store';
import buyGemsModal from './payments/buyGemsModal.vue';
import privacyModal from './settings/privacyModal.vue';
import reportBug from '@/mixins/reportBug.js';
import { worldStateMixin } from '@/mixins/worldState';
Expand All @@ -876,6 +878,7 @@ if (TIME_TRAVEL_ENABLED) {
export default {
components: {
buyGemsModal,
privacyModal,
},
mixins: [
reportBug,
Expand Down
51 changes: 45 additions & 6 deletions website/client/src/components/header/banners/privacy.vue
Original file line number Diff line number Diff line change
@@ -1,33 +1,72 @@
<template>
<div class="d-flex align-items-center justify-content-between py-3 px-4">
<div class="banner d-flex align-items-center justify-content-between py-3 px-4">
<p
class="mr-3 mb-0"
v-html="$t('privacyOverview')"
v-html="$t('privacyOverview') + ' ' + $t('learnMorePrivacy')"
>
</p>
<div class="d-flex flex-column justify-content-around text-center ml-3">
<div class="navigation d-flex flex-column justify-content-around text-center ml-2">
<button class="btn btn-primary mb-2">
{{ $t('acceptAllCookies') }}
</button>
<button class="btn btn-secondary mb-2">
{{ $t('denyNonEssentialCookies') }}
</button>
<a>{{ $t('managePrivacyPreferences') }}</a>
<a
v-if="isStaticPage"
@click="showPrivacyModal"
>
{{ $t('managePrivacyPreferences') }}
</a>
<router-link
v-else
to="/user/settings/siteData"
>
{{ $t('managePrivacyPreferences') }}
</router-link>
</div>
</div>
</template>

<style lang="scss" scoped>
button {
min-width: 40px;
width: 558px;
}
a, p {
line-height: 1.714;
}
@media only screen and (max-width: 992px) {
.banner {
flex-direction: column !important;
.navigation {
margin-left: 0px !important;
}
button {
width: calc(100vw - 48px);
}
p {
margin-bottom: 16px !important;
}
}
}
</style>

<script>
export default {
computed: {
isStaticPage () {
return this.$route.meta.requiresLogin === false;
},
},
methods: {
showPrivacyModal () {
this.$root.$emit('bv::show::modal', 'privacy-preferences');
},
},
};
</script>
95 changes: 95 additions & 0 deletions website/client/src/components/settings/privacyModal.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<template>
<b-modal
id="privacy-preferences"
size="md"
:hide-footer="true"
:hide-header="true"
>
<close-x
@close="close()"
/>
<h1 class="purple-200 mb-3">
{{ $t('yourPrivacyPreferences') }}
</h1>
<p>
{{ $t('privacySettingsOverview') }}
</p>
<div class="mb-4">
<div
class="d-flex justify-content-between align-items-center mb-1"
>
<label class="mb-0">
{{ $t('performanceAnalytics') }}
</label>
<toggle-switch />
</div>
<small>
{{ $t('usedForSupport') }}
</small>
</div>
<div class="mt-1 mb-4">
<div
class="d-flex justify-content-between align-items-center mb-1"
>
<label class="mb-0">
{{ $t('strictlyNecessary') }}
</label>
<toggle-switch />
</div>
<small>
{{ $t('requiredToRun') }}
</small>
</div>
<div class="d-flex flex-column text-center">
<button class="btn btn-primary mb-2">
{{ $t('acceptAllCookies') }}
</button>
<button class="btn btn-secondary mb-2">
{{ $t('denyNonEssentialCookies') }}
</button>
<button class="btn btn-secondary mb-3">
{{ $t('savePreferences') }}
</button>
<a>
{{ $t('habiticaPrivacyPolicy') }}
</a>
</div>
</b-modal>
</template>

<style lang="scss">
#privacy-preferences {
.modal-body {
padding: 24px;
}
.modal-content {
width: 448px;
}
}
</style>

<style lang="scss" scoped>
label {
font-weight: 700;
}
label, p {
line-height: 1.714;
}
</style>

<script>
import closeX from '@/components/ui/closeX';
import ToggleSwitch from '@/components/ui/toggleSwitch.vue';
export default {
components: {
closeX,
ToggleSwitch,
},
methods: {
close () {
this.$root.$emit('bv::hide::modal', 'privacy-preferences');
},
},
};
</script>
14 changes: 8 additions & 6 deletions website/client/src/pages/settings-overview.vue
Original file line number Diff line number Diff line change
Expand Up @@ -100,12 +100,6 @@
max-width: unset;
::v-deep {
line-height: 1.71;
.small {
line-height: 1.33;
}
table td {
padding: 0.5rem;
}
Expand All @@ -121,6 +115,14 @@
width: 23%;
}
small {
line-height: 1.33;
}
.settings-label, .settings-value, a, p {
line-height: 1.71;
}
.input-area .settings-label {
width: unset;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@
<p
v-once
class="gray-50"
v-html="$t('privacySettingsOverview')"
v-html="$t('privacySettingsOverview') + ' ' + $t('learnMorePrivacy')"
>
</p>
<div
v-once
class="d-flex justify-content-center"
>
<div class="w-66">
<div class="mb-28">
<div class="mb-28p">
<div
class="d-flex justify-content-between align-items-center"
>
Expand Down Expand Up @@ -62,7 +62,7 @@
width: fit-content;
}
.mb-28 {
.mb-28p {
margin-bottom: 28px;
}
Expand All @@ -71,6 +71,10 @@
text-align: right;
}
small {
line-height: 1.33;
}
.w-66 {
width: 66.7%;
}
Expand Down
9 changes: 6 additions & 3 deletions website/common/locales/en/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -259,15 +259,18 @@
"connected": "Connected",
"connect": "Connect",
"remove": "Remove",
"privacyOverview": "In today's world, it feels like every company is looking to profit from your data. This can make it difficult to find the right app to improve your habits. Habitica uses cookies that store data only to analyze performance, handle support requests, and provide you with the best possible gamified experience. You can change this at any time from your account settings. To learn more, review our <a href='/static/privacy' target='_blank'>Privacy Policy</a>.",
"privacyOverview": "In today's world, it feels like every company is looking to profit from your data. This can make it difficult to find the right app to improve your habits. Habitica uses cookies that store data only to analyze performance, handle support requests, and provide you with the best possible gamified experience. You can change this at any time from your account settings.",
"acceptAllCookies": "Accept All Cookies",
"denyNonEssentialCookies": "Deny Non-Essential Cookies",
"managePrivacyPreferences": "Manage Your Privacy Preferences",
"yourPrivacyPreferences": "Your Privacy Preferences",
"privacySettingsOverview": "Habitica uses cookies to analyze performance, handle support requests, and provide you with the best possible gamified experience. To do that, we need to request the following permissions. You can change these at any time from your account settings. To learn more, review our <a href='/static/privacy' target='_blank'>Privacy Policy</a>.",
"privacySettingsOverview": "Habitica uses cookies to analyze performance, handle support requests, and provide you with the best possible gamified experience. To do that, we need to request the following permissions. You can change these at any time from your account settings.",
"learnMorePrivacy": "To learn more, review our <a href='/static/privacy' target='_blank'>Privacy Policy</a>.",
"strictlyNecessary": "Strictly Necessary",
"alwaysActive": "Always Active",
"requiredToRun": "These are required by our website and apps to run at their best.",
"performanceAnalytics": "Performance and Analytics",
"usedForSupport": "These are used to improve the user experience, performance, and services of our website and apps. This data is used by our support team when handling requests and bug reports."
"usedForSupport": "These are used to improve the user experience, performance, and services of our website and apps. This data is used by our support team when handling requests and bug reports.",
"savePreferences": "Save Preferences",
"habiticaPrivacyPolicy": "Habitica's Privacy Policy"
}

0 comments on commit f13fcdb

Please sign in to comment.