From b7a5cf34ab9696269a563a0312f7abf3b1ff52c3 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Wed, 14 Sep 2022 09:26:57 +0300
Subject: [PATCH] Fix flickering for linking basket

---
 claims/linking/linkingGeneric.component.html | 183 +++++++++----------
 1 file changed, 91 insertions(+), 92 deletions(-)

diff --git a/claims/linking/linkingGeneric.component.html b/claims/linking/linkingGeneric.component.html
index f3d8f825..a5a7062d 100644
--- a/claims/linking/linkingGeneric.component.html
+++ b/claims/linking/linkingGeneric.component.html
@@ -35,8 +35,7 @@
       <div [class]="((showOptions.show == 'claim')?'':' uk-margin-top ')+' uk-container uk-container-large '">
         <div *ngIf="properties" class="uk-section uk-padding-remove-top">
           <div [class]="((showOptions.show == 'claim')?'':' uk-margin-top ')+' uk-container uk-container-large '">
-            <div id="basketStickTop"></div>
-            <div class="uk-grid basketContainer" *ngIf="showOptions.show!='claim'">
+            <div class="uk-grid basketContainer" *ngIf="showOptions.show!='claim'" uk-grid>
               <div class="uk-width-2-3 uk-position-z-index">
                 <div *ngIf="showOptions.show=='source'">
                   <claim-result-search-form [selectedResults]="sources" [properties]=properties
@@ -66,113 +65,113 @@
               </div>
               <!-- Basket-->
               <div *ngIf="showOptions.show != 'claim'" class="uk-width-1-3">
-                <div id="basket" uk-sticky=" offset: 220; top:#basketStickTop; bottom: #basketStickBottom; media: @m"
-                     class="uk-card uk-card-default linkingBasket" style="z-index: 0!important;">
-                  <div class="uk-card-body uk-padding-small">
-                    <div class="uk-margin-right">
-                      <ul class="uk-tab" uk-tab>
-                        <li [class.uk-active]="showOptions.basketShowSources"
-                            (click)="showOptions.basketswitchToSources()">
-                          <a>
-                            Sources to link ({{(sources.length + (inlineEntity ? 1 : 0)) |number}})
-                          </a>
-                        </li>
-                        <li [class.uk-disabled]="sources.length == 0 && !inlineEntity"
-                            [class.uk-active]="showOptions.basketShowLinksTo">
-                          <a (click)="showOptions.basketswitchToLinkTo()">Link to <span
-                              *ngIf="results.length> 0">({{(results.length)  | number}})</span>
-                          </a>
-                        </li>
-                      </ul>
-                      <div *ngIf="showOptions.basketShowSources">
-                        <div class="uk-height-medium  uk-overflow-auto">
-                          <div *ngIf="showOptions.show == 'source'" class="uk-padding-small uk-padding-remove-horizontal" style="min-height:17px;">
-                            <start-over *ngIf="showOptions.show == 'source' && sources.length> 0"
-                                        [results]="sources"
-                                        [localStoragePrefix]="localStoragePrefix+'sources'"
-                                        message="all sources" class="uk-float-right"></start-over>
-                            <bulk-claim *ngIf="showOptions.show == 'source'" [results]="sources"
-                                        [properties]=properties
-                                        [localStoragePrefix]="localStoragePrefix+'sources'" [basketLimit]="basketLimit"
-                            >
-                            </bulk-claim>
+                <div id="basket" uk-sticky="offset: 220; bottom: !*; media: @m" style="z-index: 0!important;">
+                  <div class="uk-card uk-card-default linkingBasket">
+                    <div class="uk-card-body uk-padding-small">
+                      <div class="uk-margin-right">
+                        <ul class="uk-tab" uk-tab>
+                          <li [class.uk-active]="showOptions.basketShowSources"
+                              (click)="showOptions.basketswitchToSources()">
+                            <a>
+                              Sources to link ({{(sources.length + (inlineEntity ? 1 : 0)) |number}})
+                            </a>
+                          </li>
+                          <li [class.uk-disabled]="sources.length == 0 && !inlineEntity"
+                              [class.uk-active]="showOptions.basketShowLinksTo">
+                            <a (click)="showOptions.basketswitchToLinkTo()">Link to <span
+                                *ngIf="results.length> 0">({{(results.length)  | number}})</span>
+                            </a>
+                          </li>
+                        </ul>
+                        <div *ngIf="showOptions.basketShowSources">
+                          <div class="uk-height-medium  uk-overflow-auto">
+                            <div *ngIf="showOptions.show == 'source'" class="uk-padding-small uk-padding-remove-horizontal" style="min-height:17px;">
+                              <start-over *ngIf="showOptions.show == 'source' && sources.length> 0"
+                                          [results]="sources"
+                                          [localStoragePrefix]="localStoragePrefix+'sources'"
+                                          message="all sources" class="uk-float-right"></start-over>
+                              <bulk-claim *ngIf="showOptions.show == 'source'" [results]="sources"
+                                          [properties]=properties
+                                          [localStoragePrefix]="localStoragePrefix+'sources'" [basketLimit]="basketLimit"
+                              >
+                              </bulk-claim>
 
