SHARE
TWEET

deloco

a guest Jul 22nd, 2019 73 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. html:
  2. {% extends "layout.html" %}
  3.  
  4. {% block title %}
  5.     Reportes de Victimas
  6. {% endblock %}
  7.  
  8. {% block main %}
  9. <h1 class="display-4">Reportes de Víctimas</h1>
  10.     <form action="/" method="post">
  11.         <table class="table table-striped" id="myTableVict">
  12.         <thead>
  13.             <tr>
  14.                 <th>Escuela</th>
  15.                 <th>
  16.  
  17.                 <div class="dropdown">
  18.                     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="dropdown-button">Curso
  19.                       <span class="caret"></span></button>
  20.                       <div class="dropdown-content"  id="divo">
  21.                         <a href="#">Todos</a>
  22.                         {% for hechito in hechitos %}
  23.                         <a href="#">{{ hechito.curso }}</a>
  24.                         {% endfor %}
  25.  
  26.                   </div>
  27.                   </div>
  28.                 </th>
  29.                 <th>Descripción del hecho</th>
  30.             </tr>
  31.         </thead>
  32.  
  33.         <tbody>
  34. <!--for is to loop in each row of the table of the selected database,you have to use { always with a space at left and right  and stock.nam the . because it is like opening a dict and chosing the column name -->
  35.  
  36.     {% for hecho in hechos %}
  37.                 <tr>
  38.                     <td>{{ hecho.escuela }}</td>
  39.                     <td>{{ hecho.curso }}</td>
  40.                     <td>{{ hecho.hecho }}</td>
  41.  
  42.                 </tr>
  43.             {% endfor %}
  44.  
  45.         </tbody>
  46.     </table>
  47.     </form>
  48.     <script>
  49.               var table = document.getElementById("myTableVict");
  50.               var inputs = table.getElementsByTagName("a");
  51.           //    var rows = table.getElementsByTagName("tr");
  52.               var rows = table.tBodies[0].rows
  53.  
  54.               for (var i = 0; i < inputs.length; i++) {
  55.  
  56.                 var input = inputs[i];
  57.  
  58.                 input.addEventListener("click", function () {
  59.                   var selectedCourse = this.textContent.trim();
  60.  
  61.                 //  alert(selectedCourse);
  62.                   for (row of rows) {
  63.  
  64.                     let td = row.getElementsByTagName('td')[1]
  65.                     if (!td) { continue }
  66.                     let course = td.textContent.trim()
  67.                     if (course === selectedCourse || selectedCourse == "Todos") {
  68.  
  69.                       row.style.removeProperty('display')
  70.                     } else {
  71.                       row.style.setProperty('display', 'none')
  72.                     }
  73.                     }
  74.                 });
  75.               }
  76.  
  77.               $(function() {
  78.                 var dropdownMenu;
  79.                 $('#dropdown-button').hover(function(e) {
  80.                   dropdownMenu = $(e.target).siblings('.dropdown-content');
  81.  
  82.                     // detach it and append it to the body
  83.                     $('body').append(dropdownMenu.detach());
  84.  
  85.                     // grab the new offset position
  86.                     var eOffset = $(e.target).offset();
  87.  
  88.                     // make sure to place it where it would normally go (this could be improved)
  89.                     dropdownMenu.css({
  90.                         'display': 'block',
  91.                             'top': eOffset.top + $(e.target).outerHeight(),
  92.                             'left': eOffset.left
  93.                     });
  94.                 }, function(e) {
  95.                   $(e.target).parent().append(dropdownMenu.detach());
  96.                     dropdownMenu.hide();
  97.                 });
  98.               });
  99.     </script>
  100.  
  101. {% endblock %}
  102.  
  103.  
  104. LAYOUT.HTML:
  105. <!DOCTYPE html>
  106.  
  107. <html lang="en">
  108.  
  109.     <head>
  110.  
  111.         <!-- Required meta tags -->
  112.         <meta charset="utf-8">
  113.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  114.  
  115.         <!-- documentation at http://getbootstrap.com/docs/4.1/, alternative themes at https://bootswatch.com/ -->
  116.         <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
  117.  
  118.         <!-- https://favicon.io/emoji-favicons/money-mouth-face/ -->
  119.         <link href="/static/favicon.ico" rel="icon">
  120.  
  121.         <link href="/static/styles.css" rel="stylesheet">
  122.  
  123.         <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  124.         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  125.         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  126.        
  127.  
  128.         <title>Bullyng</title>
  129.  
  130.     </head>
  131.  
  132.     <body>
  133.  
  134.         <nav class="navbar navbar-expand-md navbar-light bg-light border">
  135.  
  136.             <button aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbar" data-toggle="collapse" type="button">
  137.                 <span class="navbar-toggler-icon"></span>
  138.             </button>
  139.             <div class="collapse navbar-collapse" id="navbar">
  140.  
  141.                 {% if session.user_id %}
  142.                     <a class="navbar-brand" href="/"><span class="blue">B</span><span class="red">u</span><span class="yellow">l</span><span class="green">l</span><span class="red">yng</span><span class="blue">Escuelas</span></a>
  143.                     <ul class="navbar-nav mr-auto mt-2">
  144.  
  145.                         <li class="nav-item"><a class="nav-link" href="/reportesrecibidos">Reportes Recibidos</a></li>
  146.                     </ul>
  147.  
  148.                     <ul class="navbar-nav ml-auto mt-2">
  149.                         <li class="nav-item"><a class="nav-link" href="/logout">Cerrar Sesión</a></li>
  150.                     </ul>
  151.                 {% else %}
  152.                 <a class="navbar-brand" href="/"><span class="blue">B</span><span class="red">u</span><span class="yellow">l</span><span class="green">l</span><span class="red">yng</span></a>
  153.                 <ul class="navbar-nav mr-auto mt-2">
  154.                 <ul class="navbar-nav mr-auto mt-2">
  155.                     <li class="nav-item"><a class="nav-link" href="/logreg">Escuela</a></li>
  156.                     <li class="nav-item"><a class="nav-link" href="/elegi">Estudiante</a></li>
  157.                     <li class="nav-item"><a class="nav-link" href="/psicologo">Hablar gratis con un psicologo</a></li>
  158.                     <li class="nav-item"><a class="nav-link" href="/argentina">Bullying en Argentina</a></li>
  159.  
  160.  
  161.                 </ul>
  162.                 {% endif %}
  163.  
  164.             </div>
  165.         </nav>
  166.  
  167.         {% if get_flashed_messages() %}
  168.             <header>
  169.                 <div class="alert alert-primary border text-center" role="alert">
  170.                     {{ get_flashed_messages() | join(" ") }}
  171.                 </div>
  172.             </header>
  173.         {% endif %}
  174.  
  175.         <main class="container p-5">
  176.             {% block main %}{% endblock %}
  177.         </main>
  178.  
  179.  
  180.  
  181.     </body>
  182.  
  183. </html>
  184.  
  185. CSS:
  186. nav .navbar-brand
  187. {
  188.     /* size for brand */
  189.     font-size: xx-large;
  190. }
  191.  
  192. /* colors for brand */
  193. nav .navbar-brand .blue
  194. {
  195.     color: #537fbe;
  196. }
  197. nav .navbar-brand .red
  198. {
  199.     color: #ea433b;
  200. }
  201. nav .navbar-brand .yellow
  202. {
  203.     color: #f5b82e;
  204. }
  205. nav .navbar-brand .green
  206. {
  207.     color: #2e944b;
  208. }
  209.  
  210. main .form-control
  211. {
  212.     /* center form controls */
  213.     display: inline-block;
  214.  
  215.     /* override Bootstrap's 100% width for form controls */
  216.     width: auto;
  217. }
  218.  
  219. main
  220. {
  221.     /* scroll horizontally as needed */
  222.     overflow-x: auto;
  223.  
  224.     /* center contents */
  225.     text-align: center;
  226. }
  227.  
  228. main img
  229. {
  230.     /* constrain images on small screens */
  231.     max-width: 100%;
  232. }
  233. .text-primary
  234. {
  235.     font-size: 21px;
  236. }
  237. .text-primarytwo
  238. {
  239.     font-size: 21px;
  240.     color: #0041C2;
  241. }
  242. #textbox
  243. {
  244.     height:200px;
  245.     width: 300px;
  246. }
  247. #boton
  248. {
  249.     height:50px;
  250.     width: 300px;
  251. }
  252. #elegireportes
  253. {
  254.     height:50px;
  255.     width: 250px;
  256. }
  257. #estudiantefoto
  258. {
  259.     height:50px;
  260.     width: 250px;
  261. }
  262. #logreg
  263. {
  264.     height:60px;
  265.     width: 200px;
  266.     font-weight: 450;
  267. }
  268. #parrafopsi{
  269.   font-size: 20px;
  270. }
  271. #elegilo
  272. {
  273.     height:60px;
  274.     width: 200px;
  275.     font-size: 23px;
  276. }
  277. #reps
  278. {
  279.     height:60px;
  280.     width: 400px;
  281.     font-size: 23px;
  282. }
  283. #loginx
  284. {
  285.     height:50px;
  286.     width: 300px;
  287.  
  288. }
  289.  
  290. #boton2
  291. {
  292.     height:50px;
  293.     width: 250px;
  294. }
  295. input[name=nombreescuela], input[name=curso], input[name=victima], select[name=provincia], input[name=username], input[name=confirmation], input[name=password], input[name=mail]
  296. {
  297.     width: 300px;
  298. }
  299. /* Dropdown Button */
  300. .dropbtn, #naco {
  301.   background-color: #4CAF50;
  302.   color: white;
  303.   padding: 16px;
  304.   font-size: 16px;
  305.   border: none;
  306. }
  307.  
  308. /* The container <div> - needed to position the dropdown content */
  309. .dropdown {
  310.   position: relative;
  311.   display: inline-block;
  312. }
  313.  
  314. /* Dropdown Content (Hidden by Default) */
  315. .dropdown-content {
  316.   display: none;
  317.   position: absolute;
  318.   background-color: #f1f1f1;
  319.   min-width: 160px;
  320.   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  321.   z-index: 1;
  322.  
  323. }
  324.  
  325. /* Links inside the dropdown */
  326. .dropdown-content a {
  327.   color: black;
  328.   padding: 12px 16px;
  329.   text-decoration: none;
  330.   display: block;
  331. }
  332.  
  333. /* Change color of dropdown links on hover */
  334. .dropdown-content a:hover {background-color: #ddd;}
  335.  
  336. /* Show the dropdown menu on hover */
  337. .dropdown:hover .dropdown-content {display: block;}
  338.  
  339. /* Change the background color of the dropdown button when the dropdown content is shown */
  340. .dropdown:hover .dropbtn {background-color: #3e8e41;}
  341. /* boton 2 */
  342. .button1 {
  343.   background-color: #4CAF50; /* Green */
  344.   border: none;
  345.   color: white;
  346.   padding: 15px 32px;
  347.   text-align: center;
  348.   text-decoration: none;
  349.   display: inline-block;
  350.   font-size: 16px;
  351.   margin: 4px 2px;
  352.   cursor: pointer;
  353.   -webkit-transition-duration: 0.4s; /* Safari */
  354.   transition-duration: 0.4s;
  355.   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  356. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top