css: add .mobile-only, .desktop-only classes.

This commit is contained in:
evazion
2019-09-30 00:58:34 -05:00
parent cf97235aa6
commit 5818c367fd
5 changed files with 13 additions and 24 deletions

View File

@@ -137,3 +137,12 @@ ul.list-inline {
display: inline;
}
}
.mobile-only {
display: none;
@media (max-width: 660px) { display: initial; }
}
.desktop-only {
@media (max-width: 660px) { display: none; }
}

View File

@@ -1,26 +1,6 @@
@import "../base/000_vars.scss";
#desktop-version-link {
display: none;
}
#searchbox-redirect-link {
display: none;
}
@media screen and (max-width: 660px) {
#keyboard-shortcuts-link {
display: none;
}
#desktop-version-link {
display: inline;
}
#searchbox-redirect-link {
display: inline;
}
#saved-searches-nav {
display: none;
}

View File

@@ -103,7 +103,7 @@
<header id="top">
<h1 id="app-name-header"><%= link_to Danbooru.config.app_name, "/" %></h1>
<div id="maintoggle">
<div id="maintoggle" class="mobile-only">
<a href="#"><i id="maintoggle-on" class="fas fa-bars"></i></a>
<a href="#"><i id="maintoggle-off" class="fas fa-times" style="display: none;"></i></a>
</div>

View File

@@ -36,7 +36,7 @@
<li><%= link_to "Wiki", new_wiki_page_path(wiki_page: { title: @post_set.tag_string }), id: "show-excerpt-link" %></li>
<% end %>
<li id="searchbox-redirect-link"><a href="#search-box">Search &raquo;</a></li>
<li id="searchbox-redirect-link" class="mobile-only"><a href="#search-box">Search &raquo;</a></li>
</menu>
<%= render "posts/partials/index/edit" %>

View File

@@ -6,12 +6,12 @@
&ndash; <%= link_to "Rules", terms_of_service_path %>
&ndash; <%= link_to "Contact", contact_path %>
<% if CurrentUser.user.enable_post_navigation %>
<span id="keyboard-shortcuts-link">
<span id="keyboard-shortcuts-link" class="desktop-only">
&ndash; <%= link_to "Keyboard shortcuts", keyboard_shortcuts_path %>
</span>
<% end %>
<% if CurrentUser.is_member? %>
<span id="desktop-version-link">
<span id="desktop-version-link" class="mobile-only">
&ndash;
<%= link_to "Disable responsive mode", edit_user_path(CurrentUser.id), :rel => "nofollow" %>
</span>