Fix to content stretching beyond screen space (#95)

Christoffer-Cortes · web-flow · commit 719683a72a65 · 2018-11-19T08:41:20.000+01:00
* CSS fixes

* Small fix

* Small fix

* Fix to elements that fail test

* Remove deprecated attribute styles

* Replace deprecated font tag.

* Make sure all error texts get hidden on modal close.

* Fix error message problem

* Removed unnecessary media rule
diff --git a/src/main/resources/EIBackendInstancesInformation.json b/src/main/resources/EIBackendInstancesInformation.json
@@ -1 +1 @@
-[]
+[]
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
@@ -1,3 +1,16 @@
+html, body {
+    height: 100%;
+}
+body {
+    overflow: hidden;
+    padding-top: 60px;
+}
+.content-wrapper {
+    height: 100%;
+}
+#table {
+    cellspacing: 0px;
+}
 .modal-subscription {
     max-width: 650px;
 }
@@ -92,6 +105,16 @@
 .showPasswordButton{
     margin-top: 10px;
 }
+.font-small {
+    font-size: small;
+}
+.font-medium {
+    font-size: medium;
+}
+.hide {
+	position: absolute;
+	left: -999em;
+}
 /* Safari */
 @-webkit-keyframes spin {
     0% { -webkit-transform: rotate(0deg); }
@@ -102,16 +125,10 @@
     100% { transform: rotate(360deg); }
 }
 @media (max-width: 576px) {
+	body {
+        padding-top: 80px;
+    }
     .container {
         max-width: 480px;
     }
-}
-body {
-    padding-top: 60px;
-    overflow: scroll !important;
-}
-@media (max-width: 576px) {
-    body {
-        padding-top: 80px;
-    }
-}
+}
diff --git a/src/main/resources/static/js/subscription.js b/src/main/resources/static/js/subscription.js
@@ -683,6 +683,9 @@ jQuery(document).ready(function () {
             $('#modal_form').on('shown.bs.modal', function() {
             	loadTooltip();
             });
+            $('#modal_form').on('hidden.bs.modal', function() {
+                $('.text-danger').hide();
+            });
         }
     }
 
