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

Added mobile style fixes (#9741)

Browse Source
This commit is contained in:
Keith Holliday
2017-12-26 17:31:00 -06:00
committed by GitHub
parent a3bf329c44
commit d90d781740
14 changed files with 134 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -69,8 +69,8 @@
a.social-circle(href='https://www.facebook.com/Habitica', target='_blank')
.social-icon.facebook.svg-icon(v-html='icons.facebook')
.row
.col-10 {{ $t('donateText3') }}
.col-2
.col-12.col-md-10 {{ $t('donateText3') }}
.col-12.col-md-2
button.btn.btn-contribute(@click="donate()", v-if="user")
.svg-icon.heart(v-html="icons.heart")
.text {{ $t('companyDonate') }}
@@ -82,7 +82,7 @@
.col-12
hr
.row
.col-5
.col-12.col-md-5
| © 2017 Habitica. All rights reserved.
.debug.float-left(v-if="!IS_PRODUCTION && isUserLoaded")
button.btn.btn-primary(@click="debugMenuShown = !debugMenuShown") Toggle Debug Menu
@@ -102,9 +102,9 @@
a.btn.btn-default(@click="addQuestProgress()", tooltip="+1000 to boss quests. 300 items to collection quests") Quest Progress Up
a.btn.btn-default(@click="makeAdmin()") Make Admin
a.btn.btn-default(@click="openModifyInventoryModal()") Modify Inventory
.col-2.text-center
.col-12.col-md-2.text-center
.logo.svg-icon(v-html='icons.gryphon')
.col-5.text-right
.col-12.col-md-5.text-right
template(v-if="!isExpandedFooter")
span
a(:href="getDataDisplayToolUrl", target='_blank') {{ $t('dataDisplayTool') }}

21
website/client/components/auth/registerLoginReset.vue
View File

@@ -4,8 +4,8 @@
.seamless_stars_varied_opacity_repeat
form#login-form(
@submit.prevent='handleSubmit',
@keyup.enter="handleSubmit",
@submit.prevent='handleSubmit',
@keyup.enter="handleSubmit",
v-if="!forgotPassword && !resetPasswordSetNewOne",
)
.text-center
@@ -14,11 +14,11 @@
div
.svg-icon.habitica-logo(v-html="icons.habiticaIcon")
.form-group.row.text-center
.col-6
.col-12.col-md-6
.btn.btn-secondary.social-button(@click='socialAuth("facebook")')
.svg-icon.social-icon(v-html="icons.facebookIcon")
.text {{registering ? $t('signUpWithSocial', {social: 'Facebook'}) : $t('loginWithSocial', {social: 'Facebook'})}}
.col-6
.col-12.col-md-6
.btn.btn-secondary.social-button(@click='socialAuth("google")')
.svg-icon.social-icon(v-html="icons.googleIcon")
span {{registering ? $t('signUpWithSocial', {social: 'Google'}) : $t('loginWithSocial', {social: 'Google'})}}
@@ -79,7 +79,7 @@
input#confirmPasswordInput.form-control(type='password', :placeholder='$t("confirmPasswordPlaceholder")', v-model='passwordConfirm')
.text-center
.btn.btn-info(
@click='resetPasswordSetNewOneLink()',
@click='resetPasswordSetNewOneLink()',
:enabled="!resetPasswordSetNewOneData.hasError"
) {{$t('setNewPass')}}
@@ -121,6 +121,17 @@
}
}
@media only screen and (max-width: 768px) {
#login-form {
width: 100% !important;
}
.form-group {
padding-left: .5em;
padding-right: .5em;
}
}
.form-wrapper {
background-color: $purple-200;
background: $purple-200; /* For browsers that do not support gradients */

11
website/client/components/challenges/challengeDetail.vue
View File

@@ -4,10 +4,9 @@
leave-challenge-modal(:challengeId='challenge._id')
close-challenge-modal(:members='members', :challengeId='challenge._id')
challenge-member-progress-modal(:memberId='progressMemberId', :challengeId='challenge._id')
.col-8.standard-page
.col-12.col-md-8.standard-page
.row
.col-8
.col-12.col-md-8
h1(v-markdown='challenge.name')
div
strong(v-once) {{$t('createdBy')}}:
@@ -20,7 +19,7 @@
// span {{challenge.endDate}}
.tags
span.tag(v-for='tag in challenge.tags') {{tag}}
.col-4
.col-12.col-md-4
.box(@click="showMemberModal()")
.svg-icon.member-icon(v-html="icons.memberIcon")
| {{challenge.memberCount}}
@@ -30,7 +29,7 @@
| {{challenge.prize}}
.details(v-once) {{$t('prize')}}
.row.challenge-actions
.col-7.offset-5
.col-12.col-md-7.offset-md-5
span.view-progress
strong {{ $t('viewProgressOf') }}
member-search-dropdown(:text="$t('selectParticipant')", :members='members', :challengeId='challengeId', @member-selected='openMemberProgressModal')
@@ -56,7 +55,7 @@
:taskListOverride='tasksByType[column]',
v-on:editTask="editTask",
v-if='tasksByType[column].length > 0')
.col-4.sidebar.standard-page
.col-12.col-md-4.sidebar.standard-page
.acitons
div(v-if='canJoin')
button.btn.btn-success(v-once, @click='joinChallenge()') {{$t('joinChallenge')}}

