diff --git a/app/views/annotations/_show.html.erb b/app/views/annotations/_show.html.erb index 0530e84..5cc67bb 100644 --- a/app/views/annotations/_show.html.erb +++ b/app/views/annotations/_show.html.erb @@ -1,10 +1,13 @@ -<% if annotation.type == :example_answer %> -

<%= _('Example Answer') %>

-<% elsif annotation.type == :guidance %> -

<%= _('Guidance') %>

-<% else %> -

<%= _('Annotation') %>

-<% end %> +

+ <% if annotation.type == :example_answer %> + <%= _('Example Answer') %> + <% elsif annotation.type == :guidance %> + <%= _('Guidance') %> + <% else %> + <%= plan.template.org.abbreviation %> + <% end %> + +

-

<%= raw annotation.text %>

+
<%= raw annotation.text %>
diff --git a/app/views/answers/_new_edit.html.erb b/app/views/answers/_new_edit.html.erb index b2ef8b1..9fec108 100644 --- a/app/views/answers/_new_edit.html.erb +++ b/app/views/answers/_new_edit.html.erb @@ -3,105 +3,108 @@ --> <% q_format = question.question_format %> <%= form_for answer, url: {controller: :answers, action: :update}, html: {method: :put, class: "roadmap-form", 'data-autosave': question.id}, remote: true do |f| %> -
- <% if !readonly %> - <%= f.hidden_field :id %> - <%= f.hidden_field :plan_id %> - <%= f.hidden_field :user_id %> - <%= f.hidden_field :question_id %> - <%= f.hidden_field :lock_version %> - <% end %> +
+ <% if !readonly %> + <%= f.hidden_field :id %> + <%= f.hidden_field :plan_id %> + <%= f.hidden_field :user_id %> + <%= f.hidden_field :question_id %> + <%= f.hidden_field :lock_version %> + <% end %> -
- - <% if question.option_based? %> - <%= f.label raw(question.text), for: :question_option_ids, class: "no-colon" %> - <% else %> - <%= f.label raw(question.text), for: :text, class: "no-colon" %> - <% end %> +
+ + <% if question.option_based? %> + <%= f.label raw(question.text), for: :question_option_ids, class: "no-colon" %> + <% else %> + <%= f.label raw(question.text), for: :text, class: "no-colon" %> + <% end %> - - <% if !readonly && question.annotations.where(type: Annotation.types[:example_answer]).any? %> - <% annotation = question.annotations.where(type: Annotation.types[:example_answer]).order(:created_at).first %> - <% if annotation.text.present? %> -
- - <%="#{annotation.org.abbreviation} "%> <%=_('Example of answer')%> - + + <% if !readonly && question.annotations.where(type: Annotation.types[:example_answer]).any? %> + <% annotation = question.annotations.where(type: Annotation.types[:example_answer]).order(:created_at).first %> + <% if annotation.text.present? %> +
+ + <%="#{annotation.org.abbreviation} "%> <%=_('Example of answer')%> + -
-

<%= raw annotation.text %>

-
-
- <% end %> - <% end %> +
+

<%= raw annotation.text %>

+
+
+ <% end %> + <% end %> - <% if question.option_based? %> - <% options = question.question_options.by_number %> - <% if q_format.checkbox? %> -
    - <% options.each do |op| %> -
  1. - <%= f.check_box(:question_option_ids, { multiple: true, checked: answer.has_question_option(op.id), disabled: readonly }, op.id, nil) %> - <%= raw op.text %> -
    2. - <% end %> -
- <% elsif q_format.radiobuttons? %> -
    - <% options.each do |op| %> -
  1. - <%= f.radio_button :question_option_ids, op.id, { checked: answer.has_question_option(op.id), id: "answer_option_ids_#{op.id}", disabled: readonly } %> - <%= raw op.text %> -
    2. - <% end %> -
- <% elsif q_format.dropdown? || q_format.multiselectbox? %> - <% - options_html = "" - options.each do |op| - options_html += answer.has_question_option(op.id) ? - "" : - "" - end - %> - <%= select_tag('answer[question_option_ids]', raw(options_html), - {multiple: q_format.multiselectbox?, include_blank: q_format.dropdown?, disabled: readonly }) %> - <% end %> - - <% if question.option_comment_display == true %> - <%= label_tag('answer[text]', _('Comment')) %> - <% if readonly %> -

<%= raw(answer.text) %>

