Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Rex Dri
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
32
Issues
32
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Environments
Packages & Registries
Packages & Registries
Container Registry
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Rex Dri
Rex Dri
Commits
4264ef36
Commit
4264ef36
authored
Sep 07, 2018
by
Florent Chehab
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Work on university page began, layout ready
parent
f27fea4a
Pipeline
#27032
passed with stages
in 2 minutes and 19 seconds
Changes
11
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
2189 additions
and
135 deletions
+2189
-135
.postcssrc.json
.postcssrc.json
+7
-0
frontend/src/components/App.js
frontend/src/components/App.js
+20
-14
frontend/src/components/pages/PageUniversity.js
frontend/src/components/pages/PageUniversity.js
+3
-7
frontend/src/components/university/CoverGallery.js
frontend/src/components/university/CoverGallery.js
+16
-0
frontend/src/components/university/CoverGallery.scss
frontend/src/components/university/CoverGallery.scss
+364
-0
frontend/src/components/university/UniversityTemplate.js
frontend/src/components/university/UniversityTemplate.js
+95
-0
frontend/static/frontend/.gitignore
frontend/static/frontend/.gitignore
+2
-1
frontend/templates/frontend/index.html
frontend/templates/frontend/index.html
+1
-0
package-lock.json
package-lock.json
+1631
-102
package.json
package.json
+10
-0
webpack.config.js
webpack.config.js
+40
-11
No files found.
.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.
package.json
View file @
4264ef36
...
...
@@ -19,21 +19,26 @@
"
@material-ui/docs
"
:
"
^1.0.0-alpha.5
"
,
"
@material-ui/lab
"
:
"
^3.0.0-alpha.14
"
,
"
babel-polyfill
"
:
"
^6.26.0
"
,
"
babel-preset-stage-0
"
:
"
^6.24.1
"
,
"
cross-fetch
"
:
"
^2.2.2
"
,
"
downshift
"
:
"
^2.2.0
"
,
"
extract-text-webpack-plugin
"
:
"
^3.0.2
"
,
"
fuzzysort
"
:
"
^1.1.4
"
,
"
js-cookie
"
:
"
^2.2.0
"
,
"
leaflet.markercluster
"
:
"
^1.3.0
"
,
"
react-awesome-slider
"
:
"
^0.5.2
"
,
"
react-redux
"
:
"
^5.0.7
"
,
"
react-router-dom
"
:
"
^4.3.1
"
,
"
react-swipeable-views
"
:
"
^0.12.17
"
,
"
redux
"
:
"
^4.0.0
"
,
"
redux-logger
"
:
"
^3.0.6
"
,
"
redux-thunk
"
:
"
^2.3.0
"
,
"
style-loader
"
:
"
^0.23.0
"
,
"
underscore
"
:
"
^1.9.1
"
},
"devDependencies"
:
{
"
@material-ui/icons
"
:
"
^2.0.3
"
,
"
autoprefixer
"
:
"
^9.1.5
"
,
"
babel-core
"
:
"
^6.26.3
"
,
"
babel-loader
"
:
"
^7.1.5
"
,
"
babel-plugin-transform-class-properties
"
:
"
^6.24.1
"
,
...
...
@@ -45,13 +50,18 @@
"
eslint
"
:
"
^5.4.0
"
,
"
eslint-config-google
"
:
"
^0.9.1
"
,
"
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
"
,
"
react
"
:
"
^16.4.2
"
,
"
react-dom
"
:
"
^16.4.2
"