made settings page responsive

This commit is contained in:
Beatrice Olivera 2018-09-01 19:12:26 +01:00
parent 3935b3067c
commit 56d1b924a0
3 changed files with 46 additions and 34 deletions

View File

@ -83,3 +83,11 @@ input:checked + .slider:before {
.no-margin {
margin: 0;
}
.font-weight-normal {
font-weight: normal;
}
.padding-right {
padding-right: 10px;
}

View File

@ -1,3 +1,5 @@
<div id="contacts-page"></div>
<!-- CONTACTS PAGE -->
<div class="container">
<div class="contacts-container text-color">
@ -36,8 +38,6 @@
<input type="submit" id="accept-button" class="btn btn-primary" id="accept-button" style="display: none;" value="ACCEPT CALL"/>
</form>
<div id="contacts-page"></div>
<%= javascript_pack_tag 'notifications' %>
<%= javascript_pack_tag 'local_video' %>

View File

@ -51,42 +51,46 @@
<div class="container">
<div class="contacts-container">
<div class="settings half">
<h2>Settings</h2>
<div>
<%= simple_form_for(@user) do |t| %>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="settings">
<h2>Settings</h2>
<div>
<div class="card card-form card-form-no-hover">
<%= t.label :language, class:'no-padding no-margin' %>
<%= t.input_field :language, collection: languages.sort, class:'input-field-text-black input-dropdown' %>
</div>
<div class="card card-form card-form-no-hover">
<%= t.label :caption_font, class:'no-padding no-margin' %>
<%= t.input_field :caption_font, collection: fonts.sort, class:'input-field-text-black input-dropdown' %>
</div>
<div class="card card-form card-form-no-hover">
<%= t.label :caption_font_size, class:'no-padding no-margin' %>
<%= t.input_field :caption_font_size, class:'input-field-text-black' %>
</div>
<div class="card card-form card-form-no-hover">
<%= t.label :enable_transcript, class:'no-padding no-margin' %>
<label class="switch">
<%= t.input_field :enable_transcript, class:'input-field-text-black' %>
<span class="slider round"></span>
</label>
</div>
<%= simple_form_for(@user) do |t| %>
<div>
<div class="card card-form card-form-no-hover">
<%= t.label :language, class:'padding-right no-margin font-weight-normal' %>
<%= t.input_field :language, collection: languages.sort, class:'input-field-text-black input-dropdown' %>
</div>
<div class="card card-form card-form-no-hover">
<%= t.label :caption_font, class:'padding-right no-margin font-weight-normal' %>
<%= t.input_field :caption_font, collection: fonts.sort, class:'input-field-text-black input-dropdown' %>
</div>
<div class="card card-form card-form-no-hover">
<%= t.label :caption_font_size, class:'padding-right no-margin font-weight-normal' %>
<%= t.input_field :caption_font_size, class:'input-field-text-black' %>
</div>
<div class="card card-form card-form-no-hover">
<%= t.label :enable_transcript, class:'padding-right no-margin font-weight-normal' %>
<label class="switch">
<%= t.input_field :enable_transcript, class:'input-field-text-black' %>
<span class="slider round"></span>
</label>
</div>
<%= link_to "Save", contacts_path, class: "btn btn-primary save-btn form-control" %>
<p></p>
<%= link_to "Save", contacts_path, class: "btn btn-primary save-btn form-control" %>
<p></p>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
</div>
<div class="video-feed hidden-xs hidden-sm">
<div class="video-content">
<video id="settings-video" class="flex-video" autoplay=""></video>
<div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
<div class="video-feed">
<div class="video-content">
<video id="settings-video" class="flex-video" autoplay=""></video>
</div>
</div>
</div>
</div>
</div>