iv-org-mirror
/
invidious-copy-2022-03-16
mirror of https://gitea.invidious.io/iv-org/invidious-copy-2022-03-16.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1402 from matthewmcgarvey/feed-menu-overlap 

Fix feed menu overlap at iPad screen widths
This commit is contained in:
TheFrenchGhosty 2020-10-08 08:35:50 +00:00 committed by GitHub
parent 59d966356e 5937e0289e
commit 1a7e160956
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
assets/css/default.css
View File

@ -60,6 +60,22 @@ body {
color: rgb(255, 0, 0); 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 { .h-box {
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;

28
src/invidious/views/components/feed_menu.ecr
View File

@ -1,19 +1,11 @@
<div class="h-box pure-g"> <div class="feed-menu">
<div class="pure-u-1 pure-u-md-1-4"></div> <% feed_menu = env.get("preferences").as(Preferences).feed_menu.dup %>
<div class="pure-u-1 pure-u-md-1-2"> <% if !env.get?("user") %>
<div class="pure-g"> <% feed_menu.reject! {|item| {"Subscriptions", "Playlists"}.includes? item} %>
<% feed_menu = env.get("preferences").as(Preferences).feed_menu.dup %> <% end %>
<% if !env.get?("user") %> <% feed_menu.each do |feed| %>
<% feed_menu.reject! {|item| {"Subscriptions", "Playlists"}.includes? item} %> <a href="/feed/<%= feed.downcase %>" class="feed-menu-item pure-menu-heading">
<% end %> <%= translate(locale, feed) %>
<% feed_menu.each do |feed| %> </a>
<div class="pure-u-1-2 pure-u-md-1-<%= feed_menu.size %>"> <% end %>
<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> </div>