CHAL-1537 Winners Page accessibility enhancements

lib/web/templates/phase_winner/_form.html.eex

@@ -1,29 +1,19 @@
 <div class="card winners-overview">
   <div class="card-body">
     <h2>Winners overview</h2>
-
+    <span>Add Winners details to your challenge profile page.</span>
+    <hr size='2'>
     <%= form_for(@changeset, @action, [class: "form-horizontal", multipart: true, data: [phase_winner_id: @changeset.data.id]], fn f -> %>
-      <div class="col winner-overview">
-        <label>Winners description (optional)</label>
-        <%= FormView.rt_textarea_field(f, :overview) %>
-        <label>Winners overview image (optional)</label>
-        <%= hidden_input f, :overview_image_key %>
-        <%= hidden_input f, :overview_image_extension %>
-        <div class="mb-3">
-          <input class="form-control-file" id="phase_winner_overview_image" name="phase_winner[overview_image]" type="file">
-          <div class="invalid-feedback">File must be a .jpg, .jpeg, .png, .gif </div>
-          <small class="form-text text-muted font-italic">Allowed file types: .jpg, .jpeg, .png, .gif</small>
-        </div>
-        <div class="my-3"><%= render_overview_image(@changeset.data) %></div>
-        <%= if @changeset.data.overview_image_key do %>
-          <%= render_remove_image_checkbox(f, :overview_image) %>
-        <% end %>
-      </div>
-
-      <hr/>
+      <div class="col Add Winners details to your challenge profile page.winner-overview">
+        <h3>Winners description (optional)</h3>
+        <span>Using the text editor blow, you can display a Winners Description detailing winner names and rank with any important
+messaging and hyperlinking.  No image uploads available at this time.</span><br><br>
+        <%= FormView.rt_textarea_field(f, :overview , style: "height:150px")  %>
 
+      <br><br>
       <div class="col individual-winners">
-        <h2>Add individual winners with name, rank and photo (optional)</h2>
+        <h2>Individual Winner Info</h2>
+        <b>Add individual winners with name and rank (optional)</b><br><br>
 
         <%= render Web.PhaseWinnerView, "winners/_form.html", form: f, upload_error: @upload_error %>
       </div>
@@ -33,12 +23,12 @@
       <div class="col">
         <div class="row winner-options">
           <div class="col-md cancel-winner">
-            <%= link("Cancel", to: Routes.challenge_path(@conn, :show, @challenge.id)) %>          
+            <%= link("Cancel", to: Routes.challenge_path(@conn, :show, @challenge.id)) %>
           </div>
-          <div class="col-md">
-            <a class="disabled btn">Save draft</a>
-            <a class="disabled btn">Preview</a>
-            <%= submit("Review + Publish", class: "btn btn-primary") %>
+          <div class="col-md text-right">
+            <a class="disabled btn ">Save draft</a>
+            <a class="disabled btn ">Preview</a>
+            <%= submit("Review + Publish", class: "btn btn-primary ") %>
           </div>
         </div>
       </div>

lib/web/templates/phase_winner/edit.html.eex

@@ -11,13 +11,23 @@
   </div>
 </div>
 
+          <div class="content-header">
+            <div class="container-fluid">
+              <div class="callout callout-warning d-flex align-items-center">
+                <i class="fa fa-exclamation-circle h4 mb-0 flash-icon"></i><span><b>Important Notice</b><br>
+Image upload functionality on this page has been deactivated due to accessibility upgrading. For questions or updates please email [email protected].</span>
+              </div>
+            </div>
+          </div>
+
+
 <div class="content phase-winners">
   <div class="container-fluid">
     <%= render_title(@challenge, @phase) %>
 
-    <%= render Web.PhaseWinnerView, "_form.html", 
-      conn: @conn, 
-      changeset: @changeset, 
+    <%= render Web.PhaseWinnerView, "_form.html",
+      conn: @conn,
+      changeset: @changeset,
       action: @action,
       challenge: @challenge,
       phase: @phase,

lib/web/templates/phase_winner/winners/_form.html.eex

@@ -1,8 +1,6 @@
 <div id="winners-form">
   <div class="js-dynamic-nested-items">
-    <%= if @upload_error do %>
-      <div class="mb-3 invalid-feedback d-block">Files must be .pdf, .txt, .csv, .jpg, .png, or .tiff</div>
-    <% end %>
+
     <%= inputs_for(@form, :winners, [skip_hidden: true], fn winner -> %>
       <div class="js-dynamic-nested-item grid-row mb-2" data-index=<%= winner.index %>>
         <div class="form-group">
@@ -18,7 +16,7 @@
             <div><%= label winner, :place_title, "Place title (ex. First Place or Grand Winner) (optional)" %></div>
             <%= text_input winner, :place_title %>
           </div>
-          
+
           <div class="form-group">
             <div><%= label winner, :name, "Name (optional)" %></div>
             <%= text_input winner, :name %>
@@ -28,22 +26,11 @@
             <%= hidden_input winner, :image_key, data: [field: :image_key] %>
             <%= hidden_input winner, :image_extension, data: [field: :image_extension] %>
           </div>
-
-          <div class="form-group">
-            <div><%= label winner, :image, "Upload image (optional)", class: "control-label" %></div>
-            <%= file_input winner, :image, data: [field: :image] %>
-            <small class="form-text text-muted font-italic">Allowed file types: .jpg, .jpeg, .png, .gif</small>
-          </div>
-          <div class="my-3"><%= render_winner_image(winner.data) %></div>
-          <%= if winner.data.image_key do %>
-            <div class="form-group">
-              <%= render_remove_image_checkbox(winner, :image) %>
-            </div>
-          <% end %>
+
         </div>
 
         <div class="grid-col flex-2 remove-winner-container">
-          <a href="#" class="js-dynamic-nested-remove">Remove</a>
+          <a href="#" class="float-right js-dynamic-nested-remove btn btn-primary">Remove</a>
         </div>
       </div>
     <% end) %>
@@ -63,32 +50,22 @@
           <div><label >Place title (ex. First Place or Grand Winner) (optional)</label></div>
           <%= text_input :template, :field, data: [field: :place_title] %>
         </div>
-        
+
         <div class="js-dynamic-nested-group form-group">
           <div><label>Name (optional)</label></div>
           <%= text_input :template, :field, data: [field: :name] %>
         </div>
-
-        <div class="js-dynamic-nested-group form-group">
-          <%= hidden_input :template, :field, data: [field: :image_path] %>
-        </div>
 
-        <div class="js-dynamic-nested-group form-group">
-          <div><label class="control-label">Upload image (optional)</label></div>
-          <%= file_input :template, :field, data: [field: :image] %>
-          <small class="form-text text-muted font-italic">Allowed file types: .jpg, .jpeg, .png, .gif</small>
-        </div>
 
-        <div class="js-dynamic-nested-group form-group">
-          <%= render_remove_image_checkbox(:template, :field, data: [field: :remove_image]) %>
-        </div>
       </div>
 
       <div class="grid-col flex-2 remove-winner-container">
-        <a href="#" class="js-dynamic-nested-remove">Remove</a>
+        <a href="#" class="float-right js-dynamic-nested-remove btn btn-primary">Remove</a>
       </div>
     </div>
   </div>
+  <h3>Add Aditional Winners</h3>
+  <b>Add additional winners. These will display in a grid format in order displayed above.</b><br><br>
 
   <div class="js-dynamic-nested-add btn btn-primary" data-parent="phase_winner" data-child="winners">Add</div>
-</div>
+</div>