Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

The navbar icons is zoom with the next icon too

オープン
#4,358 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
48/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
静か
技術スタック
javascript
領域
frontend, mobile

調査の方向性

リンクされている Framework7 の navbar の例をモバイル表示で再現し、通常モードと iOS テーマを比較します。navbar アイコンのスタイルと、隣接するアイコン周辺のインタラクション動作を調査します。1つのアイコンを拡大しても次のアイコンに影響しなくなれば完了です。

索引モデルが issue の本文から書いたものです。

説明

Before update to 8+ version this was worked, but currently the navbar icons are just zooming but it affect the next icon too. Please check the following code and video

...
    <div class="navbar navbar-transparent">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <div class="padding-left">
            <div @click="${subscribeOrProLink}">
              <div class="text-align-center">
                <img src="${proImage}" class="homeIcon"/>
                <div class="homeText trPro">Pro</div>
              </div>         
            </div>
          </div>
          
          <div class="padding-left">
            <div @click="${preShareApp}">
              <div class="text-align-center">
                <img src="${shareImage}" class="homeIcon"/>
                <div class="homeText trShare">Share</div>
              </div>
          
            </div>
          </div>
        </div>

        <div class="right">
          <div class="padding-left padding-right">
            <div @click="${showLanguageSlectPopup}" class="homeLink touchable-img">
              <div class="text-align-center">
                <img src="${translateIcon}" class="homeIcon"/>
                <div class="homeText trTranslate">Translate</div>
              </div>
          
            </div>
          </div>
        </div>
       
      </div>
    </div>
...

https://github.com/user-attachments/assets/a41016c5-0ab0-4444-9d97-e8ea121bf7c8

Also this issue is available in your navbar example, url is
https://framework7.io/docs-demos/core/navbar-hide-on-scroll?theme=md&mode=light
Note: Working in normal mode, you can see the problem in mobile view only. I think this style is applied from ios theme

Please check the video below

https://github.com/user-attachments/assets/f8b15902-d9a6-4f1c-9bae-fa727fc1fff7

主要言語
JavaScript
スター
18.8k
フォーク
3.2k
PR マージ指標
30日以内にマージされた PR はありません

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

framework7io/framework7 のほかの issue

framework7io/framework7 の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。