deblan/terrarium-web
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

replace bulma by bootstrap

Browse source
This commit is contained in:
Simon Vieille 2020-04-04 17:33:48 +02:00
parent 71a54c943f
commit c345534871
Signed by: deblan
GPG key ID: 03383D15A1D31745
10 changed files with 107 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
composer.json
View file

@ -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
View file

@ -0,0 +1 @@
../../vendor/twbs/bootstrap/dist

44
public/assets/css/app.css
View file

@ -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
View file

File diff suppressed because one or more lines are too long

13
public/assets/js/app.js
View file

@ -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');
})
}
}

3
symfony.lock
View file

@ -528,6 +528,9 @@
"symfony/yaml": {
"version": "v4.4.5"
},
"twbs/bootstrap": {
"version": "v4.4.1"
},
"twig/extra-bundle": {
"version": "v3.0.3"
},

60
templates/base.html.twig
View file

@ -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') }}">
<img src="{{ asset('assets/img/logo.svg') }}" height="28">
</a>
<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') }}">
Graphiques
</a>
<a class="navbar-item {% if app.request.attributes.get('_route') == 'camera' %}is-active{% endif %}" href="{{ path('camera') }}">
Caméra
</a>
<a class="navbar-item {% if app.request.attributes.get('_route') == 'events' %}is-active{% endif %}" href="{{ path('events') }}">
Évènements
</a>
</div>
<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>
</li>
<li class="nav-item {% if app.request.attributes.get('_route') == 'camera' %}active{% endif %}">
<a class="nav-link" href="{{ path('camera') }}">
Caméra
</a>
</li>
<li class="nav-item {% if app.request.attributes.get('_route') == 'events' %}active{% endif %}">
<a class="nav-link" href="{{ path('events') }}">
Évènements
</a>
</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
templates/camera.html.twig
View file

@ -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 %}

36
templates/charts.html.twig
View file

@ -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="chart-container" data-reload="300000" data-api="{{ path('api_monitoring_temperature') }}" data-type="line">
<canvas class="chart-canvas" id="chart-temperature"></canvas>
<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>
</div>
</section>
<div class="title is-4">Hygrométrie</div>
<section>
<div class="h3">Hygrométrie</div>
<div class="box">
<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 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>
</div>
</section>
</section>
</div>
{% endblock %}

63
templates/events.html.twig
View file

@ -3,40 +3,51 @@
{% block title %}{{ parent() }} - Évènements{% endblock %}
{% block body %}
<div class="tabs">
<ul>
{% for key, name in days %}
<li {% if date == key %}class="is-active"{% endif %}>
<a href="{{ path('events', {date: key}) }}">{{ name }}</a>
</li>
{% endfor %}
</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 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">
{% for snapshot in snapshots %}
{% if date == snapshot.date.format('Y-m-d') %}
<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">
</a>
{% endif %}
{% endfor %}
<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="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">
<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>
</a>
<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="btn btn-info">Télécharger</button>
</a>
</div>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<div class="modal-backdrop fade show"></div>
</template>
{% endblock %}