From 2301a1e3dbb4aaefe84864209dbb9efd0493815f Mon Sep 17 00:00:00 2001
From: "argiro.kokogiannaki"
 <argiro.kokogiannaki@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Mon, 11 Jun 2018 09:31:53 +0000
Subject: [PATCH] Changes in home page

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@52429 d315682c-612b-4755-9ff5-7f18f6832af3
---
 .../src/app/home/home.component.html          | 110 +++++++++---------
 portal-4cli-lib/src/assets/explore-custom.css |   5 +
 2 files changed, 62 insertions(+), 53 deletions(-)

diff --git a/portal-4cli-lib/src/app/home/home.component.html b/portal-4cli-lib/src/app/home/home.component.html
index da0a85ed..e9db3a27 100644
--- a/portal-4cli-lib/src/app/home/home.component.html
+++ b/portal-4cli-lib/src/app/home/home.component.html
@@ -53,30 +53,31 @@
                <div class="uk-width-1-1@m uk-first-column">
                   <div class="uk-margin uk-grid-match uk-child-width-1-1 uk-child-width-1-1@s uk-child-width-1-3@m uk-child-width-1-3@l uk-child-width-1-3@xl uk-grid-parallax uk-grid uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="" uk-grid-parallax="translate: " uk-lightbox="toggle: a[data-type]" style="margin-bottom: 0px;">
                     <!-- Explore -->
-                    <div class="uk-card uk-card-default">
-                      <div class="uk-card-header">
-                        <a routerLinkActive="uk-link" routerLink="/search/find"  class="el-link">
+                    <div  class="uk-margin-bottom">
+                      <div class="uk-card uk-card-default">
+                        <a routerLinkActive="uk-link" routerLink="/search/find"  class="el-link  box-links">
+                          <div class="uk-card-header">
 
-                          <div class="uk-grid-small uk-flex-middle" uk-grid>
-                              <div class="uk-width-auto">
-                                  <img class="uk-border-circle" width="40" height="40" src="assets/explore.svg"   alt="Explore">
-                              </div>
-                              <div class="uk-width-expand">
-                                  <h3 class="uk-card-title uk-margin-remove-bottom" style="color: #f25f30 !important">Explore</h3>
-                                  <p class="uk-text-meta uk-margin-remove-top">Discover linked open research</p>
-                              </div>
+                            <div class="uk-grid-small uk-flex-middle" uk-grid>
+                                <div class="uk-width-auto">
+                                    <img class="uk-border-circle" width="40" height="40" src="assets/explore.svg"   alt="Explore">
+                                </div>
+                                <div class="uk-width-expand">
+                                    <h3 class="uk-card-title uk-margin-remove-bottom" style="color: #f25f30 !important">Explore</h3>
+                                    <p class="uk-text-meta uk-margin-remove-top">Discover linked open research</p>
+                                </div>
+                            </div>
                           </div>
                         </a>
-                      </div>
-                      <div class="uk-card-body">
-                          <p>Search for
-                             publications-data-software and other research artefacts. See how these
-                             are linked together and how they are linked to funding and
-                             organizations.</p>
-                             <p>View statistics on projects and institutions.</p>
+                        <div class="uk-card-body">
+                            <p>Search for
+                               publications-data-software and other research artefacts. See how these
+                               are linked together and how they are linked to funding and
+                               organizations.</p>
+                               <p>View statistics on projects and institutions.</p>
+                        </div>
                       </div>
                     </div>
-
                      <!--div class="uk-first-column">
                         <div uk-scrollspy-class="" class="el-item uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" style="">
                            <a routerLinkActive="uk-link" routerLink="/search/find"  class="el-link uk-position-cover uk-position-z-index uk-margin-remove-adjacent" data-caption="&lt;h4 class='uk-margin-remove'&gt;Explore &lt;/h4&gt;&lt;div&gt;Search for publications-data-software and other research artefacts. See how these are linked together and how they are linked to funding and organizations.&lt;/div&gt;
@@ -101,27 +102,28 @@
                      </div-->
 
                      <!-- Share -->
-                     <div class="uk-card uk-card-default">
-                       <div class="uk-card-header">
-                         <a routerLinkActive="uk-link" routerLink="/participate/deposit-publications"  class="el-link ">
+                     <div  class="uk-margin-bottom">
+                       <div class="uk-card uk-card-default">
+                         <a routerLinkActive="uk-link" routerLink="/participate/deposit-publications"  class="el-link  box-links">
+                           <div class="uk-card-header">
 
-                           <div class="uk-grid-small uk-flex-middle" uk-grid>
-                               <div class="uk-width-auto">
-                                   <img class="uk-border-circle" width="40" height="40" src="assets/share.svg"   alt="Share">
-                               </div>
-                               <div class="uk-width-expand">
-                                   <h3 class="uk-card-title uk-margin-remove-bottom" style="color: #22207F !important">Share</h3>
-                                   <p class="uk-text-meta uk-margin-remove-top">Deposit in a repository of your choice</p>
-                               </div>
+                             <div class="uk-grid-small uk-flex-middle" uk-grid>
+                                 <div class="uk-width-auto">
+                                     <img class="uk-border-circle" width="40" height="40" src="assets/share.svg"   alt="Share">
+                                 </div>
+                                 <div class="uk-width-expand">
+                                     <h3 class="uk-card-title uk-margin-remove-bottom" style="color: #22207F !important">Share</h3>
+                                     <p class="uk-text-meta uk-margin-remove-top">Deposit in a repository of your choice</p>
+                                 </div>
+                             </div>
                            </div>
