Merge pull request #294 from maciaszczykm/ui-overview

Style update

Author: bryk

src/app/frontend/_variables.scss

@@ -24,6 +24,7 @@ $headline-font-size-base:  rem(2.4) !default;
 $subhead-font-size-base:   rem(1.6) !default;
 $body-font-size-base:      rem(1.4) !default;
 $caption-font-size-base:   rem(1.2) !default;
+$toolbar-height-size-base: rem(6.4) !default;
 
 $primary: #326de6;
 $warning: #ffa500;

src/app/frontend/chrome/chrome.scss

@@ -22,6 +22,8 @@
 
 .kd-toolbar {
   box-shadow: $whiteframe-shadow-1dp;
+  height: $toolbar-height-size-base;
+  position: fixed;
 }
 
 body {
@@ -38,11 +40,14 @@ a {
   }
 }
 
-.kd-toolbar-tools,
-.kd-app-content-wrapper {
+.kd-toolbar-tools {
   margin: 0 auto;
 }
 
+.kd-app-content-wrapper {
+  margin-top: $toolbar-height-size-base;
+}
+
 .kd-app-content {
   position: relative;
 }

src/app/frontend/deploy/deployfromsettings.html

@@ -79,10 +79,10 @@
 </kd-help-section>
 
 <kd-help-section>
-  <md-switch ng-model="ctrl.isExternal" class="md-primary"
+  <md-checkbox ng-model="ctrl.isExternal" class="md-primary"
              ng-model-options="{ debounce: { 'default': 500, 'blur': 0 } }">
     Expose service externally
-  </md-switch>
+  </md-checkbox>
 </kd-help-section>
 
 <div ng-show="ctrl.isMoreOptionsEnabled()">

src/app/frontend/replicasetdetail/replicasetdetail.html

@@ -29,7 +29,7 @@ <h1 flex class="md-title kd-replicasetdetail-app-name">
     </div>
     <div flex layout="column" class="kd-replicasetdetail-sidebar-item">
       <span class="kd-replicasetdetail-sidebar-title kd-replicasetdetail-sidebar-info">
-        Replica set
+        Replica Set
       </span>
       <div layout="row" flex="nogrow">
         <md-button class="md-primary" ng-click="ctrl.handleDeleteReplicaSetDialog()">

src/app/frontend/replicasetdetail/serviceendpoint.html

@@ -15,8 +15,8 @@
 -->
 
 <div>
-  {{::endpoint.host}}
   <span ng-repeat="port in ::endpoint.ports">
-    {{::port.port}}/{{::port.protocol}}<span ng-if="::!$last">,</span>
+    {{::endpoint.host}}:{{::port.port}} {{::port.protocol}}
+    <br ng-if="::!$last">
   </span>
 </div>

src/app/frontend/replicasetlist/replicasetcard.scss

@@ -32,6 +32,10 @@
 .kd-replicaset-card-title {
   font-weight: $regular-font-weight;
   margin: 0;
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 .kd-replicaset-card-description {
@@ -67,7 +71,8 @@
 }
 
 .kd-replicaset-card-section {
-  margin-top: 2 * $baseline-grid;
+  margin-top: $baseline-grid;
+  padding-right: $baseline-grid / 2;
 }
 
 .kd-replicaset-card-section-title {

src/app/frontend/replicasetlist/replicasetlist.scss

@@ -16,8 +16,8 @@
 
 .md-fab {
   &.kd-replicaset-deploy {
-    position: absolute;
+    position: fixed;
     right: 0;
-    top: -56px / 2 - $baseline-grid;
+    top: $toolbar-height-size-base - $baseline-grid * 3.5 - $baseline-grid;
   }
 }

src/app/frontend/replicasetlist/replicasetlistcontainer.scss

@@ -10,12 +10,15 @@
 // 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.    
+// limitations under the License.
+
+@import '../variables';
 
 .kd-replica-set-list-container {
   align-content: center;
   align-items: center;
   display: flex;
   flex-flow: column wrap;
   justify-content: top;
+  margin-top: $toolbar-height-size-base;
 }