Skip to content

GitLab

Commit 4264ef36 authored by Florent Chehab's avatar Florent Chehab
Browse files

Work on university page began, layout ready

parent f27fea4a
Expand all Show whitespace changes
Inline Side-by-side
.postcssrc.json 0 → 100644
View file @ 4264ef36
{
"plugins": {
"autoprefixer": {
"browsers": ["last 2 versions"]
}
}
}
frontend/src/components/App.js
View file @ 4264ef36
...@@ -19,7 +19,6 @@ import { mainListItems, secondaryListItems } from './template/listItems'; ...@@ -19,7 +19,6 @@ import { mainListItems, secondaryListItems } from './template/listItems';
import { connect } from "react-redux"; import { connect } from "react-redux";
import MyComponent from './MyComponent' import MyComponent from './MyComponent'
// import route Components here // import route Components here
import { import {
Route, Route,
...@@ -92,6 +91,10 @@ const styles = theme => ({ ...@@ -92,6 +91,10 @@ const styles = theme => ({
padding: theme.spacing.unit * 3, padding: theme.spacing.unit * 3,
height: '100vh', height: '100vh',
overflow: 'auto', overflow: 'auto',
paddingTop: "0px"
},
paddingTop: {
paddingTop: "24px"
}, },
chartContainer: { chartContainer: {
marginLeft: -22, marginLeft: -22,
...@@ -160,19 +163,22 @@ class App extends MyComponent { ...@@ -160,19 +163,22 @@ class App extends MyComponent {
<List>{secondaryListItems}</List> <List>{secondaryListItems}</List>
</Drawer> </Drawer>
<main className={classes.content}> <main className={classNames(classes.content, classes.noPaddingTop)}>
<div className={classes.paddingTop}>
<Route path="/app/" exact={true} component={PageHome} /> <Route path="/app/" exact={true} component={PageHome} />
<Route path="/app/search" component={PageSearch} /> <Route path="/app/search" component={PageSearch} />
<Route path="/app/map" component={PageMap} /> <Route path="/app/map" component={PageMap} />
<Route path="/app/university/:id" component={PageUniversity} /> <Route path="/app/filter" component={PageFilter} />
<Route path="/app/settings" component={PageSettings} />
<Route <Route
exact exact
path="/app/university/" path="/app/university/"
render={() => (<Redirect to="/app/university/undefined" />)} render={() => (<Redirect to="/app/university/undefined" />)}
/> />
<Route path="/app/filter" component={PageFilter} /> </div>
<Route path="/app/settings" component={PageSettings} /> <div >
<Route path="/app/university/:id" component={PageUniversity} />
</div>
</main> </main>
</div> </div>
</React.Fragment> </React.Fragment>
......
frontend/src/components/pages/PageUniversity.js
View file @ 4264ef36
...@@ -9,6 +9,8 @@ import DialogActions from '@material-ui/core/DialogActions'; ...@@ -9,6 +9,8 @@ import DialogActions from '@material-ui/core/DialogActions';
import DialogTitle from '@material-ui/core/DialogTitle'; import DialogTitle from '@material-ui/core/DialogTitle';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import UniversityTemplate from '../university/UniversityTemplate';
import { import {
NavLink, NavLink,
Redirect Redirect
...@@ -61,13 +63,7 @@ function renderFirstTimeHere() { ...@@ -61,13 +63,7 @@ function renderFirstTimeHere() {
function renderDefaultView(univId) { function renderDefaultView(univId) {
return ( return (
<Paper> <UniversityTemplate univId={univId} />
<Typography variant="display1">
Université {univId}
</Typography>
</Paper>
); );
} }
......
frontend/src/components/university/CoverGallery.js 0 → 100644
View file @ 4264ef36
import AwesomeSlider from 'react-awesome-slider';
import styles from './CoverGallery.scss';
import React from 'react';
class CoverGallery extends React.Component {
render() {
return (
<AwesomeSlider cssModule={styles}>
<div data-src="https://www.epflalumni.ch/wp-content/uploads/2015/02/Centresportif-770x399.jpg" />
<div data-src="https://www.stcc.ch/wp-content/uploads/2017/11/epfl.jpg" />
</AwesomeSlider>
)
}
}
export default CoverGallery;
\ No newline at end of file
frontend/src/components/university/CoverGallery.scss 0 → 100644
View file @ 4264ef36
// Taken from the react-module to customize the placement of bullets.
$root-element: "aws-sld";
$cos45: 0.70710;
$transition-bezier: cubic-bezier(0.5, 0.075, 0.25, 0.95);
$slider-height-percentage: 27%;
$slider-transition-duration: 465ms;
$organic-arrow-color: #161312;
$organic-arrow-thickness: 4px;
$organic-arrow-height: 40px;
$organic-arrow-border-radius: 0;
$control-button-width: 10%;
$control-button-height: 25%;
$control-button-opacity: 0.5;
$control-button-hover-opacity: 0.75;
$control-button-background: transparent;
$loader-bar-color: #851515;
$loader-bar-height: 6px;
$control-bullet-color: #161312;
$control-bullet-active-color: #6a6a6a;
$content-background-color: #2f2f2f;
%fill-parent {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
%clear-spacing {
padding: 0;
margin: 0;
}
%clear-focus {
outline-color: 0;
outline-style: none;
outline-width: 0;
}
%clear-selection {
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
.#{$root-element} {
--organic-arrow-thickness: #{$organic-arrow-thickness};
--organic-arrow-height: #{$organic-arrow-height};
--slider-height-percentage: #{$slider-height-percentage};
--loader-bar-color: #{$loader-bar-color};
--loader-bar-height: #{$loader-bar-height};
--control-button-width: #{$control-button-width};
--control-button-height: #{$control-button-height};
--control-button-opacity: #{$control-button-opacity};
--control-button-hover-opacity: #{$control-button-hover-opacity};
--control-button-background: #{$control-button-background};
--transition-bezier: #{$transition-bezier};
--slider-transition-duration: #{$slider-transition-duration};
--organic-arrow-color: #{$organic-arrow-color};
--organic-arrow-border-radius: #{$organic-arrow-border-radius};
--control-bullet-color: #{$control-bullet-color};
--control-bullet-active-color: #{$control-bullet-active-color};
--content-background-color: #{$content-background-color};
}
.#{$root-element} {
display: block;
width: 100%;
position: relative;
max-width: 100%;
&__wrapper {
display: block;
overflow: hidden;
position: relative;
}
&__container {
display: block;
width: 100%;
height: 0;
padding-bottom: var(--slider-height-percentage);
@media all and (max-width: 500px) {
padding-bottom: calc(var(--slider-height-percentage) * 1.25);
}
figure {
@extend %fill-parent;
}
}
&__startUp {
background-color: red;
height: 100%;
width: 100%;
> div {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
img {
width: 35%;
height: auto;
}
}
&__content {
@extend %fill-parent;
background-color: var(--content-background-color);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
> img, > video {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
&--enter {
}
&--exit {
}
}
&__controls {
button {
@extend %clear-focus;
display: flex;
align-items: center;
justify-content: center;
width: var(--control-button-width);
height: var(--control-button-height);
position: absolute;
z-index: 10;
top: calc(50% - (0.5 * var(--control-button-height)));
border: none;
background-color: var(--control-button-background);
color: #FFF;
cursor: pointer;
.#{$root-element}__controls__arrow-left,
.#{$root-element}__controls__arrow-right {
opacity: var(--control-button-opacity);
}
&:hover {
.#{$root-element}__controls__arrow-left,
.#{$root-element}__controls__arrow-right {
opacity: var(--control-button-opacity-hover);
}
}
}
&--active {
.#{$root-element}__controls__arrow-left {
opacity: var(--control-button-opacity-hover);
transform: translate3d(-100%, 0, 0);
}
.#{$root-element}__controls__arrow-right {
opacity: var(--control-button-opacity-hover);
transform: translate3d(100%, 0, 0);
}
}
@media all and (max-width: 520px) {
visibility: hidden;
}
}
&__bar {
display: block;
width: 100%;
height: var(--loader-bar-height);
background-color: var(--loader-bar-color);
position: absolute;
top: 0;
left: 0;
// z-index: 1;
transition: transform 3000ms var(--transition-bezier);
transform: translate3d(-100%, 0, 0);
&--active {
transform: translate3d(-20%, 0, 0);
}
&--end {
transition-duration: 300ms;
transform: translate3d(0, 0, 0);
}
}
&__next {
right: 0;
}
&__prev {
left: 0;
}
&__box {
z-index: 1;
@extend %fill-parent;
}
&--animated {
transition: transform var(--slider-transition-duration) var(--transition-bezier);
}
&--animated-mobile {
transition: transform 325ms cubic-bezier(0.15, 0.65, 0.1, 1);
}
&--active {
z-index: 2;
transform: translate3d(0, 0, 0);
}
&--moveRight {
transform: translate3d(100%, 0, 0);
}
&--moveLeft {
transform: translate3d(-100%, 0, 0);
}
&--exit {
z-index: 0;
}
&--first {
.#{$root-element}__prev {
visibility: hidden;
}
}
&--last {
.#{$root-element}__next {
visibility: hidden;
}
}
&__bullets {
position: absolute;
bottom: 20px;
z-index: 10;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
button {
@extend %clear-focus;
padding: 0;
display: block;
width: 16px;
height: 16px;
margin: 5px;
border-radius: 50%;
background: var(--control-bullet-color);
text-indent: -9999px;
overflow: hidden;
cursor: pointer;
border: none;
transition:
transform 0.225s cubic-bezier(0.8, 1.35, 0.75, 1.45),
background-color 0.175s ease-out;
&:hover {
transform: scale(1.20);
}
}
.#{$root-element}__bullets--loading {
transform: scale(1.20);
}
.#{$root-element}__bullets--active {
transform: scale(1.50);
background: var(--control-bullet-active-color);
&:hover {
transform: scale(1.50);
}
}
}
&__controls__arrow-left,
&__controls__arrow-right {
width: 100%;
height: var(--organic-arrow-height);
position: relative;
display: block;
transition: transform .2s ease-out .125s, opacity .2s ease-out;
&:before, &:after {
content: " ";
position: absolute;
right: calc(50% - (#{$cos45} * (var(--organic-arrow-height) + var(--organic-arrow-thickness))) / 2);
height: 100%;
border-radius: var(--organic-arrow-border-radius);
width: var(--organic-arrow-thickness);
background-color: var(--organic-arrow-color);
transition: transform .15s ease-out, background-color .15s ease-out;
}
&:before {
transform-origin: 100% 100% 0;
// background-color: rgba(76, 177, 6, 0.75);
top: -50%;
transform: rotate(-45deg);
}
&:after {
transform-origin: 100% 0% 0;
// background-color: rgba(255, 247, 43, 0.75);
top: 50%;
transform: rotate(45deg);
}
}
&__controls__arrow-right {
&--active {
transform: translate3d(100%, 0, 0);
&:after {
transform: rotate(90deg) translate3d(50%, 0, 0) !important;
}
&:before {
transform: rotate(-90deg) translate3d(50%, 0, 0) !important;
}
}
}
&__controls__arrow-left {
&:before, &:after {
right: auto;
left: calc(50% - (#{$cos45} * (var(--organic-arrow-height) + var(--organic-arrow-thickness))) / 2);
}
&:before {
transform-origin: 0 100% 0;
top: -50%;
transform: rotate(45deg);
}
&:after {
transform-origin: 0 0 0;
top: 50%;
transform: rotate(-45deg);
}
&--active {
transform: translate3d(-100%, 0, 0);
&:after {
transform: rotate(-90deg) translate3d(-50%, 0, 0) !important;
}
&:before {
transform: rotate(90deg) translate3d(-50%, 0, 0) !important;
}
}
}
&__controls {
button:hover {
.#{$root-element}__controls__arrow-left {
&:before {
opacity: 1;
transform: rotate(30deg);
}
&:after {
opacity: 1;
transform: rotate(-30deg);
}
}
.#{$root-element}__controls__arrow-right {
&:before {
opacity: 1;
transform: rotate(-30deg);
}
&:after {
opacity: 1;
transform: rotate(30deg);
}
}
}
}
}
\ No newline at end of file
frontend/src/components/university/UniversityTemplate.js 0 → 100644
View file @ 4264ef36
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import PhoneIcon from '@material-ui/icons/Phone';
import FavoriteIcon from '@material-ui/icons/Favorite';
import PersonPinIcon from '@material-ui/icons/PersonPin';
import HelpIcon from '@material-ui/icons/Help';
import ShoppingBasket from '@material-ui/icons/ShoppingBasket';
import ThumbDown from '@material-ui/icons/ThumbDown';
import ThumbUp from '@material-ui/icons/ThumbUp';
import Typography from '@material-ui/core/Typography';
import AwesomeSlider from 'react-awesome-slider';
import AwsSliderStyles from 'react-awesome-slider/src/styles';
import Lorem from 'react-lorem-component';
import CoverGallery from './CoverGallery';
function TabContainer(props) {
return (
<Typography component="div" style={{ padding: 8 * 3 }}>
{props.children}
</Typography>
);
}
TabContainer.propTypes = {
children: PropTypes.node.isRequired,
};
const styles = theme => ({
root: {
flexGrow: 1,
width: '100%',
backgroundColor: theme.palette.background.paper,
},
});
class UniversityTemplate extends React.Component {
state = {
value: 0,
};
handleChange = (event, value) => {
this.setState({ value });
};
render() {
const { classes } = this.props;
const { value } = this.state;
return (
<div>
<div>
<CoverGallery></CoverGallery>
</div>
<div className={classes.root}>
<AppBar position="sticky" color="default">
<Tabs
value={value}
onChange={this.handleChange}
scrollable
scrollButtons="on"
indicatorColor="primary"
textColor="primary"
centered
>
<Tab label="Généralités" icon={<PhoneIcon />} />
<Tab label="Précédents départs" icon={<HelpIcon />} />
<Tab label="Campus" icon={<FavoriteIcon />} />
<Tab label="Bourses" icon={<PersonPinIcon />} />
<Tab label="Autres" icon={<ShoppingBasket />} />
</Tabs>
</AppBar>
{value === 0 && <TabContainer>Item One <Lorem count={10}/></TabContainer>}
{value === 1 && <TabContainer>Item Two</TabContainer>}
{value === 2 && <TabContainer>Item Three</TabContainer>}
{value === 3 && <TabContainer>Item Four</TabContainer>}
{value === 4 && <TabContainer>Item Five</TabContainer>}
</div>
</div>
);
}
}
UniversityTemplate.propTypes = {
classes: PropTypes.object.isRequired,
univId: PropTypes.string.isRequired,
};
export default withStyles(styles)(UniversityTemplate);
\ No newline at end of file
frontend/templates/frontend/index.html
View file @ 4264ef36
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
{% load static %} {% load static %}
<link rel="stylesheet" href="{% static '/frontend/leaflet-dist/leaflet.css' %}"/> <link rel="stylesheet" href="{% static '/frontend/leaflet-dist/leaflet.css' %}"/>
<link rel="stylesheet" href="{% static '/frontend/custom_leaflet.css' %}"/> <link rel="stylesheet" href="{% static '/frontend/custom_leaflet.css' %}"/>