Tabs styling issue (#72)

* modified readme for report * fixed layout and styling * CR corrections * final fixes * visual improvements
wttech · Mar 10, 2017 · cc1be1d · cc1be1d
1 parent 5881762
commit cc1be1d
Show file tree

Hide file tree

Showing 11 changed files with 172 additions and 212 deletions.
diff --git a/report/README.md b/report/README.md
@@ -29,6 +29,7 @@ You will need following tools installed locally:
             'getUrl': 'http://aet.server.com:8181/api/'
         };
    in order to fetch data displayed on the report from instance `http://aet.server.com:8181`.
+   (for vagrant setup url example: 'http://aet-vagrant/api/')
 2. got into `.../report/src/main/webapp` folder
 3. run `npm install` to install required npm modules
 4. run `grunt` to start your web application

diff --git a/report/src/main/webapp/app/layout/main/suite/mainView.suite.view.html b/report/src/main/webapp/app/layout/main/suite/mainView.suite.view.html
@@ -17,7 +17,7 @@
     limitations under the License.
 
 -->
-<div class="main page-main">
+<div class="page-main">
     <div class="row reports-list">
         <div class="reports-list-item {{test.getStatus()}}"
              ng-repeat="test in suiteView.tests | aetTestStatusFilter:$root.activeFilters | aetTestSearchFilter:$root.searchText | orderBy:'name'"

diff --git a/report/src/main/webapp/app/layout/main/test/mainView.test.view.html b/report/src/main/webapp/app/layout/main/test/mainView.test.view.html
@@ -17,7 +17,7 @@
     limitations under the License.
 
 -->
-<div class="main page-main">
+<div class="page-main">
     <div class="row reports-list">
         <div class="reports-list-item {{url.getStatus()}}"
              ng-repeat="url in testView.urls | aetUrlStatusFilter:$root.activeFilters | aetUrlSearchFilter:$root.searchText | orderBy:'name'"

diff --git a/report/src/main/webapp/app/layout/main/url/mainView.url.view.html b/report/src/main/webapp/app/layout/main/url/mainView.url.view.html
@@ -17,14 +17,13 @@
     limitations under the License.
 
 -->
-<div class="main page-main">
+<div class="page-main">
   <uib-tabset class="test-tabs">
     <uib-tab
         ng-repeat="case in urlView.cases"
         classes="case-tab {{case.status.toLowerCase()}}"
         heading="{{case.displayName}}">
       <div>
-        <div class="bg-shield"/>
         <ng-include ng-init="templateUrl = case.getTemplate()" src="templateUrl"/>
       </div>
     </uib-tab>

diff --git a/report/src/main/webapp/app/layout/toolbar/toolbarBottom.view.html b/report/src/main/webapp/app/layout/toolbar/toolbarBottom.view.html
@@ -19,18 +19,16 @@
 -->
 <div class="toolbar-bottom">
     <div class="toolbar-link">
-        <div class="ellipsis">
-            <h4 class="toolbar-link-header">
-                <span class="preformatted">{{toolbarBottom.viewMode}}:</span>
-                <span ng-if="toolbarBottom.viewMode != 'url'">{{toolbarBottom.model.name}}</span>
-                <a ng-if="toolbarBottom.viewMode == 'url'"
-                   href="{{toolbarBottom.model.domain + toolbarBottom.model.url}}" target="_blank"
-                   data-toggle="popover"
-                   data-content="Click to open: {{toolbarBottom.model.domain + toolbarBottom.model.url}}"
-                   data-trigger="hover"
-                   data-container="body">{{toolbarBottom.model.name}}</a>
-            </h4>
-        </div>
+        <h4 class="toolbar-link-header ellipsis">
+            <span class="preformatted">{{toolbarBottom.viewMode}}:</span>
+            <span ng-if="toolbarBottom.viewMode != 'url'">{{toolbarBottom.model.name}}</span>
+            <a ng-if="toolbarBottom.viewMode == 'url'"
+               href="{{toolbarBottom.model.domain + toolbarBottom.model.url}}" target="_blank"
+               data-toggle="popover"
+               data-content="Click to open: {{toolbarBottom.model.domain + toolbarBottom.model.url}}"
+               data-trigger="hover"
+               data-container="body">{{toolbarBottom.model.name}}</a>
+        </h4>
     </div>
     <div class="toolbar-blocks">
         <div class="toolbar-btns is-absolute">

diff --git a/report/src/main/webapp/assets/css/main.css b/report/src/main/webapp/assets/css/main.css
diff --git a/report/src/main/webapp/assets/sass/_report.scss b/report/src/main/webapp/assets/sass/_report.scss
@@ -309,19 +309,6 @@ ul {
     }
   }
 }
