From a6233f297eca8c17322158b3e788587b365e7980 Mon Sep 17 00:00:00 2001 From: SundaySalsa Date: Sat, 31 Jan 2015 13:35:09 +0300 Subject: [PATCH] added responsive css --- app/assets/javascripts/responsive.js | 8 + .../stylesheets/common/page_header.css.scss | 4 + .../stylesheets/common/responsive.css.scss | 254 ++++++++++++++++++ app/assets/stylesheets/specific/tags.css.scss | 6 +- app/models/saved_search.rb | 8 +- app/views/layouts/default.html.erb | 3 +- app/views/posts/index.html.erb | 5 + app/views/posts/show.html.erb | 5 + 8 files changed, 285 insertions(+), 8 deletions(-) create mode 100644 app/assets/javascripts/responsive.js create mode 100644 app/assets/stylesheets/common/responsive.css.scss diff --git a/app/assets/javascripts/responsive.js b/app/assets/javascripts/responsive.js new file mode 100644 index 000000000..553a55b08 --- /dev/null +++ b/app/assets/javascripts/responsive.js @@ -0,0 +1,8 @@ +// Whoever did the rest of js files, he/she did it in some other way +// Hope this is not very wrong +$(document).ready(function() { + $("#maintoggle").click(function(){ + $('#nav').toggle(); + $('#maintoggle').toggleClass('toggler-active'); + }); +}); diff --git a/app/assets/stylesheets/common/page_header.css.scss b/app/assets/stylesheets/common/page_header.css.scss index eb871e227..060ca1249 100644 --- a/app/assets/stylesheets/common/page_header.css.scss +++ b/app/assets/stylesheets/common/page_header.css.scss @@ -1,5 +1,9 @@ @import "000_vars.css.scss"; +#maintoggle { + display: none; +} + header#top { h1 { font-size: 2.5em; diff --git a/app/assets/stylesheets/common/responsive.css.scss b/app/assets/stylesheets/common/responsive.css.scss new file mode 100644 index 000000000..9fb3ddb94 --- /dev/null +++ b/app/assets/stylesheets/common/responsive.css.scss @@ -0,0 +1,254 @@ +/* Content */ + +/* i. e. the images in posts */ +img#image { + /* Images in posts are called in such form: + @post.presenter.image_html(self) + I have no idea what that 'presenter' method means + This gives them fixed width + It causes window to overextend on smaller screens + */ + max-width: 95%; + height: auto; + margin: auto; +} + +@media screen and (max-width: 660px) { + + #maintoggle { + display: inline; + background-color: #70599A; + padding: 0.5em 1em 0.7em 1em; + border-radius: 20% 20% 0 0; + font-weight: bold; + color: #fff; + } + + #maintoggle.toggler-active { + background-color: #D3CBE0; + color: #000; + } + + h1 { + font-size: 1.2em; + } + + input[type=text], input[type=submit] { + font-size: 18pt; + } + + div#page section#content { + margin-left: 0em; + } + + + +/* Sidebar */ + +#sidebar { + display: none; +} + +/* paginator */ +div.paginator { + font-size: 16pt; + font-weight: bold; + text-align: left; + background-color: #F7F7FF; + border-radius: 15%; + padding: 3pt; + + li { + display: inline; + line-height: 1.4em; + + a, span { + padding: 3px 18px; + margin: 0 3px; + display: inline-block; + border-radius: 15%; + } + } +} + +/* posts/index */ +article.post-preview { + margin: 15px 0; + width: 150px; + text-align: center; + vertical-align: middle; + display: inline-block; + a { + width: 150px; + display: block; + margin: 0 auto; + } + img { + margin: 0 auto; + } +} + +/* posts/show */ +img#image { + margin-top: 5px; +} + +div#options { + margin-top: 10px; + font-size: 24pt; + font-weight: bold; +} + +div#tags { + margin-top: 30px; + + li { + margin: 10px 0; + } + + a.search-tag { + font-size: 24pt; + font-weight: bold; + } +} + +/* tag list */ + +section#responsive-tag-list { + display: block; + h1 { + font-size: 1em; + } +} + +/* comments */ + +//Comments themselves + +div#page { + div.comments-for-post div.list-of-comments article.comment div.content { + clear: both; + margin-left: 0; + margin: 0 0 0 0; + } +} + + /********************************** + HEADER + ***********************************/ + + nav { + background: none; + float: right; + font-size: 1.125em; + width: 100%; + } + + #nav { + display: none; + } + + header#top menu.main { + background-color: #d3cbe0; + + } + + header#top menu { + width: 100%; + } + + #logo { + /* There is logo? */ + } + + h1 { + font-size: 2em; + } + + h2 { + font-size: 0.825em; + margin-bottom: 20px; + } + + header { + border-bottom: 5px solid #70599a; + text-align: center; + line-height: 2em; + h1 { + display: inline; //Needed for menu button + } + } + + /* Body */ + + div#page { + margin: 0 3%; + } + + #posts { + img { + width: 100%; + } + article.post-preview a { + width: 100%; + } + } + +} + +@media screen and (max-width: 440px) { + body { + width: 100%; + } + + #post-sections { + font-size: 1em; + } + + div article.post-preview { + max-width: 45%; + width: 100%; + height: 100%; + overflow: visible; + } + + input { + max-width: 100%; + } +} + +/* Dashboard */ + +div#page { + div#c-moderator-dashboards { + div#col1 { + width: 100%; + } + div#col2 { + width: 100%; + clear: both; + } + } +} + +/* Artist search */ + +table.search { + clear: both; +} + +input#search-name { + max-width: 100%; +} + +/* Site map */ + +div#c-static div#a-site-map section { + clear: both; +} + +/* Warnings & notices */ + +#tos-notice { + display: none; +} diff --git a/app/assets/stylesheets/specific/tags.css.scss b/app/assets/stylesheets/specific/tags.css.scss index 3b7ea1f6b..39b0593b7 100644 --- a/app/assets/stylesheets/specific/tags.css.scss +++ b/app/assets/stylesheets/specific/tags.css.scss @@ -10,4 +10,8 @@ div#c-tags { width: 40em; } } -} \ No newline at end of file +} + +#mobile-tag-list { + display: none; +} diff --git a/app/models/saved_search.rb b/app/models/saved_search.rb index 7914a022c..7fab3f402 100644 --- a/app/models/saved_search.rb +++ b/app/models/saved_search.rb @@ -9,15 +9,11 @@ class SavedSearch < ActiveRecord::Base before_validation :normalize def self.tagged(tags) - where(:tag_query => SavedSearch.normalize(tags)).first - end - - def self.normalize(tag_query) - Tag.scan_query(tag_query).join(" ") + where(:tag_query => tags).first end def normalize - self.tag_query = SavedSearch.normalize(tag_query) + self.tag_query = Tag.scan_query(tag_query).join(" ") end def validate_count diff --git a/app/views/layouts/default.html.erb b/app/views/layouts/default.html.erb index 4016826f7..2793d4c56 100644 --- a/app/views/layouts/default.html.erb +++ b/app/views/layouts/default.html.erb @@ -35,7 +35,8 @@ <%= render "news_updates/listing" %>

<%= link_to Danbooru.config.app_name, "/" %>

-