This is the codeAbility Sharing Platform! Learn more about the codeAbility Sharing Platform.

Skip to content
Snippets Groups Projects
Commit 8456b999 authored by Michael Breu's avatar Michael Breu :speech_balloon:
Browse files

Merge branch 'homepage_improvements' into 'development' 

made home page more responsive and improved design a bit

See merge request sharing/codeability-sharing-platform!41
parents 90839eff bfca5bc9
1 merge request!41made home page more responsive and improved design a bit
Hide whitespace changes
Inline Side-by-side
Showing
with 112 additions and 57 deletions
src/main/webapp/app/home/home.component.html
+ 3
− 3
View file @ 8456b999
<div><!-- just a wrapper -->
<div class="row">
<div class="col-md-12">
<h1 style="padding: 50px 0px 15px 0px;text-align:center" jhiTranslate="home.title">Browse our popular content</h1>
<h1 style="padding: 10px 0px 10px 0px;text-align: center;margin-bottom: 0px;" jhiTranslate="home.title">Browse our popular content</h1>
<!-- <h4 style="margin-bottom: 50px" align="center" jhiTranslate="home.subtitle">An optional subheadline for additional information</h4> -->
<div jhiTranslate="home.teaser" style="width: 80%; margin-left: auto; margin-right: auto;">teaser text </div>
<div jhiTranslate="home.teaser" style="width: 100%; margin-left: auto; margin-right: auto; text-align: center;">teaser text </div>
<div [ngSwitch]="isAuthenticated()">
<div class="alert alert-success" *ngSwitchCase="true">
<span id="home-logged-message" *ngIf="account" jhiTranslate="home.logged.message"
......@@ -11,7 +11,7 @@
</div>
</div>
<div><jhi-teaser-content></jhi-teaser-content></div>
<div><jhi-teaser-content ></jhi-teaser-content></div>
</div>
</div>
......
src/main/webapp/app/teaserContent/teaserContent.component.html
+ 30
− 24
View file @ 8456b999
<table aria-describedby="word clouds">
<colgroup>
<col span="1" style="width: 33%;">
<col span="1" style="width: 33%;">
<col span="1" style="width: 33%;">
</colgroup>
<thead><tr><th style="text-align: center" scope="col">{{'teaser.headings.keywords'|translate}}</th>
<th style="text-align: center" scope="col">{{'teaser.headings.programmingLanguages'|translate}}</th>
<th style="text-align: center" scope="col">{{'teaser.headings.contributors'|translate}}</th>
</tr></thead>
<tbody><tr><td>
<angular-tag-cloud
[data]="keywordCloudData"
[config]="options" (clicked)="onKeywordClick($event)">
</angular-tag-cloud>
</td><td>
<angular-tag-cloud
[data]="programmingLanguageCloudData"
[config]="options" (clicked)="onProgrammingLanguageClick($event)">
<table aria-describedby="word clouds" style="width: 100%;">
<colgroup>
<col span="1" style="width: 33%;">
<col span="1" style="width: 33%;">
<col span="1" style="width: 33%;">
</colgroup>
<thead>
<tr>
<th style="text-align: center" scope="col">{{'teaser.headings.keywords'|translate}}</th>
<th style="text-align: center" scope="col">{{'teaser.headings.programmingLanguages'|translate}}</th>
<th style="text-align: center" scope="col">{{'teaser.headings.contributors'|translate}}</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Keywords">
<angular-tag-cloud [data]="keywordCloudData" [config]="options" (clicked)="onKeywordClick($event)"
[width]="options.width" [height]="options.height">
</angular-tag-cloud>
</td><td>
<angular-tag-cloud
[data]="contributorCloudData"
[config]="options" (clicked)="onContributorClick($event)">
</td>
<td data-th="Programming languages">
<angular-tag-cloud [data]="programmingLanguageCloudData" [config]="options"
(clicked)="onProgrammingLanguageClick($event)" [width]="options.width" [height]="options.height">
</angular-tag-cloud>
</td></tr></tbody>
</td>
<td data-th="Contributors">
<angular-tag-cloud [data]="contributorCloudData" [config]="options" (clicked)="onContributorClick($event)"
[width]="options.width" [height]="options.height">
</angular-tag-cloud>
</td>
</tr>
</tbody>
</table>
<!--
<div class="row" style="width: 80%;margin-left: auto; margin-right: auto;">
......
src/main/webapp/app/teaserContent/teaserContent.component.scss
+ 29
− 0
View file @ 8456b999
@media only screen and (max-width: 768px) {
thead {
display: none;
}
td {
display: block;
}
td:before {
content: attr(data-th);
display: block;
font-weight: bold;
text-align: center;
}
}
@media only screen and (max-width: 1000px) {
thead {
display: none;
}
td {
display: block;
}
td:before {
content: attr(data-th);
display: block;
font-weight: bold;
text-align: center;
}
}
src/main/webapp/app/teaserContent/teaserContent.component.ts
+ 48
− 28
View file @ 8456b999
......@@ -2,12 +2,11 @@ import { Component, OnInit } from '@angular/core';
import { SearchService, AutoCompletionEntry } from 'app/search/service/search-service';
import { SearchInputComponent } from 'app/search/search-input/search-input.component';
import { CloudData, CloudOptions } from 'angular-tag-cloud-module'
import { CloudData, CloudOptions } from 'angular-tag-cloud-module';
import Color from 'ts-color-class';
import { Router } from '@angular/router';
@Component({
selector: 'jhi-teaser-content',
templateUrl: './teaserContent.component.html',
......@@ -19,25 +18,30 @@ export class TeaserContentComponent implements OnInit {
public contributors: Array<AutoCompletionEntry> = new Array<AutoCompletionEntry>();
public programmingLanguages: Array<AutoCompletionEntry> = new Array<AutoCompletionEntry>();
options: CloudOptions = {
overflow: false,
zoomOnHover: {scale: 1.2, transitionTime: 0.5}
};
public keywordCloudData: CloudData[] = [];
public contributorCloudData: CloudData[] = [];
public programmingLanguageCloudData: CloudData[] = [];
options: CloudOptions = {
overflow: false,
zoomOnHover: { scale: 1.2, transitionTime: 0.5 },
width: 1,
height: 500,
};
public keywordCloudData: CloudData[] = [];
public contributorCloudData: CloudData[] = [];
public programmingLanguageCloudData: CloudData[] = [];
constructor(private searchService: SearchService, private router: Router, private searchInputComponent: SearchInputComponent) {}
ngOnInit(): void {
this.searchService.getKeywordsAutoComplete('').subscribe(
(data: Array<AutoCompletionEntry>) => {
this.keywords = data;
this.keywordCloudData = [];
this.keywords.forEach(kw => this.keywordCloudData.push( {text: kw.target.toString(), weight: kw.hitCount.valueOf(), color: this.randomColor(new Color('#ffaaee'), new Color('#440000')).getHex()}) )
this.keywords.forEach(kw =>
this.keywordCloudData.push({
text: kw.target.toString(),
weight: kw.hitCount.valueOf(),
color: this.randomColor(new Color('#ffaaee'), new Color('#440000')).getHex(),
})
);
},
() => {
alert('Initialization of keywords failed');
......@@ -48,7 +52,13 @@ export class TeaserContentComponent implements OnInit {
(data: Array<AutoCompletionEntry>) => {
this.programmingLanguages = data;
this.programmingLanguageCloudData = [];
this.programmingLanguages.forEach(pl => this.programmingLanguageCloudData.push( {text: pl.target.toString(), weight: pl.hitCount.valueOf(), color: this.randomColor(new Color('#2222ff'), new Color('#004444')).getHex()}))
this.programmingLanguages.forEach(pl =>
this.programmingLanguageCloudData.push({
text: pl.target.toString(),
weight: pl.hitCount.valueOf(),
color: this.randomColor(new Color('#2222ff'), new Color('#004444')).getHex(),
})
);
},
() => {
alert('Initialization of programming languages failed');
......@@ -58,25 +68,31 @@ export class TeaserContentComponent implements OnInit {
(data: Array<AutoCompletionEntry>) => {
this.contributors = data;
this.contributorCloudData = [];
this.contributors.forEach(pl => this.contributorCloudData.push( {text: pl.target.toString(), weight: pl.hitCount.valueOf(), color: this.randomColor(new Color('#aaff44'), new Color('#004400')).getHex()}) )
this.contributors.forEach(pl =>
this.contributorCloudData.push({
text: pl.target.toString(),
weight: pl.hitCount.valueOf(),
color: this.randomColor(new Color('#aaff44'), new Color('#004400')).getHex(),
})
);
},
() => {
alert('Initialization of contributors failed');
}
);
}
onKeywordClick(event: CloudData): void {
this.clickKeyword(event.text);
}
this.clickKeyword(event.text);
}
onProgrammingLanguageClick(event: CloudData): void {
this.clickLanguage(event.text);
}
}
onContributorClick(event: CloudData): void {
this.clickContributor(event.text);
}
}
clickLanguage(programmingLanguage: String): void {
this.router.navigate(['/search'], { queryParams: { pl: programmingLanguage } });
......@@ -89,14 +105,18 @@ export class TeaserContentComponent implements OnInit {
clickKeyword(keyWord: String): void {
this.router.navigate(['/search'], { queryParams: { kw: keyWord } });
}
private randomColor(main: Color, deviation: Color): Color {
const upperBound = new Color(Math.min(main.getRed()+deviation.getRed(), 255),Math.min(main.getGreen()+deviation.getGreen(), 255), Math.min(main.getBlue()+deviation.getBlue(), 255));
const upperBound = new Color(
Math.min(main.getRed() + deviation.getRed(), 255),
Math.min(main.getGreen() + deviation.getGreen(), 255),
Math.min(main.getBlue() + deviation.getBlue(), 255)
);
const target = new Color(
Math.max(Math.round(upperBound.getRed()-2*deviation.getRed()*Math.random()), 0),
Math.max(Math.round(upperBound.getGreen()-2*deviation.getGreen()*Math.random()), 0),
Math.max(Math.round(upperBound.getBlue()-2*deviation.getBlue()*Math.random()), 0));
Math.max(Math.round(upperBound.getRed() - 2 * deviation.getRed() * Math.random()), 0),
Math.max(Math.round(upperBound.getGreen() - 2 * deviation.getGreen() * Math.random()), 0),
Math.max(Math.round(upperBound.getBlue() - 2 * deviation.getBlue() * Math.random()), 0)
);
return target;
}
}
}
src/main/webapp/i18n/de/home.json
+ 1
− 1
View file @ 8456b999
{
"home": {
"title": "<img src=\"/content/img/logo-top.png\" alt=\"codeAbility\" width=\"168px\"/>Gemeinsame Bereitstellung von Lernresourcen",
"title": "Gemeinsame Bereitstellung von Lernresourcen",
"subtitle": "Finde interessante Inhalte",
"teaser": "<p>Die CodeAbility Sharing Plattform stellt eine Infrastruktur f&uuml;r den Austausch von Lerninhalten im Bereich Programmierung bereit.</p>\n <p>Die Inhalte umfassen Programierlernaufgaben, Vorlesungsunterlagen und Linksammlungen zu allen Themen des Lernens von Programmiersprachen.</p>",
"logged": {
......
src/main/webapp/i18n/en/home.json
+ 1
− 1
View file @ 8456b999
{
"home": {
"title": "<img src=\"/content/img/logo-top.png\" alt=\"codeAbility\" width=\"168px\"/>Joint Resourcing of Teaching Material",
"title": "Joint Resourcing of Teaching Material",
"subtitle": "The CodeAbility Sharing Platform is ready",
"teaser": "<p>The CodeAbility Sharing Platform offers an infrastructure for the open exchange of programming teaching content.</p>\n <p>This comprises programming exercises, lecture scripts and slides, and link collections to all aspects of programming education.</p>",
"logged": {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment