Initial changes

src/app/pages/continentoverview/continent-overview.component.html

@@ -544,10 +544,10 @@
 
                     <div class="pidIndicator">
                       <h3 class="uk-margin-remove">PID</h3>
-                      <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
+                      <div class="uk-grid uk-grid-match uk-child-width-1-2@m uk-child-width-1-2@l uk-child-width-1-1@s">
 
                         <div class="uk-grid-margin">
-                          <div class="md-card chartCard">
+                          <div class="md-card chartCard uk-flex uk-flex-bottom">
                             <div class="md-card-content">
                               <iframe *ngIf="publicationsWithPIDTimeline" width="100%" height="550" [src]="publicationsWithPIDTimeline"></iframe>
                             </div>
@@ -557,6 +557,16 @@
                         <div class="uk-grid-margin">
                           <div class="md-card chartCard">
                             <div class="md-card-content">
+                              <div class="uk-margin-small-top uk-margin-medium-bottom uk-flex uk-flex-right uk-flex-middle">
+                                <label class="uk-margin-right">Filter by: </label>
+                                <select class="md-input" #selectFilterForPIDContent (change)="getContent('publication', selectPublicationsContent.value)" style="width: 230px; display: inline-block">
+                                  <option value="country">Country</option>
+                                  <option value="datasource">Datasource</option>
+                                  <option value="organization">Organization</option>
+                                  <option value="funder">Funder</option>
+                                </select>
+                                <!--<span class="md-input-bar"></span>-->
+                              </div>
                               <iframe *ngIf="publicationsWithPIDByCountryChartURL" width="100%" height="550" [src]="publicationsWithPIDByCountryChartURL"></iframe>
                             </div>
                           </div>

src/assets/css/os-observatory-custom.css

@@ -137,6 +137,12 @@ a:hover, a:focus, a:active {
   color: var(--link-hover-color);
 }
 
+select.md-input {
+  border-radius: 6px;
+  border-width: 1px;
+  background: rgba(0, 0, 0, 0.02);
+}
+
 .mapContainer {
   /*background: #F7F7F7 0% 0% no-repeat padding-box;*/
   /*border: 1px solid #E0E0E0;*/
@@ -494,6 +500,10 @@ div.indicator span {
   padding-top: 15px;
 }
 
+.uk-flex-bottom .md-card-content {
+  width: 100%;
+}
+
 .md-card .md-card-content {
   padding: 20px;
 }