madodig/wikijs-customization

Sincere request,to button

nmm2016 opened this issue · 2 comments

I just want to open the original folding button, but it needs to be enlarged to a certain extent on the phone or webpage to appear. Could you help me come up with an idea。
1

Hi,

for mobile devices the customization code is disabled by default, due to some issues I've had. In desktop browsers this should appear; if it doesn't, there's something wrong.

Anyway, default size in the customization code is 40x40px for the button (circle) and 24x24px for the button content (ie three lines). To override that, add the following <style> tag to the end of the Body HTML Injection content. Modify the sizes as needed (in the examples below I've increased them by 50%).

For the menu button only:

<style>
   .v-btn--top.v-btn--fab.v-size--small.mb                     { width: 60px; height: 60px; }
   .v-btn--top.v-btn--fab.v-size--small.mb > span > i.mdi-menu { width: 36px; height: 36px; font-size: 36px; }
</style>

For all top buttons (menu and pin):

<style>
   .v-btn--top.v-btn--fab.v-size--small            { width: 60px; height: 60px; }
   .v-btn--top.v-btn--fab.v-size--small > span > i { width: 36px; height: 36px; font-size: 36px; }
</style>

The first CSS line modifies the button (circle) size, the second line modifies the content (three lines, pin, etc) size. By excluding the second line, only the button will be increased.

你好

对于移动设备,由于我遇到的一些问题,默认情况下禁用自定义代码。在桌面浏览器中,这应该出现;如果没有,那就有问题了。

无论如何,自定义代码中的默认大小为按钮(圆圈)的40x40px和按钮内容(即三行)的24x24px。要覆盖它,请将以下 <style> 标记添加到正文 HTML 注入内容的末尾。根据需要修改大小(在下面的示例中,我将它们增加了 50%)。

仅适用于菜单按钮:

<style>
   .v-btn--top.v-btn--fab.v-size--small.mb                     { width: 60px; height: 60px; }
   .v-btn--top.v-btn--fab.v-size--small.mb > span > i.mdi-menu { width: 36px; height: 36px; font-size: 36px; }
</style>

对于所有顶部按钮(菜单和图钉):

<style>
   .v-btn--top.v-btn--fab.v-size--small            { width: 60px; height: 60px; }
   .v-btn--top.v-btn--fab.v-size--small > span > i { width: 36px; height: 36px; font-size: 36px; }
</style>

第一行CSS修改按钮(圆圈)大小,第二行修改内容(三行,图钉等)大小。通过排除第二行,只会增加按钮。

thank you very much