[Usage Counts | Trunk]: Mobile changes

src/app/analytics/analytics.component.css

@@ -49,6 +49,17 @@
   font-weight: 600;
 }
 
+@media only screen and (max-width: 980px) {
+  .countries input {
+    font-size: 14px;
+  }
+
+  .countries .search-mobile {
+    padding-bottom: 5px;
+    border-bottom: 2px solid var(--portal-main-color);
+  }
+}
+
 button.search, button.search:hover {
   color: #333333;
   font-weight: 700;

src/app/analytics/analytics.component.html

@@ -12,12 +12,13 @@
       <div class="uk-padding-small uk-padding-remove-vertical">
         <h2 class="uk-margin-medium-bottom portal-color uk-text-bold">Track Countries Usage Activity</h2>
         <div class="uk-container uk-text-bold">
-          <div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-medium-bottom">
+          <div class="uk-flex uk-flex-middle uk-flex-center uk-align-center uk-margin-medium-bottom search-mobile">
-            <div class="uk-width-3-5@m">
+            <div class="uk-width-3-5">
               <form [formGroup]="countryFb" (ngSubmit)="search()">
                 <input #input type="text" class="uk-width-1-1"
                        [class.uk-animation-slide-right-medium]="showSearch && !countryFb.get('country').value"
-                       [class.uk-hidden]="!showSearch || (!showSearch && country)"
+                       [class.uk-hidden@m]="!showSearch"
+                       [class.uk-hidden]="country"
                        placeholder="SEARCH FOR A COUNTRY"
                        (blur)="closeSearch()"
                        aria-label="Number"
@@ -29,9 +30,9 @@
                   </mat-option>
                 </mat-autocomplete>
               </form>
-              <div class="uk-flex uk-flex-left">
+              <div *ngIf="country && !showSearch" class="uk-flex uk-flex-left">
-          <span *ngIf="country && !showSearch" class="uk-flex uk-flex-middle">
+                <span class="uk-flex uk-flex-middle">
-            <span (click)="toggle()">{{country}}</span>
+                  <span>{{country}}</span>
                   <span class="uk-icon clickable space" uk-icon="icon: close; ratio: 0.8" (click)="reset()">
                     <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close"><path
                         fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>
@@ -41,28 +42,29 @@
                 </span>
               </div>
             </div>
-            <button [disabled]="loading" class="uk-width-1-6@m uk-margin-medium-left uk-visible@m search"
+            <button [disabled]="loading" class="search uk-margin-medium-left uk-visible@m"
                     (mousedown)="$event.preventDefault()" (click)="toggle()">
               <img src="assets/usage-statistics-assets/analytics/search.svg">
               <span class="uk-text-uppercase space">search</span>
             </button>
-            <button [disabled]="loading" class="uk-width-1-5 uk-margin-small-left uk-hidden@m search"
+            <button [disabled]="loading" class="search uk-hidden@m"
-                    (mousedown)="$event.preventDefault()" (click)="toggle()">
+                    (mousedown)="$event.preventDefault()" (click)="search(false)">
               <img src="assets/usage-statistics-assets/analytics/search.svg">
+              <span class="uk-text-uppercase space">search</span>
             </button>
           </div>
           <div class="uk-margin-medium-bottom">
             <div class="uk-text-uppercase">{{(country) ? country : 'worldwide'}}</div>
             <div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
           </div>
-          <div class="uk-width-2-3 uk-margin-auto-left uk-margin-auto-right">
+          <div class="uk-width-2-3 uk-margin-large-bottom uk-margin-auto-left uk-margin-auto-right">
             <div *ngIf="loading" class="uk-animation-fade uk-margin-medium-top  uk-width-1-1" role="alert">
               <span class="loading-gif  uk-align-center"></span>
             </div>
             <div *ngIf="display && !loading" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s"
                  uk-grid>
               <div *ngIf="display.total_repos && state > 0" [class.uk-animation-fade]="state == 1">
-                <div class="card">
+                <div class="card uk-margin-bottom">
                   <div class="uk-margin-medium-bottom">
                     Repositories
                   </div>
@@ -73,7 +75,7 @@
                 </div>
               </div>
               <div *ngIf="display.repositories && state > 0" [class.uk-animation-fade]="state == 1">
-                <div class="card">
+                <div class="card uk-margin-bottom">
                   <div class="uk-margin-medium-bottom">
                     Repositories
                   </div>
@@ -84,7 +86,7 @@
                 </div>
               </div>
               <div *ngIf="display.total_views && state > 1" [class.uk-animation-fade]="state == 2">
-                <div class="card">
+                <div class="card uk-margin-bottom">
                   <div class="uk-margin-medium-bottom">
                     Views
                   </div>
@@ -95,7 +97,7 @@
                 </div>
               </div>
               <div *ngIf="display.views && state > 1" [class.uk-animation-fade]="state == 2">
-                <div class="card">
+                <div class="card uk-margin-bottom">
                   <div class="uk-margin-medium-bottom">
                     Views
                   </div>
@@ -106,7 +108,7 @@
                 </div>
               </div>
               <div *ngIf="display.total_downloads && state > 2" [class.uk-animation-fade]="state == 3">
-                <div class="card">
+                <div class="card uk-margin-bottom">
                   <div class="uk-margin-medium-bottom">
                     Downloads
                   </div>
@@ -117,7 +119,7 @@
                 </div>
               </div>
               <div *ngIf="display.downloads && state > 2" [class.uk-animation-fade]="state == 3">
-                <div class="card">
+                <div class="card uk-margin-bottom">
                   <div class="uk-margin-medium-bottom">
                     Downloads
                   </div>

src/app/home/home.component.css

@@ -8,6 +8,42 @@
   }
 }
 
