Create mission page layout
12 zmienionych plików z 278 dodań i 33 usunięć
+ 1
- 0
app/assets/stylesheets/avl2_theme/buttons.less
@@ -13,6 +13,7 @@ |
||
| 13 | 13 |
border-color: @red; |
| 14 | 14 |
} |
| 15 | 15 |
.btn.btn-danger:hover { background-color: fade(@red, 25%); }
|
| 16 |
+.btn.btn-link.btn-danger:hover { background-color: transparent; text-decoration: underline; }
|
|
| 16 | 17 |
|
| 17 | 18 |
.btn.btn-primary {
|
| 18 | 19 |
color: @blue; |
+ 1
- 1
app/assets/stylesheets/avl2_theme/colors.less
@@ -45,7 +45,7 @@ |
||
| 45 | 45 |
|
| 46 | 46 |
@theme-border: 2px solid @medium-gray; |
| 47 | 47 |
|
| 48 |
-.theme-box-padding { padding: 8px }
|
|
| 48 |
+.theme-box-padding { padding: 8px; padding-right: 18px; padding-left: 18px; }
|
|
| 49 | 49 |
|
| 50 | 50 |
.box-theme() {
|
| 51 | 51 |
border: @theme-border; |
+ 16
- 0
app/assets/stylesheets/avl2_theme/forms.less
@@ -3,6 +3,9 @@ |
||
| 3 | 3 |
@import "colors.less"; |
| 4 | 4 |
|
| 5 | 5 |
div.form-group {
|
| 6 |
+ margin-top: 19px; |
|
| 7 |
+ margin-bottom: 19px; |
|
| 8 |
+ |
|
| 6 | 9 |
label.control-label {
|
| 7 | 10 |
font-family: Avenir-Light; |
| 8 | 11 |
font-size: 18px; |
@@ -25,4 +28,17 @@ select, textarea, input[type="text"], input[type="password"], input[type="dateti |
||
| 25 | 28 |
line-height: 26px; |
| 26 | 29 |
color: @dark-gray; |
| 27 | 30 |
vertical-align: middle; |
| 31 |
+} |
|
| 32 |
+ |
|
| 33 |
+// Hacks |
|
| 34 |
+ |
|
| 35 |
+.inline-form-line {
|
|
| 36 |
+ min-height: 100px; |
|
| 37 |
+ margin-bottom: 19px; |
|
| 38 |
+ .form-group {
|
|
| 39 |
+ width: 33%; |
|
| 40 |
+ margin-right: 15px; |
|
| 41 |
+ float: left; |
|
| 42 |
+ } |
|
| 43 |
+ .selectpicker { margin-top: 6px; }
|
|
| 28 | 44 |
} |
+ 1
- 0
app/assets/stylesheets/avl2_theme/panel.less
@@ -76,6 +76,7 @@ |
||
| 76 | 76 |
margin-bottom: 0px; |
| 77 | 77 |
} |
| 78 | 78 |
} |
| 79 |
+ .panel-body.white-bg { background-color: @white; }
|
|
| 79 | 80 |
.panel-body.in { border-top: @theme-border; }
|
| 80 | 81 |
.panel-footer {
|
| 81 | 82 |
border-top: @theme-border; |
+ 12
- 0
app/assets/stylesheets/avl2_theme/typography.less
@@ -0,0 +1,12 @@ |
||
| 1 |
+// Typographic Styles |
|
| 2 |
+ |
|
| 3 |
+.small-text {
|
|
| 4 |
+ font-family: Helvetica-LightOblique; |
|
| 5 |
+ font-size: 14px; |
|
| 6 |
+ color: #1D1D26; |
|
| 7 |
+ line-height: 17px; |
|
| 8 |
+} |
|
| 9 |
+ |
|
| 10 |
+// Typography Hacks |
|
| 11 |
+ |
|
| 12 |
+.all-caps { text-transform: uppercase;}
|
+ 108
- 0
app/assets/stylesheets/mission_editor.css.less
@@ -0,0 +1,108 @@ |
||
| 1 |
+// Mission Editor Styles |
|
| 2 |
+ |
|
| 3 |
+@import "avl2_theme/colors.less"; |
|
| 4 |
+@import "avl2_theme/typography.less"; |
|
| 5 |
+ |
|
| 6 |
+.mission-editor-page-counter {
|
|
| 7 |
+ width: 485px; |
|
| 8 |
+ margin-left: auto; |
|
| 9 |
+ margin-right: auto; |
|
| 10 |
+ text-align: center; |
|
| 11 |
+ margin-top: 35px; |
|
| 12 |
+ margin-bottom: 35px; |
|
| 13 |
+ height: 75px; |
|
| 14 |
+ .line {
|
|
| 15 |
+ height: 10px; |
|
| 16 |
+ width: 100%; |
|
| 17 |
+ background-color: @blue; |
|
| 18 |
+ margin-bottom: -32px; |
|
| 19 |
+ } |
|
| 20 |
+ .steps {
|
|
| 21 |
+ margin: 0px; |
|
| 22 |
+ .step {
|
|
| 23 |
+ list-style-type: none; |
|
| 24 |
+ float: left; |
|
| 25 |
+ width: 115px; |
|
| 26 |
+ .circle {
|
|
| 27 |
+ width: 48px; |
|
| 28 |
+ height: 48px; |
|
| 29 |
+ background: @white; |
|
| 30 |
+ border: 2px solid @green; |
|
| 31 |
+ border-radius: 500px; |
|
| 32 |
+ font-family: Avenir-Black; |
|
| 33 |
+ font-size: 36px; |
|
| 34 |
+ color: @black; |
|
| 35 |
+ line-height: 49px; |
|
| 36 |
+ margin-right: 15px; |
|
| 37 |
+ margin-right: auto; |
|
| 38 |
+ margin-left: auto; |
|
| 39 |
+ } |
|
| 40 |
+ .circle.current {
|
|
| 41 |
+ background: #92BC64; |
|
| 42 |
+ color: @white; |
|
| 43 |
+ } |
|
| 44 |
+ .description {
|
|
| 45 |
+ .small-text |
|
| 46 |
+ } |
|
| 47 |
+ } |
|
| 48 |
+ |
|
| 49 |
+ } |
|
| 50 |
+ |
|
| 51 |
+} |
|
| 52 |
+ |
|
| 53 |
+.form-submit-center {
|
|
| 54 |
+ margin-top: 75px; |
|
| 55 |
+ margin-bottom: 60px; |
|
| 56 |
+ text-align: center; |
|
| 57 |
+ p { margin-bottom: 20px; }
|
|
| 58 |
+} |
|
| 59 |
+ |
|
| 60 |
+// Hacks |
|
| 61 |
+ |
|
| 62 |
+.cover-fileupload-preview {
|
|
| 63 |
+ width: 99.5%; |
|
| 64 |
+ margin-bottom: 2px; |
|
| 65 |
+ min-height: 300px; |
|
| 66 |
+} |
|
| 67 |
+ |
|
| 68 |
+.fileupload .thumbnail.cover-fileupload-preview { margin-bottom: 8px;}
|
|
| 69 |
+ |
|
| 70 |
+span.btn-file label.control-label {
|
|
| 71 |
+ font-size: 14px; |
|
| 72 |
+ margin-bottom: 0px; |
|
| 73 |
+} |
|
| 74 |
+span.btn-file .form-group {
|
|
| 75 |
+ margin-top: 0px; |
|
| 76 |
+ margin-bottom: 0px; |
|
| 77 |
+} |
|
| 78 |
+ |
|
| 79 |
+.sidebar:before |
|
| 80 |
+{
|
|
| 81 |
+ display: block; |
|
| 82 |
+ content: ""; |
|
| 83 |
+ border-color: transparent #AFB4BF transparent transparent; |
|
| 84 |
+ border-style: solid; |
|
| 85 |
+ border-width: 14px; |
|
| 86 |
+ height: 0; |
|
| 87 |
+ width: 0; |
|
| 88 |
+ position: relative; |
|
| 89 |
+ bottom: -66px; |
|
| 90 |
+ left: -28px; |
|
| 91 |
+} |
|
| 92 |
+ |
|
| 93 |
+.sidebar-carret:before |
|
| 94 |
+{
|
|
| 95 |
+ display: block; |
|
| 96 |
+ content: ""; |
|
| 97 |
+ border-color: transparent #ffffff transparent transparent; |
|
| 98 |
+ border-style: solid; |
|
| 99 |
+ border-width: 13px; |
|
| 100 |
+ height: 0; |
|
| 101 |
+ width: 0; |
|
| 102 |
+ position: relative; |
|
| 103 |
+ bottom: -22px; |
|
| 104 |
+ left: -26px; |
|
| 105 |
+} |
|
| 106 |
+.sidebar { margin-top: -28px; }
|
|
| 107 |
+.sidebar .panel-content { margin-top: 2px;}
|
|
| 108 |
+.sidebar .panel-body { margin-top: -28px; }
|
+ 11
- 0
app/models/mission.rb
@@ -13,6 +13,9 @@ class Mission < ActiveRecord::Base |
||
| 13 | 13 |
mount_uploader :cover_img, MissionCoverUploader |
| 14 | 14 |
process_in_background :cover_img |
| 15 | 15 |
|
| 16 |
+ attr_writer :duration_scale |
|
| 17 |
+ attr_writer :duration_number |
|
| 18 |
+ |
|
| 16 | 19 |
after_initialize do |user| |
| 17 | 20 |
check_for_time_left |
| 18 | 21 |
end |
@@ -183,4 +186,12 @@ class Mission < ActiveRecord::Base |
||
| 183 | 186 |
return array |
| 184 | 187 |
end |
| 185 | 188 |
|
| 189 |
+ def duration_scale |
|
| 190 |
+ |
|
| 191 |
+ end |
|
| 192 |
+ |
|
| 193 |
+ def duration_number |
|
| 194 |
+ |
|
| 195 |
+ end |
|
| 196 |
+ |
|
| 186 | 197 |
end |
+ 28
- 20
app/views/missions/_form.html.erb
@@ -1,22 +1,30 @@ |
||
| 1 |
-<%= bootstrap_form_for(@mission) do |f| %> |
|
| 1 |
+<%= bootstrap_form_for(@mission, layout: :default) do |f| %> |
|
| 2 | 2 |
<%= f.alert_message "Please fix the errors below." %> |
| 3 |
- |
|
| 4 |
- <div class="form-inputs"> |
|
| 5 |
- <%= f.text_field :title %> |
|
| 6 |
- <%= f.text_field :objective %> |
|
| 7 |
- <%= f.text_area :briefing %> |
|
| 8 |
- <%= f.text_field :language %> |
|
| 9 |
- <div class="fileupload fileupload-new" data-provides="fileupload" style="margin-top: 5px;"> |
|
| 10 |
- <div class="fileupload-preview thumbnail" data-trigger="fileinput" style="width: 230px; height: 145px;"><%= image_tag @mission.cover_img.to_s if @mission.cover_img? %></div> |
|
| 11 |
- <span class="btn btn-default btn-file btn-mini" > |
|
| 12 |
- <span class="fileinput-new"></span> |
|
| 13 |
- <span class="fileinput-exists"></span> |
|
| 14 |
- <%= f.file_field :cover_img, class: 'hidden', label: (t 'blog.select_image') %> |
|
| 15 |
- </span> |
|
| 16 |
- </div> |
|
| 17 |
- </div> |
|
| 18 |
- |
|
| 19 |
- <div class="form-actions"> |
|
| 20 |
- <%= f.button :submit %> |
|
| 21 |
- </div> |
|
| 3 |
+ <%= content_tag(:div, class: 'panel panel-default') do %> |
|
| 4 |
+ <%= content_tag(:div, class: 'panel-body white-bg') do %> |
|
| 5 |
+ <%= content_tag(:div, class: "panel-content") do %> |
|
| 6 |
+ <%= content_tag(:div, class: "panel-text") do %> |
|
| 7 |
+ <%= content_tag(:div, class: "form-inputs") do %> |
|
| 8 |
+ <%= f.text_field :title, label: (t 'mission_editor.mission_title'), class: 'input-block-level' %> |
|
| 9 |
+ <%= f.text_field :objective, label: (t 'mission_editor.mission_objective'), class: 'input-block-level' %> |
|
| 10 |
+ <%= f.text_area :briefing, label: (t 'mission_editor.mission_briefing'), class: 'input-block-level', rows: 10 %> |
|
| 11 |
+ <%= f.select :language, [[(t 'mission_editor.en'), 'en'], [(t 'mission_editor.pt-BR'), 'pt-BR']], { label: (t 'mission_editor.language') }, { class: "selectpicker" } %>
|
|
| 12 |
+ <%= render :partial => 'mission_image_uploader', locals: { mission: @mission, f: f } %>
|
|
| 13 |
+ <%= content_tag(:div, '', class: 'inline-form-line') do%> |
|
| 14 |
+ <%= f.select :duration_scale, [[(t 'time.days'), 'days'], [(t 'time.hours'), 'hours']], { label: (t 'mission_editor.mission_duration') }, { class: "selectpicker", layout: :inlin } %>
|
|
| 15 |
+ <%= f.text_field :duration_number, hide_label: true, placeholder: (t 'mission_editor.duration') %> |
|
| 16 |
+ <% end %> |
|
| 17 |
+ <% end %> |
|
| 18 |
+ <% end %> |
|
| 19 |
+ <% end %> |
|
| 20 |
+ <% end %> |
|
| 21 |
+ <% end %> |
|
| 22 |
+ <%= content_tag(:div, class: "form-submit-center") do %> |
|
| 23 |
+ <%= content_tag(:p) do %> |
|
| 24 |
+ <%= f.submit (t 'mission_editor.save_and_continue'), class: 'btn btn-large btn-success all-caps' %> |
|
| 25 |
+ <% end %> |
|
| 26 |
+ <%= content_tag(:p) do %> |
|
| 27 |
+ <%= link_to 'cancel', missions_path, class: 'btn btn-link btn-danger' %> |
|
| 28 |
+ <% end %> |
|
| 29 |
+ <% end %> |
|
| 22 | 30 |
<% end %> |
+ 14
- 0
app/views/missions/_mission_image_uploader.html.erb
@@ -0,0 +1,14 @@ |
||
| 1 |
+<%= content_tag(:div, class: 'form-group', style: 'padding-bottom: 2px;') do %> |
|
| 2 |
+ <%= content_tag(:label, (t 'mission_editor.cover_image'), class: 'control-label', for: 'cover_image')%> |
|
| 3 |
+ <%= content_tag(:div, class: 'fileupload fileupload-new', data: { provides: 'fileupload' } ) do %>
|
|
| 4 |
+ <%= content_tag(:div, class: 'fileupload-preview cover-fileupload-preview thumbnail', data: { trigger: 'fileinput' } ) do %>
|
|
| 5 |
+ <%= image_tag mission.cover_img.to_s if mission.cover_img? %> |
|
| 6 |
+ <% end %> |
|
| 7 |
+ <%= content_tag(:span, class: 'btn btn-default btn-file btn-mini pull-right', style: 'padding-top: 0px; padding-bottom: 0px;') do %> |
|
| 8 |
+ <%= content_tag(:span, '', class: 'fileinput-new') %> |
|
| 9 |
+ <%= content_tag(:span, '', class: 'fileinput-exists') %> |
|
| 10 |
+ |
|
| 11 |
+ <%= f.file_field :cover_img, class: 'hidden ', layout: :inline, label: (t 'mission_editor.select_image') %> |
|
| 12 |
+ <% end %> |
|
| 13 |
+ <% end %> |
|
| 14 |
+<% end %> |
+ 64
- 10
app/views/missions/new.html.erb
@@ -1,18 +1,72 @@ |
||
| 1 |
-<%= content_tag(:div, class: 'container top-container container-last') do %> |
|
| 1 |
+<%= content_tag(:div, class: 'container top-container ') do %> |
|
| 2 | 2 |
<%= content_tag(:div, class: 'row') do %> |
| 3 | 3 |
<%= content_tag(:div, class: 'span12') do %> |
| 4 |
- |
|
| 5 |
- <%= content_tag(:div, class: 'page-header') do %> |
|
| 6 |
- <%= content_tag(:h1) do %> |
|
| 7 |
- <%= t 'mission.create_mission' %> |
|
| 8 |
- <%= link_to (t 'nav.back'), missions_path, class: 'btn btn-mini' %> |
|
| 4 |
+ <%= content_tag(:div, class: 'mission-editor-page-counter') do %> |
|
| 5 |
+ <%= content_tag(:div, '', class: 'line')%> |
|
| 6 |
+ |
|
| 7 |
+ <%= content_tag(:ul, class: 'steps') do %> |
|
| 8 |
+ <%= content_tag(:li, class: 'step') do %> |
|
| 9 |
+ <%= content_tag(:div, '1', class: 'circle current') %><br> |
|
| 10 |
+ <%= content_tag(:div, (t 'mission_editor.mission_details'), class: 'description current') %> |
|
| 11 |
+ <% end %> |
|
| 12 |
+ <%= content_tag(:li, class: 'step') do %> |
|
| 13 |
+ <%= content_tag(:div, '2', class: 'circle') %><br> |
|
| 14 |
+ <%= content_tag(:div, (t 'mission_editor.rewards'), class: 'description') %> |
|
| 15 |
+ <% end %> |
|
| 16 |
+ <%= content_tag(:li, class: 'step') do %> |
|
| 17 |
+ <%= content_tag(:div, '3', class: 'circle') %><br> |
|
| 18 |
+ <%= content_tag(:div, (t 'mission_editor.agents'), class: 'description') %> |
|
| 19 |
+ <% end %> |
|
| 20 |
+ <%= content_tag(:li, class: 'step') do %> |
|
| 21 |
+ <%= content_tag(:div, '4', class: 'circle') %><br> |
|
| 22 |
+ <%= content_tag(:div, (t 'mission_editor.launch'), class: 'description') %> |
|
| 23 |
+ <% end %> |
|
| 9 | 24 |
<% end %> |
| 10 | 25 |
<% end %> |
| 11 |
- |
|
| 12 |
- <%= render 'form' %> |
|
| 26 |
+ <% end %> |
|
| 27 |
+ <% end %> |
|
| 28 |
+<% end %> |
|
| 13 | 29 |
|
| 14 |
- <%= link_to 'Back', missions_path %> |
|
| 30 |
+ |
|
| 31 |
+<%= content_tag(:div, class: 'container-bg') do %> |
|
| 32 |
+ <%= content_tag(:div, class: 'container container-bg mission-detail-container') do %> |
|
| 33 |
+ <%= content_tag(:div, class: 'row') do %> |
|
| 34 |
+ <%= content_tag(:div, class: 'span12') do %> |
|
| 15 | 35 |
|
| 36 |
+ <%= content_tag(:div, class: 'page-header') do %> |
|
| 37 |
+ <%= content_tag(:h1) do %> |
|
| 38 |
+ <%= t 'mission.create_mission' %> |
|
| 39 |
+ <%= link_to (t 'nav.back'), missions_path, class: 'btn btn-mini' %> |
|
| 40 |
+ <% end %> |
|
| 41 |
+ <% end %> |
|
| 42 |
+ |
|
| 43 |
+ <% end%> |
|
| 16 | 44 |
<% end %> |
| 17 |
- <% end %> |
|
| 45 |
+ <%= content_tag(:div, class: 'row') do %> |
|
| 46 |
+ <%= content_tag(:div, class: 'span8') do %> |
|
| 47 |
+ |
|
| 48 |
+ <%= render 'form' %> |
|
| 49 |
+ |
|
| 50 |
+ <% end %> |
|
| 51 |
+ <% # Sidebar %> |
|
| 52 |
+ <%= content_tag(:div, class: 'span4 sidebar') do %> |
|
| 53 |
+ <%= content_tag(:div, class: 'panel panel-default sidebar-carret') do %> |
|
| 54 |
+ <%= content_tag(:div, class: 'panel-body white-bg') do %> |
|
| 55 |
+ <%= content_tag(:div, class: "panel-content") do %> |
|
| 56 |
+ <%= content_tag(:div, class: "panel-text") do %> |
|
| 57 |
+ <%= content_tag(:h3, (t 'mission_editor.mission_details_help_title')) %> |
|
| 58 |
+ <%= content_tag(:div, (t 'mission_editor.mission_details_help').html_safe, class: 'small-text') %> |
|
| 59 |
+ <% end %> |
|
| 60 |
+ <% end %> |
|
| 61 |
+ <% end %> |
|
| 62 |
+ <% end %> |
|
| 63 |
+ <% end %> |
|
| 64 |
+ |
|
| 65 |
+ <% end %> |
|
| 66 |
+ <% end %> |
|
| 18 | 67 |
<% end %> |
| 68 |
+ |
|
| 69 |
+ |
|
| 70 |
+ |
|
| 71 |
+ |
|
| 72 |
+ |
+ 11
- 1
config/locales/mission.en.yml
@@ -13,4 +13,14 @@ en: |
||
| 13 | 13 |
review_step: 'Review Step' |
| 14 | 14 |
agent: |
| 15 | 15 |
dashboard: 'Dashboard' |
| 16 |
- account: 'Account' |
|
| 16 |
+ account: 'Account' |
|
| 17 |
+ mission_editor: |
|
| 18 |
+ save_and_continue: 'Save & Continue' |
|
| 19 |
+ select_image: 'Select Image' |
|
| 20 |
+ language: 'Language' |
|
| 21 |
+ en: 'English' |
|
| 22 |
+ pt-BR: 'Portuguese' |
|
| 23 |
+ mission_duration: 'Mission Duration' |
|
| 24 |
+ duration: 'Type in a number' |
|
| 25 |
+ mission_details_help_title: 'Mission Details' |
|
| 26 |
+ mission_details_help: '<p>Fill out all the basic mission details. The video is not necessary.</p><p>Give your mission a good descriptive title.</p><p>What is going to be achieved in this mission? Write that as the mission obective.</p><p>Missions are going to be filtered to users based on their language settings.</p><p>Paste the URL of a youtube or vimeo video for your mission briefing. Make it 1-5 minutes long, tell about the mission objective, the briefing, the timetable, what agents the mission needs, what are they going to have to do and the rewards. Make it personal. Give a good cause for your mission.</p><p>In the mission briefing, tell the agents how things are going to work out during the mission. You dont have to be specific here, but try to tell everyone what is going to happen and a summary of what each agent is going to do.</p><p>After completing the form, save and continue to add rewards and agents to the mission.</p><p>Before the mission is launched, only the you can see the mission and edit its content. After the mission is launched, most of the mission details wont be able to be edited.</p>' |
+ 11
- 1
config/locales/mission.pt-BR.yml
@@ -13,4 +13,14 @@ pt-BR: |
||
| 13 | 13 |
review_step: 'Revisar Passo' |
| 14 | 14 |
agent: |
| 15 | 15 |
dashboard: 'Painel' |
| 16 |
- account: 'Conta' |
|
| 16 |
+ account: 'Conta' |
|
| 17 |
+ mission_editor: |
|
| 18 |
+ save_and_continue: 'Salvar & Continuar' |
|
| 19 |
+ select_image: 'Select Image' |
|
| 20 |
+ language: 'Lingua' |
|
| 21 |
+ en: 'Inglês' |
|
| 22 |
+ pt-BR: 'Português' |
|
| 23 |
+ mission_duration: 'Tempo de duração da missão' |
|
| 24 |
+ duration: 'Digite um número...' |
|
| 25 |
+ mission_details_help_title: 'Mission Details' |
|
| 26 |
+ mission_details_help: '<p>Fill out all the basic mission details. The video is not necessary.</p><p>Give your mission a good descriptive title.</p><p>What is going to be achieved in this mission? Write that as the mission obective.</p><p>Missions are going to be filtered to users based on their language settings.</p><p>Paste the URL of a youtube or vimeo video for your mission briefing. Make it 1-5 minutes long, tell about the mission objective, the briefing, the timetable, what agents the mission needs, what are they going to have to do and the rewards. Make it personal. Give a good cause for your mission.</p><p>In the mission briefing, tell the agents how things are going to work out during the mission. You dont have to be specific here, but try to tell everyone what is going to happen and a summary of what each agent is going to do.</p><p>After completing the form, save and continue to add rewards and agents to the mission.</p><p>Before the mission is launched, only the you can see the mission and edit its content. After the mission is launched, most of the mission details wont be able to be edited.</p>' |