-.bg-shield {
-  height: 60px;
-  width: 100%;
-  position: fixed;
-  top: 125px;
-  background-color: $simple_background;
-  z-index: 1;
-}
-.test-tabs .nav-tabs {
-  position: fixed;
-  top: 128px;
-  z-index: 2;
-}
 
 // cookies report
 

diff --git a/report/src/main/webapp/assets/sass/_test.scss b/report/src/main/webapp/assets/sass/_test.scss
@@ -16,25 +16,15 @@
  * limitations under the License.
  */
 .tab-content {
-  margin-top: 130px;
+  margin-top: 10px;
   z-index: 1;
 }
 
-.menu-expanded {
-
-  .tab-content-toolbar {
-    left: 350px;
-    width: calc(100% - 350px);
-  }
-}
-
 .tab-content-toolbar {
   @include transition(left, .3s);
-  position: fixed;
-  top: 185px;
-  left: 0;
-  width: 100%;
+  width: calc(100% + 50px);
   height: 47px;
+  margin: 0 -25px 10px -25px;;
   background: #ebebeb;
   border: solid $border_color_darken;
   border-width: 1px 0;

diff --git a/report/src/main/webapp/assets/sass/_toolbar.scss b/report/src/main/webapp/assets/sass/_toolbar.scss
@@ -17,33 +17,28 @@
  */
 .toolbar {
   @include transition(left 0.3s, width 0.3s);
-  position: fixed;
-  left: 0;
-  height: 125px;
   width: 100%;
-
-  .menu-expanded & {
-    left: 350px;
-    width: calc(100% - 350px);
-  }
+  float: left;
 
   &-holder {
     z-index: 10;
   }
 
   &-top {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
     background: $gray_light;
     border-bottom: solid 1px #ededed;
     background: $gray_light;
     padding: 0 20px;
-    display: table;
-    width: 100%;
   }
 
   &-toggle {
-    float: left;
+    display: flex;
+    align-self: center;
     cursor: pointer;
-    padding-top: 17px;
+    margin-right: 20px;
 
     span {
       display: block;
@@ -56,8 +51,7 @@
 
   &-link {
     @include transition(width, 0.3s);
-    width: calc(100vw - 570px);
-    float: left;
+    width: calc(100% - 200px);
     background: $white;
 
     > {
@@ -68,23 +62,26 @@
   &-block {
     text-align: center;
     border-left: solid 1px $border_color;
-    border-right: solid 1px $border_color;
     font-family: $font_light;
     color: rgb(119, 119, 124);
     font-size: 14px;
-    float: left;
-    line-height: 49px;
-    padding: 0 22px;
+    padding: 16px 22px;
 
     i {
       cursor: pointer;
       font-size: 20px;
-      vertical-align: middle;
+      align-self: center;
+    }
+
+    &:last-child {
+      display: flex;
+      border-right: solid 1px $border_color;
     }
   }
 
   &-blocks {
-    float: right;
+    display: flex;
+    flex-wrap: nowrap;
 
     &.is-absolute {
       right: 0;
@@ -95,7 +92,8 @@
   }
 
   &-bottom {
-    display: table;
+    display: flex;
+    justify-content: space-between;
     width: 100%;
     padding: 0 20px;
     background: $white;
@@ -106,7 +104,6 @@
       color: $gray_darker;
       padding-right: 20px;
       line-height: 54px;
-      display: table;
       a {
         color: $gray_darker;
 
@@ -118,6 +115,7 @@
   }
 
   &-nav {
+    width: 95px;
     padding-top: 5px;
     margin-right: 20px;
 
@@ -147,7 +145,7 @@
     padding-left: 30px;
     padding-top: 15px;
     height: 73px;
-    display: table;
+    display: flex;
 
     .button {
       float: left;
@@ -184,13 +182,6 @@
   }
 }
 
-.menu-expanded {
-
-  .toolbar-link {
-    width: calc(100vw - 920px);
-  }
-}
-
 .tab-content-toolbar {
 
   @media (max-width: 1300px) {
@@ -200,6 +191,10 @@
   .toolbar-btns, .comments-status {
     width: auto;
   }
+
+  .toolbar-blocks {
+    display: inline;
+  }
 }
 
 .button-dark.js-trigger-modal {

diff --git a/report/src/main/webapp/assets/sass/main.scss b/report/src/main/webapp/assets/sass/main.scss
@@ -79,7 +79,9 @@ body {
 
 .page-main {
 	z-index: 1;
-	padding: 130px 25px 0 25px;
+	width: 100%;
+	float: left;
+	padding: 0 25px;
 }
 
 .is-hidden {

diff --git a/report/src/main/webapp/report.html b/report/src/main/webapp/report.html
@@ -39,8 +39,8 @@
         <div ui-view="toolbarTop"></div>
         <div ui-view="toolbarBottom"></div>
     </div>
+    <div ui-view="content"></div>
 </div>
-<div ui-view="content"></div>
 
 <!--
     Comments modal