Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Help mode reduce border size

Browse Source
This commit is contained in:
Adina Țeudan 2022-07-28 16:31:37 +03:00
parent 41788c31c9
commit e4cd12c17f
2 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/lib/help-mode/help-mode/help-mode.component.html
View File

@ -1,12 +1,19 @@
<div class="help-mode-border" *ngIf="helpModeService.isHelpModeActive$ | async">
<div class="bottom">
<p class="heading">{{ 'help-mode.bottom-text' | translate }}</p>
<a *ngIf="(helpModeService.helpModeDialogIsOpened$ | async) === false" (click)="helpModeService.openHelpModeDialog()">
<div *ngIf="helpModeService.isHelpModeActive$ | async" class="help-mode-border">
<div class="bottom small-label">
<strong>{{ 'help-mode.bottom-text' | translate }}</strong>
<a (click)="helpModeService.openHelpModeDialog()" *ngIf="(helpModeService.helpModeDialogIsOpened$ | async) === false">
{{ 'help-mode.instructions' | translate }}
</a>
<div class="close">
(esc)
<iqser-circle-button icon="iqser:close" type="help" (click)="helpModeService.deactivateHelpMode()"></iqser-circle-button>
<iqser-circle-button
(click)="helpModeService.deactivateHelpMode()"
[iconSize]="10"
[size]="20"
[type]="'help'"
class="ml-8"
icon="iqser:close"
></iqser-circle-button>
</div>
</div>
</div>

8
src/lib/help-mode/help-mode/help-mode.component.scss
View File

@ -6,7 +6,7 @@
box-sizing: border-box;
height: 100%;
width: 100%;
border-width: 8px 8px 60px 8px;
border-width: 8px 8px 30px 8px;
border-style: solid;
border-color: var(--iqser-helpmode-primary);
z-index: 1000;
@ -16,7 +16,7 @@
.bottom {
position: fixed;
height: 60px;
height: 30px;
width: 95%;
bottom: 0;
display: flex;
@ -36,3 +36,7 @@
}
}
}
.small-label {
opacity: 1;
}