<!DOCTYPE HTML> <html> <head> <title>Surface Dynamics Workshop 2018</title> <meta name="description" content="Workshop on Surfaces Dynamics 2018" /> <meta name="keywords" content="Workshop Surfaces Patrice Le Calvez" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico" /> <link rel="alternate" href="http://www.surfacesdynamics2018.cmat.edu.uy" hreflang="es-uy" /> <!-- Jquery --> <script type="text/javascript" src="js/lib/jquery/jquery-3.2.1.min.js"></script> <!-- Moment.js --> <script type="text/javascript" src="js/lib/fullcalendar/lib/moment.min.js"></script> <!-- Bootstrap 3.3.7 --> <link rel="stylesheet" href="js/lib/bootstrap/dist/css/bootstrap.min.css"> <script src="js/lib/bootstrap/dist/js/bootstrap.min.js"></script> <!-- My App --> <link rel="stylesheet" type="text/css" href="style/style.css" /> <script type="text/javascript" src="js/app.js"></script> </head> <body> <style> table { width: 100%; border-collapse: collapse; } /* Zebra striping */ tr:nth-of-type(odd) { background: #eee; } th { background: #333; color: white; font-weight: bold; } td, th { padding: 6px; border: 1px solid #ccc; text-align: left; } .buttonwrapper{ margin: 10px 0px; } @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { margin-top:5px; border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 30%; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 35%; padding-right: 10px; white-space: nowrap; } /* Label the data */ td:before{font-weight: bold;} td:nth-of-type(1):before { content: "Nombre:"; } td:nth-of-type(2):before { content: "e-mail:"; } td:nth-of-type(3):before { content: "Título:"; } td:nth-of-type(4):before { content: "Ciudad:"; } td:nth-of-type(5):before { content: "País:"; } td:nth-of-type(6):before { content: "Afiliación:"; } td:nth-of-type(7):before { content: "LLegada:"; } td:nth-of-type(8):before { content: "Salida:"; } td:nth-of-type(9):before { content: "Carta:"; } td:nth-of-type(10):before { content: "Room Pref.:"; } td:nth-of-type(11):before { content: "Roomate:"; } td:nth-of-type(12):before { content: "Fecha Reg.:"; } } </style> <div class="container-fluid"> <div class="row"> <div class="col-xs-12"> <table> <thead> <tr> <th>Nombre</th> <th>e-Mail</th> <th>Título</th> <th>Ciudad</th> <th>País</th> <th>Afiliación</th> <th>Llegada</th> <th>Salida</th> <th>Carta Invitación</th> <th>Preferencia de habitación</th> <th>Compañero de cuarto</th> <th>Fecha de registro</th> </tr> </thead> <tbody> {% for reg in registros %} <tr> <td>{{ reg.nombre | title }} {{ reg.apellido | title }}</td> <td>{{ reg.email }}</td> <td>{{ reg.titulo | default("No especificado") }}</td> <td>{{ reg.ciudad | default("No especificado") }}</td> <td>{{ reg.pais }}</td> <td>{{ reg.afiliacion | default("No especificado") }}</td> <td>{{ reg.fechaLlegada | default("No especificado") }}</td> <td>{{ reg.fechaPartida | default("No especificado") }}</td> <td>{{ reg.cartaInvitacion ? 'Si' : 'No' }}</td> <td>{{ reg.roomingPref|default("No hotel") }}</td> <td>{{ reg.roomate|default("No especificado") }}</td> <td>{{ reg.fechaRegistro }}</td> </tr> {% endfor %} </tbody> </table> </div> </div> <div class="row"> <div class="col-xs-12 buttonwrapper center"> <a href="/inscriptoscsv" class="btn btn-primary btn-lg">Bajar CSV </a> </div> </div> </div> </body> </html>