Add tabs to problem settings

Author: adrien1018

app/assets/stylesheets/custom_styles.css

@@ -37,6 +37,29 @@ h1 h2 h3 h4 h5 h6 {
   }
 }
 
+/* tabs for problem settings */
+.panel.panel-problem-settings {
+  background-color: #f0f3f5;
+  border-color: #96a3b7;
+}
+.panel-problem-settings > .panel-heading {
+  background-color: #6683b7;
+  padding: 5px 10px 0 10px;
+}
+.panel-problem-settings .nav-tabs {
+  border: none;
+}
+.panel-problem-settings .nav-tabs > li.active > a {
+  background-color: #f0f3f5;
+  color: #555555;
+}
+.panel-problem-settings .nav-tabs > li > a {
+  color: #f0f3f5;
+}
+.panel-problem-settings .nav-tabs > li > a:hover {
+  color: #555555;
+}
+
 /* slider (dashboard) */
 .ui-slider {
   background: #f5f5f5;

app/views/problems/_form.html.erb

@@ -7,6 +7,18 @@
 <%= nested_form_for @problem, html: {class: 'form', id: 'problem-form'} do |f| %>
   <%= render partial: "shared/errors", locals: {errors: @problem.errors, item: 'problem'} %>
 
+
+<div class="panel with-nav-tabs panel-problem-settings">
+  <div class="panel-heading">
+    <ul class="nav nav-tabs">
+      <li class="active"><a href="#general-settings-tab" data-toggle="tab">General Settings</a></li>
+      <li><a href="#judge-settings-tab" data-toggle="tab">Judge Settings</a></li>
+    </ul>
+  </div>
+  <div class="panel-body">
+    <div class="tab-content">
+<div class="tab-pane fade in active" id="general-settings-tab">
+
   <div class="row">
     <div class="col-md-12">
       <div class="form-group">
@@ -101,7 +113,9 @@
     <%= f.select :discussion_visibility, Problem.discussion_visibilities.keys.map.with_index {|x, index| ["[#{index}] #{discussion_visibility_desc_map[x]}", x]},
       {}, {class: 'form-control flat'} %>
   </div>
+</div>
 
+<div class="tab-pane fade" id="judge-settings-tab">
   <div class="form-group">
     <%= f.label :compilers do %>
       Banned compilers
@@ -426,6 +440,11 @@
     </div>
   </div>
 
+</div>
+    </div>
+  </div>
+</div>
+
   <hr>
   <div class="actions">
     <span class="flex-container-bottom-align">