adding border to poster expansion, changing media screen to media all, trying new notification style

This commit is contained in:
Kris Aubuchon 2014-07-24 12:21:22 -04:00
parent a34037b26c
commit 4a1ec20585
15 changed files with 42 additions and 34 deletions

View file

@ -1135,7 +1135,7 @@ button.ru {
visibility: hidden; visibility: hidden;
} }
@media only screen @media all
and (max-width : 850px) { and (max-width : 850px) {
.nav-stacked { .nav-stacked {
.glyph {width: auto; position: relative;} .glyph {width: auto; position: relative;}
@ -1144,7 +1144,7 @@ and (max-width : 850px) {
} }
} }
@media only screen @media all
and (min-width : 320px) and (min-width : 320px)
and (max-width : 500px) { and (max-width : 500px) {

View file

@ -128,14 +128,16 @@
} }
.unread-notifications { .unread-notifications {
right: -4px; right: -4px;
background-color: scale-color($tertiary, $lightness: 50%); background-color: $secondary;
} }
.unread-private-messages { .unread-private-messages {
left: -4px; left: -4px;
} }
} }
.flagged-posts { .flagged-posts {
background-color: $danger; border-color: $danger;
color: $danger;
background: $secondary;
} }
} }
@ -231,6 +233,7 @@
padding: 3px; padding: 3px;
margin-top: -22px; margin-top: -22px;
margin-left: 60px; margin-left: 60px;
background: transparent;
} }
.heading { .heading {
padding: 5px 5px 5px 0; padding: 5px 5px 5px 0;

View file

@ -535,7 +535,7 @@ button {
@if $include-mobile-layout-for-image { @if $include-mobile-layout-for-image {
@media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) { @media all and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) {
/** /**
* Remove all paddings around the image on small screen * Remove all paddings around the image on small screen
*/ */

View file

@ -1,4 +1,4 @@
@media only screen @media all
and (min-device-width : 320px) and (min-device-width : 320px)
and (max-device-width : 540px) { and (max-device-width : 540px) {
#reply-control { #reply-control {

View file

@ -61,22 +61,23 @@ h1 a.badge-category div {vertical-align: top;}
.badge-notification { .badge-notification {
@extend %badge; @extend %badge;
padding: 4px; padding: 3px;
color: $secondary; color: $tertiary;
border: 1px solid $tertiary;
font-size: 11px; font-size: 11px;
line-height: 1; line-height: 1;
min-width: 11px; min-width: 11px;
text-align: center; text-align: center;
background-color: scale-color($primary, $lightness: 70%); background-color: transparent;
&[href] { &[href] {
color: $secondary; color: $tertiary;
} }
// New posts // New posts
&.new-posts, &.unread-posts { &.new-posts, &.unread-posts {
background-color: scale-color($tertiary, $lightness: 50%); background-color: transparent;
color: $secondary; color: $tertiary;
font-weight: normal; font-weight: normal;
} }

View file

@ -7,28 +7,28 @@
@mixin small-width { @mixin small-width {
@media screen and (max-width: 850px) { @media all and (max-width: 850px) {
@content; @content;
} }
} }
@mixin medium-width { @mixin medium-width {
@media screen and (min-width: 1000px) and (max-width: 1139px) { @media all and (min-width: 1000px) and (max-width: 1139px) {
@content; @content;
} }
} }
@mixin large-width { @mixin large-width {
@media screen and (min-width: 1140px) { @media all and (min-width: 1140px) {
@content; @content;
} }
} }
@mixin mobile-portrait { @media only screen and (max-width : 320px) { @content; } } @mixin mobile-portrait { @media all and (max-width : 320px) { @content; } }
@mixin not-mobile-portrait { @media only screen and (min-width : 321px) { @content; } } @mixin not-mobile-portrait { @media all and (min-width : 321px) { @content; } }
@mixin mobile-landscape { @media only screen and (min-width : 321px) and (max-width : 959px) { @content; } } @mixin mobile-landscape { @media all and (min-width : 321px) and (max-width : 959px) { @content; } }
@mixin not-tablet-landscape { @media only screen and (max-width : 959px) { @content; } } @mixin not-tablet-landscape { @media all and (max-width : 959px) { @content; } }
@mixin tablet-landscape { @media only screen and (min-width : 960px) { @content; } } @mixin tablet-landscape { @media all and (min-width : 960px) { @content; } }
// CSS3 properties // CSS3 properties
// -------------------------------------------------- // --------------------------------------------------

View file

@ -445,7 +445,7 @@
padding-right: 20px; padding-right: 20px;
} }
@media screen and (min-width: 1550px) { @media all and (min-width: 1550px) {
#reply-control { #reply-control {
.wmd-controls { .wmd-controls {
width: 1450px; width: 1450px;

View file

@ -21,7 +21,10 @@
/* needs to be global, used in user-drop down and user page too */ /* needs to be global, used in user-drop down and user page too */
.unread-private-messages { .unread-private-messages {
background-color: $success; border-color: $success;
color: $success;
background: $secondary;
&.badge-notification[href] {color: $success;}
} }
#main { #main {

View file

@ -9,6 +9,7 @@
margin-top: -2px; margin-top: -2px;
background-color: $secondary; background-color: $secondary;
padding: 12px 12px 5px 12px; padding: 12px 12px 5px 12px;
border: 1px solid scale-color-diff();
h1 { h1 {
display: inline-block; display: inline-block;

View file

@ -290,7 +290,7 @@ button.dismiss-read {
/* Tablet (portrait) ----------- */ /* Tablet (portrait) ----------- */
@media only screen @media all
and (max-width : 850px) { and (max-width : 850px) {
.nav-pills { .nav-pills {

View file

@ -1048,7 +1048,7 @@ span.highlighted {
/* Tablet (portrait) ----------- */ /* Tablet (portrait) ----------- */
@media only screen @media all
and (max-width : 1140px) { and (max-width : 1140px) {
.extra-info { .extra-info {
h1 { h1 {
@ -1061,7 +1061,7 @@ and (max-width : 1140px) {
} }
@media only screen @media all
and (max-width : 975px) { and (max-width : 975px) {
.extra-info { .extra-info {
h1 { h1 {
@ -1073,14 +1073,14 @@ and (max-width : 975px) {
} }
} }
@media only screen @media all
and (max-width : 940px) { and (max-width : 940px) {
.post-cloak .reply-to-tab { .post-cloak .reply-to-tab {
right: 250px; right: 250px;
} }
} }
@media only screen @media all
and (max-width : 870px) { and (max-width : 870px) {
.extra-info { .extra-info {
h1 { h1 {

View file

@ -292,7 +292,7 @@ kbd
padding: .1em .6em; padding: .1em .6em;
} }
@media only screen @media all
and (max-width : 940px) { and (max-width : 940px) {
#topic-progress, #topic-progress-expanded { #topic-progress, #topic-progress-expanded {
@ -301,7 +301,7 @@ and (max-width : 940px) {
} }
@media only screen @media all
and (max-width : 870px) { and (max-width : 870px) {
#topic-progress, #topic-progress-expanded { #topic-progress, #topic-progress-expanded {

View file

@ -179,14 +179,14 @@ class SiteCustomization < ActiveRecord::Base
return "" unless stylesheet.present? return "" unless stylesheet.present?
return @stylesheet_link_tag if @stylesheet_link_tag return @stylesheet_link_tag if @stylesheet_link_tag
ensure_stylesheets_on_disk! ensure_stylesheets_on_disk!
@stylesheet_link_tag = "<link class=\"custom-css\" rel=\"stylesheet\" href=\"/#{CACHE_PATH}#{stylesheet_filename}?#{stylesheet_hash}\" type=\"text/css\" media=\"screen\">" @stylesheet_link_tag = "<link class=\"custom-css\" rel=\"stylesheet\" href=\"/#{CACHE_PATH}#{stylesheet_filename}?#{stylesheet_hash}\" type=\"text/css\" media=\"all\">"
end end
def mobile_stylesheet_link_tag def mobile_stylesheet_link_tag
return "" unless mobile_stylesheet.present? return "" unless mobile_stylesheet.present?
return @mobile_stylesheet_link_tag if @mobile_stylesheet_link_tag return @mobile_stylesheet_link_tag if @mobile_stylesheet_link_tag
ensure_stylesheets_on_disk! ensure_stylesheets_on_disk!
@mobile_stylesheet_link_tag = "<link class=\"custom-css\" rel=\"stylesheet\" href=\"/#{CACHE_PATH}#{stylesheet_filename(:mobile)}?#{stylesheet_hash(:mobile)}\" type=\"text/css\" media=\"screen\">" @mobile_stylesheet_link_tag = "<link class=\"custom-css\" rel=\"stylesheet\" href=\"/#{CACHE_PATH}#{stylesheet_filename(:mobile)}?#{stylesheet_hash(:mobile)}\" type=\"text/css\" media=\"all\">"
end end
end end

View file

@ -13,7 +13,7 @@ class DiscourseStylesheets
@lock.synchronize do @lock.synchronize do
builder.compile unless File.exists?(builder.stylesheet_fullpath) builder.compile unless File.exists?(builder.stylesheet_fullpath)
builder.ensure_digestless_file builder.ensure_digestless_file
%[<link href="#{Rails.env.production? ? builder.stylesheet_relpath : builder.stylesheet_relpath_no_digest + '?body=1'}" media="screen" rel="stylesheet" />].html_safe %[<link href="#{Rails.env.production? ? builder.stylesheet_relpath : builder.stylesheet_relpath_no_digest + '?body=1'}" media="all" rel="stylesheet" />].html_safe
end end
end end

View file

@ -68,7 +68,7 @@ describe SiteCustomization do
context '#custom_stylesheet' do context '#custom_stylesheet' do
it 'should allow me to lookup a filename containing my preview stylesheet' do it 'should allow me to lookup a filename containing my preview stylesheet' do
SiteCustomization.custom_stylesheet(customization.key).should == SiteCustomization.custom_stylesheet(customization.key).should ==
"<link class=\"custom-css\" rel=\"stylesheet\" href=\"/uploads/stylesheet-cache/#{customization.key}.css?#{customization.stylesheet_hash}\" type=\"text/css\" media=\"screen\">" "<link class=\"custom-css\" rel=\"stylesheet\" href=\"/uploads/stylesheet-cache/#{customization.key}.css?#{customization.stylesheet_hash}\" type=\"text/css\" media=\"all\">"
end end
it "should return blank link tag for mobile if mobile_stylesheet is blank" do it "should return blank link tag for mobile if mobile_stylesheet is blank" do
@ -77,7 +77,7 @@ describe SiteCustomization do
it "should return link tag for mobile custom stylesheet" do it "should return link tag for mobile custom stylesheet" do
SiteCustomization.custom_stylesheet(customization_with_mobile.key, :mobile).should == SiteCustomization.custom_stylesheet(customization_with_mobile.key, :mobile).should ==
"<link class=\"custom-css\" rel=\"stylesheet\" href=\"/uploads/stylesheet-cache/mobile_#{customization_with_mobile.key}.css?#{customization_with_mobile.stylesheet_hash(:mobile)}\" type=\"text/css\" media=\"screen\">" "<link class=\"custom-css\" rel=\"stylesheet\" href=\"/uploads/stylesheet-cache/mobile_#{customization_with_mobile.key}.css?#{customization_with_mobile.stylesheet_hash(:mobile)}\" type=\"text/css\" media=\"all\">"
end end
end end