Merge pull request #9539 from opf/refactor-stylesheet-bim
refactoring the stylesheets in bimpull/9585/head
commit
c3112d5cd0
@ -1,37 +1,37 @@ |
||||
<div class="result-overlay" |
||||
<div class="op-bcf-list-container--result-overlay" |
||||
*ngIf="(showResultOverlay$ | async) && showTableView"></div> |
||||
|
||||
<!-- TABLE + TIMELINE horizontal split --> |
||||
<div class="work-packages-split-view--tabletimeline-container" |
||||
[ngClass]="{ '-with-resizer': showResizerInCardView() }" |
||||
<div class="op-bcf-list-container--work-packages-split-view--tabletimeline-container" |
||||
[ngClass]="{ '_with-resizer': showResizerInCardView() }" |
||||
*ngIf="tableInformationLoaded && showTableView"> |
||||
<wp-resizer elementClass="work-packages-partitioned-page--content-right" |
||||
localStorageKey="openProject-splitViewFlexBasis"> |
||||
</wp-resizer> |
||||
<wp-resizer elementClass="work-packages-partitioned-page--content-right" |
||||
localStorageKey="openProject-splitViewFlexBasis"> |
||||
</wp-resizer> |
||||
|
||||
<wp-table [projectIdentifier]="CurrentProject.identifier" |
||||
[configuration]="wpTableConfiguration" |
||||
(itemClicked)="handleWorkPackageClicked($event)" |
||||
(stateLinkClicked)="openStateLink($event)" |
||||
class="work-packages-split-view--tabletimeline-content"> |
||||
</wp-table> |
||||
<wp-table [projectIdentifier]="CurrentProject.identifier" |
||||
[configuration]="wpTableConfiguration" |
||||
(itemClicked)="handleWorkPackageClicked($event)" |
||||
(stateLinkClicked)="openStateLink($event)" |
||||
class="work-packages-split-view--tabletimeline-content"> |
||||
</wp-table> |
||||
</div> |
||||
|
||||
<!-- GRID representation of the WP --> |
||||
<div *ngIf="!showTableView" |
||||
class="work-packages--card-view-container" |
||||
[ngClass]="{ '-with-resizer': showResizerInCardView() }" > |
||||
<wp-grid [configuration]="wpTableConfiguration" |
||||
[showResizer]="showResizerInCardView()" |
||||
(itemClicked)="handleWorkPackageCardClicked($event)" |
||||
(stateLinkClicked)="openStateLink($event)" |
||||
resizerClass="work-packages-partitioned-page--content-right" |
||||
resizerStorageKey="openProject-splitViewFlexBasis"> |
||||
</wp-grid> |
||||
class="op-bcf-list-container--work-packages--card-view-container" |
||||
[ngClass]="{ '_with-resizer': showResizerInCardView() }" > |
||||
<wp-grid [configuration]="wpTableConfiguration" |
||||
[showResizer]="showResizerInCardView()" |
||||
(itemClicked)="handleWorkPackageCardClicked($event)" |
||||
(stateLinkClicked)="openStateLink($event)" |
||||
resizerClass="work-packages-partitioned-page--content-right" |
||||
resizerStorageKey="openProject-splitViewFlexBasis"> |
||||
</wp-grid> |
||||
</div> |
||||
|
||||
<!-- Footer --> |
||||
<div class="work-packages-split-view--tabletimeline-footer hide-when-print" |
||||
*ngIf="tableInformationLoaded"> |
||||
<wp-table-pagination></wp-table-pagination> |
||||
</div> |
||||
<wp-table-pagination></wp-table-pagination> |
||||
</div> |
@ -1,35 +1,36 @@ |
||||
@import "src/assets/sass/helpers" |
||||
|
||||
.result-overlay |
||||
@include overlay-background |
||||
background-color: #FFFFFF |
||||
opacity: 0.5 |
||||
.op-bcf-list-container |
||||
&--result-overlay |
||||
@include overlay-background |
||||
background-color: #FFFFFF |
||||
opacity: 0.5 |
||||
|
||||
.work-packages--card-view-container |
||||
width: 100% |
||||
overflow: auto |
||||
padding-bottom: 5px |
||||
@include styled-scroll-bar |
||||
&--work-packages--card-view-container |
||||
width: 100% |
||||
overflow: auto |
||||
padding-bottom: 5px |
||||
@include styled-scroll-bar |
||||
|
||||
@media screen and (min-width: 679px) |
||||
&.-with-resizer |
||||
padding-left: 10px |
||||
@media screen and (min-width: 679px) |
||||
&._with-resizer |
||||
padding-left: 10px |
||||
|
||||
@media screen and (max-width: 679px) |
||||
// Ensure the WP cards span the complete width on mobile |
||||
// --> Move scrollbar out of visible area |
||||
min-width: calc(100vw + 10px) |
||||
@media screen and (max-width: 679px) |
||||
// Ensure the WP cards span the complete width on mobile |
||||
// --> Move scrollbar out of visible area |
||||
min-width: calc(100vw + 10px) |
||||
|
||||
.work-packages-split-view--tabletimeline-container |
||||
display: flex |
||||
flex: 1 1 auto |
||||
@include styled-scroll-bar |
||||
&--work-packages-split-view--tabletimeline-container |
||||
display: flex |
||||
flex: 1 1 auto |
||||
@include styled-scroll-bar |
||||
|
||||
@media screen and (min-width: 679px) |
||||
&.-with-resizer |
||||
padding-left: 10px |
||||
@media screen and (min-width: 679px) |
||||
&._with-resizer |
||||
padding-left: 10px |
||||
|
||||
@media screen and (max-width: 679px) |
||||
// Ensure the WP cards span the complete width on mobile |
||||
// --> Move scrollbar out of visible area |
||||
min-width: calc(100vw + 10px) |
||||
@media screen and (max-width: 679px) |
||||
// Ensure the WP cards span the complete width on mobile |
||||
// --> Move scrollbar out of visible area |
||||
min-width: calc(100vw + 10px) |
@ -1,58 +1,58 @@ |
||||
@import "src/assets/sass/helpers" |
||||
|
||||
.ifc-model-viewer |
||||
.op-ifc-viewer |
||||
height: 100% |
||||
|
||||
.notification-box |
||||
position: absolute |
||||
right: 10px |
||||
|
||||
.ifc-model-viewer--nav-cube-canvas |
||||
position: absolute |
||||
width: 200px |
||||
height: 200px |
||||
bottom: 0 |
||||
right: 0 |
||||
z-index: 10 |
||||
|
||||
.ifc-model-viewer--section-planes-overview-canvas |
||||
position: absolute |
||||
width: 250px |
||||
height: 250px |
||||
top: 50px |
||||
right: 50px |
||||
z-index: 2000 |
||||
|
||||
.ifc-model-viewer--container |
||||
position: relative |
||||
width: 100% |
||||
height: 100% |
||||
padding-bottom: 10px |
||||
overflow: hidden |
||||
min-width: 420px |
||||
|
||||
.ifc-model-viewer--model-canvas |
||||
width: 100% |
||||
height: 100% |
||||
|
||||
&:focus |
||||
outline: none |
||||
&--nav-cube-canvas |
||||
position: absolute |
||||
width: 200px |
||||
height: 200px |
||||
bottom: 0 |
||||
right: 0 |
||||
z-index: 10 |
||||
|
||||
.ifc-model-viewer--focus-warning |
||||
@include without-link-styling |
||||
position: absolute |
||||
top: 6px |
||||
right: 395px |
||||
&--section-planes-overview-canvas |
||||
position: absolute |
||||
width: 250px |
||||
height: 250px |
||||
top: 50px |
||||
right: 50px |
||||
z-index: 2000 |
||||
|
||||
&--container |
||||
position: relative |
||||
width: 100% |
||||
height: 100% |
||||
padding-bottom: 10px |
||||
overflow: hidden |
||||
min-width: 420px |
||||
|
||||
&--model-canvas |
||||
width: 100% |
||||
height: 100% |
||||
|
||||
&:focus |
||||
outline: none |
||||
|
||||
&--focus-warning |
||||
@include without-link-styling |
||||
position: absolute |
||||
top: 6px |
||||
right: 395px |
||||
|
||||
.ifc-model-viewer--keyboard-disabled-icon |
||||
font-size: 20px |
||||
&--keyboard-disabled-icon |
||||
font-size: 20px |
||||
|
||||
.ifc-model-viewer--toolbar-container, |
||||
.ifc-model-viewer--focus-warning |
||||
margin-top: 10px |
||||
margin-right: 5px |
||||
&--toolbar-container, |
||||
&--focus-warning |
||||
margin-top: 10px |
||||
margin-right: 5px |
||||
|
||||
@media only screen and (max-width: 679px) |
||||
.ifc-model-viewer--nav-cube-canvas, |
||||
.ifc-model-viewer--focus-warning |
||||
display: none |
||||
&--nav-cube-canvas, |
||||
&--focus-warning |
||||
@media only screen and (max-width: 679px) |
||||
display: none |
||||
|
@ -1 +1 @@ |
||||
<div class="ifc-model-viewer--tree-panel active"></div> |
||||
<div class="op-ifc-viewer--tree-panel active" data-qa-selector="op-ifc-viewer--tree-panel"></div> |
||||
|
Loading…
Reference in new issue