Commit 89f4a1cc authored by Florent POITTEVIN's avatar Florent POITTEVIN
Browse files

style: change display of user documentation sidebar opener

parent 9949f86a
......@@ -94,16 +94,20 @@
</button>
</div>
<main class="content mat-typography"
cdkTrapFocus
[dlcmSpinner]="!(isApplicationInitializedObs | async)"
>
<div class="router-outlet-wrapper"
[solidifyFocusFirstElement]="true"
<div class="content-and-sidebar-userguide">
<main class="content mat-typography"
cdkTrapFocus
[dlcmSpinner]="!(isApplicationInitializedObs | async)"
>
<router-outlet></router-outlet>
</div>
</main>
<div class="router-outlet-wrapper"
[solidifyFocusFirstElement]="true"
>
<router-outlet></router-outlet>
</div>
</main>
<dlcm-shared-userguide-sidebar-container></dlcm-shared-userguide-sidebar-container>
</div>
<dlcm-footer-container [updateVersion]="appStatusService.updateAvailable | async"
(updateChange)="appStatusService.reloadApp()"
......@@ -111,5 +115,3 @@
</div>
</div>
<dlcm-shared-userguide-sidebar-container></dlcm-shared-userguide-sidebar-container>
<!--TODO HIDE OPENER ON MOBILE AND ADD BUTTON ON MOBILE HEADER-->
......@@ -84,6 +84,12 @@
}
}
}
.content-and-sidebar-userguide {
display: flex;
overflow: hidden;
flex: 1;
}
}
.header-sticky-bar {
......
......@@ -3,7 +3,7 @@
[matTooltip]="'userguideSidebar.tooltipOpener' | translate"
(click)="openUserGuideSidebar()"
>
<span class="help">{{'userguideSidebar.labelOpener' | translate}}</span>
<mat-icon class="icon-help">help</mat-icon>
</div>
<div *ngIf="isOpenedUserGuideSidebarObs | async"
......
......@@ -8,22 +8,19 @@
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: $primary-color;
color: $white;
cursor: pointer;
transition: background-color 250ms ease-in-out;
&:hover {
background-color: black;
background-color: $primary-color-darker;
}
.help {
transform: rotate(-90deg);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
width: 16px;
.icon-help {
@include icon(18px);
padding: 2px;
}
@include respond-to-smaller-than-breakpoint('md') {
......@@ -32,7 +29,8 @@
}
.user-guide-sidebar {
position: absolute;
position: fixed;
top: 0;
right: 0;
width: 400px;
background: white;
......
......@@ -6,7 +6,16 @@
[matTooltip]="getTooltipButton() | translate"
class="open-button"
>
<mat-icon class="icon">{{isMobile ? "help" : "code"}}</mat-icon>
<ng-template [ngIf]="!isMobile"
[ngIfElse]="mobileButton"
>
<fa-icon icon="code"></fa-icon>
</ng-template>
<ng-template #mobileButton>
<mat-icon class="icon"
>help
</mat-icon>
</ng-template>
</button>
<mat-menu #menu="matMenu"
......
import {environmentLocal} from "@environments/environment.local";
import {DlcmEnvironment} from "./environment.defaults.model";
import {environment as environmentDlcmTest} from "./environment.dlcmtest";
......@@ -24,4 +25,6 @@ export const environment: DlcmEnvironment = {
url: "https://e-research-test.unige.ch/dlcm-test/storagion2/",
linkedTo: "http://dlcm-storagion2:16109/dlcm/archival-storage",
}],
...environmentLocal,
};
......@@ -125,3 +125,10 @@ $breakpoints-media-interval: (
overflow: hidden;
text-overflow: ellipsis;
}
@mixin icon($size) {
font-size: $size;
line-height: $size;
width: $size;
height: $size;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment