Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tabs styling issue #72

Merged
merged 5 commits into from
Mar 10, 2017
Merged

Tabs styling issue #72

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e649590
modified readme for report
Mar 6, 2017
67cfafa
fixed layout and styling
Mar 7, 2017
672d8dd
CR corrections
Mar 7, 2017
3a699ae
final fixes
Mar 7, 2017
47ea7e5
visual improvements
Mar 7, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions report/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion report/src/main/webapp/app/layout/main/suite/mainView.suite.view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'"
Expand Down
2 changes: 1 addition & 1 deletion report/src/main/webapp/app/layout/main/test/mainView.test.view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
limitations under the License.

-->
<div class="main page-main">
<div class="page-main">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'main' is also used with 'toolbar-holder', so expanding and collapsing works properly

<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'"
Expand Down
3 changes: 1 addition & 2 deletions report/src/main/webapp/app/layout/main/url/mainView.url.view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
22 changes: 10 additions & 12 deletions report/src/main/webapp/app/layout/toolbar/toolbarBottom.view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
264 changes: 126 additions & 138 deletions report/src/main/webapp/assets/css/main.css
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 0 additions & 13 deletions report/src/main/webapp/assets/sass/_report.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for cleaning this up! 👍

// cookies report

Expand Down
16 changes: 3 additions & 13 deletions report/src/main/webapp/assets/sass/_test.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
background: #ebebeb;
border: solid $border_color_darken;
border-width: 1px 0;
Expand Down
49 changes: 20 additions & 29 deletions report/src/main/webapp/assets/sass/_toolbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -56,8 +51,7 @@

&-link {
@include transition(width, 0.3s);
width: calc(100vw - 570px);
float: left;
width: calc(100% - 200px);
background: $white;

> {
Expand All @@ -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 {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New line above as it was before - follow the convention

right: 0;
Expand All @@ -95,7 +92,8 @@
}

&-bottom {
display: table;
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 20px;
background: $white;
Expand All @@ -106,7 +104,6 @@
color: $gray_darker;
padding-right: 20px;
line-height: 54px;
display: table;
a {
color: $gray_darker;

Expand All @@ -118,6 +115,7 @@
}

&-nav {
width: 80px;
padding-top: 5px;
margin-right: 20px;

Expand Down Expand Up @@ -184,13 +182,6 @@
}
}

.menu-expanded {

.toolbar-link {
width: calc(100vw - 920px);
}
}

.tab-content-toolbar {

@media (max-width: 1300px) {
Expand Down
4 changes: 3 additions & 1 deletion report/src/main/webapp/assets/sass/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,9 @@ body {

.page-main {
z-index: 1;
padding: 130px 25px 0 25px;
width: 100%;
float: left;
padding: 0 25px;
}

.is-hidden {
Expand Down
2 changes: 1 addition & 1 deletion report/src/main/webapp/report.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down