community block MDL-24890 YUI: resize dialogue box to fit the screenshot

blocks/community/styles.css

@@ -181,4 +181,37 @@
 .imagetitle {
     display: inline;
     cursor: pointer;
+}
+
+#page-blocks-community-communitycourse .moodle-dialogue-base .moodle-dialogue {
+-moz-border-radius:12px 12px 12px 12px;
+-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.6);
+-webkit-border-radius:12px 12px 12px 12px;
+-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.6);
+border-width:0 0 0 0;
+}
+
+#page-blocks-community-communitycourse .moodle-dialogue-base .moodle-dialogue-wrap {
+-moz-border-radius:12px 12px 0px 0px;
+-webkit-border-radius:12px 12px 0px 0px;
+background-color:#FFFFFF;
+border:1px solid #555555;
+}
+
+#page-blocks-community-communitycourse .moodle-dialogue-base .moodle-dialogue-hd {
+-moz-border-radius:12px 12px 0 0;
+-webkit-border-radius:12px 12px 0 0;
+background-color:#F6F6F6;
+border:1px solid #CCCCCC;
+overflow: auto;
+}
+
+#page-blocks-community-communitycourse .moodle-dialogue-base .moodle-dialogue-bd {
+padding:0px;
+margin-bottom: -5px;
+}
+
+#page-blocks-community-communitycourse .moodle-dialogue-base .closebutton {
+margin-top:4px;
+width:30px;
 }

blocks/community/yui/imagegallery/imagegallery.js

@@ -103,12 +103,11 @@ YUI.add('moodle-block_community-imagegallery', function(Y) {
                 bodyContent:Y.one('#imageoverlay').get('innerHTML'),
                 visible: false, //by default it is not displayed
                 lightbox : false,
-                zIndex:100,
-                width: windowwidth - 100
+                zIndex:100
             });
             this.overlay.render();
             this.overlay.hide(); //show the overlay
-            this.overlay.set("centered", true);         
+            this.overlay.set("centered", true);
 
             e.halt(); // we are going to attach a new 'hide overlay' event to the body,
             // because javascript always propagate event to parent tag,
@@ -116,15 +115,24 @@ YUI.add('moodle-block_community-imagegallery', function(Y) {
             // otherwise the hide event will be call right away.
 
             //once the image is loaded, update display
-            this.imageloadingevent = Y.one('#imagetodisplay').on('load', function(e){
+            this.imageloadingevent = Y.one('#imagetodisplay').on('load', function(e, url){
                 //hide the loading image
                 Y.one('#hubloadingimage').setStyle('display', 'none');
 
                 //display the screenshot
+                var screenshot = new Image();
+                screenshot.src = url;
+
+                var overlaywidth = windowwidth - 100;
+                if(overlaywidth > screenshot.width) {
+                    overlaywidth = screenshot.width;
+                }
+                
+                this.overlay.set('width', overlaywidth);
                 this.overlay.set("centered", true);
                 this.overlay.show();
 
-            }, this);
+            }, this, url);
 
             var previousnumber = screennumber - 1;
             var nextnumber = screennumber + 1;