Updated mainImagemodule in Rich (publiclab#8290)

Co-authored-by: NitinBhasneria <nitinbhasnerai360@gmail.com>
manchere · Feb 13, 2021 · f805d87 · f805d87
1 parent cb97191
commit f805d87
Showing 1 changed file with 22 additions and 22 deletions.
diff --git a/app/views/editor/rich.html.erb b/app/views/editor/rich.html.erb
@@ -78,40 +78,40 @@
 
 
     <!-- main_image module -->
-    <div class="ple-module-main_image ple-module row">
+    <div class="ple-module-main_image ple-module container">
+      <div class="ple-module-guide col-md-3"><h2>2</h2></div>
 
-      <div class="ple-module-guide col-lg-3">
-        <h2>2</h2>
-      </div>
-
-      <div class="ple-module-content row col-lg-9">
-        <div class="ple-drag-drop col-lg-6">Drag an image here to upload.</div>
-        <div class="col-lg-6 help">
+      <div class="ple-module-content col-md-9 container">
+        <div class="mainImageBox">
+          <div id="mainImage" class="ple-drag-drop">
+            Drag an image here to upload.
+          </div>
+        </div>
+        <div class="col-md-6 help">
           <div style="display:none;" class="progress">
             <div
-              class="progress-bar progress-bar-striped progress-bar-animated"
+              class="progress-bar progress-bar-striped active"
               role="progressbar"
               aria-valuenow="0"
               aria-valuemin="0"
               aria-valuemax="100"
-              style="width: 0%;">
-            </div>
+              style="width: 0%;"
+            ></div>
           </div>
-          <p>
-            <input
-              aria-label="Upload image"
-              type="file"
-              accept=".png, .jpg, .jpeg"
-              name="image[photo]"
-              value="<% if @node && @node.main_image(:rails) %><%= @node.main_image(:rails).id %><% else %><%= params[:main_image] %><% end %>"
-            />
-          </p>
+
+          <input type="file" name="image[photo]" id="thumbnail-img">
+          <label for="thumbnail-img" class="thumbnailBtn"> 
+            <span>Choose a file…</span>
+          </label>
+          <div id="thumbnail-filename"></div>
+          <button id="removeFile" class="thumbnailBtn">Remove File</button>
           <p class="ple-help">
-            <span class="ple-help-minor">Select an optional main image for your post.</span>
+            <span class="ple-help-minor"
+              >Select an optional main image for your post.</span
+            >
           </p>
         </div>
       </div>
-
     </div>
     <!-- end main_image module -->