landingPages/result/resultLanding.component.html

@@ -454,6 +454,33 @@
 <!--            </div>-->
           </div>
         </div>
+
+
+        <div *ngIf="resultLandingInfo && resultLandingInfo.oaRoutes && !viewAll"
+             class="uk-margin-medium-top uk-padding uk-padding-remove-vertical">
+          <div class="landing-oaroutes-card uk-text-small uk-flex uk-padding-small">
+<!--            <div class="uk-card uk-card-default uk-border uk-box-no-shadow uk-padding-small">-->
+<!--            </div>-->
+
+            <div>
+              <div class="uk-flex uk-flex-top" uk-grid>
+                <div *ngIf="resultLandingInfo.oaRoutes.green" class="uk-flex-nowrap uk-flex uk-flex-middle uk-margin-xsmall-bottom uk-margin-remove-top">
+                  <div class="dot green"></div>
+                  <div class="uk-text-capitalize">Green</div>
+                </div>
+                <div *ngIf="resultLandingInfo.oaRoutes.oaColor" class="uk-flex-nowrap uk-flex uk-flex-middle uk-margin-xsmall-bottom uk-margin-remove-top">
+                  <div class="dot" [ngClass]="resultLandingInfo.oaRoutes.oaColor"></div>
+                  <div class="uk-text-capitalize">{{resultLandingInfo.oaRoutes.oaColor}}</div>
+                </div>
+              </div>
+              <div *ngIf="resultLandingInfo.oaRoutes.isInDiamondJournal" class="uk-flex-nowrap uk-flex uk-flex-middle uk-margin-xsmall-bottom uk-text-truncate">
+                <div class="dot diamond"></div>
+                <div>Published in a Diamond OA journal</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div class="uk-margin-medium-top uk-list uk-list-large uk-padding uk-padding-remove-vertical" [class.uk-list-divider]="!viewAll">
           <!-- EOSC Services-->
           <div *ngIf="resultLandingInfo.eoscSubjects?.length > 0 && properties.adminToolsPortalType == 'eosc'

utils/result-preview/result-preview.component.html

@@ -210,8 +210,52 @@
               </span>
             </entity-actions>
           </div>
+
+          <div *ngIf="result.oaRoutes || result.measure?.bip.length || result.measure?.counts.length"
+            class="metrics uk-text-xsmall uk-width-auto uk-flex uk-flex-middle uk-flex-right uk-text-meta uk-grid uk-grid-small uk-grid-divider"
+               [ngClass]="isMobile ? '' : 'uk-padding-remove-horizontal'">
+          <div *ngIf="result.oaRoutes" class="uk-first-column">
+<!--               class="metrics uk-text-xsmall uk-width-auto uk-flex uk-flex-middle uk-flex-right uk-text-meta">-->
+            <a class="uk-flex uk-flex-middle uk-link-reset">
+              <span class="access-route-badge">
+                <span *ngIf="result.oaRoutes.green" class="dot green"></span>
+                <span *ngIf="result.oaRoutes.oaColor" class="dot" [ngClass]="result.oaRoutes.oaColor"></span>
+                <span *ngIf="result.oaRoutes.isInDiamondJournal" class="dot diamond"></span>
+              </span>
+              <span class="uk-margin-xsmall-left">OA Routes</span>
+            </a>
+            <div uk-drop="pos: top-right" class="uk-drop">
+              <div class="uk-card uk-card-default uk-border uk-box-no-shadow uk-padding-small">
+                <table>
+                  <tr *ngIf="result.oaRoutes.green">
+                    <td>
+                      <span class="dot green"></span>
+                    </td>
+                    <td class="uk-text-capitalize">Green</td>
+                  </tr>
+                  <tr *ngIf="result.oaRoutes.oaColor">
+                    <td>
+                      <span class="dot" [ngClass]="result.oaRoutes.oaColor"></span>
+                    </td>
+                    <td class="uk-text-capitalize">{{result.oaRoutes.oaColor}}</td>
+                  </tr>
+                  <tr *ngIf="result.oaRoutes.isInDiamondJournal">
+                    <td>
+                      <span class="dot diamond"></span>
+                    </td>
+                    <td class="uk-text-capitalize">Published in a Diamond OA journal</td>
+                  </tr>
+                </table>
+<!--                <div class="uk-margin-top uk-flex uk-flex-middle uk-flex-center">-->
+<!--                  <a class="uk-button uk-button-text" target="_blank" href="">Learn more</a>-->
+<!--                </div>-->
+              </div>
+            </div>
+          </div>
+
           <div *ngIf="result.measure?.bip.length || result.measure?.counts.length"
-               class="uk-text-xsmall uk-width-auto metrics uk-flex uk-flex-middle uk-flex-right uk-text-meta">
+               [ngClass]="result.oaRoutes ? '' : 'uk-first-column'" class="uk-flex uk-flex-middle">
+<!--               class="metrics uk-text-xsmall uk-width-auto uk-flex uk-flex-middle uk-flex-right  uk-text-meta">-->
             <ng-container *ngIf="result.measure?.bip.length">
               <a class="uk-flex uk-flex-middle uk-link-reset">
                 <icon customClass="bip-icon-hover" [flex]="true" [ratio]="0.7"
@@ -263,6 +307,8 @@
               </div>
             </ng-container>
           </div>
+          </div>
+
           <div *ngIf="result.hostedBy_collectedFrom?.length || hasActions" class="uk-hidden@m">
             <a class="uk-link-reset uk-flex uk-flex-middle">
               <icon [flex]="true" name="more_vert"></icon>