CSS: full width for large screen

6 files changed, 25 insertions, 16 deletions

diff --git a/ishtar_common/static/media/styles.css b/ishtar_common/static/media/styles.css
index 422a9a906..00b11fb07 100644
--- a/ishtar_common/static/media/styles.css
+++ b/ishtar_common/static/media/styles.css
@@ -77,10 +77,6 @@ div#foot{
     padding: 0.2em;
 }
 
-.search-vector{
-    width: 100%;
-}
-
 /* shortcut menu */
 
 .shortcut-title {
diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index c43f0a081..b417a08ec 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -132,7 +132,7 @@
         <i class="fa fa-arrow-up" aria-hidden="true"></i>
     </button>
     {% block pre_container %}{% endblock %}
-    <div class="container">
+    <div class="container-fluid px-5 mt-3" id="main-container">
         {% block top_content %}{% endblock %}
         <nav id="window-fixed-menu"
              class="navbar navbar-light flex-column">
diff --git a/ishtar_common/templates/blocks/DataTables-content.html b/ishtar_common/templates/blocks/DataTables-content.html
index 4a9257f65..82da411e1 100644
--- a/ishtar_common/templates/blocks/DataTables-content.html
+++ b/ishtar_common/templates/blocks/DataTables-content.html
@@ -12,7 +12,7 @@
     </div>
 
     <div id='foot_{{name}}' class="gridfooter row toolbar">
-        <div class='col-md-2'>
+        <div class='col col-sm-2'>
             <div class="btn-group btn-group-sm" role="group">
                 <button type='button' class="btn btn-secondary" data-toggle="modal"
                         data-target="#modal_grid_{{name}}">
@@ -20,7 +20,7 @@
                 </button>
             </div>
         </div>
-        <div>
+        <div class="col">
             <div class="btn-group btn-group-sm" role="group">
                   <button id="export-{{name}}" type="button"
                           class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
diff --git a/ishtar_common/templates/blocks/DataTables-tabs.html b/ishtar_common/templates/blocks/DataTables-tabs.html
index a2f354240..f83850572 100644
--- a/ishtar_common/templates/blocks/DataTables-tabs.html
+++ b/ishtar_common/templates/blocks/DataTables-tabs.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<ul class="nav nav-tabs m-3">
+<ul class="nav nav-tabs mb-3">
   <li class="nav-item">
     <a class="nav-link active" id="tab-grid-{{name}}" data-toggle="tab"
        href="#tab-content-grid-{{name}}" role="tab"
diff --git a/ishtar_common/templates/ishtar/wizard/validation_bar.html b/ishtar_common/templates/ishtar/wizard/validation_bar.html
index a966a0191..255da9e7b 100644
--- a/ishtar_common/templates/ishtar/wizard/validation_bar.html
+++ b/ishtar_common/templates/ishtar/wizard/validation_bar.html
@@ -1,20 +1,20 @@
 {% load i18n %}
 <div id='validation-bar' class="row text-center">
-    <div class="col-sm">
+    <div class="col">
         <button type="submit" id="submit_form" name='validate'
                 value="validate" class="btn btn-success wait-button">
             {% trans 'Validate' %}
         </button>
     </div>
     {% if last_step_is_available and next_steps %}
-    <div class="col-sm">
+    <div class="col">
         <button type="submit" id="submit_end_form" name='validate_and_end'
             value="validate_and_end" class="btn btn-success wait-button">
             {% trans 'Validate and end' %}
         </button>
     </div>
     {% endif %}
-    <div class="col-sm">
+    <div class="col">
         <a href="{% url 'reset_wizards' %}" id="reset_wizards">
             <button type="button" class="btn btn-secondary">
                 {% trans "Cancel" %}
diff --git a/scss/custom.scss b/scss/custom.scss
index 6417e1e96..ff595219d 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -219,7 +219,7 @@ table.dataTable {
 }
 
 .ishtar-gallery-wrapper .ishtar-gallery-info,
-.container .dataTables_wrapper .dataTables_info {
+.container-fluid .dataTables_wrapper .dataTables_info {
     clear: none;
     font-size: 0.8em;
     padding: 0.5em 2em;
@@ -445,8 +445,7 @@ textarea {
     margin-top: 1em;
 }
 
-.container{
-    margin-top: 1em;
+#main-container{
     margin-bottom: 16em;
 }
 
@@ -639,6 +638,11 @@ ul.compact{
     display: none;
 }
 
+.search-vector{
+    width: 100%;
+    padding-bottom: 1em;
+}
+
 .search-vector .form-group{
     margin-bottom: 0;
 }
@@ -827,7 +831,15 @@ ul.compact{
 
 .ishtar-table-map{
     width: 100%;
-    height: 50%;
+    height: 200px;
+    margin-bottom: 150px;
+}
+
+@media screen and (min-height: 640px){
+    .ishtar-table-map{
+        height: calc(100vh - 440px);
+        margin-bottom: 0;
+    }
 }
 
 .sheet .ishtar-table-map{
@@ -895,7 +907,8 @@ ul.compact{
 .chart-wrapper{
     display: block;
     position:relative;
-    height:400px;
+    height: 400px;
+    width: calc(100% - 100px);
 }
 
 .chart-content{