Merge pull request #672 from HumanBrainProject/dev_minor_visual_fixes

minor visual fixes

src/ui/atlasLayerSelector/atlasLayerSelector.style.css

@@ -109,7 +109,7 @@
 
 .info-container
 {
-    margin-right:0.25rem;
+    margin-right:-0.5rem;
     margin-top:-0.25rem;
 }
 

src/ui/atlasLayerSelector/atlasLayerSelector.template.html

@@ -38,7 +38,7 @@
                         onClick: getTileTmplClickFnAsCtx(selectParcellationWithName, layer),
                         disabled: !currentTemplateIncludesLayer(layer)
                     }">
-    
+
                     </ng-container>
                 </mat-grid-tile>
 
@@ -52,7 +52,7 @@
                         menuTriggerData: { layerGroupItems: group.parcellations },
                         isDirectory: true
                     }">
-    
+
                     </ng-container>
                 </mat-grid-tile>
             </mat-grid-list>
@@ -107,6 +107,7 @@
             [ngStyle]="{opacity: disabled ? '0.2': '1' }">
 
             <div class="position-relative d-flex flex-column align-items-center">
+                <div class="position-relative">
                 <!-- info icon btn -->
                 <div class="position-absolute top-0 right-0 info-container"
                     [ngClass]="{ 'darktheme': tileSrc.darktheme, 'lighttheme': !tileSrc.darktheme }">
@@ -126,8 +127,9 @@
                 <div *ngIf="isDirectory" class="position-absolute bottom-0 right-0">
                     <i class="fas fa-folder folder-container fa-2x"></i>
                 </div>
+                </div>
             </div>
-            
+
             <!-- text container -->
             <div class="d-flex justify-content-center">
                 <small class="iv-custom-comp text ml-1 mr-1 mt-2 text-break text-center">{{ tileSrc.displayName || tileSrc.name }}</small>
@@ -182,9 +184,9 @@
                     selected: selectedLayersIncludes(layer['@id']),
                     disabled: !currentTemplateIncludesLayer(layer)
                 } ">
-    
+
                 </ng-container>
             </div>
         </div>
     </ng-template>
-</mat-menu>
\ No newline at end of file
+</mat-menu>

src/ui/nehubaContainer/nehubaContainer.style.css

@@ -104,7 +104,7 @@ div#scratch-pad
 
 .side-nav-cover
 {
-  
+
   margin-left: -15px;
   margin-right: -15px;
 
@@ -113,11 +113,11 @@ div#scratch-pad
 
 .feature-card
 {
- 
+
   height: 20em;
   max-height: 20em;
   flex: 0 0 20em;
-  align-items: flex-start; 
+  align-items: flex-start;
 }
 
 .region-populated .feature-card

src/ui/nehubaContainer/nehubaContainer.template.html

@@ -5,7 +5,7 @@
   [iav-viewer-touch-interface-vp-to-data]="iavContainer?.viewportToDatas"
   [iav-viewer-touch-interface-ngviewer]="nehubaViewer?.nehubaViewer?.ngviewer"
   [iav-viewer-touch-interface-nehuba-config]="selectedTemplate?.nehubaConfig">
-  <div 
+  <div
     iav-nehuba-viewer-container
     (iavNehubaViewerContainerViewerLoading)="handleViewerLoadedEvent($event)"
     #iavContainer="iavNehubaViewerContainer">
@@ -132,7 +132,7 @@
       <div class="position-relative d-flex flex-column h-100">
 
         <!-- region search autocomplete  -->
-        
+
         <div class="h-0 w-100 region-text-search-autocomplete-position"
           [@openCloseAnchor]="sideNavSwitch.switchState ? 'open' : 'closed'">
           <ng-container *ngTemplateOutlet="autocompleteTmpl">
@@ -160,7 +160,7 @@
 
     <!-- main-content -->
     <mat-drawer-content class="visible position-relative">
-  
+
       <!-- bottom left overlay -->
       <div class="position-absolute bottom-0 left-0 w-100 d-inline-block pe-none">
         <ng-content select="[ui-nehuba-container-overlay-bottom-left]">
@@ -343,14 +343,15 @@
     <ng-container *ngIf="iavRegion.regionInOtherTemplates$ | async as regionInOtherTemplates">
 
       <ng-template #exploreInOtherTmpl>
-        <mat-list class="action-list sm cursor-default">
-          <mat-list-item *ngFor="let sameRegion of regionInOtherTemplates"
-            (click)="iavRegion.changeView(sameRegion)"
-            [matTooltip]="sameRegion.template.name + (sameRegion.hemisphere ? (' - ' + sameRegion.hemisphere) : '')"
-            mat-ripple>
+        <mat-card *ngFor="let sameRegion of regionInOtherTemplates"
+          class="p-0 border-0 box-shadow-none mt-1 tb-1 cursor-pointer" 
+          (click)="iavRegion.changeView(sameRegion)"
+          [matTooltip]="sameRegion.template.name + (sameRegion.hemisphere ? (' - ' + sameRegion.hemisphere) : '')"
+          mat-ripple>
+          <small>
             {{ sameRegion.template.name + (sameRegion.hemisphere ? (' - ' + sameRegion.hemisphere) : '') }}
-          </mat-list-item>
-        </mat-list>
+          </small>
+        </mat-card>
       </ng-template>
 
       <ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
@@ -362,7 +363,7 @@
         content: exploreInOtherTmpl
       }">
 
-  
+
       </ng-container>
     </ng-container>
 
@@ -464,7 +465,7 @@
       visible: (panelOrder$ | async | reorderPanelIndexPipe : ( hoveredPanelIndices$ | async )) === 3
     }">
     </ng-container>
-    
+
     <!-- mesh loading is still weird -->
     <!-- if the precomputed server does not have the necessary fragment file, then the numberws will not collate -->
     <div *ngIf="false && (perspectiveViewLoading$ | async)" class="loadingIndicator">
@@ -569,7 +570,7 @@
     mat-icon-button
     [attr.aria-label]="ARIA_LABEL_TOGGLE_FRONTAL_OCTANT"
     color="primary">
-  
+
     <!-- octant removal is true -->
     <ng-template [ngIf]="nehubaViewerPerspectiveOctantRemoval$ | async" [ngIfElse]="octantRemovalOffTmpl">
       <i class="fas fa-eye-slash"></i>
@@ -613,7 +614,7 @@
 
     <!-- if additional layers not not being shown -->
     <ng-template #tabTmpl_noAdditionalLayers>
-      
+
       <!-- if region selected > 0 -->
       <ng-template [ngIf]="regionSelected?.length > 0" [ngIfElse]="tabTmpl_nothingSelected">
         <div class="hidden"
@@ -662,10 +663,10 @@
       [style.backgroundColor]="customColor"
       (click)="sideNavMasterSwitch.toggle()"
       [color]="(!customColor && matColor) ? matColor : null">
-      
+
       <span [ngClass]="{'iv-custom-comp  text': !!customColor}">
         <i class="fas" [ngClass]="fontIcon || 'fa-question'"></i>
       </span>
     </button>
   </ng-template>
-</ng-template>
\ No newline at end of file
+</ng-template>