search

HabitRPG / habitica

A habit tracker app which treats your goals like a Role Playing Game.
https://habitica.com
Other
11.6k stars 4.03k forks source link

Hide Header #9350

Open lemoness opened 6 years ago

lemoness commented 6 years ago

We used to have the option of hiding the gamified header ~, as well as making it sticky so that it stayed when you scrolled down. We'd like to restore both of those options.~

Edited: We're splitting hide header from the sticky header feature, as we suspect the sticky header request touches on some UX issues that require further research.

jvivianwang commented 5 years ago

Hi, I am just wondering if this is still an issue needed to fix since it was created a long time ago. If it is, I would love to work on it. Thanks!

paglias commented 5 years ago

good question @JVi-vi-an ! I think @Tressley is the most suited to respond

Tressley commented 5 years ago

@JVi-vi-an -- These were features we absolutely intended to re-introduce during our Settings overhaul, but they've been pushed to a lower priority while we focus on other features and improvements. We'd love for you to take on this issue!

jvivianwang commented 5 years ago

@paglias @Tressley Thanks for replying. I see! I would love to work on it. I just started to get familiar with Github and this will be a good first issue to work on, so it will be nice to have something simple. If there are anything that you think it's good for a new contributor to work on, let me know as well.

Also before I start, I just to make sure I fully understand the problem. We want to add the two functions in the Settings - option to hide the header whenever and stick the header on the top when scrolling, right?

paglias commented 5 years ago

If there are anything that you think it's good for a new contributor to work on, let me know as well.

There are usually some easy fixes marked with the good first issue tag

Alys commented 5 years ago

@JVi-vi-an Thanks for offering and you're welcome to start on this! I've marked it as in progress for you. If you have questions about anything below, you're welcome to ask! Some of this might not be relevant depending on how you want to work on this the issue.

Yes to this: "We want to add the two functions in the Settings - option to hide the header whenever and stick the header on the top when scrolling"

For hiding the header, I think it should be the strip that contains the user's avatar, stats bar, and party members. The navigation bar above that should not be hidden. For the sticky header option, I think that both the avatar/stats strip and the navigation menu should be sticky.

The options should be placed in the User Icon > Settings screen, in the same list as "Advanced Settings in tasks start collapsed" ... "Don't show popup when attaining a Streak achievement".

In case you are curious, this is what it looked like on the old site. "Show Header" and "Sticky Header" were the options there, but we probably want to expand that text a little to make it more descriptive. On the old site, you could hover over those labels to see more details but we don't have that option now.

The original strings are still in the /website/common/locales/en/settings.json file:

"stickyHeader": "Sticky header",
"showHeaderPop": "Show your avatar, Health/Experience bars, and party.",
"showHeader": "Show Header",
"stickyHeaderPop": "Affix the header to the top of the screen. Unchecked means it scrolls out of view.",

You might like to re-use the "stickyHeader" and "showHeader" strings instead of creating new ones, but if you do create new ones then "stickyHeader" and "showHeader" should be deleted for neatness. "showHeaderPop" and "stickyHeaderPop" can certainly deleted since we don't use pop-up ("Pop") text any more, however you might want to take some of the wording from them and add it to "stickyHeader" and "showHeader". You don't need to worry about the translations for those strings because that's all handled elsewhere (so ignore anything in the /website/common/locales/ directories apart from the "en" directory).

The preference options still exist in the user model so they could be reused: https://github.com/HabitRPG/habitica/blob/e4b2ef65993f03c1acfc88d8923363ebf917b028/website/server/models/user/schema.js#L439 https://github.com/HabitRPG/habitica/blob/e4b2ef65993f03c1acfc88d8923363ebf917b028/website/server/models/user/schema.js#L453

We might want to change the default option for stickyHeader from true to false. On the old site the header was always sticky unless you turned off that option but this new site is designed for the header to be non-sticky by default.

There's some support in the current code for those preference options, although since they've never been used on this new website, that code might not be working and might need large fixes or to be replaced completely. You can see it by grepping through the code base for it:

$ git grep stickyHeader | grep -v locales
website/client/app.vue:46:          div(:class='{sticky: user.preferences.stickyHeader}')
website/client/components/settings/site.vue:399:      if (!this.user.preferences.hideHeader || !this.user.preferences.stickyHeader) return;
website/client/components/settings/site.vue:401:      this.set('stickyHeader');
website/client/components/settings/site.vue:404:      this.set('stickyHeader');
website/server/models/user/schema.js:453:    stickyHeader: {$type: Boolean, default: true},

$ git grep showHeader | grep -v locales
website/client/components/header/index.vue:127:    showHeader () {

$ git grep hideHeader | grep -v locales
website/client/components/header/index.vue:128:      if (this.$store.state.hideHeader) return false;
website/client/components/settings/site.vue:397:    hideHeader () {
website/client/components/settings/site.vue:398:      this.set('hideHeader');
website/client/components/settings/site.vue:399:      if (!this.user.preferences.hideHeader || !this.user.preferences.stickyHeader) return;
website/client/components/settings/site.vue:400:      this.user.preferences.hideHeader = false;
website/client/store/index.js:99:      hideHeader: false,
website/server/models/user/schema.js:439:    hideHeader: {$type: Boolean, default: false},

By the way, reusing the existing preferences.stickyHeader and preferences.hideHeader settings means that anyone who was using non-default values for them on the old website will find that their choices take effect on the new site when the fix for this issue goes live. That might be a little disconcerting but we could advertise it in a Bailey message (staff will arrange that if they decide to). Alternatively, staff could do a migration to adjust everyone's settings to the default values - that might be the least disruptive option. That's not something you need to worry about when writing the fix for this issue.

Note that if the staff say anything that disagrees with what I've written, listen to them not me. :)

jvivianwang commented 5 years ago

@Alys Thank you so much for all of the information, and it is so helpful! I will start working on this, and I will let you know if there is any questions.

jvivianwang commented 5 years ago

I have been having problem installing and starting npm locally on my computer in the habitica directory. I am wondering if I can please get some help or ask for references to solve this problem. Here is what I have in the terminal:

(version of MacOS: 10.13.6)


Vivians-MacBook-Air:habitica vivianwang$ npm install

habitica@4.99.1 postinstall /Users/vivianwang/Habitica/habitica
gulp build

[23:37:03] Using gulpfile ~/Habitica/habitica/gulpfile.js
[23:37:03] Starting 'build'...
[23:37:03] Starting '<anonymous>'...
[23:37:03] Finished '<anonymous>' after 2.38 ms
[23:37:03] Finished 'build' after 7.21 ms
audited 43686 packages in 26.485s
found 30 vulnerabilities (14 low, 14 moderate, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details
Vivians-MacBook-Air:habitica vivianwang$ npm start

`habitica@4.99.1 start /Users/vivianwang/Habitica/habitica
gulp nodemon

[22:36:20] Using gulpfile ~/Habitica/habitica/gulpfile.js
[22:36:20] Starting 'nodemon'...
[22:36:20] Finished 'nodemon' after 64 ms
[22:36:20] [nodemon] 1.18.10
[22:36:20] [nodemon] to restart at any time, enter `rs`
[22:36:20] [nodemon] watching: *.*
[22:36:20] [nodemon] starting `node ./website/server/index.js`
2019-06-10 22:36 gulp nodemon[62169] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2019-06-10 22:36 gulp nodemon[62169] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2019-06-10 22:36 gulp nodemon[62169] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2019-06-10 22:36 gulp nodemon[62169] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2019-06-10 22:36 gulp nodemon[62169] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! habitica@4.99.1 start: `gulp nodemon`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the habitica@4.99.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/vivianwang/.npm/_logs/2019-06-11T02_36_27_664Z-debug.log
Vivians-MacBook-Air:habitica vivianwang$ (node:62172) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect.
paglias commented 5 years ago

Hmm looks like there are some problems with too many files to watch. Searching on google one possible solution seems to be to install watchman from brew brew install watchman and try to reinstall the node-modules folder?

jvivianwang commented 5 years ago

@paglias Thanks for your suggestions. I realized that I installed the wrong version of the node, and now this problem was fixed. However, I did run into a similarly error as #9916 with the same picture displayed on the website.

Here is my error:

Vivians-MacBook-Air:habitica vivianwang$ npm run client:dev

> habitica@4.99.1 client:dev /Users/vivianwang/Habitica/habitica
> node webpack/dev-server.js

[HPM] Proxy created: /api/v3  ->  http://localhost:3000
[HPM] Proxy created: /api/v4  ->  http://localhost:3000
[HPM] Proxy created: /stripe  ->  http://localhost:3000
[HPM] Proxy created: /amazon  ->  http://localhost:3000
[HPM] Proxy created: /paypal  ->  http://localhost:3000
[HPM] Proxy created: /logout-server  ->  http://localhost:3000
[HPM] Proxy created: /export  ->  http://localhost:3000
Listening at http://localhost:8080

webpack built 214e6b0ff9eebf3405ea in 64238ms
ℹ ｢wdm｣: Hash: 214e6b0ff9eebf3405ea
Version: webpack 3.12.0
Time: 64238ms
                                                             Asset     Size  Chunks                    Chunk Names
                              static/images/screenshot.fc15c93.png   658 kB          [emitted]  [big]  
                      static/images/spritesmith-main-3.9d7e6a0.png  66.1 kB          [emitted]         
                      static/images/spritesmith-main-2.abe112a.png  79.4 kB          [emitted]         
                      static/images/spritesmith-main-5.84ff832.png   115 kB          [emitted]         
                     static/images/spritesmith-main-10.44eccd7.png   115 kB          [emitted]         
                      static/images/spritesmith-main-1.aac1c8d.png   604 kB          [emitted]  [big]  
                      static/images/spritesmith-main-6.e07ee31.png   123 kB          [emitted]         
                      static/images/spritesmith-main-8.834d4c3.png   156 kB          [emitted]         
                      static/images/spritesmith-main-7.fc2998d.png   126 kB          [emitted]         
                      static/images/spritesmith-main-9.f9cb1e5.png   117 kB          [emitted]         
                     static/images/spritesmith-main-24.c995933.png   172 kB          [emitted]         
                     static/images/spritesmith-main-13.fcba9c7.png   163 kB          [emitted]         
                     static/images/spritesmith-main-22.382e5fb.png   188 kB          [emitted]         
                     static/images/spritesmith-main-21.e3afa16.png   150 kB          [emitted]         
                     static/images/spritesmith-main-23.c222db2.png   168 kB          [emitted]         
                     static/images/spritesmith-main-20.cbb7854.png   161 kB          [emitted]         
                     static/images/spritesmith-main-11.3f5b7d1.png   300 kB          [emitted]  [big]  
                     static/images/spritesmith-main-14.22b464a.png   162 kB          [emitted]         
                     static/images/spritesmith-main-17.8dfe64c.png   179 kB          [emitted]         
                     static/images/spritesmith-main-15.b118a59.png   146 kB          [emitted]         
                     static/images/spritesmith-main-18.1091fee.png   140 kB          [emitted]         
                     static/images/spritesmith-main-19.30be7fc.png   156 kB          [emitted]         
                     static/images/spritesmith-main-16.345556b.png   135 kB          [emitted]         
                      static/images/spritesmith-main-0.aff9a63.png   575 kB          [emitted]  [big]  
                     static/images/spritesmith-main-12.9bfa993.png   350 kB          [emitted]  [big]  
              static/images/spritesmith-largeSprites-0.1be478f.png  69.9 kB          [emitted]         
                         static/images/paypal-checkout.d4ca445.png  14.2 kB          [emitted]         
                          static/images/justin_textbox.29cc541.png  18.9 kB          [emitted]         
                      static/images/quest_dysheartener.a93d5ea.gif  53.8 kB          [emitted]         
                static/images/quest_lostMasterclasser4.8f74d72.gif    69 kB          [emitted]         
      static/images/ContributorOnly-Equip-CrystalArmor.f221ab1.gif  28.6 kB          [emitted]         
              static/images/BackerOnly-Pet-CerberusPup.83717ea.gif  11.1 kB          [emitted]         
                        static/images/creator-hills-bg.d739925.png  15.4 kB          [emitted]         
           static/images/mantis-static-notification@3x.49ab392.png  40.1 kB          [emitted]         
static/images/heart-translucent-shadow-notification@3x.bdb7013.png  24.6 kB          [emitted]         
                                static/images/group@3x.bafc07b.png   458 kB          [emitted]  [big]  
                                 static/images/gemfall.f24ae94.png  22.9 kB          [emitted]         
                                     static/images/404.28e204e.png  33.3 kB          [emitted]         
          static/images/midground_foreground_extended2.0fe8082.png  13.3 kB          [emitted]         
                                   static/svg/confetti.dcbe2cd.svg  15.8 kB          [emitted]         
                       static/images/mobile-preview@3x.422fbec.png   395 kB          [emitted]  [big]  
                            static/images/home-main@3x.23eeafe.png  18.7 kB          [emitted]         
                         static/images/track-habits@3x.7293d5c.png  46.2 kB          [emitted]         
                         static/images/earn-rewards@3x.acaba17.png   105 kB          [emitted]         
                      static/images/battle-monsters@3x.7cd8d3e.png  66.4 kB          [emitted]         
                       static/images/health-fitness@3x.9676cd7.png  29.2 kB          [emitted]         
                          static/images/school-work@3x.d6eb165.png  29.8 kB          [emitted]         
                            static/images/much-more@3x.e3ed259.png  29.9 kB          [emitted]         
                            static/images/publicSpaces.7aad609.png  32.8 kB          [emitted]         
                            static/images/consequences.c2c3239.png  25.3 kB          [emitted]         
                             static/images/restoration.25584fe.png  10.3 kB          [emitted]         
                                   static/images/staff.2336e4b.png  11.5 kB          [emitted]         
                              static/images/moderators.8c4f83c.png  14.3 kB          [emitted]         
                      static/images/spritesmith-main-4.ddd6ff6.png  59.5 kB          [emitted]         
                                   static/images/drops.568ab19.png   169 kB          [emitted]         
                                   static/images/guild.222c56d.png   413 kB          [emitted]  [big]  
                               static/images/challenge.f740382.png   155 kB          [emitted]         
                          static/images/android_iphone.7e19918.png   224 kB          [emitted]         
                             static/images/integration.4184d98.png  20.3 kB          [emitted]         
                                 static/images/lefnire.94fc71b.png  66.7 kB          [emitted]         
                     static/images/group-management@3x.a45a6f5.png  83.6 kB          [emitted]         
                           static/images/team-based@3x.1d84040.png   112 kB          [emitted]         
                             static/images/top-left@3x.40dca3f.png  56.4 kB          [emitted]         
                            static/images/top-right@3x.a435fe8.png  56.6 kB          [emitted]         
                             static/images/bot-left@3x.c96e7b0.png  46.5 kB          [emitted]         
                            static/images/bot-right@3x.308c2b8.png    46 kB          [emitted]         
                                static/images/party@3x.18168ae.png  79.5 kB          [emitted]         
                              static/images/big-gem@3x.6234489.png  10.9 kB          [emitted]         
                        static/images/mantis-static@3x.74b9d86.png  74.7 kB          [emitted]         
             static/images/heart-translucent-shadow@3x.e156aa0.png  42.6 kB          [emitted]         
      static/images/rage-strike-seasonalShop-scaled@2x.4ad9432.png   193 kB          [emitted]         
            static/images/rage-strike-market-scaled@2x.aded1c4.png  19.2 kB          [emitted]         
            static/images/rage-strike-quests-scaled@2x.9d6ab2e.png  13.4 kB          [emitted]         
             static/images/rage_strike-seasonalShop@2x.5e0d3d3.png  18.9 kB          [emitted]         
                   static/images/rage_strike-market@2x.73350cd.png  16.8 kB          [emitted]         
                   static/images/rage_strike-quests@2x.592fda7.png  17.4 kB          [emitted]         
                  static/images/grassy-meadow-backdrop.b75d689.png    22 kB          [emitted]         
                             static/images/group-14@3x.c812b12.png  31.1 kB          [emitted]         
                             static/images/group-12@3x.32d9fee.png  27.6 kB          [emitted]         
                             static/images/group-13@3x.c93e792.png   129 kB          [emitted]         
                          static/images/assign-task@3x.c7e4a6f.png  38.3 kB          [emitted]         
                    static/images/requires-approval@3x.edc2430.png  14.4 kB          [emitted]         
                   static/images/approval-requested@3x.e94e7ad.png  92.4 kB          [emitted]         
                       static/images/promote-leader@3x.a609bf9.png  68.5 kB          [emitted]         
                       static/images/market_broken_npc.f9de51d.png  10.3 kB          [emitted]         
                   static/images/quest_shop_background.17f2343.png  13.4 kB          [emitted]         
            static/images/quest_shop_broken_background.979064b.png  11.5 kB          [emitted]         
         static/images/seasonal_shop_closed_background.aa753c7.png  10.2 kB          [emitted]         
         static/images/seasonal_shop_opened_background.aa753c7.png  10.2 kB          [emitted]         
                                                              0.js  1.32 MB       0  [emitted]  [big]  static
                                                              1.js   947 kB       1  [emitted]  [big]  settings
                                                              2.js  1.55 MB       2  [emitted]  [big]  guilds
                                                              3.js  1.74 MB       3  [emitted]  [big]  challenges
                                                              4.js   1.1 MB       4  [emitted]  [big]  inventory
                                                              5.js  1.49 MB       5  [emitted]  [big]  group-plans
                                                              6.js   160 kB       6  [emitted]         hall
                                                              7.js   949 kB       7  [emitted]  [big]  entry
                                                              8.js   606 kB       8  [emitted]  [big]  auth
                                                              9.js   719 kB       9  [emitted]  [big]  shops-market
                                                             10.js  1.43 MB      10  [emitted]  [big]  userTasks
                                                             11.js   435 kB      11  [emitted]  [big]  shops-quest
                                                             12.js   362 kB      12  [emitted]  [big]  shops-seasonal
                                                             13.js   273 kB      13  [emitted]  [big]  shops-timetravelers
                                                             14.js  28.6 kB      14  [emitted]         shops
                                                             15.js  17.2 kB      15  [emitted]         user
                                                            app.js    20 MB      16  [emitted]  [big]  app
                                                        index.html  3.63 kB          [emitted]         
  [24] ./node_modules/vue/dist/vue.runtime.esm.js 227 kB {16} [built]
  [62] ./website/client/libs/analytics.js 4.05 kB {16} [built]
  [92] (webpack)/buildin/global.js 509 bytes {16} [built]
 [849] multi babel-polyfill ./website/client/main.js ./webpack/dev-client 52 bytes {16} [built]
 [850] ./node_modules/babel-polyfill/lib/index.js 833 bytes {16} [built]
[1048] ./node_modules/regenerator-runtime/runtime.js 24.1 kB {16} [built]
[1049] ./node_modules/core-js/fn/regexp/escape.js 108 bytes {16} [built]
[1052] ./website/client/main.js 1.45 kB {16} [built]
[1054] ./website/client/app.vue 8.84 kB {16} [built]
[1779] ./website/client/filters/registerGlobals.js 331 bytes {16} [built]
[1783] ./website/client/libs/i18n.js 1.1 kB {16} [built]
[1784] ./node_modules/smartbanner.js/dist/smartbanner.js 15.6 kB {16} [built]
[1785] ./node_modules/bootstrap-vue/es/index.js 1.59 kB {16} [built]
[1915] ./webpack/dev-client.js 262 bytes {16} [built]
[1918] (webpack)-hot-middleware/client.js?noInfo=true&reload=true&overlay=false 7.77 kB {16} [built]
    + 2637 hidden modules
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  1.46 MB       0  
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./website/client/index.html 3.81 kB {0} [built]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
ℹ ｢wdm｣: Compiled successfully.
[HPM] Error occurred while trying to proxy request /api/v4/i18n/browser-script from localhost:8080 to http://localhost:3000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

You mentioned in #9916- Screen Shot 2019-06-12 at 11 36 29 PM

Is "Il 31 Gen 2018 14:10, "Alexey Pyltsyn" <notifications@github.com> ha scritto:" what we supposed to add into the config.json file, or the current file has already had the right information?

If that's not the problem, do you have any other suggestions? Thanks again for your help as always!

Alys commented 5 years ago

As a general guideline, your config.json file should always be exactly the same as the example file. The only time there would be a difference is if you know it's needed for your specific set-up (e.g., if you need to use different ports because other software on your computer uses Habitica's normal ports). If you're not aware of any reasons for your config.json file to be different than the example file, make it identical to the example and try again. Good luck!

paglias commented 5 years ago

Hi @JVi-vi-an the output you posted looks like the normal one for the client side. The Error occurred while trying to proxy request error means that you haven't started the server side in a different terminal using npm start?

jvivianwang commented 5 years ago

@Alys @paglias Thanks for replying. Everything works now!!!

shanaqui commented 4 years ago

@jvivianwang Are you still working on this issue? If so, please let us know! :)

shanaqui commented 4 years ago

I'll set this back to help wanted since there was no reply. :)

veeeeeee commented 4 years ago

On hold pending further work on Settings.