Discourse Tab Bar for Mobile

이 아이디어가 정말 마음에 들어요 :heart_eyes: 그래서 조금 테스트해 봤습니다. 훨씬 더 나은 방법이 있다고 생각하지만, 지금은 제 사이트에서 꽤 잘 작동합니다. :slight_smile:

이를 위해 Big Header - Little Header 컴포넌트의 </head> 코드 템플릿을 사용하고 있습니다.


불행히도 iPhone에서는 푸터 네비게이션이 Discourse 탭 바를 완전히 가리기 때문에 제한 사항이 있습니다. 그래서 저는 그 부분을 숨겼습니다.

이 코드를 업데이트했습니다!
이제 코드를 여기에 공유합니다(병합 가능한지 확신은 없어요):

모바일 </head> 섹션에 이 코드를 배치하세요.

<script type="text/discourse-plugin" version="0.8.18">
   $(document).ready(function() {
        var lastScrollTop = 0;
        var body = $("body");
        var scrollMax = 30;
        $(window).scroll(function() {
            var scroll = $(this).scrollTop();
            if (lastScrollTop < scroll && scroll > scrollMax && !body.hasClass("tab-bar-hidden")) {
                body.addClass("tab-bar-hidden");
            } else if (lastScrollTop > scroll && body.hasClass("tab-bar-hidden")) {
                body.removeClass("tab-bar-hidden");
            }
            lastScrollTop = scroll;
        });
    });
</script>

모바일 CSS 섹션에 이 코드를 배치하세요:

html:not(.anon) {
  #topic-progress-wrapper,
  #reply-control.draft {
	bottom: 49px;
  }
  #reply-control.draft {
	margin-bottom: env(safe-area-inset-bottom);
	padding-bottom: 0px;
	transition: all .1s ease-out;
  }
  .posts-filtered-notice {
	transition: all .1s ease-out;
	bottom: 49px;
  } 
}

body.tab-bar-hidden {
  .d-tab-bar {
	bottom: -49px;
	transition: all .2s ease-in;
  }
  #topic-progress-wrapper:not(.docked),
  #reply-control.draft {
	bottom: 0;
	transition: all .2s ease-in;
  }
  #reply-control.draft {
	margin-bottom: env(safe-area-inset-bottom);
	padding-bottom: 0px;
	transition: all .2s ease-in;
  }
  .posts-filtered-notice {
	transition: all .2s ease-in;
	bottom: 0;
  }
}

.d-tab-bar {
  transition: all .1s ease-out;
}

body:not(.footer-nav-ipad) .footer-nav {
  display: none;
}

데모

17개의 좋아요