From 7dd45dc25b874d143309f9999aeb0c955daec49b Mon Sep 17 00:00:00 2001
From: Steven H Johnson <shjohnson.pi@gmail.com>
Date: Fri, 29 Jul 2016 19:14:02 -0400
Subject: [PATCH] Change body-content css to class instead of id. Fix IE 11 bug
with sponsor img width.
IE 11 was having the '#body-content img' selector taking priority, so changed it to '.body-content img'.
---
static/css/sass/_body.scss | 14 +--
static/css/sass/_content_map.scss | 2 +-
static/css/sass/_content_sponsors.scss | 1 +
static/css/sass/_nav.scss | 2 +-
static/css/usta.css | 147 +++++++++++++------------
usta/templates/usta/base.html | 2 +-
6 files changed, 85 insertions(+), 83 deletions(-)
diff --git a/static/css/sass/_body.scss b/static/css/sass/_body.scss
index f727541..57cfddb 100644
--- a/static/css/sass/_body.scss
+++ b/static/css/sass/_body.scss
@@ -59,7 +59,7 @@ main {
z-index: 11;
}
-#body-content {
+.body-content {
position: relative;
z-index: 12;
}
@@ -140,7 +140,7 @@ main {
}
}
-#body-content {
+.body-content {
padding-top: 5px;
padding-bottom: 25px;
/*margin-right: 5%;*/
@@ -182,7 +182,7 @@ a {
}
// Except for ones within the body content.
-#body-content a {
+.body-content a {
width: auto;
height: auto;
}
@@ -197,7 +197,7 @@ img {
}
// Set general content-images to not span 100% width.
-#body-content img {
+.body-content img {
width: auto;
}
@@ -216,7 +216,7 @@ nav {
}
// Set margins for headers within content.
-#body-content {
+.body-content {
h1 {
margin-top: 10px;
@@ -224,7 +224,7 @@ nav {
}
}
-#body-content {
+.body-content {
h2,
h3,
@@ -363,7 +363,7 @@ h6 {
//START Misc Block
//**************************************************
-#body-content {
+.body-content {
@media (max-width: $phone-max) {
word-wrap: break-word;
diff --git a/static/css/sass/_content_map.scss b/static/css/sass/_content_map.scss
index 1a31bc0..2669a2e 100644
--- a/static/css/sass/_content_map.scss
+++ b/static/css/sass/_content_map.scss
@@ -207,7 +207,7 @@
// Nexted In body content because otherwise
// generic h2 tags were overiding.
-#body-content {
+.body-content {
.map-divider {
@extend %divider-padding
diff --git a/static/css/sass/_content_sponsors.scss b/static/css/sass/_content_sponsors.scss
index f8ce31a..cd1bcb4 100644
--- a/static/css/sass/_content_sponsors.scss
+++ b/static/css/sass/_content_sponsors.scss
@@ -137,6 +137,7 @@
img {
max-width: 100%;
max-height: 100px;
+ width: 100%;
@media (min-width: $laptop-min) {
max-height: 200px;
diff --git a/static/css/sass/_nav.scss b/static/css/sass/_nav.scss
index fa511bb..1dc65f7 100644
--- a/static/css/sass/_nav.scss
+++ b/static/css/sass/_nav.scss
@@ -930,7 +930,7 @@ nav {
//START Tab Nav Block
//**************************************************
-#body-content {
+.body-content {
.ui-widget-content {
border: none;
diff --git a/static/css/usta.css b/static/css/usta.css
index 36ef420..c58b7b5 100644
--- a/static/css/usta.css
+++ b/static/css/usta.css
@@ -1,17 +1,17 @@
@media (max-width: 767px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 10px;
padding-bottom: 10px; } }
@media (min-width: 767px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 15px;
padding-bottom: 15px; } }
@media (min-width: 1023px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 22px;
padding-bottom: 22px; } }
@media (min-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 30px;
padding-bottom: 30px; } }
@@ -120,36 +120,36 @@ ul.messagelist li.error {
color: inherit; }
@media (max-width: 767px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 10px;
padding-bottom: 10px; } }
@media (min-width: 767px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 15px;
padding-bottom: 15px; } }
@media (min-width: 1023px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 22px;
padding-bottom: 22px; } }
@media (min-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 30px;
padding-bottom: 30px; } }
@media (max-width: 767px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 10px;
padding-bottom: 10px; } }
@media (min-width: 767px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 15px;
padding-bottom: 15px; } }
@media (min-width: 1023px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 22px;
padding-bottom: 22px; } }
@media (min-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 30px;
padding-bottom: 30px; } }
@@ -178,7 +178,7 @@ main {
position: relative;
z-index: 11; }
-#body-content {
+.body-content {
position: relative;
z-index: 12; }
@@ -209,7 +209,7 @@ main {
main {
width: 100%; } }
-#body-content {
+.body-content {
padding-top: 5px;
padding-bottom: 25px;
/*margin-right: 5%;*/
@@ -228,7 +228,7 @@ a {
width: 100%;
height: 100%; }
-#body-content a {
+.body-content a {
width: auto;
height: auto; }
@@ -238,7 +238,7 @@ img {
max-width: 100%;
max-height: 100%; }
-#body-content img {
+.body-content img {
width: auto; }
ul,
@@ -251,15 +251,15 @@ nav {
padding: 0;
margin: 0; }
-#body-content h1 {
+.body-content h1 {
margin-top: 10px;
margin-bottom: 20px; }
-#body-content h2,
-#body-content h3,
-#body-content h4,
-#body-content h5,
-#body-content h6 {
+.body-content h2,
+.body-content h3,
+.body-content h4,
+.body-content h5,
+.body-content h6 {
margin-top: 10px;
margin-bottom: 10px; }
@@ -335,7 +335,7 @@ h6 {
font-size: 1em; } }
@media (max-width: 767px) {
- #body-content {
+ .body-content {
word-wrap: break-word; } }
body {
@@ -359,19 +359,19 @@ body:after {
body:after {
content: "mobile"; } }
@media (max-width: 767px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 10px;
padding-bottom: 10px; } }
@media (min-width: 767px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 15px;
padding-bottom: 15px; } }
@media (min-width: 1023px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 22px;
padding-bottom: 22px; } }
@media (min-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 30px;
padding-bottom: 30px; } }
@@ -839,31 +839,31 @@ nav a {
border-top: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.6); }
-#body-content .ui-widget-content {
+.body-content .ui-widget-content {
border: none; }
-#body-content .mytabs .ui-widget-content {
+.body-content .mytabs .ui-widget-content {
border: 1px solid #efefef;
border-radius: 4px; }
-#body-content .mytabs .ui-widget-header {
+.body-content .mytabs .ui-widget-header {
background: #fff;
border: none;
border-bottom: 1px solid #efefef;
border-radius: 0; }
@media (max-width: 767px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 10px;
padding-bottom: 10px; } }
@media (min-width: 767px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 15px;
padding-bottom: 15px; } }
@media (min-width: 1023px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 22px;
padding-bottom: 22px; } }
@media (min-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 30px;
padding-bottom: 30px; } }
@@ -1078,19 +1078,19 @@ nav a {
cursor: pointer; }
@media (max-width: 767px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 10px;
padding-bottom: 10px; } }
@media (min-width: 767px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 15px;
padding-bottom: 15px; } }
@media (min-width: 1023px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 22px;
padding-bottom: 22px; } }
@media (min-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 30px;
padding-bottom: 30px; } }
@@ -1223,36 +1223,36 @@ footer .social-media {
list-style-type: none; }
@media (max-width: 767px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 10px;
padding-bottom: 10px; } }
@media (min-width: 767px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 15px;
padding-bottom: 15px; } }
@media (min-width: 1023px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 22px;
padding-bottom: 22px; } }
@media (min-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 30px;
padding-bottom: 30px; } }
@media (max-width: 767px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 10px;
padding-bottom: 10px; } }
@media (min-width: 767px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 15px;
padding-bottom: 15px; } }
@media (min-width: 1023px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 22px;
padding-bottom: 22px; } }
@media (min-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 30px;
padding-bottom: 30px; } }
@@ -1331,19 +1331,19 @@ table .player-img {
background-color: #fff; }
@media (max-width: 767px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 10px;
padding-bottom: 10px; } }
@media (min-width: 767px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 15px;
padding-bottom: 15px; } }
@media (min-width: 1023px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 22px;
padding-bottom: 22px; } }
@media (min-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 30px;
padding-bottom: 30px; } }
@@ -1453,19 +1453,19 @@ table .player-img {
box-sizing: border-box; }
@media (max-width: 767px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 10px;
padding-bottom: 10px; } }
@media (min-width: 767px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 15px;
padding-bottom: 15px; } }
@media (min-width: 1023px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 22px;
padding-bottom: 22px; } }
@media (min-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 30px;
padding-bottom: 30px; } }
@@ -1580,19 +1580,19 @@ table .player-img {
margin-bottom: 10px; }
@media (max-width: 767px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 10px;
padding-bottom: 10px; } }
@media (min-width: 767px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 15px;
padding-bottom: 15px; } }
@media (min-width: 1023px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 22px;
padding-bottom: 22px; } }
@media (min-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 30px;
padding-bottom: 30px; } }
@@ -1674,9 +1674,9 @@ table .player-img {
#map-table-hospital .map-address {
width: 15%; }
-#body-content .map-header {
+.body-content .map-header {
margin-top: 10px; }
-#body-content .map-helper-text {
+.body-content .map-helper-text {
padding-top: 10px; }
#map-checkbox-wrapper {
@@ -1701,19 +1701,19 @@ table .player-img {
border-bottom: 1px solid #efefef; }
@media (max-width: 767px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 10px;
padding-bottom: 10px; } }
@media (min-width: 767px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 15px;
padding-bottom: 15px; } }
@media (min-width: 1023px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 22px;
padding-bottom: 22px; } }
@media (min-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 30px;
padding-bottom: 30px; } }
@@ -2109,19 +2109,19 @@ table .player-img {
box-shadow: 2px 2px 2px 2px #3b7db8; }
@media (max-width: 767px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 10px;
padding-bottom: 10px; } }
@media (min-width: 767px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 15px;
padding-bottom: 15px; } }
@media (min-width: 1023px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 22px;
padding-bottom: 22px; } }
@media (min-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 30px;
padding-bottom: 30px; } }
@@ -2302,19 +2302,19 @@ table .player-img {
border-bottom: 1px solid #efefef; }
@media (max-width: 767px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 10px;
padding-bottom: 10px; } }
@media (min-width: 767px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 15px;
padding-bottom: 15px; } }
@media (min-width: 1023px) and (max-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 22px;
padding-bottom: 22px; } }
@media (min-width: 1600px) {
- #body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
+ .body-content .map-divider, .player-info #player-bio, .player-info .year, .volunteer-topics section {
padding-top: 30px;
padding-bottom: 30px; } }
@@ -2407,7 +2407,8 @@ table .player-img {
max-height: 200px; } }
.company-list img {
max-width: 100%;
- max-height: 100px; }
+ max-height: 100px;
+ width: 100%; }
@media (min-width: 1024px) {
.company-list img {
max-height: 200px; } }
diff --git a/usta/templates/usta/base.html b/usta/templates/usta/base.html
index 1e92faf..d25c0a5 100644
--- a/usta/templates/usta/base.html
+++ b/usta/templates/usta/base.html
@@ -91,7 +91,7 @@
<a href="{% url 'account_man:logout' %}">Logout</a>
</div>
{% endif %}
- <div id="body-content">
+ <div id="body-content" class="body-content">
{% block main %}{% endblock %}
</div>
</main>
--
GitLab