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
Pipeline #27032 passed with stages
in 2 minutes and 19 seconds
Expand all Hide 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';
import { connect } from "react-redux";
import MyComponent from './MyComponent'
// import route Components here
import {
Route,
......@@ -92,6 +91,10 @@ const styles = theme => ({
padding: theme.spacing.unit * 3,
height: '100vh',
overflow: 'auto',
paddingTop: "0px"
},
paddingTop: {
paddingTop: "24px"
},
chartContainer: {
marginLeft: -22,
......@@ -160,19 +163,22 @@ class App extends MyComponent {
<List>{secondaryListItems}</List>
</Drawer>
<main className={classes.content}>
<Route path="/app/" exact={true} component={PageHome} />
<Route path="/app/search" component={PageSearch} />
<Route path="/app/map" component={PageMap} />
<Route path="/app/university/:id" component={PageUniversity} />
<Route
exact
path="/app/university/"
render={() => (<Redirect to="/app/university/undefined" />)}
/>
<Route path="/app/filter" component={PageFilter} />
<Route path="/app/settings" component={PageSettings} />
<main className={classNames(classes.content, classes.noPaddingTop)}>
<div className={classes.paddingTop}>
<Route path="/app/" exact={true} component={PageHome} />
<Route path="/app/search" component={PageSearch} />
<Route path="/app/map" component={PageMap} />
<Route path="/app/filter" component={PageFilter} />
<Route path="/app/settings" component={PageSettings} />
<Route
exact
path="/app/university/"
render={() => (<Redirect to="/app/university/undefined" />)}
/>
</div>
<div >
<Route path="/app/university/:id" component={PageUniversity} />
</div>
</main>
</div>
</React.Fragment>
......
frontend/src/components/pages/PageUniversity.js
View file @ 4264ef36
......@@ -9,6 +9,8 @@ import DialogActions from '@material-ui/core/DialogActions';
import DialogTitle from '@material-ui/core/DialogTitle';
import Button from '@material-ui/core/Button';
import UniversityTemplate from '../university/UniversityTemplate';
import {
NavLink,
Redirect
......@@ -61,13 +63,7 @@ function renderFirstTimeHere() {
function renderDefaultView(univId) {
return (
<Paper>
<Typography variant="display1">
Université {univId}
</Typography>
</Paper>
<UniversityTemplate univId={univId} />
);
}
......
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/static/frontend/.gitignore
View file @ 4264ef36
main.js
\ No newline at end of file
main.js
main.css
frontend/templates/frontend/index.html
View file @ 4264ef36
......@@ -19,6 +19,7 @@
{% load static %}
<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/main.css' %}"/>
<script src="{% static "/frontend/main.js" %}"></script>
<noscript>Cette application nécessite Javascript... Merci de l'activer ou d'utiliser un navigateur approprié.</noscript>
</html>
\ No newline at end of file
package-lock.json
View file @ 4264ef36
This diff is collapsed.