diff options
| author | TheFrenchGhosty <47571719+TheFrenchGhosty@users.noreply.github.com> | 2020-10-08 08:35:50 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-10-08 08:35:50 +0000 |
| commit | 1a7e160956dc0ac911dcac33b9231de804bb1924 (patch) | |
| tree | e3d49dd94362825cd058a413ac569d1b227d55db | |
| parent | 59d966356ee8420e6240fa12a5216a9bda1911e5 (diff) | |
| parent | 5937e0289ea3db346937ce4ccd6234ca03b9db36 (diff) | |
| download | invidious-1a7e160956dc0ac911dcac33b9231de804bb1924.tar.gz invidious-1a7e160956dc0ac911dcac33b9231de804bb1924.tar.bz2 invidious-1a7e160956dc0ac911dcac33b9231de804bb1924.zip | |
Merge pull request #1402 from matthewmcgarvey/feed-menu-overlap
Fix feed menu overlap at iPad screen widths
| -rw-r--r-- | assets/css/default.css | 16 | ||||
| -rw-r--r-- | src/invidious/views/components/feed_menu.ecr | 28 |
2 files changed, 26 insertions, 18 deletions
diff --git a/assets/css/default.css b/assets/css/default.css index ea139b40..b7a77be6 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -60,6 +60,22 @@ body { color: rgb(255, 0, 0); } +.feed-menu { + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +.feed-menu-item { + text-align: center; +} + +@media screen and (max-width: 640px) { + .feed-menu-item { + flex: 0 0 40%; + } +} + .h-box { padding-left: 1em; padding-right: 1em; diff --git a/src/invidious/views/components/feed_menu.ecr b/src/invidious/views/components/feed_menu.ecr index f72db2da..3dbeaf37 100644 --- a/src/invidious/views/components/feed_menu.ecr +++ b/src/invidious/views/components/feed_menu.ecr @@ -1,19 +1,11 @@ -<div class="h-box pure-g"> - <div class="pure-u-1 pure-u-md-1-4"></div> - <div class="pure-u-1 pure-u-md-1-2"> - <div class="pure-g"> - <% feed_menu = env.get("preferences").as(Preferences).feed_menu.dup %> - <% if !env.get?("user") %> - <% feed_menu.reject! {|item| {"Subscriptions", "Playlists"}.includes? item} %> - <% end %> - <% feed_menu.each do |feed| %> - <div class="pure-u-1-2 pure-u-md-1-<%= feed_menu.size %>"> - <a href="/feed/<%= feed.downcase %>" class="pure-menu-heading" style="text-align:center"> - <%= translate(locale, feed) %> - </a> - </div> - <% end %> - </div> - </div> - <div class="pure-u-1 pure-u-md-1-4"></div> +<div class="feed-menu"> + <% feed_menu = env.get("preferences").as(Preferences).feed_menu.dup %> + <% if !env.get?("user") %> + <% feed_menu.reject! {|item| {"Subscriptions", "Playlists"}.includes? item} %> + <% end %> + <% feed_menu.each do |feed| %> + <a href="/feed/<%= feed.downcase %>" class="feed-menu-item pure-menu-heading"> + <%= translate(locale, feed) %> + </a> + <% end %> </div> |