Skip to content

GitLab

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

Work on university page began, layout ready

parent f27fea4a
Pipeline #27032 passed with stages
      in 2 minutes and 19 seconds
      Hide whitespace changes
      Inline Side-by-side
      Showing with 2189 additions and 135 deletions
      .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 source diff could not be displayed because it is too large. You can view the blob instead.