+.third .first-column {
+  position: relative;
+  background-image: url("/assets/usage-statistics-assets/home/3.1.svg"), url("/assets/usage-statistics-assets/home/3.2.svg");
+  background-repeat: no-repeat;
+  background-size: contain, auto;
+  background-position: top left, bottom center;
+  padding: 60px 0 40px 50px;
+  font-size: 14px;
+}
+
+.third .first-column .learn-more {
+  padding-right: 50px;
+}
+
+.third .second-column {
+  background-image: url("/assets/usage-statistics-assets/home/3.4.svg"), url("/assets/usage-statistics-assets/home/3.5.svg");
+  background-repeat: no-repeat;
+  background-size: auto, contain;
+  background-position: top center, bottom right;
+  font-size: 14px;
+  padding: 40px 40px 60px 40px;
+}
+
+@media only screen and (max-width: 959px)  {
+  .third .first-column {
+    background-size: contain, 100% 15%;
+  }
+
+  .third .second-column {
+    background-image: url("/assets/usage-statistics-assets/home/3.5.svg");
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: bottom right;
+  }
+}
+
 @media only screen and (min-width: 960px) {
   .second {
     background-image: url("/assets/usage-statistics-assets/home/2.svg");
@@ -17,16 +53,6 @@
     padding-top: 50px;
   }
 
-  .third .first-column {
-    background-image: url("/assets/usage-statistics-assets/home/3.1.svg"), url("/assets/usage-statistics-assets/home/3.2.svg");
-    background-repeat: no-repeat;
-    background-size: contain, auto;
-    background-position: top left, bottom center;
-    font-size: 14px;
-    padding: 60px 0 40px 50px;
-    position: relative;
-  }
-
   .third {
     background-image: url("/assets/usage-statistics-assets/home/3.3.svg");
     background-repeat: no-repeat;
@@ -35,13 +61,7 @@
   }
 
   .third .second-column {
-    background-image: url("/assets/usage-statistics-assets/home/3.4.svg"), url("/assets/usage-statistics-assets/home/3.5.svg");
-    background-repeat: no-repeat;
-    background-size: auto, contain;
-    background-position: top center, bottom right;
-    font-size: 14px;
     margin-top: 100px;
-    padding: 40px 40px 40px 40px;
   }
 
   .third .third-column {

src/app/home/home.component.html

@@ -1,11 +1,14 @@
 <ng-template #first let-small="small">
   <div class="uk-container uk-section first">
     <div class="uk-grid uk-flex uk-flex-top" uk-grid>
+      <div class="uk-hidden@m uk-flex uk-flex-center uk-width-1-1 uk-margin-medium-bottom">
+        <img src="assets/usage-statistics-assets/home/1-static.svg"/>
+      </div>
       <div class="uk-width-3-5@m">
         <h1><span class="portal-color uk-text-bold">UsageCounts Service</span><br>
           by OpenAIRE</h1>
         <div [class.uk-margin-xlarge-right]="!small">
-          <div class="uk-margin-medium-top uk-margin-medium-bottom">
+          <div class="uk-margin-medium-bottom">
             UsageCounts service collects usage data from Open Science content providers repositories, journals, and
             other scientific data sources. Then, it aggregates them, delivering standardized activity reports about
             research usage and uptake. It complements existing citation mechanisms and assists institutional repository
@@ -14,14 +17,11 @@
           </div>
           <a routerLink="/about" class="uk-button uk-button-primary">Learn More</a>
         </div>
-        <div class="uk-hidden@m uk-flex uk-flex-center uk-width-1-1 uk-margin-medium-top">
-          <img src="assets/usage-statistics-assets/home/1-static.svg"/>
-        </div>
       </div>
     </div>
   </div>
 </ng-template>
-<ng-template #second>
+<ng-template #second let-small="small">
   <div class="second uk-container uk-container-large">
     <div class="uk-container">
       <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
@@ -41,7 +41,7 @@
           </p>
         </div>
       </div>
-      <div class="uk-grid uk-child-width-1-2@m uk-margin-top uk-padding" uk-grid uk-height-match="target: li">
+      <div [class.uk-padding]="!small" class="uk-grid uk-child-width-1-2@m uk-margin-top" uk-grid uk-height-match="target: li">
         <div>
           <h4 class="uk-text-bold">Providers</h4>
           <ul class="light-blue-triangle uk-margin-top">
@@ -66,7 +66,7 @@
 <ng-template #third>
   <div class="uk-container uk-container-large third">
     <div class="uk-grid uk-child-width-1-3@m" uk-grid>
-      <div class="uk-flex-last@m ">
+      <div class="uk-flex-last@m" >
         <div class="third-column">
           <h2 class="portal-color uk-text-bold">Who and why is it for?</h2>
           <div>
@@ -78,12 +78,12 @@
         <div class="first-column">
           <h5 class="uk-text-primary">For Open Science repository managers and Publishers</h5>
           <div class="uk-margin-top">
-            Perform the prerequisites -register your content in OpenAIRE
+            Perform the prerequisites - register your content in OpenAIRE
             <a href="http://provide.openaire.eu" target="_blank">PROVIDE</a>,
             then share usage activity from your repository - and receive standardized statistics from aggregated usage
             data from sources around the world.
           </div>
-          <div class="uk-margin-medium-top uk-text-center">
+          <div class="uk-margin-medium-top uk-text-center learn-more">
             <a class="uk-button uk-button-primary" routerLink="/resources">Learn More</a>
           </div>
         </div>
@@ -145,17 +145,20 @@
     <ng-container *ngTemplateOutlet="fourth"></ng-container>
   </slide>
 </fp-slider>
-<div class="uk-hidden@l uk-margin-left uk-margin-right">
+<div class="uk-hidden@l">
-  <div class="uk-section">
+  <div class="uk-section uk-margin-left uk-margin-right">
     <ng-container *ngTemplateOutlet="first; context: {small: true}"></ng-container>
   </div>
-  <div class="uk-section">
+  <hr>
-    <ng-container *ngTemplateOutlet="second"></ng-container>
+  <div class="uk-section uk-margin-left uk-margin-right">
+    <ng-container *ngTemplateOutlet="second; context: {small: true}"></ng-container>
   </div>
+  <hr>
   <div class="uk-section">
     <ng-container *ngTemplateOutlet="third"></ng-container>
   </div>
-  <div class="uk-section">
+  <hr>
+  <div class="uk-section uk-margin-left uk-margin-right">
     <ng-container *ngTemplateOutlet="fourth"></ng-container>
   </div>
 </div>

src/styles.css

@@ -103,6 +103,7 @@ ul.light-blue-circle li:before {
 
 ul.light-blue-triangle {
   list-style: none;
+  padding-left: 40px;
 }
 
 ul.light-blue-triangle li {
@@ -133,12 +134,6 @@ ul.portal-circle {
   padding-left: 40px;
 }
 
-@media only screen and (max-width: 959px) {
-  ul.portal-circle {
-    padding-left: 20px;
-  }
-}
-
 ul.portal-circle li {
   margin: 0 0 20px 0;
   position: relative;
@@ -242,3 +237,21 @@ contact .uk-text-danger {
 navbar .uk-navbar-nav>li:hover>a, navbar.uk-navbar-nav>li>a.uk-open, navbar .uk-navbar-nav>li>a:focus, navbar .uk-navbar-nav>li.uk-active>a {
   color: var(--portal-main-color);
 }
+
+.uk-hr, hr {
+  border-color: #dedede;
+}
+
+@media only screen and (max-width: 959px) {
+  ul.portal-circle {
+    padding-left: 20px;
+  }
+
+  ul.light-blue-triangle li {
+    margin: 0 0 20px 0;
+  }
+
+  ul.light-blue-circle.large li {
+    margin: 0 0 20px 0;
+  }
+}