Commit 267949b1 authored by dihokon's avatar dihokon
Browse files

filter prototype

parent 6939b883
......@@ -422,62 +422,203 @@ if (element !== null) {
const TopicSelector = class extends React.Component {
constructor(props) {
super(props);
this.typeClasses = [
"type-mcsp",
"type-mcst",
"type-hcip",
"type-hcit",
"type-csbt",
"type-csmp",
"type-csmt",
"type-gebt",
"type-ind",
"type-indcoop",
"type-exAI",
"type-phd"
// this.typeClasses = [
// // topic focus
// "type-hci", //add mcs too?
// "type-cs",
// "type-ge",
// // topic level
// "type-ba",
// "type-ma",
// "type-phd",
// // topic type
// "type-project",
// "type-thesis",
// "type-intern",
// "type-grl",
// // topic coop
// "type-coop"
// ];
// this.typeStrings = [
// "Human-Computer Interaction",
// "Computer Science",
// "Games Engineering",
// "Bachelor",
// "Master",
// "Ph.D.",
// "Project",
// "Thesis",
// "Internship",
// "Games Research Lab",
// "Industry Cooperation"
// ];
this.topicFocus = [
"type-hci", //add mcs too?
"type-cs",
"type-ge"
];
this.topicFocusName = [
"Human-Computer Interaction",
"Computer Science",
"Games Engineering",
];
this.topicLevel = [
"type-ba",
"type-ma",
"type-phd",
];
this.topicLevelName = [
"Bachelor",
"Master",
"Ph.D.",
];
this.typeStrings = [
"MCS Bachelor Project",
"MCS Bachelor Thesis",
"HCI Master Project",
"HCI Master Thesis",
"Computer Science Bachelor Thesis",
"Computer Science Master Project",
"Computer Science Master Thesis",
"Games Engineering Bachelor Thesis",
"Industry Project",
"Industry Cooperation",
"eXtended Artificial Intelligence",
"PhD Project"
this.topicType = [
"type-project",
"type-thesis",
"type-intern",
"type-grl",
"type-coop"
];
this.topicTypeName = [
"Project",
"Thesis",
"Internship",
"Games Research Lab",
"Industry Cooperation"
];
this.state = {
selected: 0
selectedFocus: 0,
selectedLevel: 0,
selectedType: 0
};
// this.stateSelectedFocus = 0;
// this.stateSelectedLevel = 0;
// this.stateSelectedType = 0;
// this.state = {
// selectedFocus: 0,
// };
// this.state = {
// selectedLevel: 0,
// };
// this.state = {
// selectedType: 0
// };
}
updateTopics() {
if (this.state.selected !== 0) {
$(".topic." + this.typeClasses[this.state.selected - 1]).show();
$(".topic:not(." + this.typeClasses[this.state.selected - 1] + ")").hide();
if (this.state.selectedFocus == 0) {
this.topicFocus.forEach(
element => $(".topic."+element).show()
);
}
if (this.state.selectedLevel == 0) {
this.topicLevel.forEach(
element => $(".topic."+element).show()
);
}
if (this.state.selectedType == 0) {
this.topicType.forEach(
element => $(".topic."+element).show()
);
}
else {
$(".topic").show();
let topics = "";
if (this.state.selectedFocus !== 0) {
topics += "." + this.topicFocus[this.state.selectedFocus - 1];
$(".topic:not(." + this.topicFocus[this.state.selectedFocus - 1] + ")").hide();
}
if (this.state.selectedLevel !== 0) {
topics += "." + this.topicLevel[this.state.selectedLevel - 1];
$(".topic:not(." + this.topicLevel[this.state.selectedLevel - 1] + ")").hide();
}
if (this.state.selectedType !== 0) {
topics += "."+ this.topicType[this.state.selectedType - 1];
$(".topic:not(." + this.topicType[this.state.selectedType - 1] + ")").hide();
}
$(".topic" + topics).show();
}
render() {
return (
<div className="column-layout">
{
["Show all"].concat(this.typeStrings).map((string, index) => (
<div key={index}>
<input type="radio" value={index} checked={this.state.selected === index} onChange={() => this.setState({ selected: index }, this.updateTopics)} />
{string}
</div>
))
}
// <div className="topic-selector-layout">
// {
// ["Show all"].concat(this.typeStrings).map((string, index) => (
// <div key={index}>
// <input type="radio" value={index} checked={this.state.selected === index} onChange={() => this.setState({ selected: index }, this.updateTopics)} />
// {string}
// </div>
// ))
// }
// </div>
<div className="topic-selector-layout">
<b>Focus</b>
{
["Any"].concat(this.topicFocusName).map((string, index) => (
<div key={index}>
<input type="radio" value={index} checked={this.state.selectedFocus === index} onChange={() => this.setState({ selectedFocus: index }, this.updateTopics)} />
{string}
</div>
))
}
<b>Level</b>
{
["Any"].concat(this.topicLevelName).map((string, index) => (
<div key={index}>
<input type="radio" value={index} checked={this.state.selectedLevel === index} onChange={() => this.setState({ selectedLevel: index }, this.updateTopics)} />
{string}
</div>
))
}
<b>Type</b>
{
["Any"].concat(this.topicTypeName).map((string, index) => (
<div key={index}>
<input type="radio" value={index} checked={this.state.selectedType === index} onChange={() => this.setState({ selectedType: index }, this.updateTopics)} />
{string}
</div>
))
}
</div>
// <div className="some-page-wrapper">
// <div class="topic-selector-row">
// <div class=".topic-selector-column">
// <b>Focus</b>
// {
// ["Show all"].concat(this.topicFocusName).map((string, index) => (
// <div key={index}>
// <input type="radio" value={index} checked={this.state.selected === index} onChange={() => this.setState({ selected: index }, this.updateTopics)} />
// {string}
// </div>
// ))
// }
// </div>
// <div class=".topic-selector-column">
// <b>Level</b>
// {
// [].concat(this.topicLevelName).map((string, index) => (
// <div key={index}>
// <input type="radio" value={index} checked={this.state.selected === index} onChange={() => this.setState({ selected: index }, this.updateTopics)} />
// {string}
// </div>
// ))
// }
// </div>
// <div class=".topic-selector-column">
// <b>Type</b>
// {
// [].concat(this.topicTypeName).map((string, index) => (
// <div key={index}>
// <input type="radio" value={index} checked={this.state.selected === index} onChange={() => this.setState({ selected: index }, this.updateTopics)} />
// {string}
// </div>
// ))
// }
// </div>
// </div>
// </div>
);
}
};
......
......@@ -4,34 +4,58 @@ layout: text
<h1>{{ page.title }}</h1>
{% assign type = "|" | split: "|" %}
{% if page.type-mcs-bachelor-project == true %}
{% assign type = type | push: "MCS Bachelor Project" %}
<!-- focus:
hci
cs
games -->
{% if page.type-hci == true %}
{% assign type = type | push: "Human-Computer Interaction" %}
{% endif %}
{% if page.type-mcs-bachelor-thesis == true %}
{% assign type = type | push: "MCS Bachelor Thesis" %}
{% if page.type-cs == true %}
{% assign type = type | push: "Computer Science" %}
{% endif %}
{% if page.type-hci-master-project == true %}
{% assign type = type | push: "HCI Master Project" %}
{% if page.type-ge == true %}
{% assign type = type | push: "Games Engineering" %}
{% endif %}
{% if page.type-hci-master-thesis == true %}
{% assign type = type | push: "HCI Master Thesis" %}
<!-- level:
bachelor
master
phd -->
{% if page.type-ba == true %}
{% assign type = type | push: "Bachelor" %}
{% endif %}
{% if page.type-ma == true %}
{% assign type = type | push: "Master" %}
{% endif %}
{% if page.type-phd == true %}
{% assign type = type | push: "PhD" %}
{% endif %}
{% if page.type-cs-bachelor-thesis == true %}
{% assign type = type | push: "Computer Science Bachelor Thesis" %}
<!-- type:
project
thesis
internship
GRL -->
{% if page.type-project == true %}
{% assign type = type | push: "Project" %}
{% endif %}
{% if page.type-cs-master-project == true %}
{% assign type = type | push: "Computer Science Master Project" %}
{% if page.type-thesis == true %}
{% assign type = type | push: "Thesis" %}
{% endif %}
{% if page.type-cs-master-thesis == true %}
{% assign type = type | push: "Computer Science Master Thesis" %}
{% if page.type-intern == true %}
{% assign type = type | push: "Internship" %}
{% endif %}
{% if page.type-ge-bachelor-thesis == true %}
{% assign type = type | push: "Games Engineering Bachelor Thesis" %}
{% if page.type-ba == grl %}
{% assign type = type | push: "Games Research Lab" %}
{% endif %}
{% if page.type-phd-project == true %}
{% assign type = type | push: "PhD Project" %}
<!-- coop: -->
{% if page.type-coop == true %}
{% assign type = type | push: "Industry Cooperation" %}
{% endif %}
{% if page.status == 'open' %}
This call for a thesis or project is open for the following modules: {{ type | join: ", " }}<br />
If you are interested, please get in touch with the primary contact person listed below.
......
......@@ -23,6 +23,7 @@ layout: base
{% endif %}
<div class="column-layout">
<!-- expired topics -->
{% if page.topic-status == "expired" %}
{% capture now %}{{ 'now' | date: '%s' | plus: 0 }}{% endcapture %}
......@@ -50,44 +51,48 @@ layout: base
{% assign counter = 0 %}
{% for topic in topics %}
<!-- focus -->
{% assign typeClasses = "topic " %}
{% if topic.type-mcs-bachelor-project == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-mcsp" %}
{% if topic.type-hci == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-hci" %}
{% endif %}
{% if topic.type-mcs-bachelor-thesis == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-mcst" %}
{% if topic.type-cs == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-cs" %}
{% endif %}
{% if topic.type-hci-master-project == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-hcip" %}
{% if topic.type-ge == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-ge" %}
{% endif %}
{% if topic.type-hci-master-thesis == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-hcit" %}
<!-- level -->
{% if topic.type-ba == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-ba" %}
{% endif %}
{% if topic.type-cs-bachelor-thesis == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-csbt" %}
{% if topic.type-ma == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-ma" %}
{% endif %}
{% if topic.type-cs-master-project == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-csmp" %}
{% if topic.type-phd == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-phd" %}
{% endif %}
{% if topic.type-cs-master-thesis == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-csmt" %}
<!-- type -->
{% if topic.type-project == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-project" %}
{% endif %}
{% if topic.type-ge-bachelor-thesis == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-gebt" %}
{% if topic.type-thesis == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-thesis" %}
{% endif %}
{% if topic.type-phd-project == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-phd" %}
{% if topic.type-intern == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-intern" %}
{% endif %}
{% if topic.type-industry == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-ind" %}
{% if topic.type-grl == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-grl" %}
{% endif %}
{% if topic.type-industry-coop == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-indcoop" %}
{% if topic.type-coop == true %}
{% assign typeClasses = typeClasses | append: " " | append: "type-coop" %}
{% endif %}
{% assign title = topic.title %}
{% if topic.put-on-top-of-the-list == true %}
{% assign title = title | append: " &#9733;" %}
{% endif %}
{% include block class=typeClasses image=topic.image title=title teaser=topic.teaser url=topic.url %}
{% assign counter = counter | plus: 1 %}
{% endfor %}
......
......@@ -484,6 +484,53 @@ figure > figcaption {
@include columnLayout(20px, 10px);
}
// topic-selector-layout
.topic-selector-layout {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.some-page-wrapper {
margin: 15px;
background-color: transparent;
}
.topic-selector-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.topic-selector-single-column {
display: flex;
flex-direction: column;
flex-basis: 100%;
}
.topic-selector-double-column {
display: flex;
flex-direction: column;
flex-basis: 100%;
}
@media screen and (min-width: 800px) {
.topic-selector-single-column {
flex: 1
}
.topic-selector-double-column {
flex: 2
}
}
.content {
@include adaptive-width;
@include adaptive-padding-left;
......
Markdown is supported
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