Mobile tab

DamonHu

I don't know whether this is a bug or a deliberate design. If you enter multiple levels and then click the home page of tab, the page will return to the home page, but the icon in the upper left corner still is the return button. I guess the page stack is not clean

qin-yu

Flarum v1.5, I use PHP 8.0 as required by FoF Sitemap. Mobile Tab extension somehow made the whole page CSS-less, and make the software very memory consuming and eventually cannot load.

mehmet06

rafaucau Thanks
https://prnt.sc/qiQn3N5cj5z2 I want to add a blog tab to the area I marked

fakruzaruret

This cover the feedback extension's icon. You can increase its bottom value on css.

@media only screen and (max-width: 600px) {
    .feedback-wrapper { bottom: 2rem !important; }
    .feedback-btn-wrapper { bottom: 1rem !important;}  
 }

eddiewebb

What am I doing wrong to extend this? Trying to mimic example provided in OP.

composer.json has it as dependency

  "require": {
    "flarum/core": "^1.0.0",
    "acpl/mobile-tab": "^1.1"
  },

webpack comfig declares it (and build confirms it is found in node_modules)

module.exports = require('flarum-webpack-config')({
  useExtensions: ['acpl-mobile-tab']
});

build log

  external "flarum.extensions['acpl-mobile-tab']" 42 bytes [built] [code generated]

My forum.js gets an error Cannot read properties of undefined (reading 'components')

import { components } from '@acpl-mobile-tab';
import { extend } from 'flarum/common/extend';

const { MobileTab, MobileTabItem } = components;

eddiewebb

alternate code found in extensions guide gets similar error (components undefined)

const components = require('@acpl-mobile-tab');
console.log(components);
// undefined

eddiewebb

The custom plugin that consumes mobile-tab needs special composer install flags.

composer require YOURNAME/YOUR-PLUGIN:"dev-main" --with-all-dependencies

rafaucau

eddiewebb These components are visible in the browser console so it should work:

Are you sure you have this extension enabled?

Can you check what will be in the console after executing this code?

import * as tab from '@acpl-mobile-tab';
console.log(tab);

eddiewebb This extension requires a minimum version of Flarum 1.2, but you have Flarum 1.0 in your composer.json, so you had to add this flag to update Flarum as well.
What version of Flarum are you currently on?

rafaucau

1.2.0

feat: add support for askvortsov-categories android-com-pl/mobile-tab8

rafaucau

1.3.0

Fix bug while using other home pages android-com-pl/mobile-tab9

Boss81

Hello @rafaucau !

Can anyone help with a problem? The Mobile tab is in Hungarian, not completely Hungarian. The name of the homepage should be rewritten, where can I do this?

rafaucau

Boss81 You can translate it on Weblate: https://weblate.rob006.net/projects/flarum/acpl-mobile-tab/hu/
And then ask the maintainer (@meskobalazs) of your language pack to release an update

Boss81

rafaucau

Hello!
Ok, thanks for the info 🙂

Boss81

rafaucau

Anyway, is there a way to hide the titles under the icons? Maybe some CSS code?

rafaucau

Boss81 This LESS code will remove labels under icons without side effects like touching buttons inside dropdowns:

.MobileTab-items > li {
    > .Button, > a, > .Dropdown > .Button {
        > .Button-label {
            display: none;
        }
    }
}

Boss81

@rafaucau

Thank you very much.

In the meantime, I also wrote a little code, and this is the result.

Indreksi

Looks like this plugin causing some problems with Night mode in PWA 🙁
Is it possible to fix this?

My website when Mobile Tab Component is enabled 🙁

rafaucau

Indreksi Probably you just need to clear cache on your forum. I don't think it is this extension fault.
It is installed for example on this forum https://forum.android.com.pl/ and there are no issues with PWA in dark mode.

Indreksi

rafaucau Yes, all good. thanks, it was cache problem 😉

Boss81

Hi @rafaucau

Is there any way I can change the icons? I want to change them.

It worked elsewhere on the site, but it doesn't want to go on the mobile tab.

Could you possibly help with that?

rafaucau

Boss81 You can read here how to extend this extension: https://github.com/android-com-pl/mobile-tab?tab=readme-ov-file#extending.
So you need to remove menu item and add new one with your icon or overwrite icon prop on existing MobileTabItem ListItems.

import { components } from "@acpl-mobile-tab";
import { extend } from "flarum/common/extend";

const { MobileTab, MobileTabItem } = components;

extend(MobileTab.prototype, "items", (items) => {
  // your code here...
})

« Previous Page Next Page »