From bb68e575e7e0ba95dccbfea3562fcd2d9c4481c3 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 28 Mar 2019 09:51:43 +0200
Subject: [PATCH] UI: Settings cards layout improvement.

---
 ui/src/app/admin/admin.controller.js          |  3 +++
 ui/src/app/admin/general-settings.tpl.html    |  4 ++--
 .../app/admin/outgoing-mail-settings.tpl.html |  4 ++--
 ui/src/app/admin/settings-card.scss           | 23 +++++++++++++++++++
 4 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 ui/src/app/admin/settings-card.scss

diff --git a/ui/src/app/admin/admin.controller.js b/ui/src/app/admin/admin.controller.js
index c697726137..1fd0b22eeb 100644
--- a/ui/src/app/admin/admin.controller.js
+++ b/ui/src/app/admin/admin.controller.js
@@ -13,6 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import './settings-card.scss';
+
 /*@ngInject*/
 export default function AdminController(adminService, toast, $scope, $rootScope, $state, $translate) {
 
diff --git a/ui/src/app/admin/general-settings.tpl.html b/ui/src/app/admin/general-settings.tpl.html
index 7023e133dd..0e651f8233 100644
--- a/ui/src/app/admin/general-settings.tpl.html
+++ b/ui/src/app/admin/general-settings.tpl.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div layout="row" width="100%" layout-wrap> 
-	<md-card flex-gt-sm="60" flex="100" style="height: 100%;">
+<div>
+	<md-card class="settings-card">
        <md-card-title>
           <md-card-title-text>
            		<span translate class="md-headline">admin.general-settings</span>
diff --git a/ui/src/app/admin/outgoing-mail-settings.tpl.html b/ui/src/app/admin/outgoing-mail-settings.tpl.html
index 14049defd3..855da256c6 100644
--- a/ui/src/app/admin/outgoing-mail-settings.tpl.html
+++ b/ui/src/app/admin/outgoing-mail-settings.tpl.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div layout="row" width="100%" layout-wrap tb-help="'outgoingMailSettings'" help-container-id="help-container">
-	<md-card flex-gt-sm="60" flex="100" style="height: 100%;">
+<div tb-help="'outgoingMailSettings'" help-container-id="help-container">
+	<md-card class="settings-card">
        <md-card-title>
           <md-card-title-text layout="row">
            	  <span translate class="md-headline">admin.outgoing-mail-settings</span>
diff --git a/ui/src/app/admin/settings-card.scss b/ui/src/app/admin/settings-card.scss
new file mode 100644
index 0000000000..9cbf5266b0
--- /dev/null
+++ b/ui/src/app/admin/settings-card.scss
@@ -0,0 +1,23 @@
+/**
+ * Copyright © 2016-2019 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "../../scss/constants";
+
+md-card.settings-card {
+  @media (min-width: $layout-breakpoint-sm) {
+    width: 60%;
+  }
+}