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 { .no-margin {
margin: 0; 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 --> <!-- CONTACTS PAGE -->
<div class="container"> <div class="container">
<div class="contacts-container text-color"> <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"/> <input type="submit" id="accept-button" class="btn btn-primary" id="accept-button" style="display: none;" value="ACCEPT CALL"/>
</form> </form>
<div id="contacts-page"></div>
<%= javascript_pack_tag 'notifications' %> <%= javascript_pack_tag 'notifications' %>
<%= javascript_pack_tag 'local_video' %> <%= javascript_pack_tag 'local_video' %>

View File

@ -51,25 +51,27 @@
<div class="container"> <div class="container">
<div class="contacts-container"> <div class="contacts-container">
<div class="settings half"> <div class="row">
<div class="col-xs-12 col-md-6">
<div class="settings">
<h2>Settings</h2> <h2>Settings</h2>
<div> <div>
<%= simple_form_for(@user) do |t| %> <%= simple_form_for(@user) do |t| %>
<div> <div>
<div class="card card-form card-form-no-hover"> <div class="card card-form card-form-no-hover">
<%= t.label :language, class:'no-padding no-margin' %> <%= 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' %> <%= t.input_field :language, collection: languages.sort, class:'input-field-text-black input-dropdown' %>
</div> </div>
<div class="card card-form card-form-no-hover"> <div class="card card-form card-form-no-hover">
<%= t.label :caption_font, class:'no-padding no-margin' %> <%= 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' %> <%= t.input_field :caption_font, collection: fonts.sort, class:'input-field-text-black input-dropdown' %>
</div> </div>
<div class="card card-form card-form-no-hover"> <div class="card card-form card-form-no-hover">
<%= t.label :caption_font_size, class:'no-padding no-margin' %> <%= t.label :caption_font_size, class:'padding-right no-margin font-weight-normal' %>
<%= t.input_field :caption_font_size, class:'input-field-text-black' %> <%= t.input_field :caption_font_size, class:'input-field-text-black' %>
</div> </div>
<div class="card card-form card-form-no-hover"> <div class="card card-form card-form-no-hover">
<%= t.label :enable_transcript, class:'no-padding no-margin' %> <%= t.label :enable_transcript, class:'padding-right no-margin font-weight-normal' %>
<label class="switch"> <label class="switch">
<%= t.input_field :enable_transcript, class:'input-field-text-black' %> <%= t.input_field :enable_transcript, class:'input-field-text-black' %>
<span class="slider round"></span> <span class="slider round"></span>
@ -81,15 +83,17 @@
</div> </div>
<% end %> <% end %>
</div> </div>
</div> </div>
</div>
<div class="video-feed hidden-xs hidden-sm"> <div class="col-xs-12 col-md-6 hidden-xs hidden-sm">
<div class="video-feed">
<div class="video-content"> <div class="video-content">
<video id="settings-video" class="flex-video" autoplay=""></video> <video id="settings-video" class="flex-video" autoplay=""></video>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>