-                          </a>
+                         </a>
+                         <div class="uk-card-body">
+                             <p>Select an OpenAIRE compatible repository (2.0 +) so that your research is linked to your funding information.</p>
+                                <p>Use <a href="http://www.zenodo.org/" target="_blank" rel="noopener">ZENODO</a>, a catch-all repository hosted by CERN to deposit all your research results (publications, data, software, etc.)</p>
+                         </div>
                        </div>
-                       <div class="uk-card-body">
-                           <p>Select an OpenAIRE compatible repository (2.0 +) so that your research is linked to your funding information.</p>
-                              <p>Use <a href="http://www.zenodo.org/" target="_blank" rel="noopener">ZENODO</a>, a catch-all repository hosted by CERN to deposit all your research results (publications, data, software, etc.)</p>
-                       </div>
-                     </div>
-
+                    </div>
                      <!--div>
                         <div uk-scrollspy-class="" class="el-item uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" style="">
                            <a routerLinkActive="uk-link" routerLink="/participate/deposit-publications"  class="el-link uk-position-cover uk-position-z-index uk-margin-remove-adjacent" data-caption="&lt;h4 class='uk-margin-remove'&gt;Share&lt;/h4&gt;&lt;div class=&quot;uk-margin-bottom&quot;&gt;Select an OpenAIRE compatible repository (2.0 +) so that your research is linked to your funding information.&lt;/div&gt;
@@ -141,26 +143,28 @@
                         </div>
                      </div-->
                      <!-- Link -->
-                     <div class="uk-card uk-card-default">
-                       <div class="uk-card-header">
-                         <a routerLinkActive="uk-link" routerLink="/participate/claim"  class="el-link">
+                     <div  class="uk-margin-bottom">
+                       <div class="uk-card uk-card-default">
+                         <a routerLinkActive="uk-link" routerLink="/participate/claim"  class="el-link  box-links">
+                           <div class="uk-card-header">
 
-                           <div class="uk-grid-small uk-flex-middle" uk-grid>
-                               <div class="uk-width-auto">
-                                   <img class="uk-border-circle" width="40" height="40" src="assets/link.svg"   alt="Link">
-                               </div>
-                               <div class="uk-width-expand">
-                                   <h3 class="uk-card-title uk-margin-remove-bottom" style="color: #4687E6 !important">Link</h3>
-                                   <p class="uk-text-meta uk-margin-remove-top">Connect all your research</p>
-                               </div>
+                             <div class="uk-grid-small uk-flex-middle" uk-grid>
+                                 <div class="uk-width-auto">
+                                     <img class="uk-border-circle" width="40" height="40" src="assets/link.svg"   alt="Link">
+                                 </div>
+                                 <div class="uk-width-expand">
+                                     <h3 class="uk-card-title uk-margin-remove-bottom" style="color: #4687E6 !important">Link</h3>
+                                     <p class="uk-text-meta uk-margin-remove-top">Connect all your research</p>
+                                 </div>
+                             </div>
                            </div>
                          </a>
+                         <div class="uk-card-body">
+                             <p>If you can't find your research results in OpenAIRE, don't worry!</p>
+                                <p>Use our <strong>LINK OUT service</strong>, that reaches out to many external sources via APIs, to connect your research results and <em>claim</em> them to your project.</p>
+                         </div>
                        </div>
-                       <div class="uk-card-body">
-                           <p>If you can't find your research results in OpenAIRE, don't worry!</p>
-                              <p>Use our <strong>LINK OUT service</strong>, that reaches out to many external sources via APIs, to connect your research results and <em>claim</em> them to your project.</p>
-                       </div>
-                     </div>
+                    </div>
                      <!--div>
                         <div uk-scrollspy-class="" class="el-item uk-card uk-card-default uk-card-hover uk-scrollspy-inview uk-animation-slide-top-medium" style="">
                            <a  routerLinkActive="uk-link" routerLink="/participate/claim"  class="el-link uk-position-cover uk-position-z-index uk-margin-remove-adjacent" data-caption="&lt;h4 class='uk-margin-remove'&gt;Link&lt;/h4&gt;&lt;div class=&quot;uk-margin-bottom&quot;&gt;If you don't find your research results in OpenAIRE, don't worry!&lt;/div&gt;
diff --git a/portal-4cli-lib/src/assets/explore-custom.css b/portal-4cli-lib/src/assets/explore-custom.css
index 6daed185..a584c9e4 100644
--- a/portal-4cli-lib/src/assets/explore-custom.css
+++ b/portal-4cli-lib/src/assets/explore-custom.css
@@ -65,3 +65,8 @@
   box-sizing: border-box;
   min-height: calc(100vh - 412.767px);
 }
+.box-links .uk-card-header:hover {
+  text-decoration: underline;
+  text-decoration-color: currentcolor;
+  text-decoration-color: #90929D;
+}