I am trying to do simple quiz using Rails and Bootstrap, but I have problem with checkboxes being too wide on small screens and it covers label of that checkbox (.
My view looks like this:
<div class="center jumbotron">
<h2><%= t(:quiz) %></h2>
<div>
<%= form_for(:test, url: quiz_path) do |f| %>
<% #quiz.tasks.each_with_index do |task, index| %>
<div>
<% if task = Task.find_by(id: task) %>
<%= image_tag(task.asset, class: "img-responsive") %>
<%= task.text %>
<% answers = task.correct_answers + task.wrong_answers %>
<% answers.shuffle! %>
<fieldset>
<!-- Dodać półotwarte -->
<% answers.each do |answer| %>
<div class="checkbox">
<%= f.check_box("task#{index}", {class: "checkbox", multiple: true}, answer, nil)%>
<%= f.label "task#{index}", answer %>
</div>
<% end %>
</fieldset>
<% end %>
</div>
<% end %>
<%= f.submit t(:finish_quiz), class: "btn btn-lg btn-primary" %>
<% end %>
</div>
</div>
How do I make it look normal a.k.a. like desktop version, just bigger (square-like of course)?
Related
I'm trying to paginate the following array. At the moment the table is being appended to, but only with the same records as the first page:
def collection
#collection ||= begin
viewable_pupils.where(level: level, group_id: group_id).ordered
.map{ |p| Schools::Admin::PupilReportTableFacade.new(p, school.calendar_range_for_year_starting(report_start_year)) }
end
#collection = Kaminari.paginate_array(#collection).page(params[:page]).per(10)
end
helper_method :collection
My view is as follows:
<div class="container">
<%= render 'schools/admin/reporting/collection_partial' %>
</div>
<%= link_to 'Load More', school_reporting_load_more_path, remote: true, id: "load_more_link", class: 'btn btn-info' %>
And the partial being rendered:
<% collection.each do |pupil| %>
<div class="well well--bordered well--skinny well--collapse-pad well--shadow">
<div class="marking-header marking-header--table marking-header--table-even">
<div class="marking-header__cell">
<%= pupil.first_name %>
</div>
<div class="marking-header__cell"><%= pupil.last_name %></div>
<div class="marking-header__cell" align="center">
<% pupil.histories.each do |history| %>
<% next unless school.calendar_range_for_year_starting(report_start_year).cover?(history[:created_at]) %>
<%= history[:year] %> <%= history[:level] %>
<%= history[:created_at] %>
<% end %>
</div>
<div class="marking-header__cell">
<%= "Total completed: #{pupil.pupil.activities_completed_year_starting(report_start_year)}" %></br>
<%= "(#{pupil.pupil.comprehensions_completed_year_starting(report_start_year)} x comprehensions)" unless pupil.pupil.comprehensions_completed_year_starting(report_start_year).zero? %></br>
<%= "(#{pupil.pupil.crosswords_completed_year_starting(report_start_year)} x crosswords)" unless pupil.pupil.crosswords_completed_year_starting(report_start_year).zero? %></br>
<%= "(#{pupil.pupil.debates_completed_year_starting(report_start_year)} x debates" unless pupil.pupil.debates_completed_year_starting(report_start_year).zero? %></br>
<%= "(#{pupil.pupil.word_definitions_completed_year_starting(report_start_year)} x word definitions" unless pupil.pupil.word_definitions_completed_year_starting(report_start_year).zero? %>
<div class="gems">
<% pupil.milestone_badges.each do |badge| %>
<%= image_tag image_path(badge.image), class: 'gem' %>
<% end %>
</div>
</div>
<div class="marking-header__cell">
<input type="checkbox" name="pupils[]" value="<%= pupil.id %>" class="tick-check" id="check-<%= pupil.id %>" data-behaviour="update-compare-count">
<label for="check-<%= pupil.id %>"></label>
<%= "Total this year: #{pupil.pupil.total_points_this_year}" %></br>
<%= "(Total all time: #{pupil.pupil.total_points})" %></br></br>
<%= "iHub points: #{pupil.pupil.score}" %></br>
<%= "Teacher Points: #{pupil.pupil.total_points_year_starting(report_start_year)}" %></br>
<%= "Words Read: #{pupil.pupil.words_read_year_starting(report_start_year)}" %></br>
</div>
</div>
</div>
<% end %>
Finally my ajax:
$('.container').append("<%= escape_javascript(render 'schools/admin/reporting/collection_partial')%>");
$('#load_more_link').replaceWith("<%= escape_javascript(link_to 'Load More', school_reporting_load_more_path, remote: true, id: "load_more_link", class: 'btn btn-info')%>");
If any more info is needed please ask, I feel I've tried everything I can think of at this point.
I have a loop that iterates through a list of stories but it's generating one row per story and not 3 columns. What am I missing?
<div class="row">
<div class="col-md-4">
<% #stories.each do |story| %>
<h2><%= story.name.titleize %></h2>
<%= image_tag story.pictures.first.image(:medium).to_s, class: "img-responsive" %>
<%= link_to "View Story", story_path(story) %>
<% end %>
</div>
</div>
Thanks.
I think you're placing the each loop in the wrong place. Try something like:
<div class="row">
<% #stories.each do |story| %>
<div class="col-md-4">
<%= content_tag :h2, story.name.titleize %>
<%= image_tag story.pictures.first.image(:medium).to_s, class: "img-responsive" %>
<%= link_to "View Story", story_path(story) %>
</div>
<% end %>
</div>
Take a look to each_slice
#stories = [story1, story2, story3, story4, story5, story6, story7, story8]
#stories.each_slice(3).to_a
#=> [[story1, story2, story3], [story4, story5, story6], [story7, story8]]
I think you can try this:
<% #stories.each_slice(3).to_a.each do |row_stories| %>
<div class="row">
<% row_stories.each do |story| %>
<div class="col-md-4">
<%= content_tag :h2, story.name.titleize %>
<%= image_tag story.pictures.first.image(:medium).to_s, class: "img-responsive" %>
<%= link_to "View Story", story_path(story) %>
</div>
<% end %>
</div>
<% end %>
I am trying to write an if else statement so that when a users post a photo only the photo is displayed the same goes for videos. Right now if a users post a video a blank photo will be displayed under the video as well. My code is below. I know it has something to do with the lines:
<%= image_tag #post.image.url(:medium) %>
<%= video_tag #post.video.url(:medium), controls: true, type: "video/mp4" %>
I just don't know what the best way is to only show the one the user is posting.
Post/Show.html
<div class="row">
<div class="col-md-offset-4 col-med-8">
<div class="panel panel-default">
<div class="panel-heading center">
<%= image_tag #post.image.url(:medium) %>
<%= video_tag #post.video.url(:medium), controls: true, type: "video/mp4" %>
</div>
<div class="panel-body">
<p><%= #post.description %></p>
<p><strong><%= #post.user.name if #post.user %></strong></p>
<% if #post.user == current_user %>
<%= link_to edit_post_path(#post) do %>
<span class="glyphicon glyphicon-edit"></span>
Edit
<% end %>
<% end %>
<%= link_to 'Back', posts_path %>
</div>
</div>
Form
<%= form_for #post, html: { multipart: true } do |f| %>
<% if #post.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#post.errors.count, "error") %> prohibited this post from being saved:</h2>
<ul>
<% #post.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :image %>
<%= f.file_field :image %>
</div>
<div class="field">
<%= f.label :video %>
<%= f.file_field :video %>
</div></br>
<div class="field">
<%= f.label :description %>
<%= f.text_field :description %>
</div>
<div class="actions">
<%= f.submit class: "btn btn-danger btn-md" %>
</div>
<% end %>
if i understand you correctly, you could try this...
<% if #post.respond_to?(:image) %>
<%= image_tag #post.image.url(:medium) %>
end
<% if #post.respond_to?(:video) %>
<%= image_tag #post.video.url(:medium), controls: true, type: "video/mp4" %>
end
You are basically checking for the existence of the particular attribute. You are saying, if it is here, if it exists, then display it.
Or you could try this
<% if #post.image.url != nil %>
<%= image_tag #post.image.url(:medium) %>
.........(repeat for other attributes)
<% end %>
or this
<% unless #post.image.url == nil %>
<%= image_tag #post.image.url(:medium) %>
<% end %>
see here for more info.
There are many ways to achieve what you want. this kind of thing is one of the fundamental concepts of programming.
This is what Things look like on my site.
I want "Cole Haan Air Madison" to actually link to the Cool Haan website where users can purchase that item.
This is the code for the form used to create Things:
<%= simple_form_for(#thing, html: { multipart: true }) do |f| %>
<% if #thing.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#thing.errors.count, "error") %> prohibited this thing from being saved:</h2>
<ul>
<% #thing.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="form-group">
<%= f.label :title %><br>
<%= f.text_field :title, class: 'form-control' %>
</div>
<div class="form-group">
<%= f.label :description %><br>
<%= f.text_field :description, class: 'form-control' %>
</div>
<div class="form-group">
<%= f.label :image %><br>
<%= f.file_field :image, class: 'form-control' %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
The form visually looks like this:
I know I have to add a link field to the form. But how do I, instead of displaying the link to the user, have it correspond to the title of the Thing?
Here is the show view for Things:
<div class='row'>
<div class='col-md-offset-2 col-md-8'>
<div class='panel panel-default'>
<div class='panel-heading text-center'>
<%= image_tag #thing.image.url(:medium) %>
</div>
<div class='panel-body'>
<p>
<strong><%= #thing.title %></strong>
</p>
<p>
<%= #thing.description %>
</p>
<p>
<%= link_to #thing.user.username, #thing.user %>
</p>
<% if #thing.user == current_user %>
<%= link_to edit_thing_path(#thing) do %>
<span class='glyphicon glyphicon-edit'></span>
<% end %>
<% end %>
</div>
</div>
</div>
Basically, you need link_to tag.
Since, you mentioned:
I want "Cole Haan Air Madison" to actually link to the Cool Haan
website where users can purchase that item.
So, I consider that you are storing website of the user's thing.
Replace,
<strong><%= #thing.title %></strong>
in your code with:
<strong><%= link_to #thing.title, #thing.user.website %></strong>
Here, #thing.user denotes the associated user of that thing, and #thing.user.website gives back the website of that user.
Sorry for the confusing title, but I'm not really sure what the exact problem is because I don't know Ruby all that well. Anyway, on to the problem!
So I have a render:
<div class="form" id="dept_div">
<span class="label search_label">Department:</span>
<% query = "<option></option>" %>
<% Department.all.each do |d| %>
<% query << "<option>"+d.dept+"</option>" %>
<% end %>
<%=select_tag :major, query.html_safe, class: "search_tag", id: "dept_drop" %>
</div>
That I try and plug in over here:
<span class="su_label">
<%= f.label :major %>
</span>
<% if !in_mobile_view? %>
<div class = "su_textfield">
<div class="checkbox">
<% else %>
<div data-role="fieldcontain" class="field_group">
<fieldset data-role="controlgroup" data-type="horizontal">
<% end %>
<!-- check privacy preferences to decide whether box should already be checked -->
<% if !hasnoprefs && #user.privacy_prefs.include?("nomajor") %>
<%= check_box_tag "major", 1, true %>
<% else %>
<%= check_box_tag "major" %>
<% end %>
<%= label_tag 'major', 'Hide' %>
<% if !in_mobile_view? %>
</div>
<%= render 'courses/form_partials/majors' %>
</div>
<% else %>
<%= f.text_field :major, class: "settings_inputfield" %>
</fieldset>
What I want is the variable major (which in the class User) to become the item selected from the render (which is a drop down menu). Any ideas?
Try...
<%= f.collection_select :major, query, :id, :major, {:include_blank => 'None' } %>