- <% else %> - <%= text_area_tag('answer[text]', answer.text, id: "answer-text-#{question.id}") %> - <%= tinymce(selector: "#answer-text-#{question.id}", setup: "$.fn.tinymce_answer_events", content_css: asset_path('application.css')) %> - <% end %> - <%end%> + <% if question.option_based? %> + <% options = question.question_options.by_number %> + <% if q_format.checkbox? %> +
    + <% options.each do |op| %> +
  1. + <%= f.check_box(:question_option_ids, { multiple: true, checked: answer.has_question_option(op.id), disabled: readonly }, op.id, nil) %> + <%= raw op.text %> +
    2. + <% end %> +
+ <% elsif q_format.radiobuttons? %> +
    + <% options.each do |op| %> +
  1. + <%= f.radio_button :question_option_ids, op.id, { checked: answer.has_question_option(op.id), id: "answer_option_ids_#{op.id}", disabled: readonly } %> + <%= raw op.text %> +
    2. + <% end %> +
+ <% elsif q_format.dropdown? || q_format.multiselectbox? %> + <% + options_html = "" + options.each do |op| + options_html += answer.has_question_option(op.id) ? + "" : + "" + end + %> + <%= select_tag('answer[question_option_ids]', raw(options_html), + {multiple: q_format.multiselectbox?, include_blank: q_format.dropdown?, disabled: readonly }) %> + <% end %> + + <% if question.option_comment_display == true %> + <%= label_tag('answer[text]', _('Comment')) %> + <% if readonly %> +

<%= raw(answer.text) %>

+ <% else %> + <%= text_area_tag('answer[text]', answer.text, id: "answer-text-#{question.id}") %> + <%= tinymce(selector: "#answer-text-#{question.id}", setup: "$.fn.tinymce_answer_events", content_css: asset_path('application.css')) %> + <% end %> + <%end%> - <% elsif q_format.textfield? %> - <% if readonly %> -

<%= strip_tags(answer.text) %>

- <% else %> - <%= text_field_tag('answer[text]', strip_tags(answer.text)) %> - <% end %> - - <% elsif q_format.textarea? %> - <% if readonly %> -

<%= raw(answer.text) %>

- <% else %> - <%= text_area_tag('answer[text]', answer.text, id: "answer-text-#{question.id}") %> - <%= tinymce(selector: "#answer-text-#{question.id}", setup: "$.fn.tinymce_answer_events", content_css: asset_path('application.css')) %> - <% end %> - <% end %> + <% elsif q_format.textfield? %> + <% if readonly %> +

<%= strip_tags(answer.text) %>

+ <% else %> + <%= text_field_tag('answer[text]', strip_tags(answer.text)) %> + <% end %> + + <% elsif q_format.textarea? %> + <% if readonly %> +

<%= raw(answer.text) %>

+ <% else %> + <%= text_area_tag('answer[text]', answer.text, id: "answer-text-#{question.id}") %> + <%= tinymce(selector: "#answer-text-#{question.id}", setup: "$.fn.tinymce_answer_events", content_css: asset_path('application.css')) %> + <% end %> + <% end %> -
+
- <% if !readonly %> -
- -
- <% end %> -
+
+ <% if !readonly %> + + <% end %> +
" class="answer-status inline left-indent"> + <%= render(partial: 'answers/status', locals: { answer: answer }) %> +
+
+
<% end %> \ No newline at end of file diff --git a/app/views/guidance_groups/_show.html.erb b/app/views/guidance_groups/_show.html.erb index 060a8f3..263fdd0 100644 --- a/app/views/guidance_groups/_show.html.erb +++ b/app/views/guidance_groups/_show.html.erb @@ -1,8 +1,8 @@ -

+

<%= group[:org] %> guidance on <%= theme %> - +

-
-
<%= raw group[:text] %>
+
+ <%= raw group[:text] %>
\ No newline at end of file diff --git a/app/views/phases/_answer_section.html.erb b/app/views/phases/_answer_section.html.erb deleted file mode 100644 index ac63c24..0000000 --- a/app/views/phases/_answer_section.html.erb +++ /dev/null @@ -1,10 +0,0 @@ -
-
" class="answer-locking">
-
"> - <%= render(partial: 'answers/new_edit', - locals: { question: question, answer: answer, readonly: @readonly }) %> -
-
" class="answer-status"> - <%= render(partial: 'answers/status', locals: { answer: answer }) %> -
-
\ No newline at end of file diff --git a/app/views/phases/_guidance_section.html.erb b/app/views/phases/_guidance_section.html.erb index 32fd4c9..b4fb5ff 100644 --- a/app/views/phases/_guidance_section.html.erb +++ b/app/views/phases/_guidance_section.html.erb @@ -35,6 +35,12 @@ class="tab-panel<%= active_tab == 'guidance_tab' ? ' active' : '' %>" aria-hidden="false" aria-labelledby="guidance_tab"> +
+ expand all + | + collapse all +
+
@@ -42,7 +48,7 @@ <% i = 0 %> <% if annotations.present? %> <% annotations.each do |annotation| %> - <%= render partial: 'annotations/show', locals: {annotation: annotation} %> + <%= render partial: 'annotations/show', locals: {plan: plan, annotation: annotation} %> <% num_annotations += 1%> <% i += 1 %> <% end %> diff --git a/app/views/phases/edit.html.erb b/app/views/phases/edit.html.erb index ed748fe..23b89d7 100644 --- a/app/views/phases/edit.html.erb +++ b/app/views/phases/edit.html.erb @@ -10,11 +10,6 @@

