replace bulma by bootstrap
This commit is contained in:
parent
71a54c943f
commit
c345534871
|
@ -28,7 +28,8 @@
|
|||
"symfony/validator": "4.4.*",
|
||||
"symfony/web-link": "4.4.*",
|
||||
"symfony/web-server-bundle": "4.4.*",
|
||||
"symfony/yaml": "4.4.*"
|
||||
"symfony/yaml": "4.4.*",
|
||||
"twbs/bootstrap": "^4.4"
|
||||
},
|
||||
"require-dev": {
|
||||
"symfony/debug-pack": "*",
|
||||
|
|
1
public/assets/bootstrap
Symbolic link
1
public/assets/bootstrap
Symbolic link
|
@ -0,0 +1 @@
|
|||
../../vendor/twbs/bootstrap/dist
|
|
@ -1,7 +1,3 @@
|
|||
html {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 30vh;
|
||||
|
@ -16,50 +12,14 @@ html {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table.is-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.snapshot-link {
|
||||
display: inline-block;
|
||||
width: 33%;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.snapshot-link img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-movie .modal-content {
|
||||
width: 95%;
|
||||
max-width: 1024px;
|
||||
background: #242627;
|
||||
padding: 5px;
|
||||
border-bottom-left-radius: 7px;
|
||||
border-bottom-right-radius: 7px;
|
||||
.modal-movie {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-movie video {
|
||||
border: 2px solid #333;
|
||||
}
|
||||
|
||||
.button-download {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.movie {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.snapshot-link {
|
||||
width: 49%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.snapshot-link {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
6
public/assets/css/bulmaswatch.min.css
vendored
6
public/assets/css/bulmaswatch.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -90,19 +90,18 @@ var SnapshotEvent = function() {
|
|||
var links = document.querySelectorAll('.snapshot-link');
|
||||
var view = document.querySelector('#snapshot-view');
|
||||
var template = document.querySelector('#snapshot-template');
|
||||
|
||||
var body = document.querySelector('body');
|
||||
|
||||
forEach(links, function(i, link) {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
body.classList.add('modal-open');
|
||||
view.innerHTML = template.innerHTML.replace(/{src}/g, link.getAttribute('href'));
|
||||
|
||||
view.querySelector('.modal-close').addEventListener('click', function() {
|
||||
view.innerHTML = '';
|
||||
}, false);
|
||||
|
||||
view.querySelector('.modal-background').addEventListener('click', function() {
|
||||
view.querySelector('.modal').addEventListener('click', function() {
|
||||
e.preventDefault();
|
||||
view.innerHTML = '';
|
||||
body.classList.remove('modal-open');
|
||||
}, false);
|
||||
});
|
||||
});
|
||||
|
@ -114,7 +113,7 @@ var NavbarEvent = function() {
|
|||
|
||||
if (burger && menu) {
|
||||
burger.addEventListener('click', function(e) {
|
||||
menu.classList.toggle('is-active');
|
||||
menu.classList.toggle('show');
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
@ -528,6 +528,9 @@
|
|||
"symfony/yaml": {
|
||||
"version": "v4.4.5"
|
||||
},
|
||||
"twbs/bootstrap": {
|
||||
"version": "v4.4.1"
|
||||
},
|
||||
"twig/extra-bundle": {
|
||||
"version": "v3.0.3"
|
||||
},
|
||||
|
|
|
@ -1,45 +1,45 @@
|
|||
{% set assetCache = 'now'|date('dmyh') %}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>{% block title %}Terrarium{% endblock %}</title>
|
||||
<link rel="icon" type="image/png" href="{{ asset('favicon.png') }}" >
|
||||
{% block css %}
|
||||
<link rel="stylesheet" href="{{ asset('node_modules/bulma/css/bulma.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/bulmaswatch.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('assets/bootstrap/css/bootstrap.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('node_modules/chart.js/dist/Chart.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/app.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/app.css') }}?v={{ assetCache }}">
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ path('charts') }}">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<a class="navbar-brand" href="{{ path('charts') }}">
|
||||
<img src="{{ asset('assets/img/logo.svg') }}" height="28">
|
||||
</a>
|
||||
|
||||
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<button class="navbar-toggler navbar-burger" type="button">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item {% if app.request.attributes.get('_route') == 'charts' %}is-active{% endif %}" href="{{ path('charts') }}">
|
||||
<div class="collapse navbar-collapse navbar-menu">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item {% if app.request.attributes.get('_route') == 'charts' %}active{% endif %}">
|
||||
<a class="nav-link" href="{{ path('charts') }}">
|
||||
Graphiques
|
||||
</a>
|
||||
|
||||
<a class="navbar-item {% if app.request.attributes.get('_route') == 'camera' %}is-active{% endif %}" href="{{ path('camera') }}">
|
||||
</li>
|
||||
<li class="nav-item {% if app.request.attributes.get('_route') == 'camera' %}active{% endif %}">
|
||||
<a class="nav-link" href="{{ path('camera') }}">
|
||||
Caméra
|
||||
</a>
|
||||
|
||||
<a class="navbar-item {% if app.request.attributes.get('_route') == 'events' %}is-active{% endif %}" href="{{ path('events') }}">
|
||||
</li>
|
||||
<li class="nav-item {% if app.request.attributes.get('_route') == 'events' %}active{% endif %}">
|
||||
<a class="nav-link" href="{{ path('events') }}">
|
||||
Évènements
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
@ -48,7 +48,7 @@
|
|||
|
||||
{% block js %}
|
||||
<script src="{{ asset('node_modules/chart.js/dist/Chart.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/app.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/app.js') }}?v={{ assetCache }}"></script>
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -4,8 +4,8 @@
|
|||
|
||||
{% block body %}
|
||||
<div class="container">
|
||||
<div class="camera-wrapper">
|
||||
<img src="{{ camera1_url }}" class="box camera" alt="Caméra 1">
|
||||
<div class="camera-wrapper shadow-sm p-3 mb-5 mt-3 bg-light rounded">
|
||||
<img src="{{ camera1_url }}" class="camera img-fluid" alt="Caméra 1">
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
@ -3,21 +3,33 @@
|
|||
{% block title %}{{ parent() }} - Moniteur{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<section class="section">
|
||||
<div class="title is-4">Température</div>
|
||||
<div class="container-fluid">
|
||||
<section class="pt-3 mb-5">
|
||||
<div class="h3">Température</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="shadow-sm p-3 bg-light rounded">
|
||||
<div class="chart-container" data-reload="300000" data-api="{{ path('api_monitoring_temperature') }}" data-type="line">
|
||||
<canvas class="chart-canvas" id="chart-temperature"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="title is-4">Hygrométrie</div>
|
||||
<section>
|
||||
<div class="h3">Hygrométrie</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="shadow-sm p-3 bg-light rounded">
|
||||
<div class="chart-container" data-reload="300000" data-api="{{ path('api_monitoring_hygrometry') }}" data-type="line">
|
||||
<canvas class="chart-canvas" id="chart-hygrometry"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
@ -3,40 +3,51 @@
|
|||
{% block title %}{{ parent() }} - Évènements{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<ul class="nav nav-pills mt-2 mb-4">
|
||||
{% for key, name in days %}
|
||||
<li {% if date == key %}class="is-active"{% endif %}>
|
||||
<a href="{{ path('events', {date: key}) }}">{{ name }}</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if date == key %}bg-dark text-white{% else %}text-dark{% endif %}" href="{{ path('events', {date: key}) }}">{{ name }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
{% for snapshot in snapshots %}
|
||||
{% if date == snapshot.date.format('Y-m-d') %}
|
||||
<div class="col-xs-1 col-sm-6 col-md-3 mb-4">
|
||||
<a href="{{ asset(snapshot.movie) }}" class="snapshot-link">
|
||||
<img src="{{ asset(snapshot.thumbnail) }}" alt="{{ snapshot.date.format('d/m/Y H:i:s') }}" class="box">
|
||||
<img src="{{ asset(snapshot.thumbnail) }}" alt="{{ snapshot.date.format('d/m/Y H:i:s') }}" class="img-fluid shadow-sm p-3 bg-light rounded">
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="snapshot-view"></div>
|
||||
|
||||
<template id="snapshot-template">
|
||||
<div class="modal is-active modal-movie">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content" controls>
|
||||
<video controls class="image movie">
|
||||
<div class="modal fade show" tabindex="-1" role="dialog" aria-hidden="true" style="display: block">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content bg-dark">
|
||||
<div class="modal-body">
|
||||
<video controls class="modal-movie border border-dark shadow-sm rounded-lg">
|
||||
<source src="{src}" type="video/mp4" />
|
||||
</video>
|
||||
<a href="{{ path('download_snapshot') }}?src={src}">
|
||||
<button class="button button-download is-dark">Télécharger</button>
|
||||
<button class="btn btn-info">Télécharger</button>
|
||||
</a>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-backdrop fade show"></div>
|
||||
</template>
|
||||
{% endblock %}
|
||||
|
|
Loading…
Reference in a new issue