sweatshoptech/idb

View on GitHub
templates/school_results.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>SWEatshop.tech</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/styles.processed.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
    <link rel="shortcut icon" href="/static/img/favicon.ico">
  </head>
  <body class="gradient-bg">
    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse-opacity">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="/index.html"><img alt="Brand" src="/static/img/sweatshop-logo.png" style="width: 200px;"></a>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="/index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/companies.html">Companies</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/people.html">People</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/investors.html">Investors</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/schools.html">Schools</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/visualization.html">Visualization</a>
          </li>
          <li><a href="#search"><img src="http://www.freeiconspng.com/uploads/search-icon-png-4.png" style="height: 35px;"></a></li>
        </ul>
      </div>
    </nav>
    <div style="min-height:89vh"> 
      <h1 class="cover-heading">Search Results</h1>
      <div class="container" style="color: white;">
        <div class="tab">
          <a href="/search/person/{{keyword}}"><button class="tablinks">People</button></a>
          <a href="/search/company/{{keyword}}"><button class="tablinks">Companies</button></a>
          <a href="/search/investor/{{keyword}}"><button class="tablinks">Investors</button></a>
          <button class="tablinks active">Schools</button>
          <div style="float: right;" id="multi-filters">
            <a href="?"><button class="tablinks" data-filter="AND">AND</button></a>
            <a href="?multi=OR"><button class="tablinks" data-filter="OR">OR</button></a>
          </div>
        </div>
        
        <div id="Investors" class="tabcontent" style="display: block">
          <div class="pag-container">{{ pagination.links }}</div> 
          {% for org in results %}
            <div class="card" style="background-color: #333; border-color: #333; color: #eee;">
              <a href="http://sweatshop.tech/school/{{org.idnum}}" style="color: #eee;">
              <div class="card-block">
                <div class="row">
                  <div class="col-4 results-image">
                    <img src="{{org.image_url}}" alt="Company Logo" /></div>
                  <div class="col-8" style="text-align: left;">
                    <br/>
                    <h3>{{highlight_keys(org.name, keyword) | safe}}</h3><br/>
                    <b>Location: </b>{{highlight_keys(org.location, keyword) | safe}}<br/>
                    <b>Country: </b>{{highlight_keys(org.country, keyword) | safe}}<br/>
                    <b>Website: </b><a href="{{org.website}}" target="_blank">{{highlight_keys(org.website, keyword) | safe}}</a><br/>
                    <b>Description: </b>{{highlight_keys_desc(org.description, keyword) | safe}}<br/>
                  </div>
                </div>
              </div>
              </a>
            </div>
          {% endfor %}    
          <div class="pag-container">{{ pagination.links }}</div> 
          <button-text>{{ pagination.info }}</button-text>
        </div>

      </div>
      
      <script>
        function getParameterByName(name) {
            var url = window.location.href;
            name = name.replace(/[\[\]]/g, "\\$&");
            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }

        var multiVal = getParameterByName('multi');
        if(!multiVal)
          multiVal = 'AND'

        var multis = $('#multi-filters').children('a');
        for (var i in multis) {
          var but = $(multis[i]).children('button')[0];
          if (but.attributes['data-filter'].value == multiVal)
            $(but).addClass('active');  
        }
     </script>

    </div>
    <div class="outro">
      © SWEatshop 2017
    </div>
  </body>
  <div id="search">
      <button type="button" class="close">×</button>
      <form action="/search" method="get">
          <input type="search" name="query" value="" placeholder="type keyword(s) here" />
          <button type="submit" class="btn btn-primary">Search</button>
      </form>
  </div>
  <script>
    $(function () {
        $('a[href="#search"]').on('click', function(event) {
            event.preventDefault();
            $('#search').addClass('open');
            $('#search > form > input[type="search"]').focus();
        });
        
        $('#search, #search button.close').on('click keyup', function(event) {
            if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
                $(this).removeClass('open');
            }
        });
    });
  </script>
</html>