MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 15 Wiki Activity

Home: Fix browse Dashboards sections in mobile

This commit is contained in:
Konstantinos Triantafyllou 2022-12-09 18:19:14 +02:00
parent d3a390802a
commit 9f6409ecf3
5 changed files with 31 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/about/how-it-works.component.ts
View File

@ -38,8 +38,7 @@ import {StakeholderEntities} from "../openaireLibrary/monitor/entities/stakehold
src="assets/monitor-assets/about/hero.svg" loading="lazy">
</div>
<div class="uk-section uk-section-small">
<div class="uk-sticky uk-blur-background uk-visible@l" [attr.uk-sticky]="shouldSticky?'':null"
[attr.offset]="offset">
<div class="uk-sticky uk-blur-background uk-visible@l" [attr.uk-sticky]="shouldSticky?'':null" [attr.offset]="offset">
<div class="uk-container">
<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
<slider-tabs flexPosition="center" customClass="uk-text-large" connect="#tabs-content">
@ -49,14 +48,6 @@ import {StakeholderEntities} from "../openaireLibrary/monitor/entities/stakehold
</div>
</div>
</div>
<div class="uk-sticky uk-blur-background uk-hidden@l" [attr.uk-sticky]="shouldSticky?'':null">
<div class="uk-container">
<slider-tabs flexPosition="center">
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
[tabId]="section"></slider-tab>
</slider-tabs>
</div>
</div>
<ul id="tabs-content" class="uk-switcher uk-margin-large-bottom">
<li>
<you-we [type]="stakeholderEntities.FUNDER" id="funder">
@ -337,14 +328,14 @@ import {StakeholderEntities} from "../openaireLibrary/monitor/entities/stakehold
<div class="uk-section uk-section-large uk-margin-medium-top">
<div class="uk-sticky uk-blur-background" [attr.uk-sticky]="shouldSticky?'':null">
<div class="">
<slider-tabs flexPosition="center" customClass="uk-text-large" connect="#tabs-content">
<slider-tabs flexPosition="center" customClass="uk-text-large" connect="#tabs-content-mobile">
<slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
[tabId]="section"></slider-tab>
</slider-tabs>
</div>
</div>
<div class="uk-container uk-container-large">
<ul id="tabs-content" class="uk-switcher uk-margin-large-bottom">
<ul id="tabs-content-mobile" class="uk-switcher uk-margin-large-bottom">
<li id="funder">
<div class="uk-h1 uk-text-center uk-margin-xlarge-top uk-margin-xlarge-bottom">
Are you a <span class="uk-text-primary">Funder?</span>

1
src/app/app-routing.module.ts
View File

@ -1,7 +1,6 @@
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {OpenaireErrorPageComponent} from './error/errorPage.component';
import {isDevelopmentGuard} from './openaireLibrary/error/isDevelopmentGuard.guard';
const routes: Routes = [
{path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule)},

74
src/app/home/home.component.html
View File

