forked from e621ng/e621ng
Better opt out of mobile responsive display
Users keep asking for this, so here it is.
This commit is contained in:
Kira
parent
6fa06994d5
commit
eb318b19c7
@ -22,6 +22,21 @@ class StaticController < ApplicationController
|
||||
def takedown
|
||||
end
|
||||
|
||||
def disable_mobile_mode
|
||||
if CurrentUser.is_member?
|
||||
user = CurrentUser.user
|
||||
user.disable_responsive_mode = !user.disable_responsive_mode
|
||||
user.save
|
||||
else
|
||||
if cookies[:nmm]
|
||||
cookies.delete(:nmm)
|
||||
else
|
||||
cookies.permanent[:nmm] = '1'
|
||||
end
|
||||
end
|
||||
redirect_back fallback_location: posts_path
|
||||
end
|
||||
|
||||
def discord
|
||||
unless CurrentUser.can_discord?
|
||||
access_denied message: "You must have an account for at least one week in order to join the Discord server."
|
||||
|
||||
@ -1,6 +1,14 @@
|
||||
require 'dtext'
|
||||
|
||||
module ApplicationHelper
|
||||
def disable_mobile_mode?
|
||||
if CurrentUser.is_member?
|
||||
return CurrentUser.disable_responsive_mode?
|
||||
end
|
||||
cookies[:nmm].present?
|
||||
end
|
||||
|
||||
|
||||
def diff_list_html(new, old, latest)
|
||||
diff = SetDiff.new(new, old, latest)
|
||||
render "diff_list", diff: diff
|
||||
@ -225,7 +233,7 @@ module ApplicationHelper
|
||||
|
||||
{
|
||||
lang: "en",
|
||||
class: "c-#{controller_param} a-#{action_param}",
|
||||
class: "c-#{controller_param} a-#{action_param} #{"resp" unless disable_mobile_mode?}",
|
||||
data: {
|
||||
controller: controller_param,
|
||||
action: action_param,
|
||||
|
||||
@ -21,350 +21,375 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.guest-warning {
|
||||
.guest-warning-dialog {
|
||||
top: 5vh;
|
||||
height: 90vh;
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
#desktop-version-link {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#searchbox-redirect-link {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#saved-searches-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fav-buttons button {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
div#page aside#sidebar {
|
||||
padding: 5px;
|
||||
|
||||
input#tags {
|
||||
width: 80%;
|
||||
body.resp {
|
||||
.guest-warning {
|
||||
.guest-warning-dialog {
|
||||
top: 5vh;
|
||||
height: 90vh;
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
button[type=submit] {
|
||||
font-size: 1.2em;
|
||||
background-color: #EEE;
|
||||
height: 42px;
|
||||
padding: 2px 10px;
|
||||
border: 1px solid rgb(197, 197, 197);
|
||||
#desktop-version-link {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
div#page {
|
||||
padding: 0 0.25vw;
|
||||
> div /* div#c-$controller */ {
|
||||
> div /* div#a-$action */ {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
#searchbox-redirect-link {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* Move #sidebar below #content. */
|
||||
> aside#sidebar {
|
||||
font-size: 1.5em;
|
||||
float: none;
|
||||
width: auto;
|
||||
order: 2;
|
||||
#saved-searches-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fav-buttons button {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
div#page aside#sidebar {
|
||||
padding: 5px;
|
||||
|
||||
input#tags {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
button[type=submit] {
|
||||
font-size: 1.2em;
|
||||
background-color: #EEE;
|
||||
height: 42px;
|
||||
padding: 2px 10px;
|
||||
border: 1px solid rgb(197, 197, 197);
|
||||
}
|
||||
}
|
||||
|
||||
div#page {
|
||||
padding: 0 0.25vw;
|
||||
|
||||
> div /* div#c-$controller */
|
||||
{
|
||||
> div /* div#a-$action */
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* Move #sidebar below #content. */
|
||||
> aside#sidebar {
|
||||
font-size: 1.5em;
|
||||
float: none;
|
||||
width: auto;
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#maintoggle {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: 2vw;
|
||||
right: 3vw;
|
||||
font-size: 2em;
|
||||
|
||||
&.toggler-active {
|
||||
background-color: lighten($link-color, 25%);
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make the quick search box in the navbar full width. */
|
||||
header#top menu form input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
form {
|
||||
select, input, textarea, button {
|
||||
max-width: 100%;
|
||||
}
|
||||
select {
|
||||
vertical-align: top;
|
||||
font-size: 18pt;
|
||||
header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input[type=text], input[type=email], input[type=password], input[type=number] {
|
||||
vertical-align: top;
|
||||
font-size: 18pt;
|
||||
border: 1px solid #c5c5c5;
|
||||
width: 90%;
|
||||
#maintoggle {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: 2vw;
|
||||
right: 3vw;
|
||||
font-size: 2em;
|
||||
|
||||
&.toggler-active {
|
||||
background-color: lighten($link-color, 25%);
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 90%;
|
||||
vertical-align: top;
|
||||
border: 1px solid #c5c5c5;
|
||||
/* Make the quick search box in the navbar full width. */
|
||||
header#top menu form input {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
button, input[type=button] {
|
||||
font-size: 160%;
|
||||
h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
font-size: 160%;
|
||||
}
|
||||
form {
|
||||
select, input, textarea, button {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input[type=submit].tiny {
|
||||
font-size: 120%;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
select {
|
||||
vertical-align: top;
|
||||
font-size: 18pt;
|
||||
}
|
||||
|
||||
form.simple_form {
|
||||
div.input {
|
||||
input[type=text], input[type=email], input[type=password], input[type=number] {
|
||||
vertical-align: top;
|
||||
font-size: 18pt;
|
||||
border: 1px solid #c5c5c5;
|
||||
width: 90%;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 90%;
|
||||
max-width: 90%;
|
||||
vertical-align: top;
|
||||
border: 1px solid #c5c5c5;
|
||||
}
|
||||
|
||||
button, input[type=button] {
|
||||
font-size: 160%;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
font-size: 160%;
|
||||
}
|
||||
|
||||
input[type=submit].tiny {
|
||||
font-size: 120%;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#page section#content {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
form.simple_form {
|
||||
div.input {
|
||||
input[type=text], input[type=email], input[type=password], input[type=number] {
|
||||
width: 90%;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
#comments h2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
//div.paginator {
|
||||
// font-size: 24pt;
|
||||
// font-weight: bold;
|
||||
// text-align: center;
|
||||
// width: 100%;
|
||||
// padding: 0;
|
||||
// margin: 0;
|
||||
// margin-top: 1em;
|
||||
//
|
||||
// li {
|
||||
// display: inline-block;
|
||||
// margin: 0 0.25em;
|
||||
//
|
||||
// a, span {
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// border: none;
|
||||
// }
|
||||
//
|
||||
// &.current-page {
|
||||
// text-align: center;
|
||||
// }
|
||||
//
|
||||
// &.arrow:last-child {
|
||||
// text-align: right;
|
||||
// }
|
||||
//
|
||||
// &.numbered-page, &.more {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
#posts #posts-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
//
|
||||
article.post-preview {
|
||||
float: none;
|
||||
margin: 0 0 5px 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
width: 32vw;
|
||||
|
||||
a {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 150px;
|
||||
max-width: 32vw;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
&[data-tags~=animated]:before, &[data-file-ext=swf]:before, &[data-file-ext=webm]:before, &[data-file-ext=mp4]:before, &[data-file-ext=zip]:before {
|
||||
@include animated-icon;
|
||||
}
|
||||
|
||||
&[data-has-sound=true]:before {
|
||||
@include sound-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.user-disable-cropped-false {
|
||||
article.post-preview {
|
||||
width: 32vw;
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-height: none;
|
||||
max-width: none;
|
||||
width: 32vw;
|
||||
|
||||
&.has-cropped-false {
|
||||
object-fit: cover;
|
||||
textarea {
|
||||
width: 90%;
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#options {
|
||||
margin-top: 10px;
|
||||
font-size: 24pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div#tags {
|
||||
margin-top: 30px;
|
||||
|
||||
li {
|
||||
margin: 10px 0;
|
||||
div#page section#content {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a.search-tag {
|
||||
#comments h2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
//div.paginator {
|
||||
// font-size: 24pt;
|
||||
// font-weight: bold;
|
||||
// text-align: center;
|
||||
// width: 100%;
|
||||
// padding: 0;
|
||||
// margin: 0;
|
||||
// margin-top: 1em;
|
||||
//
|
||||
// li {
|
||||
// display: inline-block;
|
||||
// margin: 0 0.25em;
|
||||
//
|
||||
// a, span {
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// border: none;
|
||||
// }
|
||||
//
|
||||
// &.current-page {
|
||||
// text-align: center;
|
||||
// }
|
||||
//
|
||||
// &.arrow:last-child {
|
||||
// text-align: right;
|
||||
// }
|
||||
//
|
||||
// &.numbered-page, &.more {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
#posts #posts-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
//
|
||||
article.post-preview {
|
||||
float: none;
|
||||
margin: 0 0 5px 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
width: 32vw;
|
||||
|
||||
a {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 150px;
|
||||
max-width: 32vw;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
&[data-tags~=animated]:before, &[data-file-ext=swf]:before, &[data-file-ext=webm]:before, &[data-file-ext=mp4]:before, &[data-file-ext=zip]:before {
|
||||
@include animated-icon;
|
||||
}
|
||||
|
||||
&[data-has-sound=true]:before {
|
||||
@include sound-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.user-disable-cropped-false {
|
||||
article.post-preview {
|
||||
width: 32vw;
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-height: none;
|
||||
max-width: none;
|
||||
width: 32vw;
|
||||
|
||||
&.has-cropped-false {
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div#options {
|
||||
margin-top: 10px;
|
||||
font-size: 24pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
div#page {
|
||||
div.comments-for-post div.list-of-comments article.comment div.content {
|
||||
clear: both;
|
||||
div#tags {
|
||||
margin-top: 30px;
|
||||
|
||||
li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
a.search-tag {
|
||||
font-size: 24pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
div#page {
|
||||
div.comments-for-post div.list-of-comments article.comment div.content {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#nav {
|
||||
font-size: 2em;
|
||||
line-height: 2em;
|
||||
display: none;
|
||||
}
|
||||
|
||||
header#top menu.main {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 0.825em;
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
|
||||
h1 {
|
||||
display: inline; //Needed for menu button
|
||||
}
|
||||
}
|
||||
|
||||
div#page {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#nav {
|
||||
font-size: 2em;
|
||||
line-height: 2em;
|
||||
display: none;
|
||||
}
|
||||
|
||||
header#top menu.main {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 0.825em;
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
h1 {
|
||||
display: inline; //Needed for menu button
|
||||
}
|
||||
}
|
||||
|
||||
div#page {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 660px) {
|
||||
#c-forum-topics, #c-forum-posts {
|
||||
#a-show { padding: 1em 0.5em; }
|
||||
div.list-of-forum-posts {
|
||||
article div.author {
|
||||
display: flex;
|
||||
width: auto;
|
||||
float: none;
|
||||
background: $lighten-background;
|
||||
padding: $half-padding $base-padding;
|
||||
.post-thumbnail {
|
||||
img {
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
body.resp {
|
||||
#c-forum-topics, #c-forum-posts {
|
||||
#a-show {
|
||||
padding: 1em 0.5em;
|
||||
}
|
||||
|
||||
div.list-of-forum-posts {
|
||||
article div.author {
|
||||
display: flex;
|
||||
width: auto;
|
||||
float: none;
|
||||
background: $lighten-background;
|
||||
padding: $half-padding $base-padding;
|
||||
|
||||
.post-thumbnail {
|
||||
img {
|
||||
height: auto;
|
||||
width: auto;
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.author-info {
|
||||
margin-left: $half-padding;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.author-info {
|
||||
margin-left: $half-padding;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
|
||||
article div.content {
|
||||
width: auto;
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
article div.content {
|
||||
width: auto;
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
|
||||
.creator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.created-at {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.creator { display: none; }
|
||||
.created-at { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 440px) {
|
||||
input#expand-search {
|
||||
display: none;
|
||||
}
|
||||
body.resp {
|
||||
input#expand-search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
}
|
||||
body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#post-sections {
|
||||
font-size: 1em;
|
||||
}
|
||||
#post-sections {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
//div article.post-preview {
|
||||
// overflow: visible;
|
||||
//}
|
||||
//div article.post-preview {
|
||||
// overflow: visible;
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
#tos-notice {
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
|
||||
<link rel="top" title="<%= Danbooru.config.app_name %>" href="/">
|
||||
<%= csrf_meta_tag %>
|
||||
<%= csp_meta_tag %>
|
||||
<%= auto_discovery_link_tag :atom, posts_path(:format => "atom", :tags => params[:tags]) %>
|
||||
<%= raw Danbooru.config.custom_html_header_content %>
|
||||
<script src="/vendor/jquery-3.4.1.min.js" integrity="sha384-v/CvOfYoICV4azK6zXTy9qXP6UwbdbFVuxd2Lorpes7n5YVsaU1bQqIalcktKchl" crossorigin="anonymous"></script>
|
||||
|
||||
@ -12,8 +12,7 @@
|
||||
<meta name="RATING" content="RTA-5042-1996-1400-1577-RTA" />
|
||||
<link rel="top" title="<%= Danbooru.config.app_name %>" href="/">
|
||||
<%= csrf_meta_tag %>
|
||||
<%= csp_meta_tag %>
|
||||
<% unless CurrentUser.disable_responsive_mode? %>
|
||||
<% unless disable_mobile_mode? %>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<% end %>
|
||||
<meta name="current-user-name" content="<%= CurrentUser.name %>">
|
||||
|
||||
@ -1,18 +1,13 @@
|
||||
<footer id="page-footer">
|
||||
Running <%= Danbooru.config.app_name %>
|
||||
<% if Rails.application.config.x.git_hash %>
|
||||
(<%= link_to Rails.application.config.x.git_hash, Danbooru.config.commit_url(Rails.application.config.x.git_hash) %>)
|
||||
<% end %>
|
||||
<%# if Rails.application.config.x.git_hash %>
|
||||
<!-- (<%#= link_to Rails.application.config.x.git_hash, Danbooru.config.commit_url(Rails.application.config.x.git_hash) %>)-->
|
||||
<%# end %>
|
||||
– <%= link_to "Rules", terms_of_service_path %>
|
||||
- <%= link_to "Takedowns", takedown_static_path %>
|
||||
– <%= link_to "Contact", contact_path %>
|
||||
<% if CurrentUser.user.enable_keyboard_navigation %>
|
||||
– <%= link_to "Keyboard shortcuts available", keyboard_shortcuts_path %>
|
||||
<% end %>
|
||||
<% if CurrentUser.is_member? %>
|
||||
<span id="desktop-version-link">
|
||||
–
|
||||
<%= link_to "Disable mobile mode", edit_user_path(CurrentUser.id), :rel => "nofollow" %>
|
||||
</span>
|
||||
<% end %>
|
||||
– <%= link_to disable_mobile_mode? ? "Enable mobile mode support": "Disable mobile mode support", disable_mobile_mode_path, :rel => "nofollow" %>
|
||||
</footer>
|
||||
|
||||
@ -481,6 +481,7 @@ Rails.application.routes.draw do
|
||||
get "/static/contact" => "static#contact", :as => "contact"
|
||||
get "/static/discord" => "static#discord", as: "discord_get"
|
||||
post "/static/discord" => "static#discord", as: "discord_post"
|
||||
get "/static/toggle_mobile_mode" => "static#disable_mobile_mode", as: "disable_mobile_mode"
|
||||
get "/meta_searches/tags" => "meta_searches#tags", :as => "meta_searches_tags"
|
||||
|
||||
get "/intro" => redirect("/explore/posts/intro")
|
||||
|
||||
Loading…
Reference in New Issue
Block a user