MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

[Monitor Dashboard | Trunk]: Fix bug with number indicators and with subcategory content while is recreated 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@58985 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-06-24 10:13:29 +00:00
parent 5a13ef0a57
commit 03879e7eeb
6 changed files with 89 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
angular.json
View File

@ -76,7 +76,7 @@
"production": { "production": {
"browserTarget": "ng-universal-demo:build:production" "browserTarget": "ng-universal-demo:build:production"
}, },
"production": { "beta": {
"browserTarget": "ng-universal-demo:build:beta" "browserTarget": "ng-universal-demo:build:beta"
} }
} }

85
src/app/topic/indicators.component.html
View File

@ -72,22 +72,22 @@
<div class="md-btn-group"> <div class="md-btn-group">
<button [disabled]="editing" class="md-btn md-btn-mini" (click)="createSection(i, 'number')" <button [disabled]="editing" class="md-btn md-btn-mini" (click)="createSection(i, 'number')"
title="Create a new section"><i title="Create a new section"><i
class="material-icons">add</i></button> class="material-icons">add</i></button>
<!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>--> <!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
<button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini" <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"
[title]="(number.defaultId?'Default sections cannot be deleted':'Delete section')" [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section')"
(click)="deleteSectionOpen(number, i, 'number', 'delete')"><i class="material-icons">clear</i> (click)="deleteSectionOpen(number, i, 'number', 'delete')"><i class="material-icons">clear</i>
</button> </button>
<!-- <ng-container *ngIf="!stakeholder.defaultId">--> <!-- <ng-container *ngIf="!stakeholder.defaultId">-->
<!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"--> <!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"-->
<!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete all related sections')"--> <!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
<!-- (click)="deleteSectionOpen(number, i, 'number', 'delete')"><i class="material-icons">highlight_off</i>--> <!-- (click)="deleteSectionOpen(number, i, 'number', 'delete')"><i class="material-icons">highlight_off</i>-->
<!-- </button>--> <!-- </button>-->
<!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"--> <!-- <button [disabled]="editing || number.defaultId " class="md-btn md-btn-mini"-->
<!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"--> <!-- [title]="(number.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"-->
<!-- (click)="deleteSectionOpen(number, i, 'number', 'disconnect')"><i class="material-icons">link_off</i>--> <!-- (click)="deleteSectionOpen(number, i, 'number', 'disconnect')"><i class="material-icons">link_off</i>-->
<!-- </button>--> <!-- </button>-->
<!-- </ng-container>--> <!-- </ng-container>-->
</div> </div>
</div> </div>
<div *ngIf="grid && numberSections.at(i)" <div *ngIf="grid && numberSections.at(i)"
@ -142,10 +142,10 @@
<hr *ngIf="isAdministrator && !indicator.defaultId" class="uk-nav-divider"> <hr *ngIf="isAdministrator && !indicator.defaultId" class="uk-nav-divider">
<li *ngIf="isAdministrator && !indicator.defaultId && !editing"><a <li *ngIf="isAdministrator && !indicator.defaultId && !editing"><a
(click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete</a> (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete</a>
<!-- <ng-container *ngIf="!stakeholder.defaultId">--> <!-- <ng-container *ngIf="!stakeholder.defaultId">-->
<!-- <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete from all profiles</a>--> <!-- <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'delete');hide(element)">Delete from all profiles</a>-->
<!-- <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'disconnect');hide(element)">Delete and disconnect from all profiles</a>--> <!-- <a (click)="deleteIndicatorOpen(number, indicator._id, 'number', 'disconnect');hide(element)">Delete and disconnect from all profiles</a>-->
<!-- </ng-container>--> <!-- </ng-container>-->
</li> </li>
</ul> </ul>
</div> </div>
@ -222,22 +222,23 @@
<div class="md-btn-group"> <div class="md-btn-group">
<button [disabled]="editing" class="md-btn md-btn-mini" (click)="createSection(i)" <button [disabled]="editing" class="md-btn md-btn-mini" (click)="createSection(i)"
title="Create a new section"><i title="Create a new section"><i
class="material-icons">add</i></button> class="material-icons">add</i></button>
<!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>--> <!--<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>-->
<button [disabled]="editing || chart.defaultId " <button [disabled]="editing || chart.defaultId "
[title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section')" [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section')"
class="md-btn md-btn-mini" (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i class="material-icons">clear</i> class="md-btn md-btn-mini" (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i
class="material-icons">clear</i>
</button> </button>
<!-- <ng-container *ngIf="!stakeholder.defaultId">--> <!-- <ng-container *ngIf="!stakeholder.defaultId">-->
<!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"--> <!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"-->
<!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete all related sections')"--> <!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete all related sections')"-->
<!-- (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i class="material-icons">highlight_off</i>--> <!-- (click)="deleteSectionOpen(chart, i, 'chart', 'delete')"><i class="material-icons">highlight_off</i>-->
<!-- </button>--> <!-- </button>-->
<!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"--> <!-- <button [disabled]="editing || chart.defaultId " class="md-btn md-btn-mini"-->
<!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"--> <!-- [title]="(chart.defaultId?'Default sections cannot be deleted':'Delete section and disconnect related')"-->
<!-- (click)="deleteSectionOpen(chart, i, 'chart', 'disconnect')"><i class="material-icons">link_off</i>--> <!-- (click)="deleteSectionOpen(chart, i, 'chart', 'disconnect')"><i class="material-icons">link_off</i>-->
<!-- </button>--> <!-- </button>-->
<!-- </ng-container>--> <!-- </ng-container>-->
</div> </div>
</div> </div>
<div *ngIf="grid && chartSections.at(i)" <div *ngIf="grid && chartSections.at(i)"
@ -294,7 +295,8 @@
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false" <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"
class="uk-padding-remove-horizontal"> class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li *ngIf="!editing"><a (click)="editChartIndicatorOpen(chart, indicator._id);hide(element)">Edit</a></li> <li *ngIf="!editing"><a (click)="editChartIndicatorOpen(chart, indicator._id);hide(element)">Edit</a>
</li>
<li *ngIf="!editing"><a (click)="toggleIndicatorStatus(chart._id, indicator);hide(element)"> <li *ngIf="!editing"><a (click)="toggleIndicatorStatus(chart._id, indicator);hide(element)">
{{indicator.isActive ? 'Inactive' : 'Active'}}</a> {{indicator.isActive ? 'Inactive' : 'Active'}}</a>
</li> </li>
@ -302,10 +304,11 @@
{{indicator.isPublic ? 'Private' : 'Public'}}</a> {{indicator.isPublic ? 'Private' : 'Public'}}</a>
</li> </li>
<hr *ngIf="!indicator.defaultId " class="uk-nav-divider"> <hr *ngIf="!indicator.defaultId " class="uk-nav-divider">
<li *ngIf="!editing && !indicator.defaultId "><a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)"> <li *ngIf="!editing && !indicator.defaultId "><a
(click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">
Delete</a> Delete</a>
<!-- <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">Delete from all profiles</a>--> <!-- <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'delete');hide(element)">Delete from all profiles</a>-->
<!-- <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'disconnect');hide(element)">Delete and disconnect from all profiles</a>--> <!-- <a (click)="deleteIndicatorOpen(chart, indicator._id, 'chart', 'disconnect');hide(element)">Delete and disconnect from all profiles</a>-->
</li> </li>
</ul> </ul>
</div> </div>
@ -348,7 +351,7 @@
[src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))" [src]="safeUrls.get(indicatorUtils.getFullUrl(stakeholder, indicator.indicatorPaths[0]))"
class="uk-width-1-1 uk-height-medium"></iframe> class="uk-width-1-1 uk-height-medium"></iframe>
<div *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'"> <div *ngIf="indicator.indicatorPaths[0] && indicator.indicatorPaths[0].source === 'image'">
<img class="uk-width-1-1 uk-height-medium" [src]="indicator.indicatorPaths[i].url"> <img class="uk-width-1-1 uk-height-medium" [src]="indicator.indicatorPaths[0].url">
</div> </div>
</div> </div>
</div> </div>
@ -568,9 +571,9 @@
<div *ngIf="indicatorChildrenActionOnDelete == 'delete'" class="uk-text-bold"> <div *ngIf="indicatorChildrenActionOnDelete == 'delete'" class="uk-text-bold">
Indicators of all profiles based on this default indicator, will be deleted as well. Indicators of all profiles based on this default indicator, will be deleted as well.
</div> </div>
<!-- <span *ngIf="indicatorChildrenActionOnDelete == 'disconnect'" class="uk-text-bold">--> <!-- <span *ngIf="indicatorChildrenActionOnDelete == 'disconnect'" class="uk-text-bold">-->
<!-- Indicators of all profiles based on this default indicator, will not be marked as copied from default anymore.--> <!-- Indicators of all profiles based on this default indicator, will not be marked as copied from default anymore.-->
<!-- </span>--> <!-- </span>-->
Are you sure you want to proceed? Are you sure you want to proceed?
</modal-alert> </modal-alert>
<!--<modal-alert #deleteAllModal (alertOutput)="deleteIndicator('delete')">--> <!--<modal-alert #deleteAllModal (alertOutput)="deleteIndicator('delete')">-->
@ -590,9 +593,9 @@
<div *ngIf="sectionChildrenActionOnDelete == 'delete'" class="uk-text-bold"> <div *ngIf="sectionChildrenActionOnDelete == 'delete'" class="uk-text-bold">
Sections of all profiles based on this default section and their contents, will be deleted as well. Sections of all profiles based on this default section and their contents, will be deleted as well.
</div> </div>
<!-- <span *ngIf="sectionChildrenActionOnDelete == 'disconnect'" class="uk-text-bold">--> <!-- <span *ngIf="sectionChildrenActionOnDelete == 'disconnect'" class="uk-text-bold">-->
<!-- Sections of all profiles based on this default section and their contents, will not be marked as copied from default anymore.--> <!-- Sections of all profiles based on this default section and their contents, will not be marked as copied from default anymore.-->
<!-- </span>--> <!-- </span>-->
Are you sure you want to proceed? Are you sure you want to proceed?
</modal-alert> </modal-alert>
<!--<modal-alert #deleteNumberSectionModal (alertOutput)="deleteSection('number')">--> <!--<modal-alert #deleteNumberSectionModal (alertOutput)="deleteSection('number')">-->

43
src/app/topic/indicators.component.ts
View File

@ -41,7 +41,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
public categoryIndex: number = 0; public categoryIndex: number = 0;
@Input() @Input()
public subcategoryIndex: number = 0; public subcategoryIndex: number = 0;
@Input()
public stakeholder: Stakeholder = null; public stakeholder: Stakeholder = null;
public user = null; public user = null;
public preview: string; public preview: string;
@ -106,8 +105,15 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.userManagementService.getUserInfo().subscribe(user => { this.userManagementService.getUserInfo().subscribe(user => {
this.user = user; this.user = user;
}); });
this.buildFilters(); this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
this.buildSections(); this.stakeholder = stakeholder;
if(this.stakeholder) {
this.buildFilters();
this.buildSections();
this.filterCharts();
this.filterNumbers();
}
});
} }
ngOnDestroy(): void { ngOnDestroy(): void {
@ -133,11 +139,17 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.filterCharts(); this.filterCharts();
this.filterNumbers(); this.filterNumbers();
} }
this.preview = '/' + this.stakeholder.alias + '/' + this.stakeholder.topics[this.topicIndex].alias; this.setPreview();
if(this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]) { }
this.preview += '/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].alias;
if(this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]) { setPreview() {
this.preview += '/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].alias; if(this.stakeholder && this.stakeholder.topics[this.topicIndex]) {
this.preview = '/' + this.stakeholder.alias + '/' + this.stakeholder.topics[this.topicIndex].alias;
if (this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex]) {
this.preview += '/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].alias;
if (this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex]) {
this.preview += '/' + this.stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subcategoryIndex].alias;
}
} }
} }
} }
@ -264,7 +276,6 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.filterByKeyword(HelperFunctions.copy(this.numbers), this.filters.value.keyword), this.filterByKeyword(HelperFunctions.copy(this.numbers), this.filters.value.keyword),
this.filters.value.status), this.filters.value.status),
this.filters.value.privacy); this.filters.value.privacy);
console.log(this.numbers);
this.buildSections(); this.buildSections();
} }
@ -519,7 +530,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.indicator = HelperFunctions.copy(this.section.indicators[this.index]); this.indicator = HelperFunctions.copy(this.section.indicators[this.index]);
this.numberIndicatorFb = this.fb.group({ this.numberIndicatorFb = this.fb.group({
_id: this.fb.control(this.indicator._id), _id: this.fb.control(this.indicator._id),
name: this.fb.control(this.indicator.name), name: this.fb.control(this.indicator.name, Validators.required),
description: this.fb.control(this.indicator.description), description: this.fb.control(this.indicator.description),
isPublic: this.fb.control(this.indicator.isPublic), isPublic: this.fb.control(this.indicator.isPublic),
isActive: this.fb.control(this.indicator.isActive), isActive: this.fb.control(this.indicator.isActive),
@ -535,7 +546,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.indicator = new Indicator('', '', 'number', 'small', true, true, []); this.indicator = new Indicator('', '', 'number', 'small', true, true, []);
this.numberIndicatorFb = this.fb.group({ this.numberIndicatorFb = this.fb.group({
_id: this.fb.control(this.indicator._id), _id: this.fb.control(this.indicator._id),
name: this.fb.control(this.indicator.name), name: this.fb.control(this.indicator.name, Validators.required),
description: this.fb.control(this.indicator.description), description: this.fb.control(this.indicator.description),
isPublic: this.fb.control(this.indicator.isPublic), isPublic: this.fb.control(this.indicator.isPublic),
isActive: this.fb.control(this.indicator.isActive), isActive: this.fb.control(this.indicator.isActive),
@ -619,6 +630,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
this.section = this.charts.find(section => section._id === this.section._id); this.section = this.charts.find(section => section._id === this.section._id);
} else { } else {
this.indicator = this.numberIndicatorFb.value; this.indicator = this.numberIndicatorFb.value;
this.section = this.numbers.find(section => section._id === this.section._id);
} }
let path = [ let path = [
this.stakeholder._id, this.stakeholder._id,
@ -633,8 +645,13 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
} else { } else {
this.section.indicators.push(indicator); this.section.indicators.push(indicator);
} }
this.filterCharts(); if(this.indicator.type === "chart") {
this.chartIndicatorFb = null; this.filterCharts();
this.chartIndicatorFb = null;
} else {
this.filterNumbers();
this.numberIndicatorFb = null;
}
UIkit.notification('Indicator has been successfully saved', { UIkit.notification('Indicator has been successfully saved', {
status: 'success', status: 'success',
timeout: 3000, timeout: 3000,

1
src/app/topic/topic.component.html
View File

@ -143,7 +143,6 @@
</div> </div>
</aside> </aside>
<indicators *ngIf="stakeholder" [properties]="properties" <indicators *ngIf="stakeholder" [properties]="properties"
[stakeholder]="stakeholder"
[topicIndex]="topicIndex" [topicIndex]="topicIndex"
[categoryIndex]="categoryIndex" [categoryIndex]="categoryIndex"
[subcategoryIndex]="subCategoryIndex"></indicators> [subcategoryIndex]="subCategoryIndex"></indicators>

4
src/app/topic/topic.component.ts
View File

@ -459,6 +459,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
private save(message: string, path: string[], saveElement: any, callback: Function, redirect = false) { private save(message: string, path: string[], saveElement: any, callback: Function, redirect = false) {
this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, saveElement, path).subscribe(saveElement => { this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, saveElement, path).subscribe(saveElement => {
callback(saveElement); callback(saveElement);
this.stakeholderService.setStakeholder(this.stakeholder);
UIkit.notification(message, { UIkit.notification(message, {
status: 'success', status: 'success',
timeout: 3000, timeout: 3000,
@ -481,6 +482,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
private delete(message: string, path: string[], callback: Function, redirect = false) { private delete(message: string, path: string[], callback: Function, redirect = false) {
this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path, this.elementChildrenActionOnDelete).subscribe(() => { this.stakeholderService.deleteElement(this.properties.monitorServiceAPIURL, path, this.elementChildrenActionOnDelete).subscribe(() => {
callback(); callback();
this.stakeholderService.setStakeholder(this.stakeholder);
UIkit.notification(message, { UIkit.notification(message, {
status: 'success', status: 'success',
timeout: 3000, timeout: 3000,
@ -501,6 +503,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
private toggleStatus(element: Topic | Category | SubCategory, path: string[]) { private toggleStatus(element: Topic | Category | SubCategory, path: string[]) {
this.stakeholderService.toggleStatus(this.properties.monitorServiceAPIURL, path).subscribe(isActive => { this.stakeholderService.toggleStatus(this.properties.monitorServiceAPIURL, path).subscribe(isActive => {
element.isActive = isActive; element.isActive = isActive;
this.stakeholderService.setStakeholder(this.stakeholder);
UIkit.notification(StringUtils.capitalize(this.type) + ' has been successfully changed to ' + (isActive ? 'active' : 'inactive'), { UIkit.notification(StringUtils.capitalize(this.type) + ' has been successfully changed to ' + (isActive ? 'active' : 'inactive'), {
status: 'success', status: 'success',
timeout: 3000, timeout: 3000,
@ -518,6 +521,7 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent {
private toggleAccess(element: Topic | Category | SubCategory, path: string[]) { private toggleAccess(element: Topic | Category | SubCategory, path: string[]) {
this.stakeholderService.toggleAccess(this.properties.monitorServiceAPIURL, path).subscribe(isPublic => { this.stakeholderService.toggleAccess(this.properties.monitorServiceAPIURL, path).subscribe(isPublic => {
element.isPublic = isPublic; element.isPublic = isPublic;
this.stakeholderService.setStakeholder(this.stakeholder);
UIkit.notification(StringUtils.capitalize(this.type) + ' has been successfully changed to ' + (isPublic ? 'public' : 'private'), { UIkit.notification(StringUtils.capitalize(this.type) + ' has been successfully changed to ' + (isPublic ? 'public' : 'private'), {
status: 'success', status: 'success',
timeout: 3000, timeout: 3000,

16
src/assets/theme-assets/dashboard-custom.css
View File

@ -436,20 +436,24 @@ body.dashboard {
.dashboard .section:hover .tools .md-btn-group::before { .dashboard .section:hover .tools .md-btn-group::before {
content: ""; content: "";
border-bottom: 23px solid var(--secondary-color); border-bottom: 24px solid var(--secondary-color);
border-left:solid 12px transparent; border-left:solid 12px transparent;
width: 0; width: 0;
margin-left: -1px; position: absolute;
padding-bottom: 2px; top: 0;
bottom: 0;
left: -12px;
} }
.dashboard .section:hover .tools .md-btn-group::after { .dashboard .section:hover .tools .md-btn-group::after {
content: ""; content: "";
border-bottom: 23px solid var(--secondary-color); border-bottom: 24px solid var(--secondary-color);
border-right: solid 12px transparent; border-right: solid 12px transparent;
width: 0; width: 0;
margin-left: -1px; position: absolute;
padding-bottom: 2px; top: 0;
bottom: 0;
right: -11px;
} }
/* New section*/ /* New section*/