Skip to content

Commit

Permalink
SAV/First UI customization - header, footer, icons (#771)
Browse files Browse the repository at this point in the history
* First ui customization - header, footer, icons

* Fixed linting

* Updated login test following the updated login

* Do not try to close discojuice in the integration tests when it is not used in this instance
  • Loading branch information
milanmajchrak authored Jan 14, 2025
1 parent c90b1cc commit e22ce15
Show file tree
Hide file tree
Showing 24 changed files with 285 additions and 1,223 deletions.
4 changes: 2 additions & 2 deletions cypress/e2e/tombstone.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@ describe('Admin Tombstone Page', () => {
beforeEach(() => {
cy.visit('/login');
// Cancel discojuice login - only if it is popped up
cy.wait(500);
cy.get('.discojuice_close').should('exist').click();
// cy.wait(500);
// cy.get('.discojuice_close').should('exist').click();
// Login as admin
cy.loginViaForm(TEST_ADMIN_USER, TEST_ADMIN_PASSWORD);
cy.visit('/');
Expand Down
4 changes: 2 additions & 2 deletions cypress/support/commands.ts
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,8 @@ Cypress.Commands.add('login', login);
* @param password password to login as
*/
function loginViaForm(email: string, password: string): void {
cy.wait(500);
cy.get('.discojuice_close').should('exist').click();
// cy.wait(500);
// cy.get('.discojuice_close').should('exist').click();
// Enter email
cy.get('ds-log-in [data-test="email"]').type(email);
// Enter password
Expand Down
2 changes: 1 addition & 1 deletion src/app/admin/admin-sidebar/admin-sidebar.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<div class="sidebar-section">
<div href="javascript:void(0);" class="nav-item d-flex flex-row flex-nowrap py-0">
<div class="shortcut-icon navbar-brand logo-wrapper">
<img class="admin-logo" src="assets/images/dspace-logo-mini.svg"
<img class="admin-logo" src="assets/images/sav-navbar-logo.png"
[alt]="('menu.header.image.logo') | translate">
</div>
<div class="sidebar-collapsible navbar-brand">
Expand Down
179 changes: 81 additions & 98 deletions src/app/footer/footer.component.html
Original file line number Diff line number Diff line change
@@ -1,103 +1,86 @@
<footer class="text-lg-start">
<div class="lindat-common2 lindat-common-footer">
<footer data-version="3.0.5" data-build="05eff1186f12528f221a63b021c7b7dc81301429">
<div id="about-lindat">
<h4><a href="https://lindat.cz/sites/default/files/2021-01/lindat_clariah_flyer.pdf">LINDAT/CLARIAH-CZ</a></h4>
<ul>
<li><a href="https://lindat.cz/files/mission-en.pdf">Mission Statement</a></li>
<li><a href="https://lindat.cz/ab">Advisory Board</a></li>
<li><a href="https://lindat.cz/events">Events</a></li>
<li><a href="https://www.clarin.eu/">CLARIN Participation</a></li>
<li><a href="https://www.dariah.eu/">DARIAH Participation</a></li>
<br/>
<li><a href="https://lindat.cz/faq-repository">FAQ</a></li>
<li><a href="mailto:[email protected]">Helpdesk</a></li>
<li><a href="https://lindat.cz/user_feedback">User Feedback Form</a></li>
<br/>
<li><a href="https://ufal.mff.cuni.cz/grants/lindatclariah-cz/en">Hosting Institution</a></li>
<li><a href="https://lindat.cz/acknowledgement">Acknowledge LINDAT/CLARIAH-CZ</a></li>
</ul>
</div>
<div id="about-partners">
<h4><a href="https://lindat.cz/partners">Partners</a></h4>
<ul>
<li>Charles University
<ul>
<li><a href="https://lindat.cz/partners/mff-uk">Faculty <i>of</i> Mathematics <i>and</i> Physics</a></li>
<li><a href="https://lindat.cz/partners/ff-uk">Faculty <i>of</i> Arts</a></li>
</ul>
</li>
<li>Masaryk University
<ul>
<li><a href="https://lindat.cz/partners/ff-mu">Faculty <i>of</i> Arts</a></li>
<li><a href="https://lindat.cz/partners/fi-mu">Faculty <i>of</i> Informatics</a></li>
</ul>
</li>
<li>University of West Bohemia
<ul>
<li><a href="https://lindat.cz/partners/zcu">Faculty <i>of</i> Applied Sciences</a></li>
</ul>
</li>
<li>Terezín
<ul>
<li><a href="https://lindat.cz/partners/iti">Terezín Initiative Institute</a></li>
<li><a href="https://lindat.cz/partners/pt">Terezín Memorial</a></li>
</ul>
</li>
<li>Czech Academy of Sciences
<ul>
<li><a href="https://lindat.cz/partners/ujc">Czech Language Institute</a></li>
<li><a href="https://lindat.cz/partners/knav">Library <i>of</i> Academy</a></li>
<li><a href="https://lindat.cz/partners/hu">Institute <i>of</i> History</a></li>
<li><a href="https://lindat.cz/partners/flu">Institute <i>of</i> Philosophy</a></li>
<li><a href="https://lindat.cz/partners/mua">Masaryk Institute <i>and</i> Archives</a></li>
</ul>
</li>
<li>Archives, Libraries and Galleries
<ul>
<li><a href="https://lindat.cz/partners/nk">National Library <i>of the Czech Republic</i></a></li>
<li><a href="https://lindat.cz/partners/mzk">Moravian Library <i>in Brno</i></a></li>
<li><a href="https://lindat.cz/partners/ng">National Gallery Prague</a></li>
<li><a href="https://lindat.cz/partners/nfa">National Film Archive</a></li>
<li><a href="https://lindat.cz/partners/na">National Archives</a></li>
</ul>
</li>
</ul>
</div>
<div id="about-website">
<h4><a href="https://lindat.cz/services">Services</a></h4>
<ul>
<li><a href="https://lindat.mff.cuni.cz/en/monitoring">Service Status</a></li>
<li><a href="https://lindat.mff.cuni.cz/repository/static/about">About and Policies</a></li>
<li><a href="https://lindat.mff.cuni.cz/en/terms-of-use">Terms of Use</a></li>
</ul>
</div>
<div id="badges-a">
<a href="https://www.clarin.eu/content/certified-centres"><img src="./assets/images/footer/b-centre.png" alt="CLARIN CENTRE B" /></a>
<a href="https://www.clarin.eu/content/knowledge-centres"><img src="./assets/images/footer/k-centre.png" alt="CLARIN CENTRE K" style="filter:brightness(0.88)" /></a>
<a href="https://www.coretrustseal.org/wp-content/uploads/2019/08/LINDAT-CLARIN.pdf"><img src="./assets/images/footer/core-trust-seal-mono.png" alt="CoreTrustSeal Certification" /></a>
</div>
<div id="badges-b">
<a href="https://twitter.com/lindatclariahcz">Follow us on Twitter <img src="./assets/images/footer/twitter-circular.svg" alt="Link to Profile" /></a>
<a href="https://lindat.cz/user/login"><img src="./assets/images/footer/LINDAT-CLARIAH-cz-gray_0.svg" alt="Home Page" /></a>
</div>
<div id="ack-msmt">
THE LINDAT/CLARIAH-CZ PROJECT (LM2018101; formerly LM2010013, LM2015071) IS FULLY SUPPORTED BY THE MINISTRY OF EDUCATION, SPORTS AND YOUTH OF THE CZECH REPUBLIC UNDER THE&#160;PROGRAMME LM OF "LARGE INFRASTRUCTURES"
<div *ngIf="showTopFooter" class="top-footer">
<!-- Grid container -->
<div class=" container p-4">
<!--Grid row-->
<div class="row">

<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
<h5 class="text-uppercase">Footer Content</h5>

<ul class="list-unstyled mb-0">
<li>
<a routerLink="./" class="">Lorem ipsum</a>
</li>
<li>
<a routerLink="./" class="">Ut facilisis</a>
</li>
<li>
<a routerLink="./" class="">Aenean sit</a>
</li>
</ul>
</div>
<!--Grid column-->

<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
<h5 class="text-uppercase">Footer Content</h5>

<ul class="list-unstyled mb-0">
<li>
<a routerLink="./" class="">Suspendisse potenti</a>
</li>
</ul>
</div>
<!--Grid column-->

<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Footer Content</h5>

<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
voluptatem veniam, est atque cumque eum delectus sint!
</p>
</div>
<!--Grid column-->
</div>
<div id="ack-freepik">Icons © Smashicons and Freepik from flaticon.com licensed by <a href="https://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a></div>
<div id="ack-ufal">website © 2024 by <a href="https://ufal.mff.cuni.cz/">ÚFAL</a></div>
<script type="text/javascript">
//<![CDATA[
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
<!--Grid row-->
</div>
</div>
<!-- Grid container -->

// main LINDAT/CLARIAH-CZ tracker
ga('create', 'UA-27008245-2', 'cuni.cz');
ga('send', 'pageview');
//]]>
</script>
</footer>
<!-- Copyright -->
<div class="bottom-footer p-1 d-flex justify-content-center align-items-center text-white">
<div class="content-container">
<p class="m-0">
<a class="text-white"
href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
{{ 'footer.copyright' | translate:{year: dateObj | date:'y'} }}
<a class="text-white"
href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
</p>
<ul class="footer-info list-unstyled small d-flex justify-content-center mb-0">
<li>
<a class="text-white" href="javascript:void(0);"
(click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
</li>
<li *ngIf="showPrivacyPolicy">
<a class="text-white"
routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
</li>
<li *ngIf="showEndUserAgreement">
<a class="text-white"
routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
</li>
<li *ngIf="showSendFeedback$ | async">
<a class="text-white"
routerLink="info/feedback">{{ 'footer.link.feedback' | translate}}</a>
</li>
</ul>
</div>
</div>
<!-- Copyright -->
</footer>
85 changes: 26 additions & 59 deletions src/app/home-page/home-page.component.html
Original file line number Diff line number Diff line change
@@ -1,68 +1,35 @@
<div class="container clarin-shadow remove-padding clarin-home-page-borders clarin-fix-to-navbar clarin-cut-bottom">
<div class="container bg-white">
<div class="row d-none d-md-flex">
<div class="col-md-8 justify-content-center align-self-center pl-3">
<ngb-carousel>
<ng-template ngbSlide *ngFor="let slide of slides">
<div class="wrapper">
<div *ngIf="slide.short === 'LData'">
<img src="assets/images/home-page-glass.png" class="glass-image">
<h3 class="carousel-ldata-info">{{'home-page.carousel.ldata.info' | translate}}</h3>
<h5 class="carousel-ldata-find">{{'home-page.carousel.ldata.find' | translate}}</h5>
<h5 class="carousel-ldata-citation-support">{{'home-page.carousel.ldata.citation-support' | translate}}</h5>
</div>
<div *ngIf="slide.short === 'Free Deposit'">
<h3 class="h5-font carousel-deposit-header">{{'home-page.carousel.deposit.header' | translate}}</h3>
<h5 class="h5-font carousel-deposit-info">{{'home-page.carousel.deposit.info' | translate}}</h5>
<h5 class="h5-font carousel-deposit-find">{{'home-page.carousel.deposit.find' | translate}}</h5>
<h5 class="h5-font carousel-deposit-cite">{{'home-page.carousel.deposit.cite' | translate}}</h5>
</div>
<div *ngIf="slide.short === 'Citation'">
<div class="carousel-deposit-citation">
<blockquote class="h5-font">
<strong>
<i class="fa fa-quote-left fa-2x pull-left">&nbsp;</i>{{'home-page.carousel.deposit.citation' | translate}}</strong>
<small>{{'home-page.carousel.deposit.small' | translate}}</small>
</blockquote>
</div>
</div>
</div>
</ng-template>
</ngb-carousel>
</div>
<div class="col-md-4 d-none d-lg-block">
<div class="row">
<a routerLink="home" class="col-md-7" style="height: 160px; position: relative;">
<img alt="LINDAT/CLARIAH-CZ logo" class="logo" style="position: absolute; height: 50%; top: 0px; bottom: 0px; margin: auto;" src="assets/images/lindat-logo-new-sm.png">
</a>
<a class="col-md-5" style="height: 160px; position: relative;" href="http://www.clarin.eu/">
<img alt="LINDAT/CLARIAH-CZ logo" class="logo" style="position: absolute; height: 50%; top: 0px; bottom: 0px; margin: auto;" src="assets/images/clarin-logo.png">
</a>
</div>
</div>
</div>
</div>
<div class="background-image-container mt-ncs">
<div class="container">
<div class="row hidden-xs lindat-color-line"><img class="w-100" src="assets/images/lindat_color_line.png"></div>
<div class="d-flex flex-wrap">
<!-- <div>-->
<!-- <img alt="" class="img-fluid" [src]="'assets/images/hl1_cs.png'"/>-->
<!-- </div>-->
</div>
</div>
<div class="container clarin-home-page-color pt-4 pb-5">
</div>
<div class="container clarin-shadow remove-padding clarin-home-page-borders clarin-cut-bottom">
<div class="container clarin-home-page-color remove-padding pt-5 pb-5">
<div class="justify-content-between">
<h1 class="library-name">{{ 'home-page.library.name' | translate }}</h1>
<!-- <div>{{ 'home-page.library.description' | translate }}</div>-->
</div>
<div class="row justify-content-center pt-4">
<div class="col-6 d-flex justify-content-center">
<span class="flex-fill input-group-addon">
<i style="color: #7479B8;" class="fas fa-search fa-lg"></i>
</span>
<ds-themed-search-form id="search-form"
class="flex-fill"
[currentUrl]="searchLink"
[inPlaceSearch]="false"
[searchPlaceholder]="'home-page.search' | translate">
</ds-themed-search-form>
</div>
<div class="col-6 d-flex justify-content-center">
<span class="flex-fill input-group-addon">
<i style="color: #7479B8;" class="fas fa-search fa-lg"></i>
</span>
<ds-themed-search-form id="search-form"
class="flex-fill"
[currentUrl]="searchLink"
[inPlaceSearch]="false"
[searchPlaceholder]="'home-page.search' | translate">
</ds-themed-search-form>
</div>
<div class="row justify-content-center pt-3">
</div>
<div class="row justify-content-center pt-3">
<a href="javascript:void(0);" (click)="redirectToSearch('')">{{'home-page.advanced-search' | translate}}</a>
</div>
<div class="row justify-content-center pt-5">
<div class="row justify-content-center pt-5">
<div class="col-md-9 responsive-padding">
<div class="row offset-md-1">
<div class="col-md-4 border-bottom">
Expand Down
4 changes: 4 additions & 0 deletions src/app/home-page/home-page.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,10 @@
}
}

.library-name {
text-align: center;
}

@media (max-width: 768px) {
.responsive-padding {
padding-left: 50px !important;
Expand Down
6 changes: 3 additions & 3 deletions src/app/login-page/login-page.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<div class="text-center mt-5 row justify-content-center">
<div>
<img class="mb-4 login-logo" src="assets/images/dspace-logo.png" alt="{{'repository.image.logo' | translate}}">
<a href="https://www.clarin.eu/">
<img class="clarin-logo" src="assets/images/clarin-logo.svg" alt="Clarin logo" >
</a>
<!-- <a href="https://www.clarin.eu/">-->
<!-- <img class="clarin-logo" src="assets/images/clarin-logo.svg" alt="Clarin logo" >-->
<!-- </a>-->
<h1 class="h3 mb-0 font-weight-normal">{{"login.form.header" | translate}}</h1>
<ds-themed-log-in
[isStandalonePage]="true"></ds-themed-log-in>
Expand Down
6 changes: 3 additions & 3 deletions src/app/logout-page/logout-page.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<div class="text-center mt-5 row justify-content-md-center">
<div class="mx-auto">
<img class="mb-4 login-logo" src="assets/images/dspace-logo.png">
<a href="https://www.clarin.eu/">
<img class="clarin-logo" src="assets/images/clarin-logo.svg" alt="Clarin logo" >
</a>
<!-- <a href="https://www.clarin.eu/">-->
<!-- <img class="clarin-logo" src="assets/images/clarin-logo.svg" alt="Clarin logo" >-->
<!-- </a>-->
<h1 class="h3 mb-0 font-weight-normal">{{"logout.form.header" | translate}}</h1>
<ds-log-out></ds-log-out>
</div>
Expand Down
7 changes: 5 additions & 2 deletions src/app/search-navbar/search-navbar.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,12 @@ input[type="text"] {
top: 0;
border: 0 !important;

color: var(--ds-header-icon-color);
color: white;
&:hover, &:focus {
color: var(--ds-header-icon-color-hover);
background-color: white;
color: var(--lt-zcu-pub-blue);
border-radius: 2px;
transition: background-color 0.2s ease-out;
}
}

Expand Down
9 changes: 6 additions & 3 deletions src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,13 @@
background-color: transparent !important;
}

.loginLink, .dropdownLogin, .logoutLink, .dropdownLogout, dropdown-toggle {
color: var(--ds-header-icon-color);
.loginLink, .dropdownLogin, .logoutLink, .dropdownLogout {
color: white;

&:hover, &:focus {
color: var(--ds-header-icon-color-hover);
background-color: white;
color: var(--lt-zcu-pub-blue);
border-radius: 2px;
transition: background-color 0.2s ease-out;
}
}
7 changes: 5 additions & 2 deletions src/app/shared/lang-switch/lang-switch.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,13 @@
}

.dropdown-toggle {
color: var(--ds-header-icon-color);
color: white;

&:hover, &:focus {
color: var(--ds-header-icon-color-hover);
background-color: white;
color: var(--lt-zcu-pub-blue);
border-radius: 2px;
transition: background-color 0.2s ease-out;
}
}

Expand Down
Loading

0 comments on commit e22ce15

Please sign in to comment.