@@ -709,7 +712,7 @@ jQuery(document).ready(function () {
             notificationMessageKeyValuesArray[0].formkey = ""; // OBS must be empty when NOT using REST POST Form key/value pairs
         }
 
-        $('.addSubscriptionErrors').hide();
+        $('.text-danger').hide();
         //START: Make sure all datatables field has a value
         var subscriptionName = String(vm.subscription()[0].subscriptionName());
         // Validate SubscriptionName field
diff --git a/src/main/resources/templates/add-instances.html b/src/main/resources/templates/add-instances.html
@@ -8,7 +8,6 @@
     <meta name="author" content=""/>
 </head>
 <body class="bg-dark">
-<div class="hidden" style="display: none" id="frontendServiceUrl" th:text="${frontendServiceUrl}"></div>
 <div class="d-flex justify-content-center ml-3 mr-3">
     <div class="card card-standard">
         <div class="card-header">Add backend instance</div>
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -8,12 +8,8 @@
   <meta name="description" content="" />
   <meta name="author" content="" />
 
-  <title>Eiffel Intelligence</title>
-  <!-- Bootstrap core CSS-->
   <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
-  <!-- Page level plugin CSS-->
   <link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
-  <!-- Custom styles for this template-->
   <link href="assets/datatables/dataTables.bootstrap4.css" rel="stylesheet" />
   <link href="assets/datatables/responsive.dataTables.min.css" rel="stylesheet" />
   <link href="css/sb-admin.css" rel="stylesheet" />
@@ -23,11 +19,13 @@
   <link href="assets/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
   <link href="css/errMsg.css" rel="stylesheet"/>
   <link href="css/style.css" rel="stylesheet" />
+
+  <title>Eiffel Intelligence</title>
 </head>
 
 <body class="bg-dark" id="page-top">
-  <div class="hidden" style="display: none" id="eiffelDocumentationUrlLinks" th:text="${eiffelDocumentationUrlLinks}"></div>
-  <div class="hidden" style="display: none" id="frontendServiceUrl" th:text="${frontendServiceUrl}"></div>
+  <div class="d-none" id="eiffelDocumentationUrlLinks" th:text="${eiffelDocumentationUrlLinks}"></div>
+  <div class="d-none" id="frontendServiceUrl" th:text="${frontendServiceUrl}"></div>
   <!-- Navigation-->
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
     <a class="navbar-brand" th:href="${frontendServiceUrl}">
@@ -156,7 +154,6 @@ <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
   <script type="text/javascript" src="assets/datatables/jquery.dataTables.js"></script>
   <script type="text/javascript" src="assets/datatables/dataTables.bootstrap4.js"></script>
   <script type="text/javascript" src="assets/datatables/dataTables.responsive.min.js"></script>
-
   <script type="text/javascript" src="assets/knockout/knockout-3.4.2.js"></script>
   <script type="text/javascript" src="assets/knockout/knockout.mapping.js"></script>
   <script type="text/javascript" src="assets/jquery-ui/jquery-ui.min.js"></script>
@@ -165,13 +162,10 @@ <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
   <script type="text/javascript" src="assets/jgrowl/jquery.jgrowl.min.js"></script>
   <script type="text/javascript" src="assets/dateformat/date.format.js"></script>
   <script type="text/javascript" src="assets/jsonlint/jsonlint.js"></script>
-
   <script type="text/javascript" src="assets/bootstrap/js/popper.min.js"></script>
   <script type="text/javascript" src="assets/bootstrap/js/bootstrap.bundle.min.js"></script>
-
   <script type="text/javascript" src="assets/js/sb-admin.min.js"></script>
   <script type="text/javascript" src="assets/js/sb-admin-datatables.min.js"></script>
-
   <script type="text/javascript" src="js/main.js"></script>
   <script type="text/javascript" src="js/errorMessages.js"></script>
 </body>
diff --git a/src/main/resources/templates/subscription.html b/src/main/resources/templates/subscription.html
@@ -8,18 +8,13 @@
     <meta name="description" content="" />
     <meta name="author" content="" />
 
-    <link href="css/style.css" rel="stylesheet" />
+    <script type="text/javascript" src="resources/subscription_templates.js"></script>
 
     <title>Eiffel Intelligence Subscription Handling</title>
 </head>
 
 <body>
-
-    <div class="hidden" id="frontendServiceUrl" style="display: none" th:text="${frontendServiceUrl}"></div>
-    <div class="hidden" id="subscriptionTemplate" style="display: none" th:text="${subscriptionTemplate}"></div>
-
-    <script type="text/javascript" src="resources/subscription_templates.js"></script>
-
+    <div class="d-none" id="subscriptionTemplate" th:text="${subscriptionTemplate}"></div>
     <div class="d-flex">
         <div class="col-md-9 col-8">
             <h3>Eiffel Intelligence Subscription Handling</h3>
@@ -54,7 +49,7 @@ <h3 id="subData">Subscription Data</h3>
             <button id="uploadSubscription" class="mt-1 btn btn-info upload_subscriptions show_if_authorized">
                 <i class="glyphicon glyphicon-upload"></i>Upload Subscriptions
             </button>
-            <input class="hidden" type='file' id='upload_sub' name='file' style="position: absolute; left: -999em;" />
+            <input class="hide" type='file' id='upload_sub' name='file'/>
         </div>
         <div class="pb-1 col-12 loadingAnimation">
             <!-- This div is the animated loading indicator -->
@@ -64,7 +59,7 @@ <h3 id="subData">Subscription Data</h3>
 
     <!-- Datatable -->
 
-    <div class="pl-2 pr-2">
+    <div class="pl-2 pr-2 pb-3">
         <table id="table" class="table table-bordered" width="100%" cellspacing="0"></table>
     </div>
 
@@ -89,7 +84,7 @@ <h3 class="modal-title text-center" id="formHeader">Subscription Form</h3>
                             <div class="form-group">
                                 <label class="pl-1 control-label font-weight-bold">Load Subscription Template (Examples)</label>
                                 <div>
-                                    <select style="width: 100%" id="selectTemplate"
+                                    <select class="w-100" id="selectTemplate"
                                         data-bind="options: subscription_templates_in,
                                                optionsText: 'text',
                                                optionsValue: 'value',
@@ -104,8 +99,8 @@ <h3 class="modal-title text-center" id="formHeader">Subscription Form</h3>
                                 <label class="pl-1 control-label font-weight-bold">SubscriptionName</label>
                                 <div>
                                     <!-- text injected from subscription.js -->
-                                    <font class="addSubscriptionErrors" id="invalidLetters" color="red" size="2" />
-                                    <font class="addSubscriptionErrors" id="noNameGiven" color="red" size="2" />
+                                    <span class="text-danger font-small" id="invalidLetters"></span>
+                                    <span class="text-danger font-small" id="noNameGiven"></span>
 
                                     <input id="subscriptionNameInput" data-bind="textInput:$data.subscriptionName"
                                         name="subscriptionName" placeholder="subscriptionName" class="form-control display-inline-table" type="text"/>
@@ -138,7 +133,7 @@ <h3 class="modal-title text-center" id="formHeader">Subscription Form</h3>
                                                optionsValue: 'value',
                                                value: $data.notificationType,
                                                optionsCaption: 'Choose...'"></select>
-                                    <font class="addSubscriptionErrors" id="notificationTypeNotSet" color="red" size="2" />
+                                    <span class="text-danger font-small" id="notificationTypeNotSet"></span>
                                 </div>
                             </div>
 
@@ -147,7 +142,7 @@ <h3 class="modal-title text-center" id="formHeader">Subscription Form</h3>
                                 <img class="cursor-pointer" id="restPostMediaTypeInfo" alt="RestPostMediaType Info" src="assets/images/information.png"
                                     title="This decides the Content-Type of the POST body."/>
                                 <div>
-                                    <select style="width: 100%" data-bind="options: $root.restPostBodyType_in,
+                                    <select class="w-100" data-bind="options: $root.restPostBodyType_in,
                                                optionsText: 'text',
                                                optionsValue: 'value',
                                                value: $data.restPostBodyMediaType,
@@ -158,16 +153,16 @@ <h3 class="modal-title text-center" id="formHeader">Subscription Form</h3>
                             <div class="p-1 border border-primary form-group">
                                 <label class="control-label font-weight-bold">NotificationMessage</label>
                                 <div>
-                                    <font class="addSubscriptionErrors" id="noNotificationKeyOrValue" color="red" size="2" />
+                                    <span class="text-danger font-small" id="noNotificationKeyOrValue"></span>
                                 </div>
                                 <div>
-                                    <font class="addSubscriptionErrors" id="notificationMessageKeyValuesArrayToLarge" color="red" size="2" />
+                                    <span class="text-danger font-small" id="notificationMessageKeyValuesArrayToLarge"></span>
                                 </div>
                                 <div>
-                                    <font class="addSubscriptionErrors" id="keyInNotificationMessage" color="red" size="2" />
+                                    <span class="text-danger font-small" id="keyInNotificationMessage"></span>
                                 </div>
                                 <div>
-                                    <font class="addSubscriptionErrors" id="noNotificationMessage" color="red" size="2" />
+                                    <span class="text-danger font-small" id="noNotificationMessage"></span>
                                 </div>
                                 <table width="100%">
                                     <thead>
@@ -248,7 +243,7 @@ <h3 class="modal-title text-center" id="formHeader">Subscription Form</h3>
                                                optionsText: $data.repeat(),
                                                value: $data.repeat,
                                                optionsCaption: 'Choose...'"></select>
-                                    <font class="addSubscriptionErrors" id="repeatNotSet" color="red" size="2" />
+                                    <span class="text-danger font-small" id="repeatNotSet"></span>
                                     <span class="help-block"></span>
                                 </div>
                             </div>
@@ -257,7 +252,7 @@ <h3 class="modal-title text-center" id="formHeader">Subscription Form</h3>
                                 <img class="cursor-pointer" id="notificationMetaInfo" alt="NotificationMeta Info" src="assets/images/information.png"
                                     title="The specific point to notify. Example: my@mail.com or host.com/endpoint"/>
                                 <div>
-                                    <font class="addSubscriptionErrors" id="noNotificationMetaGiven" color="red" size="2" />
+                                    <span class="text-danger font-small" id="noNotificationMetaGiven"></span>
                                     <textarea id="metaData" data-bind="textInput:$data.notificationMeta"
                                         name="notificationMeta" placeholder="notificationMeta" class="form-control" type="text"></textarea>
                                     <span class="help-block"></span>
@@ -280,13 +275,13 @@ <h5>OR</h5>
                                     <!-- ko foreach: requirements_item.conditions -->
                                     <div id="conditionID">
 										<!-- ko if: $index() !== 0 -->
-										<h5 style="display:inline">AND</h5>
+										<h5 class="d-inline">AND</h5>
 										<!-- /ko -->
 										<label class="control-label font-weight-bold">Condition</label>
 
                                         <!-- ko ifnot: $data.jmespath() -->
-                                        <div>
-                                            <font class="addSubscriptionErrors emptyCondition" color="red" size="2" />
+                                        <div >
+                                            <span class="text-danger font-small emptyCondition"></span>
                                         </div>
                                         <!-- /ko -->
 
@@ -321,8 +316,8 @@ <h5 style="display:inline">AND</h5>
                     </form>
                 </div>
                 <div class="modal-footer">
-                    <font class="addSubscriptionErrors" id="errorExists" color="red" size="3" />
-                    <font class="addSubscriptionErrors" id="serverError" color="red" size="3" />
+                    <span class="text-danger font-medium" id="errorExists"></span>
+                    <span class="text-danger font-medium" id="serverError"></span>
                     <button type="button" id="btnSave" class="btn btn-primary save_record">
                         Save
                     </button>
diff --git a/src/main/resources/templates/switch-backend.html b/src/main/resources/templates/switch-backend.html
@@ -8,8 +8,7 @@
     <meta name="author" content=""/>
 </head>
 <body class="bg-dark">
-<div class="hidden" style="display: none" id="frontendServiceUrl" th:text="${frontendServiceUrl}"></div>
-<div class="d-flex justify-content-center ml-3 mr-3">
+<div class="d-flex justify-content-center ml-3 mr-3 pb-3">
     <div class="card">
         <div class="card-header">Switch backend</div>
         <div class="card-body" id="instancesModel">
@@ -28,14 +27,14 @@
                 </thead>
                 <tbody data-bind="foreach: instances">
                 <tr>
-                    <td align="center"><input align="center" name="activate" type="radio"
+                    <td class="text-center"><input name="activate" type="radio"
                                               data-bind="checked: active, checkedValue: true, click: $parent.checked, attr: { id: 'SelectBackendInstance' + $index()}"/></td>
                     <td data-bind="text: name, attr: { id: 'BackendInstance' + $index() + 'Name'}"></td>
                     <td data-bind="text: host"></td>
                     <td data-bind="text: port"></td>
                     <td data-bind="text: path"></td>
-                    <td align="center"><input type="checkbox" disabled="disabled" data-bind="checked: https"/></td>
-                    <td align="center"><a href="#" data-bind="click: $parent.removeInstance, attr: { id: 'removeBtn' + $index()}">Remove</a></td>
+                    <td class="text-center"><input type="checkbox" disabled="disabled" data-bind="checked: https"/></td>
+                    <td class="text-center"><a href="#" data-bind="click: $parent.removeInstance, attr: { id: 'removeBtn' + $index()}">Remove</a></td>
                 </tr>
                 </tbody>
             </table>
diff --git a/src/main/resources/templates/testRules.html b/src/main/resources/templates/testRules.html
@@ -12,20 +12,19 @@
 </head>
 
 <body>
-    <div class="hidden" id="frontendServiceUrl" style="display: none" th:text="${frontendServiceUrl}"></div>
-    <div class="container pull-left" id="testRule" style="max-width: 100%; max-height: 100%">
-        <div align="center">
+    <div class="container mw-100 pb-3" id="testRule">
+        <div class="text-center">
             <h1 id="test_rules_header">Test Rules</h1>
         </div>
-        <div class="row" style="max-height: 950; padding: 10px">
+        <div class="row px-3">
             <div class="p-1 col-lg-6 col-md-6 col-12 border border-right border-success" id="testRulesDOMObject">
                 <div class="d-flex flex-wrap">
 	                <div class="col-11">
 	                   <button class="btn btn-primary upload_rules rule-button mr-1 mt-1 d-inline-block">
                            Upload Rules
                            <i class="fa fa-fw  fa-upload"></i>
                        </button>
-                       <input class="hidden" type='file' id='uploadRulesFile' name='file' style="position: absolute; left: -999em;" />
+                       <input class="hide" type='file' id='uploadRulesFile' name='file'/>
 	                   <button class="btn btn-primary download_rules_template rule-button mr-1 mt-1 d-inline-block">
                            Get Template
                            <i class="fa fa-fw  fa-download"></i>
@@ -66,7 +65,7 @@ <h6>
                            Upload Events
                            <i class="fa fa-fw  fa-upload"></i>
                        </button>
-                       <input class="hidden" type='file' id='uploadEventsFile' name='file' style="position: absolute; left: -999em;" />
+                       <input class="hide" type='file' id='uploadEventsFile' name='file'/>
                        <button class="btn btn-primary download_events_template rule-button mr-1 mt-1 d-inline-block">
                            Get Template
                            <i class="fa fa-fw  fa-download"></i>

Original file line number	Diff line number	Diff line change
`@@ -683,6 +683,9 @@ jQuery(document).ready(function () {`
`683`	`683`	`$('#modal_form').on('shown.bs.modal', function() {`
`684`	`684`	`loadTooltip();`
`685`	`685`	`});`
	`686`	`+ $('#modal_form').on('hidden.bs.modal', function() {`
	`687`	`+ $('.text-danger').hide();`
	`688`	`+ });`
`686`	`689`	`}`
`687`	`690`	`}`
`688`	`691`
`@@ -709,7 +712,7 @@ jQuery(document).ready(function () {`
`709`	`712`	`notificationMessageKeyValuesArray[0].formkey = ""; // OBS must be empty when NOT using REST POST Form key/value pairs`
`710`	`713`	`}`
`711`	`714`
`712`		`- $('.addSubscriptionErrors').hide();`
	`715`	`+ $('.text-danger').hide();`
`713`	`716`	`//START: Make sure all datatables field has a value`
`714`	`717`	`var subscriptionName = String(vm.subscription()[0].subscriptionName());`
`715`	`718`	`// Validate SubscriptionName field`