@ -215,12 +215,14 @@
<loading></loading>
</div>
<ng-container *ngIf="!loading">
<ul class="uk-tab" uk-tab>
<li><a>All</a></li>
<li><a>{{stakeholderEntities.FUNDERS | titlecase}}</a></li>
<li><a>{{stakeholderEntities.RIS | titlecase}}</a></li>
<li><a>{{stakeholderEntities.ORGANIZATIONS | titlecase}}</a></li>
</ul>
<div>
<slider-tabs position="horizontal">
<slider-tab [tabId]="'all'" tabTitle="All"></slider-tab>
<slider-tab [tabId]="stakeholderEntities.FUNDERS" tabTitle="{{stakeholderEntities.FUNDERS | titlecase}}"></slider-tab>
<slider-tab [tabId]="stakeholderEntities.RIS" tabTitle="{{stakeholderEntities.RIS | titlecase}}"></slider-tab>
<slider-tab [tabId]="stakeholderEntities.ORGANIZATIONS" tabTitle="{{stakeholderEntities.ORGANIZATIONS | titlecase}}"></slider-tab>
</slider-tabs>
</div>
<ul class="uk-switcher">
<li>
<ng-container *ngTemplateOutlet="sliderTemplate; context: {slides: stakeholdersSlider.stakeholders}"></ng-container>
@ -499,43 +501,43 @@
<div>
<slider-tabs position="horizontal">
<slider-tab [tabId]="'all'" tabTitle="All"></slider-tab>
<slider-tab [tabId]="'{{stakeholderEntities.FUNDERS}}'" tabTitle="{{stakeholderEntities.FUNDERS | titlecase}}"></slider-tab>
<slider-tab [tabId]="'{{stakeholderEntities.RIS}}'" tabTitle="{{stakeholderEntities.RIS | titlecase}}"></slider-tab>
<slider-tab [tabId]="'{{stakeholderEntities.ORGANIZATIONS}}'" tabTitle="{{stakeholderEntities.ORGANIZATIONS | titlecase}}"></slider-tab>
<slider-tab [tabId]="stakeholderEntities.FUNDERS" tabTitle="{{stakeholderEntities.FUNDERS | titlecase}}"></slider-tab>
<slider-tab [tabId]="stakeholderEntities.RIS" tabTitle="{{stakeholderEntities.RIS | titlecase}}"></slider-tab>
<slider-tab [tabId]="stakeholderEntities.ORGANIZATIONS" tabTitle="{{stakeholderEntities.ORGANIZATIONS | titlecase}}"></slider-tab>
</slider-tabs>
</div>
<ul id="tabs-content" class="uk-switcher uk-overflow-hidden">
<li [id]="'all'">
<ul class="uk-switcher uk-margin-top uk-overflow-hidden">
<li [id]="'all'" class="uk-overflow-auto">
<div class="uk-padding-small uk-padding-remove-right" uk-height-match="target: .uk-card; row: false">
<div class="uk-flex uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<div *ngFor="let stakeholder of stakeholders" uk-scrollspy-class>
<div class="uk-grid uk-grid-small uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<div *ngFor="let stakeholder of stakeholders" class="uk-width-4-5 uk-flex-none" uk-scrollspy-class>
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</div>
</div>
</li>
<li [id]="'{{stakeholderEntities.FUNDERS}}'">
<li [id]="stakeholderEntities.FUNDERS" class="uk-overflow-auto">
<div class="uk-padding-small uk-padding-remove-right" uk-height-match="target: .uk-card; row: false">
<div class="uk-flex uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<div *ngFor="let funder of funders" uk-scrollspy-class>
<div class="uk-flex uk-grid uk-grid-small uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<div *ngFor="let funder of funders" class="uk-width-4-5 uk-flex-none" uk-scrollspy-class>
<browse-stakeholder [stakeholder]="funder"></browse-stakeholder>
</div>
</div>
</div>
</li>
<li [id]="'{{stakeholderEntities.RIS}}'">
<li [id]="stakeholderEntities.RIS" class="uk-overflow-auto">
<div class="uk-padding-small uk-padding-remove-right" uk-height-match="target: .uk-card; row: false">
<div class="uk-flex uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<div *ngFor="let ri of ris" uk-scrollspy-class>
<div class="uk-flex uk-grid uk-grid-small uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<div *ngFor="let ri of ris" class="uk-width-4-5 uk-flex-none" uk-scrollspy-class>
<browse-stakeholder [stakeholder]="ri"></browse-stakeholder>
</div>
</div>
</div>
</li>
<li [id]="'{{stakeholderEntities.ORGANIZATIONS}}'">
<li [id]="stakeholderEntities.ORGANIZATIONS" class="uk-overflow-auto">
<div class="uk-padding-small uk-padding-remove-right" uk-height-match="target: .uk-card; row: false">
<div class="uk-flex uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<div *ngFor="let organization of organizations" uk-scrollspy-class>
<div class="uk-flex uk-grid uk-grid-small uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<div *ngFor="let organization of organizations" class="uk-width-4-5 uk-flex-none" uk-scrollspy-class>
<browse-stakeholder [stakeholder]="organization"></browse-stakeholder>
</div>
</div>
@ -543,32 +545,8 @@
</li>
</ul>
</ng-container>
<!-- Slider Template for Tab Content -->
<!-- <ng-template #sliderTemplateMobile let-slides="slides">
<div uk-slider class="uk-slider uk-margin-medium-top">
<ul class="uk-slider-items" uk-height-match="target: .uk-card; row: false">
<li *ngFor="let slide of slides; let i=index" class="">
<div class="uk-padding-small uk-padding-remove-right">
<div class="uk-flex uk-flex-nowrap" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
<ng-container *ngIf="i === 0">
<div *ngFor="let stakeholder of slide" uk-scrollspy-class>
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</ng-container>
<ng-container *ngIf="i !== 0">
<div *ngFor="let stakeholder of slide">
<browse-stakeholder [stakeholder]="stakeholder"></browse-stakeholder>
</div>
</ng-container>
</div>
</div>
</li>
</ul>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin-medium-top"></ul>
</div>
</ng-template> -->
</div>
<div #contact class="uk-section uk-container uk-container-large uk-margin-large-bottom contact-us">
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom contact-us">
<div class="uk-position-relative">
<h2 class="uk-width-1-2 uk-margin-medium-bottom">
Need more information or a demo?
@ -582,4 +560,4 @@
<img class="uk-box-shadow-large contact-image contact-image-right" src="assets/monitor-assets/avatar2.jpg">
</div>
</div>
</div>
</div>

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit b50deff46b84e18496718839e99d065deb9c3884
Subproject commit 437a5fa50d5b87f81621f9e0c9d62aa4ca92b309

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit c68523d4cabbf334dfdd4949985cbc80cdeecd0f
Subproject commit 201ff990c0b2532951a796b10799ab95cb40c0b0