ScilifelabDataCentre / OrderPortal

A portal for orders (requests, project applications, etc) to a facility from its users.
MIT License
6 stars 12 forks source link

Redo layout of home page #368

Closed pekrau closed 8 years ago

pekrau commented 8 years ago

Could @ormestad send me the source code?

ormestad commented 8 years ago

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>NGI Sweden Order Portal</title>
    <link rel="shortcut icon" type="image/png" href="favicon.png">
    <link rel="stylesheet" type="text/css"
    href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/jquery-ui.min.css">
    <link rel="stylesheet" href="static/css/mods.css">
</head>

<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle"
                    data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="/">
                    <img src="favicon.png"
                    title="NGI Sweden Order Portal"
                    alt="NGI Sweden Order Portal">
                </a>
            </div>

            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li>
                        <a class="glyphicon glyphicon-home" href="/"></a>
                    </li>

                    <li>
                        <a href="/account/mattias.ormestad%40gmail.com/orders">My orders</a>
                    </li>

                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Information<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="/info/Test_information">Test information</a>
                            </li>

                            <li>
                                <a href="/info/More%20test%20pages">More test pages</a>
                            </li>
                        </ul>
                    </li>

                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Files<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="/files">All files</a>
                            </li>

                            <li>
                                <a href="/file/Q-scores/meta">- Q-scores</a>
                            </li>

                            <li>
                                <a href="/file/PDF/meta">- PDF</a>
                            </li>
                        </ul>
                    </li>

                    <li>
                        <a href="/contact">Contact</a>
                    </li>
                </ul>

                <div>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <p class="navbar-text">

                                <!-- ***** OBS! Dubbel länk! ***** -->

                                <a href="/account/mattias.ormestad%40gmail.com"><span class="glyphicon glyphicon-user"></span> mattias.ormestad@gmail.com</a>
                            </p>
                        </li>

                        <li>
                            <form action="/logout" role="form" class="navbar-form" method="POST">
                                <input type="hidden" name="_xsrf" value="2|b25945d5|26b4dd1daa7f089377682b8a7e2d8895|1455356326"/>
                                <button type="submit" title="Logout" class="btn btn-default btn-sm">
                                    <span class="glyphicon glyphicon-log-out"></span>
                                </button>
                            </form>
                        </li>

                        <li>
                            <form action="/search" role="form" class="navbar-form form-inline" method="GET">
                                <div class="form-group has-feedback">
                                    <input type="search" id="term" name="term" autofocus class="form-control" placeholder="Search">
                                    <span class="glyphicon glyphicon-search form-control-feedback"></span>
                                </div>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <div class="container"> <!-- ***** container ***** -->
        <div class="row">
            <div class="col-md-12">&nbsp;</div>
        </div>

        <div class="row">
            <div class="col-md-4">
                <img class="img-responsive" src="ngi.png" title="NGI Sweden Order Portal" alt="NGI Sweden Order Portal">
                <h2>NGI Sweden Order Portal</h2>
                <p>Bacon ipsum dolor amet ribeye cow andouille pork chop sirloin. Tail meatball t-bone swine bacon kevin short loin meatloaf beef sausage pork chop cow fatback shoulder flank. Boudin turkey cow shank leberkas ribeye flank bresaola. Jowl venison beef pig, ham prosciutto salami picanha turkey rump fatback pork turducken. Pork chop short ribs fatback boudin, ham capicola tail spare ribs swine tongue corned beef turducken beef ribs doner. Jowl turducken cow, prosciutto cupim ham ham hock.</p>
                <p>Boudin strip steak filet mignon venison pork meatloaf. Pork belly jowl turkey short loin drumstick tenderloin. Jerky pork chop bresaola tail sausage ribeye, porchetta rump sirloin alcatra pork loin jowl kielbasa meatball. Hamburger short loin tail, shank brisket ground round cupim jerky kielbasa fatback turkey. Flank short ribs tongue, pork belly beef ribeye sirloin shoulder. Filet mignon ham venison ham hock fatback tenderloin strip steak brisket short loin.</p>
            </div>

            <div class="col-md-4">
                <div class="panel-group">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <span class="glyphicon glyphicon-briefcase"></span> Illumina
                            <form action="/order" role="form" class="pull-right" method="GET">
                                <input type="hidden" name="form" value="d029434447b443488a93e92aeb0bb86c">
                                <button type="submit" class="btn btn-warning btn-xs">
                                    <span class="glyphicon glyphicon-plus"></span>
                                    Create order
                                </button>
                            </form>
                        </div>

                        <div class="panel-body">
                            <p>Order sequencing using the Illumina platform, please go <a href="#">here</a> for more information. Available both on the NGI Stockholm and NGI SNP&SEQ node.</p>
                        </div>
                    </div>

                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <span class="glyphicon glyphicon-briefcase"></span> PacBio
                            <form action="/order" role="form" class="pull-right" method="GET">
                                <input type="hidden" name="form" value="d029434447b443488a93e92aeb0bb86c">
                                <button type="submit" class="btn btn-warning btn-xs">
                                    <span class="glyphicon glyphicon-plus"></span>
                                    Create order
                                </button>
                            </form>
                        </div>

                        <div class="panel-body">
                            <p>Order sequencing using the PacBio platform, please go <a href="#">here</a> for more information. Available only on the NGI UGC node.</p>
                        </div>
                    </div>

                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <span class="glyphicon glyphicon-briefcase"></span> Ion Torrent / Proton
                            <form action="/order" role="form" class="pull-right" method="GET">
                                <input type="hidden" name="form" value="d029434447b443488a93e92aeb0bb86c">
                                <button type="submit" class="btn btn-warning btn-xs">
                                    <span class="glyphicon glyphicon-plus"></span>
                                    Create order
                                </button>
                            </form>
                        </div>

                        <div class="panel-body">
                            <p>Order sequencing using the Ion Torrent or Ion Proton platform, please go <a href="#">here</a> for more information. Available only on the NGI UGC node.</p>
                        </div>
                    </div>

                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <span class="glyphicon glyphicon-briefcase"></span> Genotyping
                            <form action="/order" role="form" class="pull-right" method="GET">
                                <input type="hidden" name="form" value="d029434447b443488a93e92aeb0bb86c">
                                <button type="submit" class="btn btn-warning btn-xs">
                                    <span class="glyphicon glyphicon-plus"></span>
                                    Create order
                                </button>
                            </form>
                        </div>

                        <div class="panel-body">
                            <p>Order genotyping, please go <a href="#">here</a> for more information. Available only on the NGI SNP&SEQ node.</p>
                        </div>
                    </div>

                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <span class="glyphicon glyphicon-question-sign"></span> Request meeting
                            <form action="/order" role="form" class="pull-right" method="GET">
                                <input type="hidden" name="form" value="d029434447b443488a93e92aeb0bb86c">
                                <button type="submit" class="btn btn-warning btn-xs">
                                    <span class="glyphicon glyphicon-plus"></span>
                                    Create order
                                </button>
                            </form>
                        </div>

                        <div class="panel-body">
                            <p>If you're unsure what technology platform to use or if you want to discuss your project please request a meeting and we will get back to you!</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        My recently modified orders
                        <!-- ***** move into header ***** -->
                        <a href="/account/mattias.ormestad%40gmail.com/orders" class="btn btn-warning btn-xs pull-right">
                            <span class="glyphicon glyphicon-list"></span>
                            All my orders
                        </a>
                    </div>

                    <div class="panel-body">
                        <table class="table-condensed">
                            <tr>
                                <th>
                                    <a href="/order/b638610fbba249b3b4e29232143690c7">This is a very long...</a>
                                </th>
                                <td><span class="glyphicon glyphicon-edit"></span> Preparation</td>
                                <td class="localtime">2016-02-13</td>
                            </tr>

                            <tr>
                                <th>
                                    <a href="/order/b638610fbba249b3b4e29232143690c7">Test order 2</a>
                                </th>
                                <td><span class="glyphicon glyphicon-edit"></span> Preparation</td>
                                <td class="localtime">2016-02-13</td>
                            </tr>

                            <tr>
                                <th>
                                    <a href="/order/b638610fbba249b3b4e29232143690c7">Test order 3</a>
                                </th>
                                <td><span class="glyphicon glyphicon-new-window"></span> Submitted</td>
                                <td class="localtime">2016-02-13</td>
                            </tr>

                            <tr>
                                <th>
                                    <a href="/order/b638610fbba249b3b4e29232143690c7">Test order 4</a>
                                </th>
                                <td><span class="glyphicon glyphicon-check"></span> Accepted</td>
                                <td class="localtime">2016-02-13</td>
                            </tr>

                            <tr>
                                <th>
                                    <a href="/order/b638610fbba249b3b4e29232143690c7">Test order 5</a>
                                </th>
                                <td><span class="glyphicon glyphicon-check"></span> Accepted</td>
                                <td class="localtime">2016-02-13</td>
                            </tr>

                            <tr>
                                <th>
                                    <a href="/order/b638610fbba249b3b4e29232143690c7">Test order 6</a>
                                </th>
                                <td><span class="glyphicon glyphicon-book"></span> Closed</td>
                                <td class="localtime">2016-02-13</td>
                            </tr>

                            <tr>
                                <th>
                                    <a href="/order/b638610fbba249b3b4e29232143690c7">Test order 7</a>
                                </th>
                                <td><span class="glyphicon glyphicon-remove-circle"></span> Aborted</td>
                                <td class="localtime">2016-02-13</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">   
            <div class="col-md-6">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <span class="glyphicon glyphicon-info-sign"></span>
                        News
                    </div>

                    <div class="panel-body">
                        <table class="table table-condensed">
                            <tr>
                                <td class="nobr">2016-01-05</td>
                                <td>
                                    <strong>It's super with a title!</strong>
                                    <p>Bacon ipsum dolor amet ribeye cow andouille pork chop sirloin. Tail meatball t-bone swine bacon kevin short loin meatloaf beef sausage pork chop cow fatback shoulder flank. Boudin turkey cow shank leberkas ribeye flank bresaola. Jowl venison beef pig, ham prosciutto salami picanha turkey rump fatback pork turducken. Pork chop short ribs fatback boudin, ham capicola tail spare ribs swine tongue corned beef turducken beef ribs doner. Jowl turducken cow, prosciutto cupim ham ham hock.</p>
                                </td>
                            </tr>

                            <tr>
                                <td class="nobr">2016-01-05</td>
                                <td>
                                    <strong>It's super with a title!</strong>
                                    <p>Coordinators are cheering and shooting fireworks tomorrow.</p>
                                </td>
                            </tr>

                            <tr>
                                <td class="nobr">2016-01-05</td>
                                <td>
                                    <strong>It's super with a title!</strong>
                                    <p>This is some vague news.</p>
                                </td>
                            </tr>

                            <tr>
                                <td class="nobr">2016-01-05</td>
                                <td>
                                    <strong>It's super with a title!</strong>
                                    <p>New forms for ordering now in place at the NGI portal</p>
                                </td>
                            </tr>

                            <tr>
                                <td class="nobr">2016-01-05</td>
                                <td>
                                    <strong>It's super with a title!</strong>
                                    <p>We are up and running for tests by the coordinators.</p>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <span class="glyphicon glyphicon-calendar"></span>
                        Events
                    </div>

                    <div class="panel-body">
                        <table class="table table-condensed">
                            <tr>
                                <td class="nobr">2015-11-17</td>
                                <td>
                                    <strong>Course in &quot;How to use the portal&quot;</strong>
                                    <p>Course for all lost people on how to fill in the forms available at the NGI portal.</p>
                                </td>
                            </tr>

                            <tr>
                                <td class="nobr">2015-11-30</td>
                                <td>
                                    <strong>Now the date widget works!</strong>
                                    <p>Finally, using jQuery-UI.</p>
                                </td>
                            </tr>

                            <tr>
                                <td class="nobr">2016-01-22</td>
                                <td>
                                    <strong>Outreach meeting</strong>
                                    <p>Bacon ipsum dolor amet ribeye cow andouille pork chop sirloin. Tail meatball t-bone swine bacon kevin short loin meatloaf beef sausage pork chop cow fatback shoulder flank. Boudin turkey cow shank leberkas ribeye flank bresaola. Jowl venison beef pig, ham prosciutto salami picanha turkey rump fatback pork turducken. Pork chop short ribs fatback boudin, ham capicola tail spare ribs swine tongue corned beef turducken beef ribs doner. Jowl turducken cow, prosciutto cupim ham ham hock.</p>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="well well-sm">
                    This is an
                    <a href="https://github.com/pekrau/OrderPortal">OrderPortal</a>
                    system site containing the software and
                    <a href="https://github.com/pekrau/OrderPortal/wiki">documentation</a>.
                    Technical information and links can be found
                    <a href="/techinfo">here</a>.
                </div>
            </div>
        </div>
    </div>

    <script src="/static/jquery-1.11.3.min.js?v=895323ed2f7258af4fae2c738c8aea49"></script>
    <script src="/static/jquery.localtime-0.9.1.min.js?v=f183d4c3b465bf35973ed27d1bd1d612"></script>
    <script src="/static/Bootstrap-3.3.5/js/bootstrap.min.js?v=4becdc9104623e891fbb9d38bba01be4"></script>

    <script>
    $(document).ready(function(){
    $('.dropdown-submenu a.submenu').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
    });
    });
    </script>

    <script src="/static/jquery-ui-1.11.4/jquery-ui.min.js?v=d935d506ae9c8dd9e0f96706fbb91f65"></script>
    <script>
    $.datepicker.setDefaults({dateFormat: "yy-mm-dd"});
    $(document).ready(function(){
    $(".datepicker").datepicker();
    });
    </script>
</body>

</html>
ormestad commented 8 years ago

OBS! Some file paths etc are different since I copy/pasted the generated html source and tested it elsewhere. All glyphicons are from the glyphicon file supplied in the bootstrap package so these will all work. The container element was changed from container-fluid to container.