Embed block moved

app/locales/cn.yml

@@ -37,7 +37,7 @@ gist:
         raw: '源文件'
         download: '下载'
         clone: '克隆'
-        embed: '引用:'
+        embed: '引用'
         add: '新建'
 
 date:

app/locales/de.yml

@@ -37,7 +37,7 @@ gist:
         raw: 'RAW'
         download: 'Herunterladen'
         clone: 'Klonen'
-        embed: 'Einfügen:'
+        embed: 'Einfügen'
         add: 'Hinzufügen'
 
 date:

app/locales/en.yml

@@ -38,7 +38,7 @@ gist:
         raw: 'RAW'
         download: 'Download'
         clone: 'Clone'
-        embed: 'Embed:'
+        embed: 'Embed'
         add: 'New'
 
 date:

app/locales/es.yml

@@ -37,7 +37,7 @@ gist:
         raw: 'RAW'
         download: 'Descargar'
         clone: 'Clonar'
-        embed: 'Insertar : '
+        embed: 'Insertar'
         add: 'Añadir'
 
 date:

app/locales/fr.yml

@@ -37,7 +37,7 @@ gist:
         raw: 'RAW'
         download: 'Télécharger'
         clone: 'Clôner'
-        embed: 'Insérer : '
+        embed: 'Insérer'
         add: 'Ajouter'
 
 date:

src/Gist/Resources/views/View/embed.html.twig

@@ -12,10 +12,6 @@
     {% endif %}
 
     <style type="text/css">
-        #embed {
-            padding: 0;
-        }
-
         .panel-body {
             padding: 0;
         }

src/Gist/Resources/views/View/view.html.twig

@@ -64,11 +64,19 @@
                             <div id="viewer">
                                 <pre><code {% if gist.cipher %}data-cipher{% endif %} class="language-{{ gist.type }}" data-dependencies="{{ gist.type }}">{{ raw_content }}</code></pre>
                             </div>
-
+                        </div>
-                            <p id="embed" class="pull-right">
+                    </div>
+                </div>
+            </div>
+            <div class="panel panel-default">
+                <div class="panel-heading">
                     {{ 'gist.action.embed'|trans }}
-                                <input type="text" class="form-control" id="embed-input" value="{{ '<div%key%id="gist-' ~ gist.file ~ '-' ~ commit ~ '" class="gist-container"></div><script src="' ~ app.request.getSchemeAndHttpHost() ~ path('embedjs', app.request.attributes.get('_route_params')) ~ '" async></script>' }}" />
+                </div>
-                            </p>
+                <div class="panel-body" id="embed">
+                    <div class="tab-content">
+                        <div class="tab-pane active in">
+                            <pre><code class="language-html">{{ '<div%key%id="gist-' ~ gist.file ~ '-' ~ commit ~ '" class="gist-container"></div>
+<script src="' ~ app.request.getSchemeAndHttpHost() ~ path('embedjs', app.request.attributes.get('_route_params')) ~ '" async></script>' }}</code></pre>
                         </div>
                     </div>
                 </div>

web/app/css/themes/dark.css

@@ -26,7 +26,7 @@ body {
 	margin-right: 4px;
 }
 
-#viewer pre, #viewer code, #revisions pre, #revisions code {
+#viewer pre, #viewer code, #revisions pre, #revisions code, #embed pre, #embed code {
     background: none !important;
 	white-space: pre-wrap;
 	white-space: -moz-pre-wrap;

web/app/js/app.js

@@ -144,7 +144,7 @@ var viewerEvents = function() {
         var key = getKey();
 
         var $cipherEditor = $('.cipher-editor');
-        var $embedInput = $('#embed-input');
+        var $embedCode = $('#embed code');
 
         var to = ' ';
 
@@ -177,8 +177,8 @@ var viewerEvents = function() {
             }
         }
 
-        if ($embedInput.length) {
+        if ($embedCode.length) {
-            $embedInput.val($embedInput.val().replace('%key%', to));
+            $embedCode.html($embedCode.html().replace('%key%', to));
         }
     });
 }