Added warning when not using firefox

Author: jfederico

recordrtc.php

@@ -52,21 +52,27 @@
 function get_output() {
   global $CFG;
 
-  $out  = '<div id="alert" class="alert hide">Use Firefox for best experience</div>'."\n";
-  $out .= '<div class="recordrtc">'."\n";
-  $out .= '  <div class="header">'."\n";
-  $out .= '    <select class="recording-media" style="display:none">'."\n";
-  $out .= '      <option value="record-audio">Audio</option>'."\n";
-  $out .= '    </select>'."\n";
-  $out .= '    <select class="media-container-format" style="display:none">'."\n";
-  $out .= '      <option>Ogg</option>'."\n";
-  $out .= '    </select>'."\n";
-  $out .= '    <button class="btn btn-primary btn-lg btn-danger">Start Recording</button>'."\n";
+  $out  = '<div class="container-fluid">'."\n";
+  $out  = '  <div class="row">'."\n";
+  $out  = '    <div class="col-md-16">'."\n";
+  $out .= '      <div id="alert" class="alert h5 hide">Use Firefox for best experience</div>'."\n";
+  $out .= '      <div class="recordrtc">'."\n";
+  $out .= '        <div class="header">'."\n";
+  $out .= '          <select class="recording-media" style="display:none">'."\n";
+  $out .= '            <option value="record-audio">Audio</option>'."\n";
+  $out .= '          </select>'."\n";
+  $out .= '          <select class="media-container-format" style="display:none">'."\n";
+  $out .= '            <option>Ogg</option>'."\n";
+  $out .= '          </select>'."\n";
+  $out .= '          <button class="btn btn-primary btn-lg btn-danger">Start Recording</button>'."\n";
+  $out .= '        </div>'."\n";
+  $out .= '        <div style="display:none;">'."\n";
+  $out .= '          <button class="btn btn-primary btn-md" id="upload-to-server">Upload Recording to Server</button>'."\n";
+  $out .= '        </div>'."\n";
+  $out .= '        <video width="1" height="1" muted></video>'."\n";
+  $out .= '      </div>'."\n";
+  $out .= '    </div>'."\n";
   $out .= '  </div>'."\n";
-  $out .= '  <div style="display:none;">'."\n";
-  $out .= '    <button class="btn btn-primary btn-md" id="upload-to-server">Upload Recording to Server</button>'."\n";
-  $out .= '  </div>'."\n";
-  $out .= '  <video width="1" height="1" muted></video>'."\n";
   $out .= '</div>'."\n";
 
   // Because there is no relative path to TinyMCE, we have to use JavaScript

tinymce/css/style.css

@@ -1,17 +1,7 @@
-div {
-    display: inline;
-    font-weight: normal;
-    line-height: 40px;
-    padding: 3px 0 3px 0;
-}
-
-button, input[type=button] {
-    display: inline-block;
+.alert {
     font-family: inherit;
-    line-height: 1.3;
-    padding: 5px 12px;
     text-align: center;
-    text-shadow: 1px 1px 1px #076bd2;
+    margin: 10px 15px 20px 20px;
 }
 
 .recordrtc, .recordrtc .header {
@@ -24,8 +14,22 @@ button, input[type=button] {
     display: none;
 }
 
-.hide {
-    display: none !important;
+div {
+    font-weight: normal;
+    line-height: 40px;
+    padding: 3px 0 3px 0;
+}
+
+div.alert {
+    line-height: 10px;
+}
+button, input[type=button] {
+    display: inline-block;
+    font-family: inherit;
+    line-height: 1.3;
+    padding: 5px 12px;
+    text-align: center;
+    text-shadow: 1px 1px 1px #076bd2;
 }
 
 audio {
@@ -50,7 +54,6 @@ audio.selected {
     transform: scale(1.05);
 }
 
-.alert {
-    text-align:center;
-    width: 100%;
-}
+.hide {
+    display: none !important;
+}