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

Skip to content
Snippets Groups Projects
Commit 7a950fea authored by Eduard Frankford's avatar Eduard Frankford
Browse files

made home page more responsive and improved design a bit

parent 9c3ac25b
2 merge requests!188Merging Peer Reviewing et. al to Master,!164211 peer reviewing functionality
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 @ 7a950fea
<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 @ 7a950fea
<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 @ 7a950fea
@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 @ 7a950fea
......@@ -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 @ 7a950fea
{
"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 @ 7a950fea
{
"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