readthedocs/sphinx_rtd_theme

Use flexible layout for hlist directives

Open

#1,108 opened on 2021年4月1日

GitHub で見る
 (1 comment) (0 reactions) (0 assignees)CSS (3,473 stars) (1,413 forks)batch import
AcceptedBugDesignGood First IssueNeeded: patch

説明

Problem

The current hlist can look bad on mobile or when using many columns.

Reproducible Project

https://docs.blender.org/api/current/bpy.types.AlphaUnderSequence.html

Error Logs/Results

image

As you can see the list items extend beyond viewport when the viewport is narrow.

Expected Results

The columns should break into new rows.

Environment Info

  • Python Version: 3.9.x
  • Sphinx Version: 3.5.1
  • RTD Theme Version: 0.5.1

コントリビューターガイド

技術スタック
csshtml
領域
frontend
Issue 種別
bug
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
2
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
under 1 hour
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
fresh
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
clear
前提条件
CSS flexboxSphinx theme structure
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
85
調査方針
In the sphinx rtd theme, the hlist directive renders columns using a fixed width. To fix the overflow on narrow viewports, modify the CSS for `.hlist` to use `display: flex; flex wrap: wrap;` instead of the current column layout. Examine the theme's CSS files (e.g., `sphinx rtd theme/static/css/theme.css`) for the hlist styles and apply the flexible layout. Test with a narrow viewport to ensure items wrap correctly.