Fix layout.

This commit is contained in:
BoHung Chiu 2021-09-08 10:55:20 +08:00
parent e199880f13
commit b0d7599edd
3 changed files with 77 additions and 31 deletions

View File

@ -98,7 +98,7 @@
label_col = 2 label_col = 2
input_col = 10 input_col = 10
if calendar_type == 0 if calendar_type == 0
right_col -= 5 right_col -= 7
label_col += 2 label_col += 2
input_col -= 2 input_col -= 2
end end
@ -124,6 +124,33 @@ ul.list-unstyled li {
.form-group .controls{ .form-group .controls{
margin-left: 0; margin-left: 0;
} }
@media (min-width: 1200px){
.col-lg-7{
width: 58.3%;
float: left;
}
.col-lg-5{
width: 41.7%;
float: left;
}
}
@media (min-width: 768px){
.form-horizontal .col-sm-4 {
width: 33.33333333%;
}
.form-horizontal .col-sm-8 {
width: 66.66666667%;
}
.form-horizontal .col-sm-2 {
width: 16.66666667%;
}
.form-horizontal .col-sm-10 {
width: 83.33333333%;
}
.form-horizontal .col-sm-offset-4 {
margin-left: 33.33%;
}
}
</style> </style>
<style type="text/css"> <style type="text/css">
.full-size-img img { .full-size-img img {
@ -262,6 +289,13 @@ ul.list-unstyled li {
width: 25%; width: 25%;
} }
} }
form#new_p_hire .form-group input,form#new_p_hire .form-group select, form#new_p_hire .form-group textarea{
width: 100%;
max-width: 300px;
}
form#new_p_hire .form-group input[name="_rucaptcha"]{
width: auto;
}
</style> </style>
<% if !property.can_be_hired %> <% if !property.can_be_hired %>
<script type="text/javascript"> <script type="text/javascript">
@ -278,16 +312,16 @@ ul.list-unstyled li {
<script type="text/javascript"> <script type="text/javascript">
var pick_date_mode = <%=property.set_availability%>; var pick_date_mode = <%=property.set_availability%>;
</script> </script>
<h3 class="property_title"><%= property.title %></h3> <h3 class="property_title"><%= property.title.html_safe %></h3>
<article class="s-annc s-property"> <article class="s-annc s-property">
<section class="s-annc__post-wrap"> <section class="s-annc__post-wrap">
<% if property.display_img %> <% if property.display_img %>
<div class="s-annc__sub-img full-size-img"> <div class="s-annc__sub-img full-size-img">
<img src="<%=property.image.url%>" alt="<%=property.title%>"> <img src="<%=property.image.url%>" alt="<%=property.title%>">
<span class="s-annc__img_description"><%=property.title%></span> <span class="s-annc__img_description"><%=property.title.html_safe%></span>
</div> </div>
<% end %> <% end %>
<h4 class="property_subtitle"><%= property.property_usage %></h4> <h4 class="property_subtitle"><%= property.property_usage.html_safe %></h4>
<% property_carousel_images = property.property_carousel_images %> <% property_carousel_images = property.property_carousel_images %>
<% if property_carousel_images.count != 0 %> <% if property_carousel_images.count != 0 %>
<div class="carousel_images"> <div class="carousel_images">
@ -325,7 +359,7 @@ ul.list-unstyled li {
</div> </div>
</div> </div>
<% end %> <% end %>
<div class="property_note"><%= property.note %></div> <div class="property_note"><%= property.note.html_safe %></div>
</section> </section>
<ul class="s-property__related-wrap list-unstyled no-print"> <ul class="s-property__related-wrap list-unstyled no-print">
<% if property.property_files.count != 0%> <% if property.property_files.count != 0%>
@ -356,7 +390,7 @@ ul.list-unstyled li {
<% end %> <% end %>
</article> </article>
<% if property.calendar_type == 0 %> <% if property.calendar_type == 0 %>
<div id="orbit_calendar" class="col-lg-7"> <div id="orbit_calendar" class="col-lg-<%=12-right_col%>">
<div id="sec1"> <div id="sec1">
<div class="btn-toolbar" id="navigation"> <div class="btn-toolbar" id="navigation">
<div id="calendar-nav"> <div id="calendar-nav">
@ -607,7 +641,7 @@ ul.list-unstyled li {
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="col-sm-offset-<%=label_col%> col-sm-5"> <div class="col-sm-offset-<%=label_col%> col-sm-<%=input_col%>">
<div id="property-avaialable-alert" style="margin-bottom: 5px; padding: 10px;<%= 'display: none;' unless recover %>" class="alert alert-success" role="alert"><b>Hooray! </b>This property is available.</div> <div id="property-avaialable-alert" style="margin-bottom: 5px; padding: 10px;<%= 'display: none;' unless recover %>" class="alert alert-success" role="alert"><b>Hooray! </b>This property is available.</div>
<div id="property-unavaialable-alert" style="margin-bottom: 5px; padding: 10px; display: none;" class="alert alert-danger" role="alert"><b>Sorry! </b><span> This property is available.</span></div> <div id="property-unavaialable-alert" style="margin-bottom: 5px; padding: 10px; display: none;" class="alert alert-danger" role="alert"><b>Sorry! </b><span> This property is available.</span></div>
<div id="values-alert" style="margin-bottom: 5px; padding: 10px; display: none;" class="alert alert-warning" role="alert"> <div id="values-alert" style="margin-bottom: 5px; padding: 10px; display: none;" class="alert alert-warning" role="alert">
@ -620,7 +654,7 @@ ul.list-unstyled li {
</div> </div>
</div> </div>
<% if property.set_unavailibility %> <% if property.set_unavailibility %>
<div class="col-sm-offset-<%=label_col%> col-sm-5"> <div class="col-sm-offset-<%=label_col%> col-sm-<%=input_col%>">
<b><%= t("property_hire.Unavailibility_Schedule") %></b> <b><%= t("property_hire.Unavailibility_Schedule") %></b>
<div> <div>
<%= property.render_unavailable_message%> <%= property.render_unavailable_message%>
@ -638,26 +672,26 @@ ul.list-unstyled li {
</div> </div>
<div class="form-group"> <div class="form-group">
<%= f.label :hiring_person_email, "*"+t("property_hire.hiring_person_email"), :class => "col-sm-#{label_col} control-label" %> <%= f.label :hiring_person_email, "*"+t("property_hire.hiring_person_email"), :class => "col-sm-#{label_col} control-label" %>
<div class="col-sm-5"> <div class="col-sm-<%=input_col%>">
<%= f.text_field :hiring_person_email, :class => "form-control", :value => (recover ? hire.hiring_person_email : ( current_user.member_profile.email rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %> <%= f.text_field :hiring_person_email, :class => "form-control", :value => (recover ? hire.hiring_person_email : ( current_user.member_profile.email rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<%= f.label :hiring_person_number, "*"+t("property_hire.hiring_person_number"), :class => "col-sm-#{label_col} control-label" %> <%= f.label :hiring_person_number, "*"+t("property_hire.hiring_person_number"), :class => "col-sm-#{label_col} control-label" %>
<div class="col-sm-5"> <div class="col-sm-<%=input_col%>">
<%= f.text_field :hiring_person_number, :class => "form-control", :value => (recover ? hire.hiring_person_number : ( current_user.member_profile.mobile_no rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %> <%= f.text_field :hiring_person_number, :class => "form-control", :value => (recover ? hire.hiring_person_number : ( current_user.member_profile.mobile_no rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<%= f.label :hiring_person_name, "*"+t("property_hire.hiring_person_name"), :class => "col-sm-#{label_col} control-label" %> <%= f.label :hiring_person_name, "*"+t("property_hire.hiring_person_name"), :class => "col-sm-#{label_col} control-label" %>
<div class="col-sm-5"> <div class="col-sm-<%=input_col%>">
<%= f.text_field :hiring_person_name, :class => "form-control", :value => (recover ? hire.hiring_person_name : ( current_user.name rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %> <%= f.text_field :hiring_person_name, :class => "form-control", :value => (recover ? hire.hiring_person_name : ( current_user.name rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
<%= f.hidden_field :hiring_person_id, :value => (current_user.member_profile.id.to_s rescue "") %> <%= f.hidden_field :hiring_person_id, :value => (current_user.member_profile.id.to_s rescue "") %>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<%= f.label :reason_for_hire, "*"+t("property_hire.reason_for_hire"), :class => "col-sm-#{label_col} control-label" %> <%= f.label :reason_for_hire, "*"+t("property_hire.reason_for_hire"), :class => "col-sm-#{label_col} control-label" %>
<div class="col-sm-5"> <div class="col-sm-<%=input_col%>">
<%= f.text_field :reason_for_hire, :class => "form-control", :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %> <%= f.text_field :reason_for_hire, :class => "form-control", :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
</div> </div>
</div> </div>
@ -670,7 +704,7 @@ ul.list-unstyled li {
<% type = sub_hash["type"] %> <% type = sub_hash["type"] %>
<div class="form-group"> <div class="form-group">
<%= f.label "notes_selector[#{index}]", name, :class => "col-sm-#{label_col} control-label" %> <%= f.label "notes_selector[#{index}]", name, :class => "col-sm-#{label_col} control-label" %>
<div class="col-sm-5"> <div class="col-sm-<%=input_col%>">
<% values.each_with_index do |v,i| %> <% values.each_with_index do |v,i| %>
<label class="checkbox-inline"> <label class="checkbox-inline">
<input type="<%=type%>" name="p_hire[notes_selector][<%=index.to_s%>][]" value="<%=i%>" <%= (type=="radio" && i == 0) ? "checked=\"checked\"" : "" %>> <input type="<%=type%>" name="p_hire[notes_selector][<%=index.to_s%>][]" value="<%=i%>" <%= (type=="radio" && i == 0) ? "checked=\"checked\"" : "" %>>
@ -686,7 +720,7 @@ ul.list-unstyled li {
<% else %> <% else %>
<div class="form-group"> <div class="form-group">
<%= f.label :note_for_hire, t("property_hire.note_for_hire"), :class => "col-sm-#{label_col} control-label" %> <%= f.label :note_for_hire, t("property_hire.note_for_hire"), :class => "col-sm-#{label_col} control-label" %>
<div class="col-sm-5"> <div class="col-sm-<%=input_col%>">
<%= f.text_area :note_for_hire, :class => "form-control" %> <%= f.text_area :note_for_hire, :class => "form-control" %>
</div> </div>
</div> </div>
@ -697,7 +731,7 @@ ul.list-unstyled li {
<% required = (property[field_name]["required"] == "true" rescue false) %> <% required = (property[field_name]["required"] == "true" rescue false) %>
<div class="form-group"> <div class="form-group">
<%= f.label field_name, (required ? "*" : "") + property.custom_text(field_name,"name"), :class => "col-sm-#{label_col} control-label" %> <%= f.label field_name, (required ? "*" : "") + property.custom_text(field_name,"name"), :class => "col-sm-#{label_col} control-label" %>
<div class="col-sm-5"> <div class="col-sm-<%=input_col%>">
<% placeholder = property.custom_text(field_name,"placeholder") %> <% placeholder = property.custom_text(field_name,"placeholder") %>
<% if required %> <% if required %>
<%= f.text_field field_name, :class => "form-control", :placeholder => placeholder, :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %> <%= f.text_field field_name, :class => "form-control", :placeholder => placeholder, :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>

View File

@ -8,11 +8,16 @@
<%= t('property_hire.email_p_hire_content') %> <%= t('property_hire.email_p_hire_content') %>
<% end %> <% end %>
<br> <br>
<style>
.hire_infos td:first-child {
white-space: nowrap;
}
</style>
<% I18n.with_locale(@data['locale']) do %> <% I18n.with_locale(@data['locale']) do %>
<h3><%= property.title rescue nil %></h3> <h3><%= property.title rescue nil %></h3>
<% if !@data['hire_id'].nil? %> <% if !@data['hire_id'].nil? %>
<% hire = PHire.where(id: @data['hire_id']).first %> <% hire = PHire.where(id: @data['hire_id']).first %>
<table> <table id="hire_infos">
<thead> <thead>
<tr> <tr>
<td></td> <td></td>

View File

@ -17,7 +17,7 @@
label_col = 2 label_col = 2
input_col = 10 input_col = 10
if calendar_type == 0 if calendar_type == 0
right_col -= 5 right_col -= 7
label_col += 2 label_col += 2
input_col -= 2 input_col -= 2
end end
@ -159,6 +159,13 @@
width: 25%; width: 25%;
} }
} }
form#new_p_hire .form-group input,form#new_p_hire .form-group select, form#new_p_hire .form-group textarea{
width: 100%;
max-width: 300px;
}
form#new_p_hire .form-group input[name="_rucaptcha"]{
width: auto;
}
</style> </style>
<% if !property.can_be_hired %> <% if !property.can_be_hired %>
<script type="text/javascript"> <script type="text/javascript">
@ -175,16 +182,16 @@
<script type="text/javascript"> <script type="text/javascript">
var pick_date_mode = <%=property.set_availability%>; var pick_date_mode = <%=property.set_availability%>;
</script> </script>
<h3 class="property_title"><%= property.title %></h3> <h3 class="property_title"><%= property.title.html_safe %></h3>
<article class="s-annc s-property"> <article class="s-annc s-property">
<section class="s-annc__post-wrap"> <section class="s-annc__post-wrap">
<% if property.display_img %> <% if property.display_img %>
<div class="s-annc__sub-img full-size-img"> <div class="s-annc__sub-img full-size-img">
<img src="<%=property.image.url%>" alt="<%=property.title%>"> <img src="<%=property.image.url%>" alt="<%=property.title%>">
<span class="s-annc__img_description"><%=property.title%></span> <span class="s-annc__img_description"><%=property.title.html_safe%></span>
</div> </div>
<% end %> <% end %>
<h4 class="property_subtitle"><%= property.property_usage %></h4> <h4 class="property_subtitle"><%= property.property_usage.html_safe %></h4>
<% property_carousel_images = property.property_carousel_images %> <% property_carousel_images = property.property_carousel_images %>
<% if property_carousel_images.count != 0 %> <% if property_carousel_images.count != 0 %>
<div class="carousel_images"> <div class="carousel_images">
@ -222,7 +229,7 @@
</div> </div>
</div> </div>
<% end %> <% end %>
<div class="property_note"><%= property.note %></div> <div class="property_note"><%= property.note.html_safe %></div>
</section> </section>
<ul class="s-property__related-wrap list-unstyled no-print"> <ul class="s-property__related-wrap list-unstyled no-print">
<% if property.property_files.count != 0%> <% if property.property_files.count != 0%>
@ -253,7 +260,7 @@
<% end %> <% end %>
</article> </article>
<% if property.calendar_type == 0 %> <% if property.calendar_type == 0 %>
<div id="orbit_calendar" class="col-lg-7"> <div id="orbit_calendar" class="col-lg-<%=12-right_col%>">
<div id="sec1"> <div id="sec1">
<div class="btn-toolbar" id="navigation"> <div class="btn-toolbar" id="navigation">
<div id="calendar-nav"> <div id="calendar-nav">
@ -504,7 +511,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="col-sm-offset-<%=label_col%> col-sm-5"> <div class="col-sm-offset-<%=label_col%> col-sm-<%=input_col%>">
<div id="property-avaialable-alert" style="margin-bottom: 5px; padding: 10px;<%= 'display: none;' unless recover %>" class="alert alert-success" role="alert"><b>Hooray! </b>This property is available.</div> <div id="property-avaialable-alert" style="margin-bottom: 5px; padding: 10px;<%= 'display: none;' unless recover %>" class="alert alert-success" role="alert"><b>Hooray! </b>This property is available.</div>
<div id="property-unavaialable-alert" style="margin-bottom: 5px; padding: 10px; display: none;" class="alert alert-danger" role="alert"><b>Sorry! </b><span> This property is available.</span></div> <div id="property-unavaialable-alert" style="margin-bottom: 5px; padding: 10px; display: none;" class="alert alert-danger" role="alert"><b>Sorry! </b><span> This property is available.</span></div>
<div id="values-alert" style="margin-bottom: 5px; padding: 10px; display: none;" class="alert alert-warning" role="alert"> <div id="values-alert" style="margin-bottom: 5px; padding: 10px; display: none;" class="alert alert-warning" role="alert">
@ -517,7 +524,7 @@
</div> </div>
</div> </div>
<% if property.set_unavailibility %> <% if property.set_unavailibility %>
<div class="col-sm-offset-<%=label_col%> col-sm-5"> <div class="col-sm-offset-<%=label_col%> col-sm-<%=input_col%>">
<b><%= t("property_hire.Unavailibility_Schedule") %></b> <b><%= t("property_hire.Unavailibility_Schedule") %></b>
<div> <div>
<%= property.render_unavailable_message%> <%= property.render_unavailable_message%>
@ -535,26 +542,26 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<%= f.label :hiring_person_email, "*"+t("property_hire.hiring_person_email"), :class => "col-sm-#{label_col} control-label" %> <%= f.label :hiring_person_email, "*"+t("property_hire.hiring_person_email"), :class => "col-sm-#{label_col} control-label" %>
<div class="col-sm-5"> <div class="col-sm-<%=input_col%>">
<%= f.text_field :hiring_person_email, :class => "form-control", :value => (recover ? hire.hiring_person_email : ( current_user.member_profile.email rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %> <%= f.text_field :hiring_person_email, :class => "form-control", :value => (recover ? hire.hiring_person_email : ( current_user.member_profile.email rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<%= f.label :hiring_person_number, "*"+t("property_hire.hiring_person_number"), :class => "col-sm-#{label_col} control-label" %> <%= f.label :hiring_person_number, "*"+t("property_hire.hiring_person_number"), :class => "col-sm-#{label_col} control-label" %>
<div class="col-sm-5"> <div class="col-sm-<%=input_col%>">
<%= f.text_field :hiring_person_number, :class => "form-control", :value => (recover ? hire.hiring_person_number : ( current_user.member_profile.mobile_no rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %> <%= f.text_field :hiring_person_number, :class => "form-control", :value => (recover ? hire.hiring_person_number : ( current_user.member_profile.mobile_no rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<%= f.label :hiring_person_name, "*"+t("property_hire.hiring_person_name"), :class => "col-sm-#{label_col} control-label" %> <%= f.label :hiring_person_name, "*"+t("property_hire.hiring_person_name"), :class => "col-sm-#{label_col} control-label" %>
<div class="col-sm-5"> <div class="col-sm-<%=input_col%>">
<%= f.text_field :hiring_person_name, :class => "form-control", :value => (recover ? hire.hiring_person_name : ( current_user.name rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %> <%= f.text_field :hiring_person_name, :class => "form-control", :value => (recover ? hire.hiring_person_name : ( current_user.name rescue "")), :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
<%= f.hidden_field :hiring_person_id, :value => (current_user.member_profile.id.to_s rescue "") %> <%= f.hidden_field :hiring_person_id, :value => (current_user.member_profile.id.to_s rescue "") %>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<%= f.label :reason_for_hire, "*"+t("property_hire.reason_for_hire"), :class => "col-sm-#{label_col} control-label" %> <%= f.label :reason_for_hire, "*"+t("property_hire.reason_for_hire"), :class => "col-sm-#{label_col} control-label" %>
<div class="col-sm-5"> <div class="col-sm-<%=input_col%>">
<%= f.text_field :reason_for_hire, :class => "form-control", :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %> <%= f.text_field :reason_for_hire, :class => "form-control", :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>
</div> </div>
</div> </div>
@ -567,7 +574,7 @@
<% type = sub_hash["type"] %> <% type = sub_hash["type"] %>
<div class="form-group"> <div class="form-group">
<%= f.label "notes_selector[#{index}]", name, :class => "col-sm-#{label_col} control-label" %> <%= f.label "notes_selector[#{index}]", name, :class => "col-sm-#{label_col} control-label" %>
<div class="col-sm-5"> <div class="col-sm-<%=input_col%>">
<% values.each_with_index do |v,i| %> <% values.each_with_index do |v,i| %>
<label class="checkbox-inline"> <label class="checkbox-inline">
<input type="<%=type%>" name="p_hire[notes_selector][<%=index.to_s%>][]" value="<%=i%>" <%= (type=="radio" && i == 0) ? "checked=\"checked\"" : "" %>> <input type="<%=type%>" name="p_hire[notes_selector][<%=index.to_s%>][]" value="<%=i%>" <%= (type=="radio" && i == 0) ? "checked=\"checked\"" : "" %>>
@ -583,7 +590,7 @@
<% else %> <% else %>
<div class="form-group"> <div class="form-group">
<%= f.label :note_for_hire, t("property_hire.note_for_hire"), :class => "col-sm-#{label_col} control-label" %> <%= f.label :note_for_hire, t("property_hire.note_for_hire"), :class => "col-sm-#{label_col} control-label" %>
<div class="col-sm-5"> <div class="col-sm-<%=input_col%>">
<%= f.text_area :note_for_hire, :class => "form-control" %> <%= f.text_area :note_for_hire, :class => "form-control" %>
</div> </div>
</div> </div>
@ -594,7 +601,7 @@
<% required = (property[field_name]["required"] == "true" rescue false) %> <% required = (property[field_name]["required"] == "true" rescue false) %>
<div class="form-group"> <div class="form-group">
<%= f.label field_name, (required ? "*" : "") + property.custom_text(field_name,"name"), :class => "col-sm-#{label_col} control-label" %> <%= f.label field_name, (required ? "*" : "") + property.custom_text(field_name,"name"), :class => "col-sm-#{label_col} control-label" %>
<div class="col-sm-5"> <div class="col-sm-<%=input_col%>">
<% placeholder = property.custom_text(field_name,"placeholder") %> <% placeholder = property.custom_text(field_name,"placeholder") %>
<% if required %> <% if required %>
<%= f.text_field field_name, :class => "form-control", :placeholder => placeholder, :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %> <%= f.text_field field_name, :class => "form-control", :placeholder => placeholder, :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"} %>