<%= @plan.title %>

- -
- <%= render :partial => "/plans/progress", locals: { plan: @plan } %> -
-
@@ -42,14 +37,23 @@
+
+
+ expand all + | + collapse all +
+
+ <%= render :partial => "/plans/progress", locals: { plan: @plan } %> +
+
+
- <% i = 0 %> <% @phase.sections.order(:number).each do |section| %> <% sectionid = section.id %>

<%= render :partial => "/sections/progress", locals: { section: section, plan: @plan } %> -

@@ -86,16 +90,21 @@
- <%= render partial: 'answer_section', - locals: {plan: @plan, question: question, answer: answer, readonly: @readonly}%> - +
+
" class="answer-locking">
+
"> + <%= render(partial: 'answers/new_edit', + locals: { question: question, answer: answer, readonly: @readonly }) %> +
+
<%= render partial: 'guidance_section', - locals: {plan: @plan, question: question, answer: answer} %> + locals: {plan: @plan, question: question, answer: answer, + question_guidances: @question_guidances} %>
<% end %> @@ -132,8 +141,6 @@
- <% i += 1 %> - <% end %>
diff --git a/app/views/plans/_progress.html.erb b/app/views/plans/_progress.html.erb index 256c00e..1c17688 100644 --- a/app/views/plans/_progress.html.erb +++ b/app/views/plans/_progress.html.erb @@ -3,7 +3,7 @@ nquestions = plan.num_questions() %> <% answered = %(#{nanswers}/#{nquestions})%> -
- <%= answered -%> <%= _('questions answered')%> - +
+ <%= answered -%> <%= _(' answered')%> +
diff --git a/app/views/sections/_progress.html.erb b/app/views/sections/_progress.html.erb index 7617def..3dee038 100644 --- a/app/views/sections/_progress.html.erb +++ b/app/views/sections/_progress.html.erb @@ -1,14 +1,10 @@ - - <% num_section_questions = section.questions.size() %> - <% num_section_answers = section.num_answered_questions(plan.id) %> - <% question_word = "questions" %> - <% if num_section_questions == 1 then %> - <% question_word = "question" %> - <% end %> - <% section_status = "#{num_section_questions} #{question_word}, #{num_section_answers} answered" %> - <%= section.title %> - <% if num_section_questions.to_i > num_section_answers.to_i then %> - (<%= section_status %>) - <% else %> - (<%= section_status %>) - <% end %> \ No newline at end of file + +<% num_section_questions = section.questions.size() %> +<% num_section_answers = section.num_answered_questions(plan.id) %> + +<%= section.title %> + + + <%= num_section_answers %>/<%= num_section_questions %> + + \ No newline at end of file diff --git a/lib/assets/javascripts/dmproadmap/accordions.js b/lib/assets/javascripts/dmproadmap/accordions.js index 3689bbd..77c209e 100644 --- a/lib/assets/javascripts/dmproadmap/accordions.js +++ b/lib/assets/javascripts/dmproadmap/accordions.js @@ -1,6 +1,11 @@ $(document).ready(function(){ - $(".accordion").accordion({heightStyle: "content"}); + $(".accordion").accordion({ + active: false, + collapsible: true, + heightStyle: "content" + }); + /* swap out the plus/minus icons */ $(".accordion h2, .accordion h3").click(function(e){ $.each($(this).parent().children("h2"), function(idx, section){ if($(section).hasClass("ui-accordion-header-active")){ @@ -10,4 +15,18 @@ } }); }); + + /* expand/collapse all controls */ + $("a.expand-accordions").click(function(e){ + e.preventDefault(); + var accordion = $(this).attr('href'); + $(accordion).children(".accordion-section").css('display', 'block'); + $(accordion).children("h2, h3").children("span.fa").removeClass("fa-plus").addClass("fa-minus"); + }); + $("a.collapse-accordions").click(function(e){ + e.preventDefault(); + var accordion = $(this).attr('href'); + $(accordion).children(".accordion-section").css('display', 'none'); + $(accordion).children("h2, h3").children("span.fa").removeClass("fa-minus").addClass("fa-plus"); + }); }); \ No newline at end of file diff --git a/lib/assets/javascripts/views/plans/edit.js b/lib/assets/javascripts/views/plans/edit.js index 3061ab9..9d89af4 100644 --- a/lib/assets/javascripts/views/plans/edit.js +++ b/lib/assets/javascripts/views/plans/edit.js @@ -1,7 +1,3 @@ $(document).ready(function(){ - $(".accordion-section").accordion({ - active: false, - collapsible: true, - heightStyle: "content" - }); + }); \ No newline at end of file diff --git a/lib/assets/stylesheets/dmproadmap/accordions.scss b/lib/assets/stylesheets/dmproadmap/accordions.scss index eff63d1..d5ba50b 100644 --- a/lib/assets/stylesheets/dmproadmap/accordions.scss +++ b/lib/assets/stylesheets/dmproadmap/accordions.scss @@ -3,14 +3,13 @@ width: 100%; h2, h3, - h2.ui-accordion-header, h3.ui-accordion-header { + h2.ui-accordion-header, h3.ui-accordion-header { position: relative; - color: $white; + color: $primary-color; font-size: 24px; - background-color: $primary-color; + background-color: $white; padding: 6px 0 10px 10px; border: none; - border-radius: 3px; .ui-accordion-header-active, .ui-accordion-header-collapsed { @@ -20,14 +19,28 @@ .fa { position: absolute; font-size: 18px; - color: $white; - right: 15px; + color: $primary-color; + left: 5px; top: 10px; } } + h2.ui-accordion-header:after, h3.ui-accordion-header:after { + width: 55%; + content: ""; + display: block; + margin-left: 22px; + margin-top: 5px; + border-bottom: 1px solid $primary-color; + } div.accordion-section { position: relative; background-color: white; } + +} +.expand-collapse-all { + .muted { + margin: 0 8px; + } } \ No newline at end of file diff --git a/lib/assets/stylesheets/dmproadmap/base.scss b/lib/assets/stylesheets/dmproadmap/base.scss index 0b3f654..a4400d8 100644 --- a/lib/assets/stylesheets/dmproadmap/base.scss +++ b/lib/assets/stylesheets/dmproadmap/base.scss @@ -187,15 +187,6 @@ border-radius: 5px; } -.progress { - position: absolute; - top: $header-height; - right: 0; - margin-top: 25px; - width: 350px; - z-index: 2; -} - /* Basic page layout */ /* =================================================================================== */ div.roadmap { diff --git a/lib/assets/stylesheets/dmproadmap/forms.scss b/lib/assets/stylesheets/dmproadmap/forms.scss index 28494f6..fce47fc 100644 --- a/lib/assets/stylesheets/dmproadmap/forms.scss +++ b/lib/assets/stylesheets/dmproadmap/forms.scss @@ -703,9 +703,105 @@ /* Write plan */ /* ------------------------------------------------ */ +#sections-accordion-controls { + width: 55%; + margin: 15px 0 15px 45px; + + a { + text-decoration: none; + } + .expand-collapse-all, .progress { + width: 45%; + } + .progress { + position: relative; + width: 52%; + + .bar-container { + position: relative; + top: 0; + margin: 0 -10px 0 auto; + padding: 5px; + border-radius: 5px; + width: 200px; + + .bar { + position: relative; + left: 0; + + .bar-fill { + height: 100%; + width: 100%; + background-color: $light-grey; + } + } + } + } +} #sections-accordion { + /* Section title / progress */ h2 { font-size: 18px; + + .section-status { + position: absolute; + top: 5px; + left: 0; + width: 55%; + text-align: right; + font-size: 16px; + + .fa { + font-size: 14px; + position: absolute; + top: 3px; + right: -19px; + } + .fa-check-circle { + color: $notice-background; + } + } + } + + /* Example Answers */ + div.suggested-answer-div { + width: 80%; + margin-top: 20px; + margin-left: 15px; + border: 0.5px solid $light-grey; + border-radius: 3px; + padding: 5px 15px; + + .suggested-answer-intro { + position: relative; + top: -17px; + left: 10px; + font-weight: bold; + background-color: $white; + padding: 0 10px; + } + .suggested-answer-border { + margin-top: -20px; + } + } + + .form-input { + margin-top: -10px; + + ol, ul { + list-style: none; + } + } + + div.mce-tinymce { + width: 84%; + } + + .guidance_tab h3 { + font-size: 16px; + .fa { + font-size: 14px; + } } }