bring some styling back to the colorbox and improve the event preview ability

5 files changed, 55 insertions, 14 deletions

diff --git a/view/css/colorbox.css b/view/css/colorbox.css
new file mode 100644
index 000000000..a1acfc440
--- /dev/null
+++ b/view/css/colorbox.css
@@ -0,0 +1,45 @@
+#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:1; overflow:hidden;}
+#cboxWrapper {max-width:none;}
+#cboxOverlay{position:fixed; width:100%; height:100%;}
+#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
+#cboxContent{position:relative;}
+#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
+#cboxTitle{margin:0;}
+#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
+#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
+.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
+.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
+#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
+
+/*
+    User Style:
+    Change the following styles to modify the appearance of Colorbox.  They are
+    ordered & tabbed in a way that represents the nesting of the generated HTML.
+*/
+#cboxOverlay{background:url(/images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
+#colorbox{outline:0;}
+   #cboxContent{background:#fff; overflow:hidden;}
+        .cboxIframe{background:#fff;}
+        #cboxError{padding:50px; border:1px solid #ccc;}
+        #cboxLoadedContent{margin-bottom:28px;}
+        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
+        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
+        #cboxLoadingOverlay{background:url(/images/loading_background.png) no-repeat center center;}
+        #cboxLoadingGraphic{background:url(/images/loading.gif) no-repeat center center;}
+
+        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
+        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
+
+        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
+        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
+
+        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
+        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(/images/controls.png) no-repeat -75px 0; width:25px
+; height:25px; text-indent:-9999px;}
+        #cboxPrevious:hover{background-position:-75px -25px;}
+        #cboxNext{position:absolute; bottom:0; left:27px; background:url(/images/controls.png) no-repeat -50px 0; width:25px;
+ height:25px; text-indent:-9999px;}
+        #cboxNext:hover{background-position:-50px -25px;}
+        #cboxClose{position:absolute; bottom:0; right:0; background:url(/images/controls.png) no-repeat -25px 0; width:25px; 
+height:25px; text-indent:-9999px;}
+        #cboxClose:hover{background-position:-25px -25px;}
diff --git a/view/js/mod_directory.js b/view/js/mod_directory.js
index 87e4f92b5..861900704 100644
--- a/view/js/mod_directory.js
+++ b/view/js/mod_directory.js
@@ -1,7 +1,7 @@
 function dirdetails(hash) {
 
 	$.get('dirprofile' + '?f=&hash=' + hash, function( data ) {
-		$.colorbox({ maxWidth: "50%", maxHeight: "75%", html: data });
+		$.colorbox({ maxWidth: "80%", maxHeight: "75%", scrolling: false, html: data });
 	});
 }
 
@@ -28,7 +28,7 @@ function doRatings(hash) {
 function buildRatingForm(hash) {
 	var html = '<form id="ratings_form" action="prate" method="post"><input type="hidden" name="target" value="'+hash+'" /><div class="rating-desc">'+aStr['rating_desc']+'</div><input id="dir-rating-range" class="directory-slider" type="text" value="'+ratingVal+'" name="rating" style="display: none;" /><div class="rating-text-label">'+aStr['rating_text']+'<input type="text" name="rating_text" class="directory-rating-text" value="'+ratingText+'" /><br /><input name="submit" class="directory-rating-submit" type="submit" value="'+aStr['submit']+'" onclick="postRatings(); return false;"></form><div class="clear"></div><script>$("#dir-rating-range").jRange({ from: -10, to: 10, step: 1, showLabels: false, showScale: true, scale : [ "-10","-5","0","5","10" ], onstatechange: function(v) { $("#dir-rating-range").val(v); } });</script>';
 
-	$.colorbox({maxwidth: "50%", maxHeight: "50%", html: html, close: 'X' });
+	$.colorbox({maxwidth: "50%", maxHeight: "50%", scrolling: false, html: html, close: 'X' });
 	currentHash = hash;
 }
 
diff --git a/view/php/theme_init.php b/view/php/theme_init.php
index b3580b81f..0009a00e2 100644
--- a/view/php/theme_init.php
+++ b/view/php/theme_init.php
@@ -8,9 +8,9 @@ head_add_css('library/jRange/jquery.range.css');
 
 head_add_css('view/css/conversation.css');
 head_add_css('view/css/widgets.css');
+head_add_css('view/css/colorbox.css');
 head_add_css('library/justifiedGallery/dist/css/justifiedGallery.css');
 head_add_css('library/bootstrap-tagsinput/bootstrap-tagsinput.css');
-
 head_add_js('jquery.js');
 head_add_js('jquery-migrate-1.1.1.js');
 head_add_js('library/justifiedGallery/dist/js/jquery.justifiedGallery.js');
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 451c3b3ee..b62136427 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -575,15 +575,10 @@ footer {
 
 #cboxContent {
     color: $dirpopup_txtcol;
-	margin: 5px;
-}
-
-#cboxClose {
-	margin: 10px;
 }
 
 #colorbox {
-	margin: 5px;
+	padding: 5px;
 }
 
 #cboxContent a {
@@ -974,14 +969,13 @@ nav .acpopup {
 
 .vevent {
 	max-width: 100%; 
-	margin-left: 10px;
-	margin-right: 10px;
+	margin: 10px;
+	padding: 10px;
 	border: 1px solid #CCCCCC;
 }
 
 .vevent .event-summary {
-	margin-left: 10px;
-	margin-right: 10px;
+	margin: 10px;
 	font-weight: bold;
 }
 
@@ -1027,6 +1021,7 @@ nav .acpopup {
 
 .event-start .dtstart, .event-end .dtend {
 	float: right;
+	margin-right: 10px;
 }
 
 .event-list-date {
diff --git a/view/tpl/event_head.tpl b/view/tpl/event_head.tpl
index 77e693b07..6b59eef27 100755
--- a/view/tpl/event_head.tpl
+++ b/view/tpl/event_head.tpl
@@ -7,7 +7,7 @@
 		$.get(
 			'{{$baseurl}}/events/?id='+eventid,
 			function(data){
-				$.colorbox({ html: data });
+				$.colorbox({ scrolling: false, html: data, onComplete: function() { $.colorbox.resize(); }});
 			}
 		);			
 	}
@@ -17,6 +17,7 @@
 		$.post('events',$('#event-edit-form').serialize(), function(data) {
 			$.colorbox({ html: data });
 		});
+		$('#event-edit-preview').val(0);
 	}