3
website/client/components/challenges/findChallenges.vue
View File

@@ -2,8 +2,7 @@
.row
challenge-modal(v-on:createChallenge='challengeCreated')
sidebar(v-on:search="updateSearch", v-on:filter="updateFilters")
.col-10.standard-page
.col-12.col-md-10.standard-page
.row.header-row
.col-md-8.text-left
h1(v-once) {{$t('findChallenges')}}

1
website/client/components/challenges/sidebar.vue
View File

@@ -2,7 +2,6 @@
.standard-sidebar.d-none.d-sm-block
.form-group
input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
form
h2(v-once) {{ $t('filter') }}
.form-group

4
website/client/components/groups/group.vue
View File

@@ -7,11 +7,11 @@
group-gems-modal
.col-12.col-sm-8.standard-page
.row
.col-6.title-details
.col-12.col-md-6.title-details
h1 {{group.name}}
strong.float-left(v-once) {{$t('groupLeader')}}
span.leader.float-left(v-if='group.leader.profile', @click='showMemberProfile(group.leader)') : {{group.leader.profile.name}}
.col-6
.col-12.col-md-6
.row.icon-row
.col-4.offset-4(v-bind:class="{ 'offset-8': isParty }")
.item-with-icon(@click="showMemberModal()")

6
website/client/components/groups/myGuilds.vue
View File

@@ -60,6 +60,12 @@
}
}
}
@media only screen and (max-width: 768px) {
.no-guilds-wrapper {
width: 100% !important;
}
}
</style>
<script>

8
website/client/components/header/index.vue
View File

@@ -11,7 +11,7 @@ div
.view-party.d-flex.align-items-center(
v-if="user.party && user.party._id && partyMembers && partyMembers.length > 1",
)
button.btn.btn-primary(@click='openPartyModal()') {{ $t('viewParty') }}
button.btn.btn-primary.view-party-button(@click='openPartyModal()') {{ $t('viewParty') }}
.party-members.d-flex(
v-if="partyMembers && partyMembers.length > 1",
v-resize="1500",
@@ -98,6 +98,12 @@ div
margin-top: 16px;
}
}
@media only screen and (max-width: 768px) {
.view-party-button {
display: none;
}
}
</style>
<script>

18
website/client/components/shops/market/index.vue
View File

@@ -61,10 +61,10 @@
h1.mb-4.page-header(v-once) {{ $t('market') }}
.clearfix(v-if="viewOptions['equipment'].selected")
h2.float-left.mb-3
h2.float-left.mb-3.filters-title
| {{ $t('equipment') }}
div.float-right
.filters.float-right
span.dropdown-label {{ $t('class') }}
b-dropdown(right=true)
span.dropdown-icon-item(slot="text")
@@ -328,6 +328,20 @@
right: -.5em;
top: -.5em;
}
@media only screen and (max-width: 768px) {
.featuredItems .content {
display: none !important;
}
.filters, .filters-title {
float: none;
button {
margin-right: 4em;
margin-bottom: 1em;
}
}
}
</style>

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

