reformat popup content styles to work with new mobile scrolling changes

openplans · Mar 22, 2012 · d1274f5 · d1274f5
1 parent a75fae6
commit d1274f5
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 127 deletions.
diff --git a/app/assets/stylesheets/chrome.css b/app/assets/stylesheets/chrome.css
@@ -255,111 +255,32 @@ table.regions {
  * Feature Popup
  *
  */
-.information-panel-content .feature {
+.information-panel-content .feature,
+.information-panel-content .page {
   background-color: white;
   border: 1px solid #a8a8a8;
-  padding:5px;
+  padding: 1.5em;
      -moz-box-shadow: -4px 4px 0 rgba(85, 85, 85, 0.5);
   -webkit-box-shadow: -4px 4px 0 rgba(85, 85, 85, 0.5);
           box-shadow: -4px 4px 0 rgba(85, 85, 85, 0.5);
 }
-
-/* .information-panel {
-   position: absolute;
-   top: 15px;
-   right: 15px;
-   bottom: 45px;
- }
-
-.information-panel-content-wrap {
-  background-color: white;
-  border: 1px solid #a8a8a8;
-  position : relative;
-  z-index:10000;
-  overflow-y: hidden;
-  height: 100%;
-     -moz-box-shadow: -4px 4px 0 rgba(85, 85, 85, 0.5);
-  -webkit-box-shadow: -4px 4px 0 rgba(85, 85, 85, 0.5);
-          box-shadow: -4px 4px 0 rgba(85, 85, 85, 0.5);
-*/  /* Explicit absolute, top/left/right/bottom instead of height:100% for IE7 only */
-/*  *position : absolute;
-  *top      : 0;
-  *left     : 0;
-  *right    : 0;
-  *bottom   : 0;
-}
-.information-panel-content-wrap:after {
+.information-panel-content {
+  line-height: 1.5;
+}
+.information-panel-content:after {
   content: "";
   height: 5px;
   background: url("popup-overflow.png") repeat-x scroll 0 0 transparent;
   position: absolute;
-  right: 0.75em;
-  bottom: 0;
-  left: 0.75em;
+  right: 1em;
+  bottom: 1px;
+  left: 1em;
   border-bottom: 0.75em solid #fff;
+  z-index: 100;
 }
 
-.information-panel-content {
-  line-height: 1.5;
-}
-
-.information-panel-content .feature,
-.information-panel-content .page {
-  overflow-y: auto;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  margin: 0;
-  padding: 1em 1em 2em 1em;
-}
-.information-panel-content .feature.show {
-  top: 76px;
-}
-
-.information-panel .close {
-  width: 14px;
-  height: 14px;
-  background: url("close-bttn.png") no-repeat scroll 0 0 transparent;
-  text-indent: -9999px;
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 10001;
-}
-.information-panel .close:hover { background-position: bottom left; }
-
-.information-panel .popup-tip-wrapper {
-  margin: -1px auto 0;
-  width: 40px;
-  height: 16px;
-  position: relative;
-  overflow: hidden;
-  z-index: 10002;
-}
-
-.information-panel .popup-tip {
-  background: white;
-  width: 15px;
-  height: 15px;
-  padding: 1px;
-
-  margin: -11px auto 0;
-
-  -moz-transform: rotate(45deg);
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  -o-transform: rotate(45deg);
-  transform: rotate(45deg);
-
-  box-shadow: 0 1px 10px #888;
-  -moz-box-shadow: 0 1px 10px #888;
-  -webkit-box-shadow: 0 1px 14px #999;
-}
-
-*//* Feature Popup - Content */
-/*.feature .name {
+/* Feature Popup - Content */
+.feature .name {
   margin: 0 0 0.25em;
 }
 .feature-header > .avatar {
@@ -394,9 +315,9 @@ table.regions {
 .feature.show .meta ul li.first:before {
   content: " ";
 }
-*/
+
 /* Discussion */
-/*.discussion {
+.discussion {
   position: relative;
   margin-top: 2em;
   padding-bottom: 2em;
@@ -465,8 +386,8 @@ a.reply-link:hover {
   margin-top: 1em;
 }
 
-*//* Feature Popup - Admin */
-/*.feature.show .feature-admin {
+/* Feature Popup - Admin */
+.feature.show .feature-admin {
   border : 1px dashed red;
   padding: 10px;
   background-color: #F8F8FF;
@@ -475,8 +396,8 @@ a.reply-link:hover {
   font-size: 1em;
 }
 
-*//* Feature Popup - Flash Messages */
-/*.flash {
+/* Feature Popup - Flash Messages */
+.flash {
   font-weight: bold;
   text-align: center;
   background-color: #fdf9e5;
@@ -502,18 +423,9 @@ a.reply-link:hover {
   color: #F61359;
 }
 
-*//* Feature Popup - Social Buttons */
-/*.information-panel .social {
-  height: 75px;
-  background-color: #eee;
-  border-bottom: 1px solid #a8a8a8;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  overflow: hidden;
+/* Feature Popup - Social Buttons */
+.information-panel .social {
 }
-
 .social form.vote button[type=submit] {
   background-color: #e4e4e4;
   color: #444;
@@ -577,7 +489,7 @@ a.reply-link:hover {
 .social .sharing li a.link {
   background: url("link.png") no-repeat scroll 0 0 transparent;
 }
-*/
+
 
 /*
  *

diff --git a/app/assets/stylesheets/layout-fullscreen.css b/app/assets/stylesheets/layout-fullscreen.css
@@ -76,22 +76,11 @@ html, body, #wrapper {
   bottom: 45px;
 }
 .information-panel-content-wrap {
-/*  background-color: white;
-  border: 1px solid #a8a8a8;
-  z-index: 10000;
-  overflow: auto;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-     -moz-box-shadow: -4px 4px 0 rgba(85, 85, 85, 0.5);
-  -webkit-box-shadow: -4px 4px 0 rgba(85, 85, 85, 0.5);
-          box-shadow: -4px 4px 0 rgba(85, 85, 85, 0.5);
-*/}
+}
 .information-panel-content {
 }
-.information-panel-content .feature {
+.information-panel-content .feature,
+.information-panel-content .page {
   overflow: auto;
   position: absolute;
   z-index:10;
@@ -101,12 +90,12 @@ html, body, #wrapper {
   bottom: 0;
 }
 .information-panel-content .feature.show {
-  padding-top: 75px;
+  padding-top: 86px;
 }
 .information-panel .social {
-  height: 75px;
+  height: 74px;
   background-color: #eee;
-  border-bottom: 1px solid #a8a8a8;
+  border: 1px solid #a8a8a8;
   position: absolute;
   top: 0;
   left: 0;