ui fixes on sidenav and plan/dmp editor to match the production

This commit is contained in:
Sofia Papacharalampous 2024-05-31 16:53:44 +03:00
parent ea7b267460
commit 69cc029438
5 changed files with 296 additions and 292 deletions

View File

@ -21,7 +21,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 270px; width: 260px;
background: #ffffff 0% 0% no-repeat padding-box; background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0px 0px 16px 2px #00000029; box-shadow: 0px 0px 16px 2px #00000029;
border-right-width: 0px; border-right-width: 0px;

View File

@ -76,6 +76,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container-fluid">
<div class="row editor-content"> <div class="row editor-content">
<div style="width: 22em;" class="d-flex flex-column"> <div style="width: 22em;" class="d-flex flex-column">
<div class="stepper-back row"> <div class="stepper-back row">
@ -160,6 +161,7 @@
></app-description-form> ></app-description-form>
</div> </div>
</div> </div>
</div>
</form> </form>
</div> </div>
</div> </div>

View File

@ -77,12 +77,13 @@
</div> </div>
</div> </div>
<div class="container-fluid">
<div class="row"> <div class="row">
<!-- <div class="col-auto dmp-stepper" *ngIf="this.step != 0"> --> <!-- <div class="col-auto dmp-stepper" *ngIf="this.step != 0"> -->
<div *ngIf="this.step != 0" style="width: 22em;" class="d-flex flex-column justify-content-center"> <div *ngIf="this.step != 0" style="width: 22em;" class="d-flex flex-column justify-content-center">
<div class="row stepper-title"> <div class="row stepper-title">
<div class="col-12 pl-0 mb-1"> <div class="col-12 pl-0 mb-1">
<span class="font-weight-bold">{{'DMP-EDITOR.TITLE' | translate}}</span> <span>{{'DMP-EDITOR.TITLE' | translate}}</span>
</div> </div>
</div> </div>
<div class="row stepper-options"> <div class="row stepper-options">
@ -330,4 +331,5 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>

View File

@ -35,7 +35,7 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 10px 20px; padding: 0.5rem 1rem 0.5rem 1.2rem;
text-align: left; text-align: left;
letter-spacing: 0px; letter-spacing: 0px;
color: #000000; color: #000000;

View File

@ -8,14 +8,14 @@
<a class="new-dmp nav-link nav-row" *ngIf="groupMenuRoute.path !== '/contact-support' && groupMenuRoute.path !== '/co-branding' && groupMenuRoute.path !== '/feedback' && groupMenuRoute.path !== '/descriptions'" [routerLink]="[groupMenuRoute.path]" [ngClass]="{'dmp-tour': groupMenuRoute.path == '/plans'}"> <a class="new-dmp nav-link nav-row" *ngIf="groupMenuRoute.path !== '/contact-support' && groupMenuRoute.path !== '/co-branding' && groupMenuRoute.path !== '/feedback' && groupMenuRoute.path !== '/descriptions'" [routerLink]="[groupMenuRoute.path]" [ngClass]="{'dmp-tour': groupMenuRoute.path == '/plans'}">
<i class="material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i> <i class="material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i>
<i *ngIf="groupMenuRoute.path == '/plans'" class="material-symbols-outlined icon-mask">person</i> <i *ngIf="groupMenuRoute.path == '/plans'" class="material-symbols-outlined icon-mask">person</i>
<span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans'}">{{groupMenuRoute.title | translate}}</span> <span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans'}" style="text-wrap: wrap;">{{groupMenuRoute.title | translate}}</span>
</a> </a>
<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/descriptions'" [routerLink]="[groupMenuRoute.path]"> <a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/descriptions'" [routerLink]="[groupMenuRoute.path]">
<span class="mb-2 inner-line"></span> <span class="mb-3 inner-line"></span>
<div class="pl-0 pt-1 pb-1 container-fluid nav-subrow dataset-tour"> <div class="pl-0 pt-1 pb-1 container-fluid nav-subrow dataset-tour">
<i class="material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i> <i class="mb-1 material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i>
<i class="material-symbols-outlined icon-mask">person</i> <i class="mb-1 material-symbols-outlined icon-mask">person</i>
<span class="pl-0">{{groupMenuRoute.title | translate}}</span> <span class="pl-0 mt-1" style="text-wrap: wrap;">{{groupMenuRoute.title | translate}}</span>
</div> </div>
</a> </a>
<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/co-branding'" href="/splash/resources/co-branding.html"> <a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/co-branding'" href="/splash/resources/co-branding.html">