Workaround fix for ipad not playing nice with dcf-grid

views/reserve.erb

@@ -21,9 +21,25 @@ EIGHT_PM_MINUTES = 1200 # end time of calendar
 
 <h3 class="dcf-txt-h4"><%= reservation.nil? ? 'Reserve Time for ' : 'Edit Reservation for ' %><%= resource.name %></h3>
 
+<%
+    # hack since ipad not playing nice with dcf-grid
+    if kiosk_mode
+        section_class = 'dcf-width-100%'
+        first_div_class = 'dcf-d-inline-block dcf-pr-6'
+        first_div_style = 'width: 67%'
+        second_div_class = 'dcf-d-inline-block dcf-pr-6'
+        second_div_style = 'width: 33%'
+    else
+        section_class = 'dcf-grid dcf-col-gap-vw dcf-row-gap-4'
+        first_div_class = 'dcf-col-100% dcf-col-67%-start@sm'
+        first_div_style = ''
+        second_div_class = 'dcf-col-100% dcf-col-33%-end@sm'
+        second_div_style = ''
+    end
+%>
 <form action="" method="POST">
-<section class="dcf-grid dcf-col-gap-vw dcf-row-gap-4">
-    <div class="dcf-col-100% dcf-col-67%-start@sm">
+<section class="<%= section_class %>">
+    <div class="<%= first_div_class %>" style="<%= first_div_style %>">
     	<label>Schedule for <span id="current-date"><%= day.strftime('%m/%d/%Y') %></span></label>
         <div class="calendar-container individual-day">
             <label class="day-header"><%= day.strftime("%^a %-m/%d") %></label>
@@ -142,8 +158,7 @@ EIGHT_PM_MINUTES = 1200 # end time of calendar
                 </div>
             </div>
     	</div>
-    </div>
-    <div class="dcf-col-100% dcf-col-33%-end@sm">
+    </div><div class="<%= second_div_class %>" style="<%= second_div_style %>">
         <label for="date">Date</label>
         <div class="date-time-select">
             <span class="wdn-icon-calendar"></span> 

views/resource_calendar.erb

@@ -7,27 +7,29 @@ SIX_AM_MINUTES = 360 # start time of calendar
 EIGHT_PM_MINUTES = 1200 # end time of calendar
 %>
 
-<div class="dcf-grid-full dcf-grid-halves@sm dcf-col-gap-vw">
-    <div>
+<% if kiosk_mode %>
+<% #FYI - HACK since ipad not playing nice with dcf-grid %>
+<div class="dcf-width-100%">
+    <div class="dcf-d-inline-block dcf-pr-6" style="width:60%;">
         <div id="kioskLogo"></div>
-        <h1 class="dcf-txt-h4 dcf-d-inline"><%= resource.name %></h1>
-    </div>
-
-    <% if kiosk_mode %>
-    <div class="dcf-txt-right">
+        <h1 class="dcf-txt-h5 dcf-d-inline-block"><%= resource.name %></h1>
+     </div><div class="dcf-d-inline-block dcf-txt-right" style="width:40%;">
         <% if @user %>
-            <a class="unl-font-sans" href="/kiosk-logout/?url_redirect=<%= url_encode("/#{@space.url_name}/resources/#{resource.id}/calendar/?kiosk_mode=true") %>">Log Out</a>
+            <a class="dcf-btn dcf-btn-tertiary dcf-mb-1" href="/kiosk-logout/?url_redirect=<%= url_encode("/#{@space.url_name}/resources/#{resource.id}/calendar/?kiosk_mode=true") %>">Log Out</a>
         <% end %>
-        <a class="dcf-btn dcf-btn-primary dcf-txt-2xs" href="/<%= @space.url_name %>/resources/<%= resource.id %>/reserve/?kiosk_mode=true">Reserve <%= resource.name %></a>
+        <a class="dcf-btn dcf-btn-primary dcf-mb-1" href="/<%= @space.url_name %>/resources/<%= resource.id %>/reserve/?kiosk_mode=true">Reserve</a>
     </div>
-    <% end %>
-
-    <% unless kiosk_mode %>
-    <div>
-        <a class="dcf-btn dcf-btn-primary dcf-txt-2xs" href="/<%= @space.url_name %>/resources/<%= resource.id %>/reserve/">Reserve <%= resource.name %></a>
+</div>
+<% else %>
+<div class="dcf-grid dcf-col-gap-vw">
+    <div class="dcf-col-100% dcf-col-67%-start@sm">
+        <h1 class="dcf-txt-h5"><%= resource.name %></h1>
+    </div>
+    <div class="dcf-col-100% dcf-col-33%-end@sm dcf-txt-right">
+        <a class="dcf-btn dcf-btn-primary" href="/<%= @space.url_name %>/resources/<%= resource.id %>/reserve/">Reserve</a>
     </div>
-    <% end %>
 </div>
+<% end %>
 
 <div class="calendar dcf-pt-4">
 	<div class="calendar-header">