Skip to content
Snippets Groups Projects
Commit 82a5f756 authored by Jonathan Weth's avatar Jonathan Weth :keyboard:
Browse files

Optimize design for dashboard (issue #321)

parent 1e1927b1
No related branches found
No related tags found
1 merge request!86Merge school-apps
Hide whitespace changes
Inline Side-by-side
react/src/dashboard.js
+ 97
− 90
View file @ 82a5f756
...@@ -152,10 +152,11 @@ class Dashboard extends React.Component { ...@@ -152,10 +152,11 @@ class Dashboard extends React.Component {
{/* CARDS */} {/* CARDS */}
<div className={"row"}> <div className={"row"}>
<div className={"dashboard-cards"}> {/*<div className={"dashboard-cards"}>*/}
{/* MY PLAN */} {/* MY PLAN */}
{this.state.has_plan ? <div className="card"> {this.state.has_plan ? <div className="col s12 m12 l6 xl4">
<div className={"card"}>
<div className="card-content"> <div className="card-content">
{/* Show individualized title */} {/* Show individualized title */}
<span className="card-title"> <span className="card-title">
...@@ -210,40 +211,42 @@ class Dashboard extends React.Component { ...@@ -210,40 +211,42 @@ class Dashboard extends React.Component {
anzeigen anzeigen
</a> </a>
</div> </div>
</div> : ""} </div>
</div> : ""}
{/* MY STATUS */}
{/*<div className="card">*/} {/* MY STATUS */}
{/* <div className="card-content">*/} {/*<div className="card">*/}
{/* <span className="card-title">Mein Status</span>*/} {/* <div className="card-content">*/}
{/* <div className={"row"}>*/} {/* <span className="card-title">Mein Status</span>*/}
{/* <WithCheckCircleIcon>*/} {/* <div className={"row"}>*/}
{/* {this.state.user_type_formatted}*/} {/* <WithCheckCircleIcon>*/}
{/* </WithCheckCircleIcon>*/} {/* {this.state.user_type_formatted}*/}
{/* </WithCheckCircleIcon>*/}
{/* {this.state.user_type === 1 || this.state.user_type === 2 ? <WithCheckCircleIcon>*/}
{/* Meine Klassen: {this.state.classes.join(", ")}*/} {/* {this.state.user_type === 1 || this.state.user_type === 2 ? <WithCheckCircleIcon>*/}
{/* </WithCheckCircleIcon> : ""}*/} {/* Meine Klassen: {this.state.classes.join(", ")}*/}
{/* </WithCheckCircleIcon> : ""}*/}
{/* {this.state.user_type === 1 || this.state.user_type === 2 ? <WithCheckCircleIcon>*/}
{/* Meine Kurse: {this.state.courses.join(", ")}*/} {/* {this.state.user_type === 1 || this.state.user_type === 2 ? <WithCheckCircleIcon>*/}
{/* </WithCheckCircleIcon> : ""}*/} {/* Meine Kurse: {this.state.courses.join(", ")}*/}
{/* </WithCheckCircleIcon> : ""}*/}
{/* {this.state.user_type === 1 ? <WithCheckCircleIcon>*/}
{/* Meine Fächer: {this.state.subjects.join(", ")}*/} {/* {this.state.user_type === 1 ? <WithCheckCircleIcon>*/}
{/* </WithCheckCircleIcon> : ""}*/} {/* Meine Fächer: {this.state.subjects.join(", ")}*/}
{/* {this.state.user_type === 1 || this.state.has_wifi ?*/} {/* </WithCheckCircleIcon> : ""}*/}
{/* <WithCheckCircleIcon>WLAN</WithCheckCircleIcon> : <div className={"col"}>*/} {/* {this.state.user_type === 1 || this.state.has_wifi ?*/}
{/* <i className={"material-icons left red-text"}>cancel</i>*/} {/* <WithCheckCircleIcon>WLAN</WithCheckCircleIcon> : <div className={"col"}>*/}
{/* Kein WLAN*/} {/* <i className={"material-icons left red-text"}>cancel</i>*/}
{/* </div>}*/} {/* Kein WLAN*/}
{/* </div>*/} {/* </div>}*/}
{/* </div>*/} {/* </div>*/}
{/*</div>*/} {/* </div>*/}
{/*</div>*/}
{/* CURRENT EVENTS*/}
{this.state.current_events && this.state.current_events.length > 0 ? {/* CURRENT EVENTS*/}
<div className="card"> {this.state.current_events && this.state.current_events.length > 0 ?
<div className={"col s12 m12 l6 xl4"}>
<div className="card ">
<div className="card-content"> <div className="card-content">
<span className="card-title">Aktuelle Termine</span> <span className="card-title">Aktuelle Termine</span>
{this.state.current_events.map(function (event) { {this.state.current_events.map(function (event) {
...@@ -260,63 +263,67 @@ class Dashboard extends React.Component { ...@@ -260,63 +263,67 @@ class Dashboard extends React.Component {
</a> </a>
</div> </div>
</div> </div>
: ""} </div>
: ""}
{/* EXAMS */}
{/*<div className="card">*/} {/* EXAMS */}
{/* <div className="card-content">*/} {/*<div className="card">*/}
{/* <span className="card-title">Klausuren der <em>Eb</em></span>*/} {/* <div className="card-content">*/}
{/* <div className="card-panel event-card">*/} {/* <span className="card-title">Klausuren der <em>Eb</em></span>*/}
{/* <span className={"title"}>Sextanereinschulung</span>*/} {/* <div className="card-panel event-card">*/}
{/* <br/>*/} {/* <span className={"title"}>Sextanereinschulung</span>*/}
{/* 28.Aug. 2019 18:30 - 22:00*/} {/* <br/>*/}
{/* </div>*/} {/* 28.Aug. 2019 18:30 - 22:00*/}
{/* <div className="card-panel event-card">*/} {/* </div>*/}
{/* <span className={"title"}>Sextanereinschulung</span>*/} {/* <div className="card-panel event-card">*/}
{/* <br/>*/} {/* <span className={"title"}>Sextanereinschulung</span>*/}
{/* 28.Aug. 2019 18:30 - 22:00*/} {/* <br/>*/}
{/* </div>*/} {/* 28.Aug. 2019 18:30 - 22:00*/}
{/* </div>*/} {/* </div>*/}
{/* <div className="card-action">*/} {/* </div>*/}
{/* <a href="https://katharineum-zu-luebeck.de/aktuelles/termine/">Alle Klausuren</a>*/} {/* <div className="card-action">*/}
{/* </div>*/} {/* <a href="https://katharineum-zu-luebeck.de/aktuelles/termine/">Alle Klausuren</a>*/}
{/*</div>*/} {/* </div>*/}
{/*</div>*/}
{/* NEWEST ARTICLE FROM HOMEPAGE*/}
{this.state.newest_article ? {/* NEWEST ARTICLE FROM HOMEPAGE*/}
<div> {this.state.newest_article ?
<div className="card"> <div className={"col s12 m12 l6 xl4"}>
{/* Image with badge and title */} <div className="card">
<div className="card-image"> {/* Image with badge and title */}
<span className={"badge-image z-depth-2"}>Aktuelles von der Homepage</span> <div className="card-image">
<img src={this.state.newest_article.image_url} <span className={"badge-image z-depth-2"}>Aktuelles von der Homepage</span>
alt={this.state.newest_article.title}/> <img src={this.state.newest_article.image_url}
<span className="card-title" alt={this.state.newest_article.title}/>
dangerouslySetInnerHTML={{__html: this.state.newest_article.title}}/>
</div>
{/* Short text */}
<div className="card-content">
<p dangerouslySetInnerHTML={{__html: this.state.newest_article.short_text}}/>
</div>
{/* Link to article */}
<div className="card-action">
<a href={this.state.newest_article.link} target={"_blank"}>Mehr lesen</a>
</div>
</div> </div>
{/* Link to homepage */}
<a className={"btn hundred-percent primary-color"} {/* Short text */}
href={"https://katharineum-zu-luebeck.de/"} <div className="card-content">
target={"_blank"}> <span className="card-title"
Weitere Artikel dangerouslySetInnerHTML={{__html: this.state.newest_article.title}}/>
<i className={"material-icons right"}>arrow_forward</i>
</a> <p dangerouslySetInnerHTML={{__html: this.state.newest_article.short_text}}/>
</div>
{/* Link to article */}
<div className="card-action">
<a href={this.state.newest_article.link} target={"_blank"}>Mehr lesen</a>
</div>
</div> </div>
: ""}
</div> {/* Link to homepage */}
<a className={"btn hundred-percent primary-color"}
href={"https://katharineum-zu-luebeck.de/"}
target={"_blank"}>
Weitere Artikel
<i className={"material-icons right"}>arrow_forward</i>
</a>
</div>
: ""}
</div> </div>
{/*</div>*/}
{/* ACITIVITIES */} {/* ACITIVITIES */}
<div className={"row"}> <div className={"row"}>
......
schoolapps/static/common/style.css
+ 1
− 0
View file @ 82a5f756
...@@ -183,6 +183,7 @@ li.active > a > .sidenav-badge { ...@@ -183,6 +183,7 @@ li.active > a > .sidenav-badge {
margin: 0; margin: 0;
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
min-height: 65px;
} }
.lesson-card .card-content { .lesson-card .card-content {
......
schoolapps/static/js/dashboard.js
+ 55
− 45
View file @ 82a5f756
...@@ -246,10 +246,10 @@ var Dashboard = function (_React$Component) { ...@@ -246,10 +246,10 @@ var Dashboard = function (_React$Component) {
React.createElement( React.createElement(
"div", "div",
{ className: "row" }, { className: "row" },
React.createElement( this.state.has_plan ? React.createElement(
"div", "div",
{ className: "dashboard-cards" }, {className: "col s12 m12 l6 xl4"},
this.state.has_plan ? React.createElement( React.createElement(
"div", "div",
{ className: "card" }, { className: "card" },
React.createElement( React.createElement(
...@@ -344,10 +344,14 @@ var Dashboard = function (_React$Component) { ...@@ -344,10 +344,14 @@ var Dashboard = function (_React$Component) {
"anzeigen" "anzeigen"
) )
) )
) : "", )
this.state.current_events && this.state.current_events.length > 0 ? React.createElement( ) : "",
this.state.current_events && this.state.current_events.length > 0 ? React.createElement(
"div",
{className: "col s12 m12 l6 xl4"},
React.createElement(
"div", "div",
{ className: "card" }, {className: "card "},
React.createElement( React.createElement(
"div", "div",
{ className: "card-content" }, { className: "card-content" },
...@@ -379,55 +383,61 @@ var Dashboard = function (_React$Component) { ...@@ -379,55 +383,61 @@ var Dashboard = function (_React$Component) {
"Weitere Termine" "Weitere Termine"
) )
) )
) : "", )
this.state.newest_article ? React.createElement( ) : "",
this.state.newest_article ? React.createElement(
"div",
{className: "col s12 m12 l6 xl4"},
React.createElement(
"div", "div",
null, {className: "card"},
React.createElement( React.createElement(
"div", "div",
{ className: "card" }, {className: "card-image"},
React.createElement( React.createElement(
"div", "span",
{ className: "card-image" }, {className: "badge-image z-depth-2"},
React.createElement( "Aktuelles von der Homepage"
"span",
{ className: "badge-image z-depth-2" },
"Aktuelles von der Homepage"
),
React.createElement("img", { src: this.state.newest_article.image_url,
alt: this.state.newest_article.title }),
React.createElement("span", { className: "card-title",
dangerouslySetInnerHTML: { __html: this.state.newest_article.title } })
),
React.createElement(
"div",
{ className: "card-content" },
React.createElement("p", { dangerouslySetInnerHTML: { __html: this.state.newest_article.short_text } })
), ),
React.createElement( React.createElement("img", {
"div", src: this.state.newest_article.image_url,
{ className: "card-action" }, alt: this.state.newest_article.title
React.createElement( })
"a", ),
{ href: this.state.newest_article.link, target: "_blank" }, React.createElement(
"Mehr lesen" "div",
) {className: "card-content"},
) React.createElement("span", {
className: "card-title",
dangerouslySetInnerHTML: {__html: this.state.newest_article.title}
}),
React.createElement("p", {dangerouslySetInnerHTML: {__html: this.state.newest_article.short_text}})
), ),
React.createElement( React.createElement(
"a", "div",
{ className: "btn hundred-percent primary-color", {className: "card-action"},
href: "https://katharineum-zu-luebeck.de/",
target: "_blank" },
"Weitere Artikel",
React.createElement( React.createElement(
"i", "a",
{ className: "material-icons right" }, {href: this.state.newest_article.link, target: "_blank"},
"arrow_forward" "Mehr lesen"
) )
) )
) : "" ),
) React.createElement(
"a",
{
className: "btn hundred-percent primary-color",
href: "https://katharineum-zu-luebeck.de/",
target: "_blank"
},
"Weitere Artikel",
React.createElement(
"i",
{className: "material-icons right"},
"arrow_forward"
)
)
) : ""
), ),
React.createElement( React.createElement(
"div", "div",
......
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