@@ -1,7 +1,7 @@
<template lang="pug">
.container-fluid
.row
.col-md-6.offset-3
.col-12.col-md-6.offset-md-3
h1 {{ $t('frequentlyAskedQuestions') }}
.faq-question(v-for='(heading, index) in headings')
h2.accordion(@click='setActivePage(heading)') {{ $t(`faqQuestion${index}`) }}
@@ -14,6 +14,12 @@
.faq-question {
margin-bottom: 1em;
}
@media only screen and (max-width: 768px) {
.container-fluid {
margin: auto;
}
}
</style>
<script>

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

@@ -37,7 +37,7 @@
.pixel-horizontal.svg-icon(v-html='icons.pixelHorizontal')
.container
.row
.col-12.col-sm-6.col-md-6.col-lg-6.offset-3.text-center
.col-12.col-sm-6.col-md-6.col-lg-6.offset-sm-3.text-center
h2 {{$t('gamifyYourLife')}}
p.section-main {{$t('aboutHabitica')}}
.row
@@ -502,6 +502,19 @@
opacity: .5;
}
}
@media only screen and (max-width: 768px) {
#call-to-action .btn-primary {
width: 95%;
}
#call-to-action .featured .svg-icon {
display: block;
margin: 0 auto;
margin-bottom: .5em;
}
}
</style>
<script>

6
website/client/components/tasks/taskModal.vue
View File

@@ -514,6 +514,12 @@
width: 57px;
}
}
@media only screen and (max-width: 768px) {
.option-item {
margin-right: 12px !important;
}
}
</style>
<style lang="scss" scoped>

9
website/client/components/tasks/user.vue
View File

@@ -9,7 +9,7 @@
)
.col-12
.row.tasks-navigation
.col-4.offset-4
.col-12.col-md-4.offset-md-4
.d-flex
input.form-control.input-search(type="text", :placeholder="$t('search')", v-model="searchText")
button.btn.btn-secondary.dropdown-toggle.ml-2.d-flex.align-items-center(
@@ -288,6 +288,13 @@
}
}
}
@media only screen and (max-width: 768px) {
.filter-panel {
max-width: none;
left: 0px;
}
}
</style>
<script>

82
website/client/components/userMenu/profile.vue
View File

@@ -17,22 +17,22 @@ div
.col-12
member-details(:member="user")
.row
.col-6.offset-3.text-center.nav
.col-12.col-md-6.offset-md-3.text-center.nav
.nav-item(@click='selectPage("profile")', :class="{active: selectedPage === 'profile'}") {{ $t('profile') }}
.nav-item(@click='selectPage("stats")', :class="{active: selectedPage === 'stats'}") {{ $t('stats') }}
.nav-item(@click='selectPage("achievements")', :class="{active: selectedPage === 'achievements'}") {{ $t('achievements') }}
#userProfile.standard-page(v-show='selectedPage === "profile"', v-if='user.profile')
.row
.col-8
.col-12.col-md-8
.header
h1 {{user.profile.name}}
h4
strong {{ $t('userId') }}:
| {{user._id}}
.col-4
.col-12.col-md-4
button.btn.btn-secondary(v-if='user._id === userLoggedIn._id', @click='editing = !editing') {{ $t('edit') }}
.row(v-if='!editing')
.col-8
.col-12.col-md-8
.about
h2 {{ $t('about') }}
p(v-if='user.profile.blurb', v-markdown='user.profile.blurb')
@@ -42,7 +42,7 @@ div
img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
p(v-else) {{ $t('noPhoto') }}
.col-4
.col-12.col-md-4
.info
h2 {{ $t('info') }}
div
@@ -93,7 +93,7 @@ div
#achievements.standard-page.container(v-show='selectedPage === "achievements"', v-if='user.achievements')
.row(v-for='(category, key) in achievements')
h2.col-12.text-center {{ $t(key+'Achievs') }}
.col-3.text-center(v-for='(achievement, key) in category.achievements')
.col-12.col-md-3.text-center(v-for='(achievement, key) in category.achievements')
.box.achievement-container(:id='key + "-achievement"', :class='{"achievement-unearned": !achievement.earned}')
b-popover(
:target="'#' + key + '-achievement'",
@@ -107,103 +107,103 @@ div
.achievement.achievement-unearned(class='achievement-unearned2x', v-if='!achievement.earned')
hr.col-12
.row
.col-6(v-if='user.achievements.challenges')
.col-12.col-md-6(v-if='user.achievements.challenges')
.achievement-icon.achievement-karaoke
h2.text-center {{$t('challengesWon')}}
div(v-for='chal in user.achievements.challenges')
span(v-markdown='chal')
hr
.col-6(v-if='user.achievements.quests')
.col-12.col-md-6(v-if='user.achievements.quests')
.achievement-icon.achievement-alien
h2.text-center {{$t('questsCompleted')}}
div(v-for='(value, key) in user.achievements.quests')
span {{ content.quests[key].text() }} ({{ value }})
#stats.standard-page(v-show='selectedPage === "stats"', v-if='user.preferences')
.row
.col-6
.col-12.col-md-6
h2.text-center {{$t('equipment')}}
.well
.col-4.item-wrapper
.col-12.col-md-4.item-wrapper
.box(:class='{white: equippedItems.eyewear && equippedItems.eyewear.indexOf("base_0") === -1}')
div(:class="`shop_${equippedItems.eyewear}`")
h3 {{$t('eyewear')}}
.col-4.item-wrapper
.col-12.col-md-4.item-wrapper
.box(:class='{white: equippedItems.head && equippedItems.head.indexOf("base_0") === -1}')
div(:class="`shop_${equippedItems.head}`")
h3 {{$t('headgearCapitalized')}}
.col-4.item-wrapper
.col-12.col-md-4.item-wrapper
.box(:class='{white: equippedItems.headAccessory && equippedItems.headAccessory.indexOf("base_0") === -1}')
div(:class="`shop_${equippedItems.headAccessory}`")
h3 {{$t('headAccess')}}
.col-4.item-wrapper
.col-12.col-md-4.item-wrapper
.box(:class='{white: equippedItems.back && equippedItems.back.indexOf("base_0") === -1}')
div(:class="`shop_${equippedItems.back}`")
h3 {{$t('backAccess')}}
.col-4.item-wrapper
.col-12.col-md-4.item-wrapper
.box(:class='{white: equippedItems.armor && equippedItems.armor.indexOf("base_0") === -1}')
div(:class="`shop_${equippedItems.armor}`")
h3 {{$t('armorCapitalized')}}
.col-4.item-wrapper
.col-12.col-md-4.item-wrapper
.box(:class='{white: equippedItems.body && equippedItems.body.indexOf("base_0") === -1}')
div(:class="`shop_${equippedItems.body}`")
h3 {{$t('bodyAccess')}}
.col-4.item-wrapper
.col-12.col-md-4.item-wrapper
.box(:class='{white: equippedItems.weapon && equippedItems.weapon.indexOf("base_0") === -1}')
div(:class="`shop_${equippedItems.weapon}`")
h3 {{$t('mainHand')}}
.col-4.item-wrapper
.col-4.item-wrapper
.col-12.col-md-4.item-wrapper
.col-12.col-md-4.item-wrapper
.box(:class='{white: equippedItems.shield && equippedItems.shield.indexOf("base_0") === -1}')
div(:class="`shop_${equippedItems.shield}`")
h3 {{$t('offHand')}}
.col-6
.col-12.col-md-6
h2.text-center {{$t('costume')}}
.well
.col-4.item-wrapper
.col-12.col-md-4.item-wrapper
.box(:class='{white: costumeItems.eyewear && costumeItems.eyewear.indexOf("base_0") === -1}')
div(:class="`shop_${costumeItems.eyewear}`")
h3 {{$t('eyewear')}}
.col-4.item-wrapper
.col-12.col-md-4.item-wrapper
.box(:class='{white: costumeItems.head && costumeItems.head.indexOf("base_0") === -1}')
div(:class="`shop_${costumeItems.head}`")
h3 {{$t('headgearCapitalized')}}
.col-4.item-wrapper
.col-12.col-md-4.item-wrapper
.box(:class='{white: costumeItems.headAccessory && costumeItems.headAccessory.indexOf("base_0") === -1}')
div(:class="`shop_${costumeItems.headAccessory}`")
h3 {{$t('headAccess')}}
.col-4.item-wrapper
.col-12.col-md-4.item-wrapper
.box(:class='{white: costumeItems.back && costumeItems.back.indexOf("base_0") === -1}')
div(:class="`shop_${costumeItems.back}`")
h3 {{$t('backAccess')}}
.col-4.item-wrapper
.col-12.col-md-4.item-wrapper
.box(:class='{white: costumeItems.armor && costumeItems.armor.indexOf("base_0") === -1}')
div(:class="`shop_${costumeItems.armor}`")
h3 {{$t('armorCapitalized')}}
.col-4.item-wrapper
.col-12.col-md-4.item-wrapper
.box(:class='{white: costumeItems.body && costumeItems.body.indexOf("base_0") === -1}')
div(:class="`shop_${costumeItems.body}`")
h3 {{$t('bodyAccess')}}
.col-4.item-wrapper
.col-12.col-md-4.item-wrapper
.box(:class='{white: costumeItems.weapon && costumeItems.weapon.indexOf("base_0") === -1}')
div(:class="`shop_${costumeItems.weapon}`")
h3 {{$t('mainHand')}}
.col-4.item-wrapper
.col-12.col-md-4.item-wrapper
.box(:class='{white: user.preferences.background}', style="overflow:hidden")
div(:class="'icon_background_' + user.preferences.background")
h3 {{$t('background')}}
.col-4.item-wrapper
.col-12.col-md-4.item-wrapper
.box(:class='{white: costumeItems.shield && costumeItems.shield.indexOf("base_0") === -1}')
div(:class="`shop_${costumeItems.shield}`")
h3 {{$t('offHand')}}
.row.pet-mount-row
.col-6
.col-12.col-md-6
h2.text-center(v-once) {{ $t('pets') }}
.well.pet-mount-well
.row.col-12
.col-4
.col-12.col-md-4
.box(:class='{white: user.items.currentPet}')
.pet(:class="`Pet-${user.items.currentPet}`")
.col-8
.col-12.col-md-8
div
| {{ formatAnimal(user.items.currentPet, 'pet') }}
div
@@ -212,14 +212,14 @@ div
div
strong {{ $t('beastMasterProgress') }}:
| {{ beastMasterProgress(user.items.pets) }}
.col-6
.col-12.col-md-6
h2.text-center(v-once) {{ $t('mounts') }}
.well.pet-mount-well
.row.col-12
.col-4
.col-12.col-md-4
.box(:class='{white: user.items.currentMount}')
.mount(:class="`Mount_Icon_${user.items.currentMount}`")
.col-8
.col-12.col-md-8
div
| {{ formatAnimal(user.items.currentMount, 'mount') }}
div
@@ -231,14 +231,14 @@ div
#attributes.row
hr.col-12
h2.col-12 {{$t('attributes')}}
.col-6(v-for="(statInfo, stat) in stats")
.col-12.col-md-6(v-for="(statInfo, stat) in stats")
.row.col-12.stats-column
.col-4.attribute-label
.col-12.col-md-4.attribute-label
span.hint(:popover-title='$t(statInfo.title)', popover-placement='right',
:popover='$t(statInfo.popover)', popover-trigger='mouseenter')
.stat-title(:class='stat') {{ $t(statInfo.title) }}
strong.number {{ statsComputed[stat] }}
.col-6
.col-12.col-md-6
ul.bonus-stats
li
strong {{$t('level')}}:
@@ -257,26 +257,26 @@ div
| {{user.stats.buffs[stat]}}
#allocation(v-if='user._id === userLoggedIn._id')
.row.title-row
.col-6
.col-12.col-md-6
h3(v-if='userLevel100Plus', v-once, v-html="$t('noMoreAllocate')")
h3(v-if='user.stats.points || userLevel100Plus')
| {{$t('pointsAvailable')}}
.counter.badge(v-if='user.stats.points || userLevel100Plus')
| {{user.stats.points}}&nbsp;
.col-6
.col-12.col-md-6
.float-right
toggle-switch(:label="$t('autoAllocation')",
v-model='user.preferences.automaticAllocation',
@change='userset({"preferences.automaticAllocation": Boolean(user.preferences.automaticAllocation), "preferences.allocationMode": "taskbased"})')
.row
.col-3(v-for='(statInfo, stat) in allocateStatsList')
.col-12.col-md-3(v-for='(statInfo, stat) in allocateStatsList')
.box.white.row.col-12
.col-12
div(:class='stat') {{ $t(stats[stat].title) }}
.number {{ user.stats[stat] }}
.points {{$t('pts')}}
.col-4
.col-12.col-md-4
.up(v-if='user.stats.points', @click='allocate(stat)')
send-gems-modal(:userReceivingGems='userReceivingGems')
</template>