##// END OF EJS Templates
Styles and templates updated
Juan C. Espinoza -
r25:f6a1f1743978
parent child
Show More
@@ -0,0 +1,194
1 .footer-igp {
2 border-top: 1px solid #DDD;
3 padding-top: 15px;
4 margin-bottom: 15px;
5 line-height: 1.5;
6 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
7 }
8
9 .footer-image {
10 width: 8.666667%;
11 margin: 2px 8px 0 8px;
12 text-align: center;
13 }
14
15 .footer-image img {
16 max-width: 32px;
17 }
18
19 .footer-igp-row .content {
20 padding-left: 0.65581em;
21 width: 100%;
22 border-left: 1px solid #DDD;
23 }
24
25 .footer-igp-row {
26 margin: 10px;
27 margin-bottom: 0px;
28 margin-right: 0px;
29 padding: 10px;
30 padding-bottom: 0px;
31 padding-right: 0px;
32 display: flex;
33 justify-content: space-between;
34 }
35
36 .footer-igp-row:first-child {
37 margin-top: 0px;
38 padding-top: 0px;
39 }
40
41 .footer-igp-row:last-child {
42 margin-bottom: 10px;
43 padding-bottom: 10px;
44 }
45
46 .footer-igp-row .content .title {
47 text-transform: uppercase;
48 color: #3aa2e8;
49 font-weight: bold;
50 }
51
52 .footer-igp-row .content .text {
53 font-size: 12px;
54 color: #7f7f7f;
55 }
56
57 .footer-igp-row .content .link {
58 cursor: pointer;
59 font-size: 12px;
60 color: #3aa2e8;
61 }
62
63 .footer-igp-row .content .link a {
64 color: #3aa2e8;
65 }
66
67 .footer-igp .map {
68 border-left: 1px solid #DDD;
69 }
70
71 .footer-igp .map img {
72 max-height: 249px;
73 width: 100%;
74 }
75
76 .siguenos {
77 position: relative;
78 overflow: hidden;
79 height: 37px;
80 display: inline-block;
81 padding-left: 20px;
82 color: #444444;
83 text-decoration: none;
84 text-align: center;
85 line-height: 40px;
86 font-size: 14px;
87 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
88 }
89
90 @media (max-width: 992px) {
91 .footer-image {
92 width: 13.666667%;
93 }
94 }
95
96 @media (max-width: 768px) {
97 .footer-image {
98 width: 8.666667%;
99 }
100
101 .footer-igp .map img {
102 width: 100%;
103 }
104
105 .footer-igp-row .content {
106 width: 70%
107 }
108 }
109
110 @media (max-width: 480px) {
111 .footer-igp {
112 padding-top: 0px !important;
113 }
114
115 .footer-igp-row {
116 justify-content: flex-start;
117 }
118
119 }
120
121 .icon2 {
122 position: relative;
123 overflow: hidden;
124 width: 34px;
125 height: 34px;
126 display: inline-block;
127 margin: 15px 0 10px 7px;
128 border-radius: 50%;
129 color: #fff;
130 text-decoration: none;
131 text-align: center;
132 line-height: 40px;
133 font-size: 17px;
134 font-family: sans-serif;
135 }
136
137 .icon2:nth-child(1) {
138 background: cornflowerblue;
139 }
140
141 .icon2:nth-child(2) {
142 background: salmon;
143 }
144
145 .icon2:nth-child(3) {
146 background: gray;
147 }
148
149 .icon2.insta {
150 background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
151 }
152
153 .icon2:after {
154 color: white;
155 animation: shinex 3s ease-in-out infinite;
156 animation-fill-mode: forwards;
157 content: "";
158 position: absolute;
159 top: -110%;
160 left: -210%;
161 width: 200%;
162 height: 200%;
163 opacity: 0;
164 transform: rotate(30deg);
165 background: rgba(255, 255, 255, 0.13);
166 background: linear-gradient(to right,
167 rgba(255, 255, 255, 0.13) 0%,
168 rgba(255, 255, 255, 0.13) 77%,
169 rgba(255, 255, 255, 0.5) 92%,
170 rgba(255, 255, 255, 0.0) 100%);
171 }
172
173 .icon2:active:after {
174 opacity: 0;
175 color: white;
176 }
177
178 @keyframes shinex {
179 10% {
180 opacity: 1;
181 top: -30%;
182 left: -30%;
183 transition-property: left, top, opacity;
184 transition-duration: 0.3s, 0.3s, 0.9s;
185 transition-timing-function: ease;
186 }
187
188 100% {
189 opacity: 0;
190 top: -30%;
191 left: -30%;
192 transition-property: left, top, opacity;
193 }
194 }
@@ -0,0 +1,14
1 .page-head {
2 background: #fff;
3 padding-top: 10px;
4 padding-bottom: 10px;
5 border-top: 8px solid #38b5e6;
6 border-bottom: 1px solid #e1e1e1;
7 }
8
9 .a-contactus {
10 color: #0088cc;
11 text-decoration: none;
12 font-family: Helvetica;
13 font-size: 0.8rem;
14 } No newline at end of file
1 NO CONTENT: new file 100644, binary diff hidden
NO CONTENT: new file 100644, binary diff hidden
1 NO CONTENT: new file 100644, binary diff hidden
NO CONTENT: new file 100644, binary diff hidden
1 NO CONTENT: new file 100644, binary diff hidden
NO CONTENT: new file 100644, binary diff hidden
1 NO CONTENT: new file 100644, binary diff hidden
NO CONTENT: new file 100644, binary diff hidden
1 NO CONTENT: new file 100644, binary diff hidden
NO CONTENT: new file 100644, binary diff hidden
1 NO CONTENT: new file 100644, binary diff hidden
NO CONTENT: new file 100644, binary diff hidden
1 NO CONTENT: new file 100644, binary diff hidden
NO CONTENT: new file 100644, binary diff hidden
@@ -0,0 +1,68
1 {% load static %} {% load bootstrap4 %}
2 <div class="row footer-igp">
3 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
4 <span class="siguenos">Siguenos en: </span>
5 <div class="div-links" style="text-align: left">
6 <a target="_blank" href="http://www.facebook.com/igp.peru" style="background-color:#3b5998;"
7 class="icon2"><i class="fab fa-facebook-f" aria-hidden="true" style="margin-top: 9px;"></i></a>
8 <a target="_blank" href="http://twitter.com/#!/igp_peru" style="background-color: #2DAAE2;" class="icon2"><i
9 class="fab fa-twitter" aria-hidden="true" style="margin-top: 9px;"></i></a>
10 <a target="_blank" href="https://www.youtube.com/igp_videos"
11 style="background-color: #E30613;margin-right: 0px;" class="icon2"><i class="fab fa-youtube-square"
12 aria-hidden="true" style="margin-top: 9px;"></i></a>
13 <a title="Instagram IGP" href="https://www.instagram.com/igp.peru/" target="_blank" class="icon2 insta"><i
14 class="fab fa-instagram" aria-hidden="true" style="margin-top: 9px;"></i></a>
15 <a title="LinkedIn IGP" href="https://www.linkedin.com/company/igpperu/" target="_blank"
16 style="background-color: #2797CF;" class="icon2"><i class="fab fa-linkedin-in" aria-hidden="true"
17 style="margin-top: 9px;"></i></a>
18 <a title="Flickr IGP" href="https://www.flickr.com/people/156092703@N08/" target="_blank"
19 style="background-color: #fd1a7d;" class="icon2"><i class="fab fa-flickr" aria-hidden="true"
20 style="margin-top: 9px;"></i></a>
21
22 <div class="footer-igp-row" style="border-top: 1px solid #DDD;padding-left: 0;">
23 <div class="content" style="border-left: 0px; ">
24 <div class="text">
25 2019<br>
26 Instituto GeofΓ­sico del PerΓΊ<br>
27 Ciencia para protegernos, ciencia para avanzar.
28 </div>
29 </div>
30 </div>
31 </div>
32 </div>
33 <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 d-none d-md-block">
34 <div class="footer-igp-row">
35 <div class="footer-image"><img src="{% static 'images/ico_footer_horario.png' %}" alt=""></div>
36 <div class="content">
37 <div class="title">AtenciΓ³n al ciudadano</div>
38 <div class="text">De lunes a viernes</div>
39 <div class="text">Desde las 8:30 Hrs. hasta las 17:15 Hrs</div>
40 <div class="link"><a href=""></a></div>
41 </div>
42 <div class="footer-image"><img src="{% static 'images/ico_footer_direccion.png' %}" alt=""></div>
43 <div class="content">
44 <div class="title">SEDE PRINCIPAL</div>
45 <div class="text">Calle Badajoz NΒ° 169 Urb. Mayorazgo IV Etapa</div>
46 <div class="text">Ate, Lima 15012 - PerΓΊ.</div>
47 <div class="text">(51) 13172300</div>
48 <div class="link"><a href="https://portal.igp.gob.pe/nuestras-sedes" target="_blank">Ver otras Sedes</a>
49 </div>
50 </div>
51 </div>
52 <div class="footer-igp-row">
53 <div class="footer-image"><img src="{% static 'images/ico_footer_tramites.png' %}" alt=""></div>
54 <div class="content">
55 <a href="http://intranet.igp.gob.pe/std/consultaexp/" target="_blank">
56 <div class="title">TRÁMITES EN LÍNEA</div>
57 <div class="text">Consulte aquΓ­ el estado de su expediente a travΓ©s de nuestro Sistema de TrΓ‘mite
58 Documentario STD</div>
59 </a>
60 </div>
61 <div class="footer-image"><img src="{% static 'images/ico_footer_consultas.png' %}" alt=""></div>
62 <div class="content">
63 <div class="title">BUZΓ“N DE SUGERENCIAS</div>
64 <div class="text">comunicaciones@igp.gob.pe</div>
65 </div>
66 </div>
67 </div>
68 </div> No newline at end of file
@@ -0,0 +1,31
1 {% load static %} {% load bootstrap4 %}
2 <div class="row page-head justify-content-between">
3 <div class="col-8 p-2">
4 <img class="img-fluid" src="{% static 'images/minam.png' %}">
5 <span class="d-none d-lg-inline">
6 <a href="https://busquedas.elperuano.pe/normaslegales/establecen-como-politica-de-comunicaciones-del-poder-ejecuti-resolucion-ministerial-n-113-2018-pcm-1641857-1/"
7 target="_blank">
8 <img title="Logo PerΓΊ primero" src="{% static 'images/peru_primero.jpeg' %}" height="50px">
9 </a>
10 </span>
11 </div>
12 <div class="col-4 text-right">
13 <span class="d-none d-xl-inline">
14 <a class="btn-xs a-contactus" href="https://portal.igp.gob.pe/contactenos" target="_blank">
15 <i class="fas fa-phone-square" aria-hidden="true"></i>
16 ContΓ‘ctenos
17 </a>&nbsp;&nbsp;
18 <a href="http://www.transparencia.gob.pe/enlaces/pte_transparencia_enlaces.aspx?id_entidad=188#.WkJ3xiF97CI166"
19 target="_blank">
20 <img class="img-fluid"
21 src="{% static 'images/logo-portal-transparencia.png' %}"
22 width="100px" height="auto">
23 </a>&nbsp;
24 </span>
25 <!--data-toggle="collapse"-->
26 <a href="//portal.igp.gob.pe/" target="_blank">
27 <img class="img-fluid" src="{% static 'images/igp.png' %}" width="100px">
28 </a>
29
30 </div>
31 </div> No newline at end of file
@@ -0,0 +1,19
1 {% extends 'base.html' %}
2 {% load static%}
3 {% block content %}
4 <br>
5 <div class="col-12">
6 <p>Monthly reports of the conditions of the upper atmosphere.</p>
7 </div>
8 <div class="card-columns p-2">
9 <div class="card text-justify">
10 <img src="{% static 'images/sw.jpg' %}" class="card-img-top" alt="...">
11 <div class="card-body">
12 <h5 class="card-title">Report No. 01</h5>
13 <p class="card-text">{% lorem %}</p>
14 <a href="#" class="btn btn-primary">Go</a>
15 </div>
16 </div>
17 </div>
18 <br><br>
19 {% endblock content %} No newline at end of file
@@ -0,0 +1,81
1 {% extends 'base.html' %}
2 {% load static%}
3 {% block content %}
4 <br>
5 <div class="col-12">
6 <p>Useful tools and data from other partners/observatories.</p>
7 </div>
8 <div class="card-columns p-2">
9 <div class="card text-justify">
10 <img src="{% static 'images/skynoise.png' %}" class="card-img-top" alt="...">
11 <div class="card-body">
12 <h5 class="card-title">Sky noise</h5>
13 <p class="card-text">Sky brightness at 50 MHz, useful for antenna calibrations and measure radar's sensitivity.
14 </p>
15 <div class="input-group input-group-sm">
16 <div class="input-group-prepend">
17 <span class="input-group-text" id="validationTooltipSkynoiseDate"><i class="fas fa-calendar"
18 aria-hidden="true"></i></span>
19 </div>
20 <input type="text" class="form-control" id="skynoise-date" placeholder="dd/mm/yy"
21 aria-describedby="validationTooltipSkynoiseDate" value="{% now 'm/d/Y' %}" required>
22 <div class="invalid-tooltip">
23 Please enter a valid date.
24 </div>
25 <a class="btn btn-primary" data-toggle="modal" href="#toolModal" data-title="Sky Noise"
26 data-image="http://jro-app.igp.gob.pe/programs/skynoise/cgi-bin/sky_noise.pl?">Go</a>
27 </div>
28 </div>
29 </div>
30 <div class="card text-justify">
31 <img src="{% static 'images/kp.png' %}" class="card-img-top" alt="...">
32 <div class="card-body">
33 <h5 class="card-title">Kp Index</h5>
34 <p class="card-text">The K-index, are used to characterize the magnitude of geomagnetic storms. Kp is an excellent
35 indicator of disturbances in the Earth's magnetic field (<a
36 href="https://www.swpc.noaa.gov/products/planetary-k-index" target="_blank">NOAA/SWPC</a>).</p>
37 <a class="btn btn-primary" data-toggle="modal" href="#toolModal" data-title="Kp Index"
38 data-image="https://services.swpc.noaa.gov/images/planetary-k-index.gif">Go</a>
39 </div>
40 </div>
41 </div>
42 <br><br>
43
44 <!-- Modal -->
45 <div class="modal fade" id="toolModal" tabindex="-1" role="dialog" aria-labelledby="toolModalTitle" aria-hidden="true">
46 <div class="modal-dialog modal-lg" role="document">
47 <div class="modal-content">
48 <div class="modal-header">
49 <h5 class="modal-title" id="toolModalTitle">Modal title</h5>
50 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
51 <span aria-hidden="true">&times;</span>
52 </button>
53 </div>
54 <div class="modal-body text-center">
55 <img class="img-fluid" src="">
56 </div>
57 </div>
58 </div>
59 </div>
60
61 {% endblock content %}
62
63 {% block script %}
64 <script>
65 $('#toolModal').on('show.bs.modal', function (e) {
66
67 //get data attribute of the clicked element
68 var title = $(e.relatedTarget).data('title');
69 var image = $(e.relatedTarget).data('image');
70
71 if (image.indexOf('skynoise') > 0) {
72 var dt = $('#skynoise-date').val().split('/')
73 image += 'month=' + dt[0] + '&dom=' + dt[1] + '&year=' + dt[2];
74 }
75
76 //populate values
77 $(e.currentTarget).find('h5').text(title);
78 $(e.currentTarget).find('img').attr('src', image);
79 });
80 </script>
81 {% endblock script %} No newline at end of file
@@ -1,57 +1,120
1 /* DESDE ACA COPIE DEL BASE.HTML*/
1 @import url('https://fonts.googleapis.com/css?family=Lobster|Open+Sans');
2 html {
2
3 font-size: 14px;
3 .text-blue {
4 }
4 color: #003A8E;
5 @media (min-width: 768px) {
5 }
6 html {
6
7 font-size: 16px;
7 .text-skyblue {
8 }
8 color: #00addc;
9 }
9 }
10
10
11 .container {
11 .nopadding {
12 max-width: 960px;
12 padding: 0px !important;
13 }
13 }
14
14
15 .home-header {
15 .nomargin {
16 max-width: 700px;
16 margin: 0px !important;
17 }
17 }
18
18
19 .text-igp {
19 /* Change Buttons Bootstrap */
20 color: #3aa2e8;
20 .btn-primary {
21 }
21 color: #fff;
22
22 background-color: #00addc !important;
23 .border-top { border-top: 1px solid #e5e5e5; }
23 border-color: #00addc !important;
24 .border-bottom { border-bottom: 1px solid #e5e5e5; }
24 }
25
25
26 .box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
26 .btn-primary:hover {
27
27 color: #fff;
28 .loader {
28 background-color: #23527c !important;
29 border: 10px solid #f3f3f3;
29 border-color: #23527c !important;
30 border-radius: 50%;
31 border-top: 10px solid #3aa2e8;
32 width: 40px;
33 height: 40px;
34 -webkit-animation: spin 2s linear infinite; /* Safari */
35 animation: spin 2s linear infinite;
36 }
37
38 /* Safari */
39 @-webkit-keyframes spin {
40 0% { -webkit-transform: rotate(0deg); }
41 100% { -webkit-transform: rotate(360deg); }
42 }
43
44 @keyframes spin {
45 0% { transform: rotate(0deg); }
46 100% { transform: rotate(360deg); }
47 }
48
49 .no-data {
50 text-align: center;
51 background-color: #d58512;
52 padding: 8px 16px;
53 border-radius: 5px;
54 color: #FEFEFE;
55 font: 20px 'Helvetica';
56 text-transform: uppercase;
57 }
30 }
31
32 .card-text {
33 font-size: 0.8rem;
34 }
35
36 /* Menu - breadcrum*/
37
38 .bc-icons .breadcrumb-item+.breadcrumb-item::before {
39 content: none;
40 }
41
42 .bc-icons .breadcrumb-item.active {
43 color: #00addc;
44 }
45
46 /* Menu Sidebar*/
47
48 #wrapper {
49 margin-right: -15px;
50 margin-left: -15px;
51 border-right: 1px solid #dee2e6!important;
52 border-left: 1px solid #dee2e6!important;
53 }
54
55 #sidebar-wrapper {
56 min-height: 60vh;
57 margin-left: -15rem;
58 -webkit-transition: margin .25s ease-out;
59 -moz-transition: margin .25s ease-out;
60 -o-transition: margin .25s ease-out;
61 transition: margin .25s ease-out;
62 }
63
64 #sidebar-wrapper .sidebar-heading {
65 padding: 0.875rem 1.25rem;
66 font-size: 1.2rem;
67 }
68
69 #sidebar-wrapper .list-group {
70 width: 15rem;
71 }
72
73 #page-content-wrapper {
74 min-width: 100vw;
75 }
76
77 #wrapper.toggled #sidebar-wrapper {
78 margin-left: 0;
79 }
80
81 @media (min-width: 768px) {
82 #sidebar-wrapper {
83 margin-left: 0;
84 }
85
86 #page-content-wrapper {
87 min-width: 0;
88 width: 100%;
89 }
90
91 #wrapper.toggled #sidebar-wrapper {
92 margin-left: -15rem;
93 }
94 }
95
96 /* cards */
97
98 @media (min-width: 480px) {
99 .card-columns {
100 column-count: 2;
101 }
102 }
103
104 @media (min-width: 768px) {
105 .card-columns {
106 column-count: 3;
107 }
108 }
109
110 @media (min-width: 1180px) {
111 .card-columns {
112 column-count: 4;
113 }
114 }
115
116 @media (min-width: 1380px) {
117 .card-columns {
118 column-count: 5;
119 }
120 } No newline at end of file
@@ -1,55 +1,64
1 {% load static %} {% load bootstrap4 %}
1 {% load static %} {% load bootstrap4 %}
2 <!doctype html>
2 <!doctype html>
3 <html lang="en">
3 <html lang="en">
4
4 <head>
5 <head>
5 <meta charset="utf-8">
6 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7 <!-- Bootstrap CSS -->
8 <!-- Bootstrap CSS -->
8 {# % bootstrap_css % #}
9 {# % bootstrap_css % #}
10 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
11 integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
9 <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
12 <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
10 <link href="{% static 'css/style.css' %}" rel="stylesheet"> {%block extra-header%}{%endblock%}
13 <link href="{% static 'css/style.css' %}" rel="stylesheet">
14 <link href="{% static 'css/header.css' %}" rel="stylesheet">
15 <link href="{% static 'css/footer.css' %}" rel="stylesheet">
16 {%block extra-header%}{%endblock%}
11 <title>Realtime plots at JRO</title>
17 <title>Realtime plots at JRO</title>
12 </head>
18 </head>
19
13 <body>
20 <body>
14 <!-- menu -->
21
15 <nav class="navbar navbar-expand-md navbar-light sticky-top box-shadow" style="background-color: #e3f2fd;">
22 <div class="container-fluid">
16 <a class="navbar-brand" href="http://jro.igp.gob.pe">
23 <!-- header -->
17 <img src="{% static 'images/logo-igp.png' %}" height="40" alt="">
24 {% include "header_igp.html" %}
18 </a>
25
19 <button class="navbar-toggler text-dark" type="button" data-toggle="collapse" data-target="#navbars" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation">
26 <!-- main -->
20 <span class="navbar-toggler-icon"></span>
27 <div class="d-flex" id="wrapper">
21 </button>
28 <!-- Sidebar -->
22 <div class="collapse navbar-collapse" id="navbars">
29 <div class="bg-light border-right" id="sidebar-wrapper">
23 <ul class="navbar-nav ml-auto">
30 <div class="sidebar-heading text-blue font-weight-bold">Realtime at JRO </div>
24 <li class="nav-item active">
31 <div class="list-group list-group-flush">
25 <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
32 <a href="{% url 'url_main' %}" class="list-group-item list-group-item-action bg-light">Realtime</a>
26 </li>
33 <a href="{% url 'url_reports' %}" class="list-group-item list-group-item-action bg-light">Reports</a>
27 <li class="nav-item">
34 <a href="{% url 'url_tools' %}" class="list-group-item list-group-item-action bg-light">Tools</a>
28 <a class="nav-link" href="#">About</a>
35 <a href="http://jro.igp.gob.pe" class="list-group-item list-group-item-action bg-light">JRO</a>
29 </li>
30 <li class="nav-item">
31 <a class="nav-link" href="#">Control Panel</a>
32 </li>
33 </ul>
34 </div>
35 </nav>
36 <!-- menu end -->
37 <!-- Here we put the content depending which url the view.py program command us -->
38 <div class="container" style="min-height: 480px;">
39 {% block content %}{% endblock content %}
40 </div>
41 <div class="container">
42 <footer class="border-top pt-2">
43 <div class="row">
44 <div class="col-12 col-md">
45 <small class="d-block mb-3 text-muted">&copy; 2018</small>
46 </div>
36 </div>
47 </div>
37 </div>
48 </footer>
38 <main role="main" id="page-content-wrapper">
39 <nav class="navbar navbar-light bg-light border-bottom justify-content-start">
40 <button class="btn btn-light" id="menu-toggle"><span class="navbar-toggler-icon"></span></button>
41 <div class="bc-icons">
42 <nav aria-label="breadcrumb">
43 <ol class="breadcrumb bg-transparent mb-0 p-0">
44 {% for item in menu_list %}
45 <li class="breadcrumb-item">{{item}}
46 {% if forloop.last is False %}<i class="fas fa-caret-right mx-2" aria-hidden="true"></i>{% endif %}</li>
47 {% endfor %}
48 </ol>
49 </nav>
50 </div>
51 </nav>
52 {% block content %}{% endblock content %}
53 </main>
54 </div>
55 <!-- footer -->
56 {% include "footer_igp.html" %}
49 </div>
57 </div>
58
50 <!-- This part put block modal which is used to change parameters of my plot -->
59 <!-- This part put block modal which is used to change parameters of my plot -->
51 {% block modal %}{% endblock modal %}
60 {% block modal %}{% endblock modal %}
52 {% block debug %}<div class="container">{{debug}}</div>{% endblock debug %}
61 {% block debug %}<div class="row">{{debug}}</div>{% endblock debug %}
53 <!-- Optional JavaScript -->
62 <!-- Optional JavaScript -->
54 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
63 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
55 {# % bootstrap_javascript jquery='slim' % #}
64 {# % bootstrap_javascript jquery='slim' % #}
@@ -59,6 +68,12
59 <script src="{% static 'js/plotly-latest.min.js' %}"></script>
68 <script src="{% static 'js/plotly-latest.min.js' %}"></script>
60 <script src="{% static 'js/moment.min.js' %}"></script>
69 <script src="{% static 'js/moment.min.js' %}"></script>
61 <!-- Here we put the script from the type of plot that we recibe -->
70 <!-- Here we put the script from the type of plot that we recibe -->
71 <script>
72 $("#menu-toggle").click(function (e) {
73 e.preventDefault();
74 $("#wrapper").toggleClass("toggled");
75 });
76 </script>
62 {% block script %}{% endblock script %}
77 {% block script %}{% endblock script %}
63 </body>
78 </body>
64
79
@@ -1,7 +1,10
1 <!-- CARDs -->
1 <!-- CARDs -->
2 <div class="mb-3 text-center">
2 <br>
3 <div class="col-12"><p>Real time observations include data from a net of instruments of the Jicamarca Radio Observatory.</p>
4 </div>
5 <div class="row text-center justify-content-around pt-4">
3 {% for exp in experiments %}
6 {% for exp in experiments %}
4 <div class="col-md-4 col-sm-6 col-12">
7 <div class="col-xs">
5 <div id="card_{{exp.code}}" class="card mb-4 box-shadow text-{{exp.style}} border-{{exp.style}}">
8 <div id="card_{{exp.code}}" class="card mb-4 box-shadow text-{{exp.style}} border-{{exp.style}}">
6 <div id="card_header_{{exp.code}}" class="card-header bg-{{exp.style}} text-white">{{exp.name}}</div>
9 <div id="card_header_{{exp.code}}" class="card-header bg-{{exp.style}} text-white">{{exp.name}}</div>
7 <div id="card_body_{{exp.code}}"class="card-body">
10 <div id="card_body_{{exp.code}}"class="card-body">
@@ -3,9 +3,6
3 {% block extra-header %}
3 {% block extra-header %}
4 {% endblock %}
4 {% endblock %}
5 {% block content %}
5 {% block content %}
6 <div class="text-center p-2 text-igp">
7 <h1>Realtime Experiments at JRO</h1>
8 </div>
9 {% include 'cartas.html' %}
6 {% include 'cartas.html' %}
10 {% endblock content %}
7 {% endblock content %}
11 {% block script %}
8 {% block script %}
@@ -3,7 +3,7
3 <div class="p-4 text-igp">
3 <div class="p-4 text-igp">
4 <h3>{{title}} <small> {{subtitle}}</small></h3>
4 <h3>{{title}} <small> {{subtitle}}</small></h3>
5 </div>
5 </div>
6 <div class="row justify-content-center">
6 <div class="justify-content-center">
7 <div id="loader" class="loader mt-5"></div>
7 <div id="loader" class="loader mt-5"></div>
8 </div>
8 </div>
9 <div id="plot" {%if plot == 'spc' %}class="row"{%endif%}></div>
9 <div id="plot" {%if plot == 'spc' %}class="row"{%endif%}></div>
@@ -1,9 +1,10
1 from django.conf.urls import url
1 from django.conf.urls import url
2 from .views import main, plot
2 from .views import main, plot, tools, reports
3
3
4
4
5 urlpatterns = [
5 urlpatterns = [
6 url(r'^$', main, name='url_main'),
6 url(r'^$', main, name='url_main'),
7
7 url(r'^tools/$', tools, name='url_tools'),
8 url(r'^reports/$', reports, name='url_reports'),
8 url(r'^(?P<code>[0-9]+)/(?P<plot>[0-9a-z]+)/$', plot, name='url-plot'),
9 url(r'^(?P<code>[0-9]+)/(?P<plot>[0-9a-z]+)/$', plot, name='url-plot'),
9 ]
10 ]
@@ -109,9 +109,25 def main(request):
109
109
110 kwargs['date'] = date
110 kwargs['date'] = date
111 kwargs['experiments'] = experiments
111 kwargs['experiments'] = experiments
112 kwargs['menu_list'] = ['Realtime']
112
113
113 return render(request, 'home.html', kwargs)
114 return render(request, 'home.html', kwargs)
114
115
116 def tools(request):
117 '''
118 '''
119 kwargs = {
120 'menu_list': ['Tools']
121 }
122 return render(request, 'tools.html', kwargs)
123
124 def reports(request):
125 '''
126 '''
127 kwargs = {
128 'menu_list': ['Reports']
129 }
130 return render(request, 'reports.html', kwargs)
115
131
116 def plot(request, code=None, plot=None):
132 def plot(request, code=None, plot=None):
117 '''
133 '''
@@ -132,23 +148,23 def plot(request, code=None, plot=None):
132 'date': date,
148 'date': date,
133 'id': meta.pk,
149 'id': meta.pk,
134 'realtime': realtime,
150 'realtime': realtime,
135 'title': exp.name,
151 'menu_list': ['Realtime', exp.name]
136 }
152 }
137 # Logic to show my views
153 # Logic to show my views
138 if plot == 'rti':
154 if plot == 'rti':
139 kwargs['setup_form'] = RTISetupForm()
155 kwargs['setup_form'] = RTISetupForm()
140 kwargs['fn_plot'] = 'PcolorBuffer'
156 kwargs['fn_plot'] = 'PcolorBuffer'
141 kwargs['subtitle'] = 'RTI plot'
157 kwargs['menu_list'].append('RTI plot')
142 return render(request, 'plot.html', kwargs)
158 return render(request, 'plot.html', kwargs)
143 elif plot == 'spc':
159 elif plot == 'spc':
144 kwargs['setup_form'] = SPCSetupForm()
160 kwargs['setup_form'] = SPCSetupForm()
145 kwargs['fn_plot'] = 'Pcolor'
161 kwargs['fn_plot'] = 'Pcolor'
146 kwargs['subtitle'] = 'Spectra plot'
162 kwargs['menu_list'].append('Spectra plot')
147 return render(request, 'plot.html', kwargs)
163 return render(request, 'plot.html', kwargs)
148 elif plot == 'noise':
164 elif plot == 'noise':
149 kwargs['setup_form'] = ScatterSetupForm()
165 kwargs['setup_form'] = ScatterSetupForm()
150 kwargs['fn_plot'] = 'Scatter'
166 kwargs['fn_plot'] = 'Scatter'
151 kwargs['subtitle'] = 'Noise plot'
167 kwargs['menu_list'].append('Noise plot')
152 return render(request, 'plot.html', kwargs)
168 return render(request, 'plot.html', kwargs)
153 else:
169 else:
154 return render(request, 'home.html', {})
170 return render(request, 'home.html', {})
General Comments 0
You need to be logged in to leave comments. Login now