From e5d8cee12701bd9f541906a9cbc49bbaac248556 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 30 Nov 2020 17:32:50 +0000 Subject: [PATCH] [Usage Counts | Trunk]: Mobile changes --- src/app/analytics/analytics.component.css | 11 +++++ src/app/analytics/analytics.component.html | 48 ++++++++++---------- src/app/home/home.component.css | 52 +++++++++++++++------- src/app/home/home.component.html | 31 +++++++------ src/styles.css | 25 ++++++++--- 5 files changed, 108 insertions(+), 59 deletions(-) diff --git a/src/app/analytics/analytics.component.css b/src/app/analytics/analytics.component.css index a5d0233..fd5f439 100644 --- a/src/app/analytics/analytics.component.css +++ b/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; diff --git a/src/app/analytics/analytics.component.html b/src/app/analytics/analytics.component.html index 0dc813b..58bce2c 100644 --- a/src/app/analytics/analytics.component.html +++ b/src/app/analytics/analytics.component.html @@ -12,12 +12,13 @@

Track Countries Usage Activity

-
-
+
+
-
- - {{country}} - - - - - - +
+ + {{country}} + + + + + +
- -
{{(country) ? country : 'worldwide'}}
Results
-
+
-
+
Repositories
@@ -73,7 +75,7 @@
-
+
Repositories
@@ -84,7 +86,7 @@
-
+
Views
@@ -95,7 +97,7 @@
-
+
Views
@@ -106,7 +108,7 @@
-
+
Downloads
@@ -117,7 +119,7 @@
-
+
Downloads
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css index f8d8341..ab039b5 100644 --- a/src/app/home/home.component.css +++ b/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 { diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 67330e7..5430134 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,11 +1,14 @@
+
+ +

UsageCounts Service
by OpenAIRE

-
+
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 @@
Learn More
-
- -
- +
@@ -41,7 +41,7 @@

-
+

Providers

    @@ -66,7 +66,7 @@
    -
    +

    Who and why is it for?

    @@ -78,12 +78,12 @@
    For Open Science repository managers and Publishers
    - Perform the prerequisites -register your content in OpenAIRE + Perform the prerequisites - register your content in OpenAIRE PROVIDE, then share usage activity from your repository - and receive standardized statistics from aggregated usage data from sources around the world.
    -
    +
    Learn More
    @@ -145,17 +145,20 @@ -
    -
    +
    +
    -
    - +
    +
    +
    +
    -
    +
    +
    diff --git a/src/styles.css b/src/styles.css index 62e1664..37dc4fb 100644 --- a/src/styles.css +++ b/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; + } +}