#212

static/css/playground-embed.css

@@ -13,13 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.font-ico {
-    font-size: 26px;
-}
-
 .header {
     margin: 0;
-    padding: 10px;
+    padding: 5px;
 }
 
 .header .gravatar {
@@ -27,23 +23,19 @@
     border-radius: 13px;
 }
 
-.header > .fn-right {
-    margin-top: 10px;
-}
-
 .header .logo {
-    height: 36px;
+    height: 23px;
     margin-top: -4px;
 }
 
 .share-panel {
     position: absolute;
     z-index: 20;
-    width: 258px;
+    width: 226px;
-    padding: 10px 10px;
+    padding: 5px 0px;
     right: 0px;
     line-height: normal;
-    top: 57px;
+    top: 34px;
 }
 
 .share-panel .font-ico {
@@ -56,14 +48,39 @@
     transform:rotate(360deg);
 }
 
+.footer {
+    height: 30px;
+    text-shadow: 0 0 0;
+}
+
 #editorDiv {
-    width: 60%;
+    width: 100%;
-    float: left;
+    height: 70%;
 }
 
 #output {
-    width: 40%;
+    height: 30%;
-    float: right;
+    width: 100%;
     border-width: 0;
-    border-left: 1px solid #919191;
+    margin: 0;
+    padding: 0;
+    border-top: 1px solid #919191;
+}
+
+#dialogShare {
+    margin: 10px 15px 0;
+    line-height: 28px;
+}
+
+#dialogShare a {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+.wrapper {
+    width: auto;
+}
+
+.btn {
+    padding: 3px 5px;
 }

static/css/playground.css

@@ -13,15 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.font-ico {
-    font-size: 26px;
-}
-
 .header {
     margin: 0;
     padding: 10px;
 }
 
+.font-ico {
+    font-size: 26px;
+}
+
 .header .gravatar {
     width: 26px;
     border-radius: 13px;
@@ -56,6 +56,11 @@
     transform:rotate(360deg);
 }
 
+.footer {
+    height: 30px;
+    text-shadow: 0 0 0;
+}
+
 #editorDiv {
     width: 60%;
     float: left;
@@ -65,10 +70,17 @@
     width: 40%;
     float: right;
     border-width: 0;
+    margin: 0;
+    padding: 0;
     border-left: 1px solid #919191;
 }
 
 #dialogShare {
-    margin: 35px 100px 0 100px;
+    margin: 10px 15px 0;
     line-height: 28px;
 }
+
+#dialogShare a {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}

static/js/playground.js

@@ -18,18 +18,21 @@ var playground = {
     editor: undefined,
     pid: undefined,
     _resize: function () {
-        $("#editor, #output").height($(window).height() - 57 - $(".footer").height());
+        if (config.embed) {
+            $("#editorDiv").parent().height($(window).height() - 35 - $(".footer").height());
+            playground.editor.setSize("auto", ($("#editorDiv").parent().height() * 0.7) + "px");
+        } else {
+            $("#editor, #output").height($(window).height() - 58 - $(".footer").height());
             playground.editor.setSize("auto", $("#editor").height() + "px");
+        }
     },
     _initShare: function () {
         $("#dialogShare").dialog({
             "modal": true,
-            "height": 460,
+            "height": 200,
-            "width": 800,
+            "width": 560,
             "title": config.label.share,
-            "hideFooter": true,
+            "hideFooter": true
-            "afterOpen": function () {
-            }
         });
     },
     _initWideShare: function () {
@@ -307,7 +310,7 @@ var playground = {
 
                         var html = '<div class="fn-clear"><label>' + config.label.url + config.label.colon + '</label><a href="' + url + '" target="_blank">' + url + "</a><br/>";
                         html += '<label>' + config.label.short_url + config.label.colon + '</label><a href="' + data.shortURL + '" target="_blank">' + data.shortURL + '</a><br/>';
-                        html += '<label>' + config.label.embeded + config.label.colon + '</label><br/><textarea rows="10" cols="80"><p><iframe src="' + url + '?embed=true" width="100%" height="600"></iframe></p></textarea>';
+                        html += '<label>' + config.label.embeded + config.label.colon + '</label><br/><textarea rows="5" cols="72" readonly><iframe src="' + url + '?embed=true" width="100%" height="600"></iframe></textarea>';
                         html += '</div>';
 
                         $("#dialogShare").html(html);

views/playground/index.html

@@ -12,10 +12,10 @@
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/base.css?{{.conf.StaticResourceVersion}}">
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/wide.css?{{.conf.StaticResourceVersion}}">
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/about.css?{{.conf.StaticResourceVersion}}">
+        <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/themes/default.css?{{.conf.StaticResourceVersion}}">
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/sign.css?{{.conf.StaticResourceVersion}}">
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/side.css?{{.conf.StaticResourceVersion}}">
         {{if .embed}}<link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/playground-embed.css?{{.conf.StaticResourceVersion}}">{{else}}<link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/playground.css?{{.conf.StaticResourceVersion}}">{{end}}
-        <link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/themes/default.css?{{.conf.StaticResourceVersion}}">
 
         <link rel="stylesheet" href="{{.conf.StaticServer}}/static/js/lib/codemirror-{{.codeMirrorVer}}/codemirror.css?{{.conf.StaticResourceVersion}}">       
         <link rel="stylesheet" href="{{$.conf.StaticServer}}/static/js/overwrite/codemirror/theme/wide.css?{{.conf.StaticResourceVersion}}">
@@ -79,7 +79,8 @@
                             "staticServer": "{{.conf.StaticServer}}",
                             "channel": "{{.conf.Channel}}",
                             "wideSessionId": "{{.session.ID}}",
-                            "label": {{.i18n}}
+                            "label": {{.i18n}},
+                            "embed": {{.embed}}
                     };
                     function newWideRequest() {
                     var ret = {