Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Julien Jerphanion
Rex Dri
Commits
4ba197b3
Commit
4ba197b3
authored
Sep 08, 2018
by
Florent Chehab
Browse files
MyBadge added and less grid => no more glitch
parent
ec8fbab1
Changes
4
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/shared/MyBadge.js
0 → 100644
View file @
4ba197b3
import
React
from
'
react
'
;
import
Badge
from
'
@material-ui/core/Badge
'
;
// Function that renders the badge only if there is content to render.
export
default
function
MyBadge
(
props
)
{
if
(
props
.
badgeContent
)
{
return
(
<
Badge
{...
props
}
>
{
props
.
children
}
<
/Badge
>
)
}
else
{
return
(
props
.
children
);
}
}
\ No newline at end of file
frontend/src/components/university/modules/GenericModule.js
View file @
4ba197b3
...
...
@@ -4,7 +4,6 @@ import Tooltip from '@material-ui/core/Tooltip';
import
Button
from
'
@material-ui/core/Button
'
;
import
IconButton
from
'
@material-ui/core/IconButton
'
;
import
Badge
from
'
@material-ui/core/Badge
'
;
import
Grid
from
'
@material-ui/core/Grid
'
;
import
Typography
from
'
@material-ui/core/Typography
'
;
import
Paper
from
'
@material-ui/core/Paper
'
;
...
...
@@ -17,6 +16,7 @@ import VerifiedUserIcon from '@material-ui/icons/VerifiedUser';
import
LinkIcon
from
'
@material-ui/icons/Link
'
;
import
FullScreenDialog
from
'
../../shared/FullScreenDialog
'
;
import
MyBadge
from
'
../../shared/MyBadge
'
;
import
red
from
'
@material-ui/core/colors/red
'
;
import
orange
from
'
@material-ui/core/colors/orange
'
;
...
...
@@ -61,6 +61,97 @@ const styles = theme => ({
},
})
function
renderFirstRow
()
{
const
{
classes
,
title
,
automaticData
,
theme
}
=
this
.
props
;
let
classEdit
=
"
green
"
,
classModer
=
"
orange
"
,
classVersion
=
"
red
"
;
if
(
automaticData
)
{
classEdit
=
"
disabled
"
;
classModer
=
"
disabled
"
;
classVersion
=
"
disabled
"
;
}
return
(
<
Grid
container
spacing
=
{
8
}
>
<
Grid
item
xs
>
<
Typography
variant
=
'
display1
'
>
{
title
}
<
/Typography
>
<
Typography
variant
=
'
caption
'
>
Mis
à
jour
par
<
em
>
chehabfl
<
/em> le 08/
09
/
2018
à
15
h20
<
/Typography
>
<
/Grid
>
<
Grid
item
xs
=
{
4
}
style
=
{{
textAlign
:
'
right
'
}}
>
<
Tooltip
title
=
"
Informations sur la modération
"
placement
=
"
top
"
>
<
div
style
=
{{
display
:
'
inline-block
'
}}
>
{
/* Needed to fire events for the tooltip! */
}
<
MyBadge
classes
=
{{
badge
:
classes
.
badge
}}
badgeContent
=
{
null
}
color
=
"
secondary
"
>
<
IconButton
aria
-
label
=
"
Modération
"
disabled
=
{
automaticData
}
className
=
{
classes
.
button
}
>
<
VerifiedUserIcon
className
=
{
classes
[
classModer
]}
/
>
<
/IconButton
>
<
/MyBadge
>
<
/div
>
<
/Tooltip
>
<
Tooltip
title
=
"
Informations sur les possibilités d'éditions
"
placement
=
"
top
"
>
<
div
style
=
{{
display
:
'
inline-block
'
}}
>
{
/* Needed to fire events for the tooltip! */
}
<
IconButton
aria
-
label
=
"
Éditer
"
className
=
{
classes
.
button
}
disabled
=
{
automaticData
}
onClick
=
{
this
.
handleClickOpenFullScreenDialog
}
>
<
CreateIcon
className
=
{
classes
[
classEdit
]}
/
>
<
/IconButton
>
<
/div
>
<
/Tooltip
>
<
Tooltip
title
=
"
Informations sur les versions disponibles
"
placement
=
"
top
"
>
<
div
style
=
{{
display
:
'
inline-block
'
}}
>
{
/* Needed to fire events for the tooltip! */
}
<
MyBadge
classes
=
{{
badge
:
classes
.
badge
}}
badgeContent
=
{
40
}
color
=
"
secondary
"
>
<
IconButton
aria
-
label
=
"
Restorer
"
disabled
=
{
automaticData
}
className
=
{
classes
.
button
}
>
<
SettingsBackRestoreIcon
className
=
{
classes
[
classVersion
]}
/
>
<
/IconButton
>
<
/MyBadge
>
<
/div
>
<
/Tooltip
>
<
/Grid
>
<
/Grid
>
)
}
function
renderUsefulLinks
()
{
const
{
classes
,
usefulLinks
}
=
this
.
props
;
const
nbItems
=
usefulLinks
.
length
;
if
(
nbItems
==
0
)
{
return
(
<
div
><
/div>
)
}
const
s
=
nbItems
>
1
?
"
s
"
:
""
;
return
(
<
div
>
<
Typography
variant
=
'
caption
'
>
Source
{
s
}
:
<
/Typography
>
<
div
className
=
{
classes
.
rootLinks
}
>
{
usefulLinks
.
map
((
el
,
index
)
=>
{
return
(
<
Chip
key
=
{
index
}
avatar
=
{
<
Avatar
>
<
LinkIcon
/>
<
/Avatar
>
}
label
=
{
el
.
description
}
className
=
{
classes
.
chip
}
color
=
"
secondary
"
onClick
=
{()
=>
open
(
el
.
url
,
'
_blank
'
)}
variant
=
"
outlined
"
/>
)
})
}
<
/div
>
<
/div
>
)
}
class
GenericModule
extends
React
.
Component
{
state
=
{
...
...
@@ -81,54 +172,12 @@ class GenericModule extends React.Component {
<
div
>
<
FullScreenDialog
open
=
{
this
.
state
.
fullScreenDialogOpen
}
handleClose
=
{
this
.
handleCloseFullScreenDialog
}
/
>
<
Paper
className
=
{
classes
.
root
}
square
=
{
true
}
>
<
Grid
container
spacing
=
{
8
}
>
<
Grid
item
xs
>
<
Typography
variant
=
'
display1
'
>
{
title
}
<
/Typography
>
<
Typography
variant
=
'
caption
'
>
Mis
à
jour
par
<
em
>
chehabfl
<
/em> le 08/
09
/
2018
à
15
h20
<
/Typography
>
<
/Grid
>
<
Grid
item
xs
=
{
4
}
style
=
{{
textAlign
:
'
right
'
}}
>
<
Tooltip
title
=
"
Informations sur la modération
"
placement
=
"
top
"
>
<
Badge
classes
=
{{
badge
:
classes
.
badge
}}
badgeContent
=
{
4
}
color
=
"
secondary
"
>
<
IconButton
aria
-
label
=
"
Modération
"
className
=
{
classes
.
button
}
>
<
VerifiedUserIcon
className
=
{
classes
.
red
}
/
>
<
/IconButton
>
<
/Badge
>
<
/Tooltip
>
<
Tooltip
title
=
"
Informations sur les possibilités d'éditions
"
placement
=
"
top
"
>
<
IconButton
aria
-
label
=
"
Éditer
"
className
=
{
classes
.
button
}
onClick
=
{
this
.
handleClickOpenFullScreenDialog
}
>
<
CreateIcon
className
=
{
classes
.
green
}
/
>
<
/IconButton
>
<
/Tooltip
>
<
Tooltip
title
=
"
Informations sur les versions disponibles
"
placement
=
"
top
"
>
<
Badge
classes
=
{{
badge
:
classes
.
badge
}}
badgeContent
=
{
40
}
color
=
"
secondary
"
>
<
IconButton
aria
-
label
=
"
Restorer
"
className
=
{
classes
.
button
}
>
<
SettingsBackRestoreIcon
className
=
{
classes
.
orange
}
/
>
<
/IconButton
>
<
/Badge
>
<
/Tooltip
>
<
/Grid
>
<
/Grid
>
{
renderFirstRow
.
bind
(
this
)()}
<
div
>
{
this
.
props
.
children
}
<
/div
>
<
div
className
=
{
classes
.
rootLinks
}
>
<
Chip
avatar
=
{
<
Avatar
>
<
LinkIcon
/>
<
/Avatar
>
}
label
=
"
Site de l'EPFL
"
className
=
{
classes
.
chip
}
color
=
"
secondary
"
onClick
=
{()
=>
console
.
log
(
"
test
"
)}
variant
=
"
outlined
"
/>
<
/div
>
{
renderUsefulLinks
.
bind
(
this
)()}
<
/Paper
>
<
/div
>
)
...
...
@@ -137,7 +186,9 @@ class GenericModule extends React.Component {
GenericModule
.
defaultProps
=
{
title
:
"
Titre du module
"
title
:
"
Titre du module
"
,
automaticData
:
false
,
usefulLinks
:
[]
};
export
default
withStyles
(
styles
,
{
withTheme
:
true
})(
GenericModule
);
\ No newline at end of file
frontend/src/components/university/modules/UniversitySemestersDates.js
View file @
4ba197b3
...
...
@@ -45,7 +45,7 @@ class UniversitySemestersDates extends React.Component {
render
()
{
const
{
classes
,
theme
}
=
this
.
props
;
return
(
<
GenericModule
title
=
{
"
Date des semestres
"
}
>
<
GenericModule
title
=
{
"
Date des semestres
"
}
usefulLinks
=
{[{
description
:
"
Site de l'EPFL
"
,
url
:
"
https://epfl.ch
"
}]}
>
<
div
className
=
{
classes
.
root
}
>
<
Table
>
<
TableHead
>
...
...
@@ -71,7 +71,7 @@ class UniversitySemestersDates extends React.Component {
<
TableRow
key
=
{
2
}
>
<
TableCell
className
=
{
classes
.
tableCell
}
component
=
"
td
"
>
<
div
className
=
{
classes
.
content
}
>
<
LocalFloristIcon
color
=
'
disabled
'
className
=
{
classes
.
icon
}
/
>
<
LocalFloristIcon
color
=
'
disabled
'
className
=
{
classes
.
icon
}
/
>
<
div
>
Printemps
<
/div
>
<
/div
>
<
/TableCell
>
...
...
@@ -82,8 +82,8 @@ class UniversitySemestersDates extends React.Component {
<
/TableBody
>
<
/Table
>
<
/div
>
<
Markdown
source
=
{
comment
}
/
>
<
/GenericModule
>
<
Markdown
source
=
{
comment
}
/
>
<
/GenericModule
>
)
}
}
...
...
frontend/src/components/university/tabs/GeneralInfoTab.js
View file @
4ba197b3
...
...
@@ -15,48 +15,53 @@ import UniversitySemestersDates from '../modules/UniversitySemestersDates';
import
withWidth
,
{
isWidthUp
}
from
'
@material-ui/core/withWidth
'
;
const
styles
=
theme
=>
({
root
:
{
flexGrow
:
1
,
},
root1
:
{
display
:
'
flex
'
,
width
:
"
90%
"
,
marginLeft
:
"
auto
"
,
marginRight
:
"
auto
"
},
root2
:
{
display
:
'
flex
'
,
width
:
"
100%
"
},
});
class
GeneralInfo
extends
MyComponent
{
myRender
()
{
const
{
classes
}
=
this
.
props
;
const
{
classes
,
theme
}
=
this
.
props
;
// Resizing with the grid was causing weird gaps so we rerender depending on the width
if
(
isWidthUp
(
'
lg
'
,
this
.
props
.
width
))
{
return
(
<
div
className
=
{
classes
.
root
}
>
<
Grid
container
spacing
=
{
16
}
justify
=
'
center
'
alignItems
=
"
flex-start
"
>
<
div
className
=
{
classes
.
root1
}
>
<
Grid
item
lg
=
{
7
}
>
<
Grid
className
=
{
classes
.
root
}
container
spacing
=
{
16
}
direction
=
'
column
'
>
<
Grid
item
xs
>
<
UniversityGeneral
/>
<
/Grid
>
<
Grid
item
xs
>
<
GenericModule
title
=
{
"
DRI
"
}
/
>
<
/Grid
>
<
div
style
=
{{
flexGrow
:
6
,
paddingRight
:
2
*
theme
.
spacing
.
unit
}}
>
<
Grid
container
direction
=
'
column
'
>
<
Grid
item
xs
style
=
{{
paddingBottom
:
2
*
theme
.
spacing
.
unit
}}
>
<
UniversityGeneral
/>
<
/Grid
>
<
Grid
item
xs
>
<
GenericModule
title
=
{
"
DRI
"
}
/
>
<
/Grid
>
<
/Grid
>
<
Grid
item
lg
=
{
5
}
>
<
Grid
className
=
{
classes
.
root
}
container
spacing
=
{
16
}
direction
=
'
column
'
>
<
Grid
item
xs
>
<
UniversitySemestersDates
/>
<
/Grid
>
<
Grid
item
xs
>
<
GenericModule
title
=
{
"
Offres de départs
"
}
/
>
<
/Grid
>
<
/div
>
<
div
style
=
{{
flexGrow
:
4
}}
>
<
Grid
container
direction
=
'
column
'
>
<
Grid
item
xs
style
=
{{
paddingBottom
:
2
*
theme
.
spacing
.
unit
}}
>
<
UniversitySemestersDates
/>
<
/Grid
>
<
Grid
item
xs
>
<
GenericModule
title
=
{
"
Offres de départs
"
}
automaticData
=
{
true
}
/
>
<
/Grid
>
<
/Grid
>
<
/div
>
<
/Grid
>
<
Lorem
count
=
{
20
}
/
>
<
/div
>
);
}
else
{
return
(
<
div
className
=
{
classes
.
root
}
>
<
div
className
=
{
classes
.
root
2
}
>
<
Grid
container
spacing
=
{
16
}
>
<
Grid
item
xs
=
{
12
}
>
...
...
@@ -69,12 +74,11 @@ class GeneralInfo extends MyComponent {
<
UniversitySemestersDates
/>
<
/Grid
>
<
Grid
item
xs
=
{
12
}
>
<
GenericModule
title
=
{
"
Offres de départs
"
}
/
>
<
GenericModule
title
=
{
"
Offres de départs
"
}
automaticData
=
{
true
}
/
>
<
/Grid
>
<
/Grid
>
<
Lorem
count
=
{
20
}
/
>
<
/div
>
);
}
...
...
@@ -89,5 +93,5 @@ class GeneralInfo extends MyComponent {
export
default
compose
(
withWidth
({
noSSR
:
true
}),
withStyles
(
styles
)
withStyles
(
styles
,
{
withTheme
:
true
}
)
)(
GeneralInfo
);
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment