Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Corentin Mors
avis-de-template-server
Commits
51af204a
Commit
51af204a
authored
Dec 07, 2018
by
Soulet Corentin
Browse files
Poffinage du DashBoard
parent
4935a732
Changes
3
Hide whitespace changes
Inline
Side-by-side
public/assets/css/style.css
View file @
51af204a
...
...
@@ -114,6 +114,10 @@ body {
color
:
#fff
;
}
.breadcrumb
{
display
:
block
;
}
.dashboard
.card-body
{
background
:
#449644
;
...
...
@@ -146,7 +150,7 @@ body {
animation-iteration-count: infinite;
}
@-webkit-keyframes beating {
0% {transform: scale(0.1,0.1);}
10% {transform: scale(0.3,0.3)}
...
...
@@ -260,7 +264,7 @@ a[aria-expanded="true"] {
.sameHauteur
{
align-items
:
center
;
}
/** dark CSS */
.dark
{
...
...
public/assets/dist/style.min.css
View file @
51af204a
body
{
padding-top
:
5rem
;
background-color
:
#fff
}
.footer-text
{
display
:
block
;
text-align
:
center
}
.contenttype-title
{
display
:
flex
}
.contenttype-title
h3
{
flex
:
1
0
}
.contenttype-all-button
{
margin-top
:
5px
}
.list-group-item-flex
{
display
:
flex
}
.list-group-item-tools
{
display
:
block
;
width
:
30px
}
.list-group-item-image
{
margin-right
:
10px
}
.list-group-item-content
{
flex
:
1
0
}
.box
{
margin-bottom
:
20px
;
border
:
2px
solid
#000
;
border-radius
:
6px
;
line-height
:
40px
;
text-align
:
center
;
padding-top
:
10px
;
background-color
:
#c3cee4
}
.content-input
{
height
:
500px
}
.article
{
padding-left
:
1rem
;
padding-bottom
:
1rem
}
[
class
*=
col-xs
]
{
width
:
auto
}
.container
{
padding-right
:
15px
;
padding-left
:
15px
;
margin-right
:
auto
;
margin-left
:
auto
;
align-items
:
center
}
@media
(
min-width
:
768px
){
.container
{
width
:
1170px
}}
@media
(
min-width
:
992px
){
.container
{
width
:
970px
}}
@media
(
min-width
:
1200px
){
.container
{
width
:
1170px
}}
#accordion-faq
.card
{
margin-bottom
:
10px
}
.content-box
{
display
:
flex
;
margin
:
0
0
45px
;
padding
:
30px
;
background-color
:
#9d9d9d
;
color
:
#fff
}
.dashboard
.card-body
{
background
:
#449644
;
display
:
flex
;
justify-content
:
center
;
width
:
auto
}
.card-body-item
{
height
:
100%
;
width
:
100%
}
.card-body-item
:nth-child
(
1
)
{
break-after
:
always
}
.card-body-item
span
{
font-size
:
2.5em
;
color
:
#fff
}
.wrapper
{
display
:
flex
;
width
:
100%
}
#sidebar
{
width
:
250px
;
margin-left
:
-250px
;
position
:
fixed
;
top
:
0
;
left
:
0
;
height
:
100vh
;
z-index
:
999
;
background
:
#7386d5
;
color
:
#fff
;
transition
:
all
.3s
}
#sidebar
.active
{
margin-left
:
0
}
#sidebar
.sidebar-header
{
padding
:
20px
;
background
:
#6d7fcc
}
#sidebar
ul
.components
{
padding
:
20px
0
;
border-bottom
:
1px
solid
#47748b
}
#sidebar
ul
p
{
color
:
#fff
;
padding
:
10px
}
#sidebar
ul
li
a
{
text-decoration
:
none
;
color
:
#fff
;
padding
:
10px
;
font-size
:
1.1em
;
display
:
block
}
#sidebar
ul
li
a
:hover
{
color
:
#7386d5
;
background
:
#fff
}
#sidebar
ul
li
.active
>
a
,
a
[
aria-expanded
=
true
]
{
color
:
#fff
;
background
:
#6d7fcc
}
#content
{
width
:
100%
;
padding
:
40px
;
min-height
:
100vh
;
transition
:
all
.3s
;
position
:
absolute
;
top
:
0
;
right
:
0
}
#content
.active
{
width
:
calc
(
100%
-
250px
)}
.content-input
{
height
:
500px
}
.task
{
padding
:
2px
;
margin-top
:
10px
;
border-radius
:
5px
;
border
:
2px
solid
#112f41
}
.sameHauteur
{
align-items
:
center
}
.dark
{
background-color
:
#112f41
;
color
:
#fff
}
.dark
.task
{
border-color
:
#878787
}
.dark
.modal-content
{
background-color
:
#1e4363
}
.dark
.btn
{
background-color
:
#1c88cc
}
.dark
.dropdown-menu
{
background-color
:
#1e4363
}
.dark
.dropdown-item
{
color
:
#fff
}
.dark
.card
{
background-color
:
#1e4363
}
.dark
.breadcrumb
{
background-color
:
#1e4363
}
.dark
a
{
color
:
#fff
}
.dark
.btn-link
{
color
:
#fff
}
.dark
.card
.btn
{
background-color
:
transparent
}
\ No newline at end of file
body
{
padding-top
:
5rem
;
background-color
:
#fff
}
.footer-text
{
display
:
block
;
text-align
:
center
}
.contenttype-title
{
display
:
flex
}
.contenttype-title
h3
{
flex
:
1
0
}
.contenttype-all-button
{
margin-top
:
5px
}
.list-group-item-flex
{
display
:
flex
}
.list-group-item-tools
{
display
:
block
;
width
:
30px
}
.list-group-item-image
{
margin-right
:
10px
}
.list-group-item-content
{
flex
:
1
0
}
.box
{
margin-bottom
:
20px
;
border
:
2px
solid
#000
;
border-radius
:
6px
;
line-height
:
40px
;
text-align
:
center
;
padding-top
:
10px
;
background-color
:
#c3cee4
}
.content-input
{
height
:
500px
}
.article
{
padding-left
:
1rem
;
padding-bottom
:
1rem
}
[
class
*=
col-xs
]
{
width
:
auto
}
.container
{
padding-right
:
15px
;
padding-left
:
15px
;
margin-right
:
auto
;
margin-left
:
auto
;
align-items
:
center
}
@media
(
min-width
:
768px
){
.container
{
width
:
1170px
}}
@media
(
min-width
:
992px
){
.container
{
width
:
970px
}}
@media
(
min-width
:
1200px
){
.container
{
width
:
1170px
}}
#accordion-faq
.card
{
margin-bottom
:
10px
}
.content-box
{
display
:
flex
;
margin
:
0
0
45px
;
padding
:
30px
;
background-color
:
#9d9d9d
;
color
:
#fff
}
.breadcrumb
{
display
:
block
}
.dashboard
.card-body
{
background
:
#449644
;
display
:
flex
;
justify-content
:
center
;
width
:
auto
}
.card-body-item
{
height
:
100%
;
width
:
100%
}
.card-body-item
:nth-child
(
1
)
{
break-after
:
always
}
.card-body-item
span
{
font-size
:
2.5em
;
color
:
#fff
}
.wrapper
{
display
:
flex
;
width
:
100%
}
#sidebar
{
width
:
250px
;
margin-left
:
-250px
;
position
:
fixed
;
top
:
0
;
left
:
0
;
height
:
100vh
;
z-index
:
999
;
background
:
#7386d5
;
color
:
#fff
;
transition
:
all
.3s
}
#sidebar
.active
{
margin-left
:
0
}
#sidebar
.sidebar-header
{
padding
:
20px
;
background
:
#6d7fcc
}
#sidebar
ul
.components
{
padding
:
20px
0
;
border-bottom
:
1px
solid
#47748b
}
#sidebar
ul
p
{
color
:
#fff
;
padding
:
10px
}
#sidebar
ul
li
a
{
text-decoration
:
none
;
color
:
#fff
;
padding
:
10px
;
font-size
:
1.1em
;
display
:
block
}
#sidebar
ul
li
a
:hover
{
color
:
#7386d5
;
background
:
#fff
}
#sidebar
ul
li
.active
>
a
,
a
[
aria-expanded
=
true
]
{
color
:
#fff
;
background
:
#6d7fcc
}
#content
{
width
:
100%
;
padding
:
40px
;
min-height
:
100vh
;
transition
:
all
.3s
;
position
:
absolute
;
top
:
0
;
right
:
0
}
#content
.active
{
width
:
calc
(
100%
-
250px
)}
.content-input
{
height
:
500px
}
.task
{
padding
:
2px
;
margin-top
:
10px
;
border-radius
:
5px
;
border
:
2px
solid
#112f41
}
.sameHauteur
{
align-items
:
center
}
.dark
{
background-color
:
#112f41
;
color
:
#fff
}
.dark
.task
{
border-color
:
#878787
}
.dark
.modal-content
{
background-color
:
#1e4363
}
.dark
.btn
{
background-color
:
#1c88cc
}
.dark
.dropdown-menu
{
background-color
:
#1e4363
}
.dark
.dropdown-item
{
color
:
#fff
}
.dark
.card
{
background-color
:
#1e4363
}
.dark
.breadcrumb
{
background-color
:
#1e4363
}
.dark
a
{
color
:
#fff
}
.dark
.btn-link
{
color
:
#fff
}
.dark
.card
.btn
{
background-color
:
transparent
}
\ No newline at end of file
views/dashboard.html
View file @
51af204a
...
...
@@ -3,16 +3,18 @@
{% block content %}
<main
role=
"main"
class=
"container-fluid dashboard"
>
<!-- Health Breadcrumbs-->
<br>
<ol
class=
"breadcrumb"
>
<li
class=
"breadcrumb-item"
>
Health
Health
<span
class=
"float-right"
><i
class=
"fas fa-heartbeat"
></i></span>
</li>
</ol>
<div
class=
"row"
>
<div
class=
"col-sm"
>
<!-- Icon Cards-->
<div
class=
"card"
>
<div
class=
"card-header"
>
Heart rate
<span
class=
"float-right"
><i
class=
"fas fa-heartbeat"
></i></span>
<div
class=
"card-header"
>
Heart rate
</div>
<div
class=
"card-body"
>
<div
class=
"card-body-item"
>
...
...
@@ -23,7 +25,7 @@
</div>
</div>
<a
class=
"card-footer"
href=
"#"
>
<span
class=
"float-left"
>
View
detailed History of Heart Rate
</span>
<span
class=
"float-left"
>
View
History and Details
</span>
<span
class=
"float-right"
><i
class=
"fas fa-angle-right"
></i></span>
</a>
</div>
...
...
@@ -31,7 +33,7 @@
<div
class=
"col-sm"
>
<!-- Icon Cards-->
<div
class=
"card"
>
<div
class=
"card-header"
>
Body Temperature
<span
class=
"float-right"
><i
class=
"fas fa-heartbeat"
></i></span>
<div
class=
"card-header"
>
Body Temperature
</div>
<div
class=
"card-body"
>
<div
class=
"card-body-item"
>
...
...
@@ -42,7 +44,7 @@
</div>
</div>
<a
class=
"card-footer"
href=
"#"
>
<span
class=
"float-left"
>
View
detailed History of Heart Rate
</span>
<span
class=
"float-left"
>
View
History and Details
</span>
<span
class=
"float-right"
><i
class=
"fas fa-angle-right"
></i></span>
</a>
</div>
...
...
@@ -52,25 +54,25 @@
<!-- Environment Breadcrumbs-->
<p>
<ol
class=
"breadcrumb"
>
<li
class=
"breadcrumb-item"
>
Environment
</li>
<li
class=
"breadcrumb-item"
>
Environment
<span
class=
"float-right"
><i
class=
"fas fa-leaf"
></i></span>
</li>
</ol>
</p>
<div
class=
"row"
>
<div
class=
"col-sm"
>
<!-- Icon Cards-->
<div
class=
"card"
>
<div
class=
"card-header"
>
M
éteo
<span
class=
"float-right"
><i
class=
"fas fa-heartbeat"
></i></span>
<div
class=
"card-header"
>
M
eteo
</div>
<div
class=
"card-body"
>
<div
class=
"card-body-item"
>
<i
style=
"color: white;"
class=
"fas fa-sun fa-5x"
></i>
<i
style=
"color: white;"
class=
"fas fa-
cloud-
sun fa-5x"
></i>
</div>
<div
class=
"card-body-item"
>
<span>
50 °C
</span>
</div>
</div>
<a
class=
"card-footer"
href=
"#"
>
<span
class=
"float-left"
>
View
detailed History of Meteo
</span>
<span
class=
"float-left"
>
View
History and Details
</span>
<span
class=
"float-right"
><i
class=
"fas fa-angle-right"
></i></span>
</a>
</div>
...
...
@@ -78,19 +80,19 @@
<div
class=
"col-sm"
>
<!-- Icon Cards-->
<div
class=
"card"
>
<div
class=
"card-header"
>
Wind
<span
class=
"float-right"
><i
class=
"fas fa-heartbeat"
></i></span>
<div
class=
"card-header"
>
Wind
</div>
<div
class=
"card-body"
>
<div
class=
"card-body-item"
>
<i
style=
"color: white;"
class=
"fas fa-wind fa-5x"
></i>
<i
style=
"color: white;"
class=
"fas fa-arrow-up fa-5x"
></i>
</div>
<div
class=
"card-body-item"
>
<span>
North > 60 km/h
</span>
<span>
<i
style=
"color: white;"
class=
"fas fa-arrow-up"
></i>
North > 60 km/h
</span>
</div>
</div>
<a
class=
"card-footer"
href=
"#"
>
<span
class=
"float-left"
>
View
detailed History of Meteo
</span>
<span
class=
"float-left"
>
View
History and Details
</span>
<span
class=
"float-right"
><i
class=
"fas fa-angle-right"
></i></span>
</a>
</div>
...
...
@@ -100,21 +102,21 @@
<!-- Ressources Breadcrumbs-->
<p>
<ol
class=
"breadcrumb"
>
<li
class=
"breadcrumb-item"
>
Ressources
</li>
<li
class=
"breadcrumb-item"
>
Ressources
<span
class=
"float-right"
><i
class=
"fas fa-box"
></i></span>
</li>
</ol>
</p>
<div
class=
"row"
>
<div
class=
"col-sm"
>
<!-- Icon Cards-->
<div
class=
"card"
>
<div
class=
"card-header"
>
Water Capacity
<span
class=
"float-right"
><i
class=
"fas fa-heartbeat"
></i></span>
<div
class=
"card-header"
>
Water Capacity
</div>
<div
class=
"card-body"
>
<div
class=
"card-body-item"
>
<i
style=
"color: white;"
class=
"fas fa-tint fa-5x"
></i>
</div>
<div
class=
"card-body-item"
>
<span
style=
"padding-left: 50px"
>
3 ml/m
<sup>
3
</sup>
</span>
<span
style=
"padding-left: 50px"
>
149 L
</span>
<div
class=
"progress"
>
<div
class=
"progress-bar bg-info"
style=
"width:30%"
></div>
</div>
...
...
@@ -122,7 +124,7 @@
</div>
<a
class=
"card-footer"
href=
"#"
>
<span
class=
"float-left"
>
View
detailed History of Water Capacity
</span>
<span
class=
"float-left"
>
View
History and Details
</span>
<span
class=
"float-right"
><i
class=
"fas fa-angle-right"
></i></span>
</a>
</div>
...
...
@@ -130,7 +132,7 @@
<div
class=
"col-sm"
>
<!-- Icon Cards-->
<div
class=
"card"
>
<div
class=
"card-header"
>
Power Capacity
<span
class=
"float-right"
><i
class=
"fas fa-heartbeat"
></i></span>
<div
class=
"card-header"
>
Power Capacity
</div>
<div
class=
"card-body"
>
<div
class=
"card-body-item"
>
...
...
@@ -144,7 +146,7 @@
</div>
</div>
<a
class=
"card-footer"
href=
"#"
>
<span
class=
"float-left"
>
View
detailed History of Electricity Capacity
</span>
<span
class=
"float-left"
>
View
History and Details
</span>
<span
class=
"float-right"
><i
class=
"fas fa-angle-right"
></i></span>
</a>
</div>
...
...
@@ -155,19 +157,19 @@
<div
class=
"col-sm"
>
<!-- Icon Cards-->
<div
class=
"card"
>
<div
class=
"card-header"
>
Peoples
<span
class=
"float-right"
><i
class=
"fas fa-heartbeat"
></i></span>
<div
class=
"card-header"
>
Peoples
</div>
<div
class=
"card-body"
>
<div
class=
"card-body-item"
>
<i
style=
"color: white;"
class=
"fas fa-user fa-5x"
></i>
<i
style=
"color: white;"
class=
"fas fa-user
s
fa-5x"
></i>
</div>
<div
class=
"card-body-item"
>
<span
style=
"padding-left: 30px"
>
3 m
<sup>
3
</sup>
</span>
<span
style=
"padding-left: 30px"
>
15
</span>
</div>
</div>
<a
class=
"card-footer"
href=
"#"
>
<span
class=
"float-left"
>
View
detailed History of Population
</span>
<span
class=
"float-left"
>
View
History and Details
</span>
<span
class=
"float-right"
><i
class=
"fas fa-angle-right"
></i></span>
</a>
</div>
...
...
@@ -175,7 +177,7 @@
<div
class=
"col-sm"
>
<!-- Icon Cards-->
<div
class=
"card"
>
<div
class=
"card-header"
>
Food Stock
<span
class=
"float-right"
><i
class=
"fas fa-heartbeat"
></i></span>
<div
class=
"card-header"
>
Food Stock
</div>
<div
class=
"card-body"
>
<div
class=
"card-body-item"
>
...
...
@@ -191,7 +193,7 @@
</div>
</div>
<a
class=
"card-footer"
href=
"#"
>
<span
class=
"float-left"
>
View
detailed History of Food Stock
</span>
<span
class=
"float-left"
>
View
History and Details
</span>
<span
class=
"float-right"
><i
class=
"fas fa-angle-right"
></i></span>
</a>
</div>
...
...
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