-                          </div>
-                          <div class="uk-padding-small uk-padding-remove-horizontal">
-                            <div *ngIf="sources.length == 0 && !inlineEntity " class="uk-text-center uk-text-meta">
-                              No Sources added yet. Start adding sources from the left panel. Or upload a DOI's CSV file.
                             </div>
-                            <div *ngIf="sources.length >= basketLimit " class="uk-alert uk-alert-warning uk-text-center">
-                              Basket reached the size limit. No more sources can be added.
+                            <div class="uk-padding-small uk-padding-remove-horizontal">
+                              <div *ngIf="sources.length == 0 && !inlineEntity " class="uk-text-center uk-text-meta">
+                                No Sources added yet. Start adding sources from the left panel. Or upload a DOI's CSV file.
+                              </div>
+                              <div *ngIf="sources.length >= basketLimit " class="uk-alert uk-alert-warning uk-text-center">
+                                Basket reached the size limit. No more sources can be added.
+                              </div>
+                              <claim-selected-results *ngIf="inlineEntity" [results]="[inlineEntity]"
+                                                      [localStoragePrefix]="localStoragePrefix+'sources'" class=""
+                                                      [enableRemove]="false" type="source">
+                              </claim-selected-results>
+                              <claim-selected-results *ngIf="sources.length > 0" [results]="sources"
+                                                      [localStoragePrefix]="localStoragePrefix+'sources'" class=""
+                                                      [enableRemove]="true" type="source">
+                              </claim-selected-results>
                             </div>
-                            <claim-selected-results *ngIf="inlineEntity" [results]="[inlineEntity]"
-                                                    [localStoragePrefix]="localStoragePrefix+'sources'" class=""
-                                                    [enableRemove]="false" type="source">
-                            </claim-selected-results>
-                            <claim-selected-results *ngIf="sources.length > 0" [results]="sources"
-                                                    [localStoragePrefix]="localStoragePrefix+'sources'" class=""
-                                                    [enableRemove]="true" type="source">
-                            </claim-selected-results>
                           </div>
                         </div>
-                      </div>
-                      <div *ngIf="showOptions.basketShowLinksTo">
-                        <div class="uk-height-medium uk-overflow-auto">
-                          <div *ngIf="(results.length)> 0 || showOptions.show=='result'" class="uk-padding-small uk-padding-remove-horizontal" style="min-height: 17px;">
-                            <start-over *ngIf="  (results.length)> 0"
-                                        [results]="results" [localStoragePrefix]="localStoragePrefix+'results'"
-                                        message="all results (projects, communities, research results)"
-                                        class="uk-float-right"></start-over>
-                            <bulk-claim *ngIf="showOptions.show=='result'" [results]="results" [properties]=properties
-                                        [localStoragePrefix]="localStoragePrefix+'results'"
-                                        [basketLimit]="basketLimit"></bulk-claim>
-                          </div>
-                          <div class="uk-padding-small uk-padding-remove-horizontal">
-                            <div *ngIf="results.length >= basketLimit "
-                                 class="uk-alert uk-alert-warning uk-text-center">
-                              Basket reached the size limit. No more entities can be added.
-                            </div>
-                            <claim-selected-results sectionTitle="Selected Results" [results]="results"
-                                                    [localStoragePrefix]="localStoragePrefix+'results'" type="target">
-                            </claim-selected-results>
-                            <div *ngIf="(results.length) == 0 " class="  uk-text-center">
-                              No entities to link with the sources. Start adding entities from the left panel.
+                        <div *ngIf="showOptions.basketShowLinksTo">
+                          <div class="uk-height-medium uk-overflow-auto">
+                            <div *ngIf="(results.length)> 0 || showOptions.show=='result'" class="uk-padding-small uk-padding-remove-horizontal" style="min-height: 17px;">
+                              <start-over *ngIf="  (results.length)> 0"
+                                          [results]="results" [localStoragePrefix]="localStoragePrefix+'results'"
+                                          message="all results (projects, communities, research results)"
+                                          class="uk-float-right"></start-over>
+                              <bulk-claim *ngIf="showOptions.show=='result'" [results]="results" [properties]=properties
+                                          [localStoragePrefix]="localStoragePrefix+'results'"
+                                          [basketLimit]="basketLimit"></bulk-claim>
                             </div>
+                            <div class="uk-padding-small uk-padding-remove-horizontal">
+                              <div *ngIf="results.length >= basketLimit "
+                                   class="uk-alert uk-alert-warning uk-text-center">
+                                Basket reached the size limit. No more entities can be added.
+                              </div>
+                              <claim-selected-results sectionTitle="Selected Results" [results]="results"
+                                                      [localStoragePrefix]="localStoragePrefix+'results'" type="target">
+                              </claim-selected-results>
+                              <div *ngIf="(results.length) == 0 " class="  uk-text-center">
+                                No entities to link with the sources. Start adding entities from the left panel.
+                              </div>
 
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                  <div *ngIf="showOptions.show == 'source'"
-                       class="uk-card-footer uk-flex uk-flex-center clickable"
-                       [class.uk-tile-primary]="sources.length > 0"
-                       [class.uk-background-muted]="sources.length == 0"
-                       [class.uk-disabled]="sources.length == 0"
-                       (click)="stepHasChanged('target')">
-                    <button class="uk-flex uk-flex-middle uk-button uk-button-text"
-                            [class.uk-disabled]="sources.length == 0" [disabled]="sources.length == 0">
-                      <icon name="link" visuallyHidden="link" [flex]="true"></icon>
-                      <div class="uk-width-expand uk-margin-small-left">STEP 2 - LINK SOURCES TO ENTITIES</div>
-                    </button>
+                    <div *ngIf="showOptions.show == 'source'"
+                         class="uk-card-footer uk-flex uk-flex-center clickable"
+                         [class.uk-tile-primary]="sources.length > 0"
+                         [class.uk-background-muted]="sources.length == 0"
+                         [class.uk-disabled]="sources.length == 0"
+                         (click)="stepHasChanged('target')">
+                      <button class="uk-flex uk-flex-middle uk-button uk-button-text"
+                              [class.uk-disabled]="sources.length == 0" [disabled]="sources.length == 0">
+                        <icon name="link" visuallyHidden="link" [flex]="true"></icon>
+                        <div class="uk-width-expand uk-margin-small-left">STEP 2 - LINK SOURCES TO ENTITIES</div>
+                      </button>
 
-                  </div>
-                  <div *ngIf="showOptions.show != 'source'"
-                       class="uk-card-footer uk-flex uk-flex-center clickable"
-                       [class.uk-tile-primary]="results.length > 0"
-                       [class.uk-background-muted]="results.length == 0"
-                       [class.uk-disabled]="results.length == 0" (click)="stepHasChanged('claim')">
-                    <button class="uk-flex uk-flex-middle uk-button uk-button-text"
-                            [class.uk-disabled]="results.length == 0" [disabled]="results.length == 0">
-                      <icon *ngIf="inlineEntity" name="link" visuallyHidden="link" [flex]="true"></icon>
-                      <div class="uk-width-expand uk-margin-small-left">STEP {{inlineEntity ? '2' : '3'}} - FINALISE AND FINISH</div>
-                    </button>
+                    </div>
+                    <div *ngIf="showOptions.show != 'source'"
+                         class="uk-card-footer uk-flex uk-flex-center clickable"
+                         [class.uk-tile-primary]="results.length > 0"
+                         [class.uk-background-muted]="results.length == 0"
+                         [class.uk-disabled]="results.length == 0" (click)="stepHasChanged('claim')">
+                      <button class="uk-flex uk-flex-middle uk-button uk-button-text"
+                              [class.uk-disabled]="results.length == 0" [disabled]="results.length == 0">
+                        <icon *ngIf="inlineEntity" name="link" visuallyHidden="link" [flex]="true"></icon>
+                        <div class="uk-width-expand uk-margin-small-left">STEP {{inlineEntity ? '2' : '3'}} - FINALISE AND FINISH</div>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
               <!--                <helper position="right" styleName=" uk-width-1-5"></helper>-->
             </div>
-            <div id="basketStickBottom"></div>
             <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
                     [texts]="pageContents['bottom']"></helper>
           </div>