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

Work on university page began, layout ready

parent f27fea4a
Pipeline #27032 passed with stages
in 2 minutes and 19 seconds
{
"plugins": {
"autoprefixer": {
"browsers": ["last 2 versions"]
}
}
}
...@@ -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)}>
<Route path="/app/" exact={true} component={PageHome} /> <div className={classes.paddingTop}>
<Route path="/app/search" component={PageSearch} /> <Route path="/app/" exact={true} component={PageHome} />
<Route path="/app/map" component={PageMap} /> <Route path="/app/search" component={PageSearch} />
<Route path="/app/university/:id" component={PageUniversity} /> <Route path="/app/map" component={PageMap} />
<Route path="/app/filter" component={PageFilter} />
<Route <Route path="/app/settings" component={PageSettings} />
exact <Route
path="/app/university/" exact
render={() => (<Redirect to="/app/university/undefined" />)} path="/app/university/"
/> render={() => (<Redirect to="/app/university/undefined" />)}
<Route path="/app/filter" component={PageFilter} /> />
<Route path="/app/settings" component={PageSettings} /> </div>
<div >
<Route path="/app/university/:id" component={PageUniversity} />
</div>
</main> </main>
</div> </div>
</React.Fragment> </React.Fragment>
......
...@@ -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>
); );
} }
......
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
// 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
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
main.js main.js
\ No newline at end of file main.css
...@@ -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' %}"/>
<link rel="stylesheet" href="{% static '/frontend/main.css' %}"/>
<script src="{% static "/frontend/main.js" %}"></script> <script src="{% static "/frontend/main.js" %}"></script>
<noscript>Cette application nécessite Javascript... Merci de l'activer ou d'utiliser un navigateur approprié.</noscript> <noscript>Cette application nécessite Javascript... Merci de l'activer ou d'utiliser un navigateur approprié.</noscript>
</html> </html>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -19,21 +19,26 @@ ...@@ -19,21 +19,26 @@
"@material-ui/docs": "^1.0.0-alpha.5", "@material-ui/docs": "^1.0.0-alpha.5",
"@material-ui/lab": "^3.0.0-alpha.14", "@material-ui/lab": "^3.0.0-alpha.14",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"babel-preset-stage-0": "^6.24.1",
"cross-fetch": "^2.2.2", "cross-fetch": "^2.2.2",
"downshift": "^2.2.0", "downshift": "^2.2.0",
"extract-text-webpack-plugin": "^3.0.2",
"fuzzysort": "^1.1.4", "fuzzysort": "^1.1.4",
"js-cookie": "^2.2.0", "js-cookie": "^2.2.0",
"leaflet.markercluster": "^1.3.0", "leaflet.markercluster": "^1.3.0",
"react-awesome-slider": "^0.5.2",
"react-redux": "^5.0.7", "react-redux": "^5.0.7",
"react-router-dom": "^4.3.1", "react-router-dom": "^4.3.1",
"react-swipeable-views": "^0.12.17", "react-swipeable-views": "^0.12.17",
"redux": "^4.0.0", "redux": "^4.0.0",
"redux-logger": "^3.0.6", "redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0", "redux-thunk": "^2.3.0",
"style-loader": "^0.23.0",
"underscore": "^1.9.1" "underscore": "^1.9.1"
}, },
"devDependencies": { "devDependencies": {
"@material-ui/icons": "^2.0.3", "@material-ui/icons": "^2.0.3",
"autoprefixer": "^9.1.5",
"babel-core": "^6.26.3", "babel-core": "^6.26.3",
"babel-loader": "^7.1.5", "babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-class-properties": "^6.24.1",
...@@ -45,13 +50,18 @@ ...@@ -45,13 +50,18 @@
"eslint": "^5.4.0", "eslint": "^5.4.0",
"eslint-config-google": "^0.9.1", "eslint-config-google": "^0.9.1",
"leaflet": "^1.3.4", "leaflet": "^1.3.4",
"mini-css-extract-plugin": "^0.4.2",
"node-sass": "^4.9.3",
"postcss-loader": "^3.0.0",
"prop-types": "^15.6.2", "prop-types": "^15.6.2",
"react": "^16.4.2", "react": "^16.4.2",
"react-dom": "^16.4.2", "react-dom": "^16.4.2",
"react-leaflet": "^2.0.1", "react-leaflet": "^2.0.1",
"react-lorem-component": "^0.13.0",
"react-script": "^2.0.5", "react-script": "^2.0.5",
"recharts": "^1.1.0", "recharts": "^1.1.0",
"redux-devtools": "^3.4.1", "redux-devtools": "^3.4.1",
"sass-loader": "^7.1.0",
"weak-key": "^1.0.1", "weak-key": "^1.0.1",
"webpack": "^4.17.0", "webpack": "^4.17.0",
"webpack-cli": "^3.1.0" "webpack-cli": "^3.1.0"
......
module.exports = { const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module: {
rules: [ const config = {
{ module: {
test: /\.js$/, rules: [
exclude: /node_modules/, {
use: { test: /\.js$/,
loader: "babel-loader" exclude: /node_modules/,
} loader: 'babel-loader',
options: {
presets: ['es2015', 'react', 'stage-0'],
},
},
{