From 5937e0289ea3db346937ce4ccd6234ca03b9db36 Mon Sep 17 00:00:00 2001 From: Matthew McGarvey <matthew@sociallyu.com> Date: Wed, 7 Oct 2020 23:01:18 -0500 Subject: [PATCH] Fix feed menu overlap at ipad screen widths --- assets/css/default.css | 16 +++++++++++ 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>