Browse Source

working on new layout template

master
Holger Frey 7 years ago
parent
commit
052cb29acf
  1. 19
      ordr2/static/style.css
  2. 297
      ordr2/templates/example.html
  3. 108
      ordr2/templates/layout.jinja2
  4. 2
      ordr2/templates/mytemplate.jinja2

19
ordr2/static/style.css

@ -0,0 +1,19 @@ @@ -0,0 +1,19 @@
html {
font-size: 14px;
}
header .branding {
padding-left: 0px;
}
header .btn-toolbar .btn-group {
margin-right:1em;
}
.container-fluid {
padding-top: 1em;
}
.list-group-header {
}

297
ordr2/templates/example.html

@ -0,0 +1,297 @@ @@ -0,0 +1,297 @@
<!DOCTYPE html>
<html lang="{{ request.locale_name }}">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="{{ request.static_url('ordr2:static/shortcut-16x16.png') }}">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Icons -->
<link href="{{ request.static_url('ordr2:static/font/css/open-iconic-bootstrap.css') }}" rel="stylesheet">
<!-- Custom styles for this scaffold -->
<link href="{{ request.static_url('ordr2:static/style.css') }}" rel="stylesheet">
<title>Cookiecutter Alchemy project for the Pyramid Web Framework</title>
</head>
<body>
<header>
<!-- header level one -->
<nav class="navbar navbar-dark bg-dark navbar-expand">
<!-- ordr logo on the right -->
<div class="col-sm-2">
<a class="navbar-brand" href="{{ request.resource_url(request.root) }}">ordr</a>
</div>
<!-- main section links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="http://localhost:6543/orders">Orders</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:6543/faq">FAQs</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:6543/admin">Admin</a></li>
</ul>
<!-- user login and setting stuff on the right -->
<ul class="navbar-nav">
<li class="nav-item dropdown" id="user-options">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownUserSettings" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Logged in as <span>HolgerFrey</span>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownUserSettings">
<li class="dropdown-item"><a href="http://localhost:6543/account/settings">Settings</a></li>
<li class="dropdown-item"><a href="https://git.cpi.imtek.uni-freiburg.de/holgi/ordr2/issues">Submit an Issue</a></li>
<li class="dropdown-item"></li>
<li class="dropdown-item"><a href="http://localhost:6543/account/logout">Logout</a></li>
</ul>
</li>
</ul>
</nav>
<!-- header level two -->
<div class="navbar navbar-light bg-light navbar-expand">
<!-- subheadline on the right -->
<h1 class="col-sm-2">Orders</h1>
<!-- edit buttons -->
<div class="navbar-nav mr-auto btn-toolbar">
<div class="btn-group">
<a class="btn btn-outline-secondary" href="http://localhost:6543/orders/splash" rel="tooltip" data-original-title="New"><i class="oi oi-plus"></i></a>
</div>
<div class="btn-group">
<button class="btn btn-outline-secondary" rel="tooltip" data-original-title="Change Status" value="status" type="submit" name="action"><i class="oi oi-clipboard"></i></button>
<button class="btn btn-outline-secondary" rel="tooltip" data-original-title="Delete" value="delete" type="submit" name="action"><i class="oi oi-trash"></i></button>
</div>
<div class="btn-group">
<button class="btn btn-outline-secondary" rel="tooltip" data-original-title="Set Column Display" value="export" type="submit" name="action"><i class="oi oi-eye"></i></a>
</div>
<div class="btn-group">
<button class="btn btn-outline-secondary" rel="tooltip" data-original-title="Download View" value="export" type="submit" name="action"><i class="oi oi-cloud-download"></i></button>
</div>
</div>
<!-- seach -->
<form class="form-inline">
<input class="form-control" type="search" name="search" size="30" placeholder="Search" value="">
<label>
<button class="btn btn-outline-primary btn-small" type="submit" name="action" value="search">Search</button>
</label>
</form>
</div>
</header>
<main class="container-fluid">
<div class="row">
<div class="col-2">
<!-- filters on the right-->
<div class="list-group">
<span class="list-group-item list-group-header bg-light">All Orders</span>
<a class="list-group-item active" href="http://localhost:6543/orders/?p=1&amp;n=12&amp;o=created.desc">All</a>
<a class="list-group-item list-group-item-action" href="http://localhost:6543/orders/?p=1&amp;n=12&amp;o=created.desc&amp;status=open">Open</a>
<a class="list-group-item list-group-item-action" href="http://localhost:6543/orders/?p=1&amp;n=12&amp;o=created.desc&amp;status=approval">Approval</a>
<a class="list-group-item list-group-item-action" href="http://localhost:6543/orders/?p=1&amp;n=12&amp;o=created.desc&amp;status=ordered">Ordered</a>
<a class="list-group-item list-group-item-action" href="http://localhost:6543/orders/?p=1&amp;n=12&amp;o=created.desc&amp;status=completed">Completed</a>
</div>
</div>
<div class="col-10">
<table class="table table-hover">
<thead class="thead-default">
<th>
<input type="checkbox" value="all" name="mark_all" id="mark_all">
</th>
<th> <a href="http://localhost:6543/orders/?p=1&amp;n=12&amp;o=created.asc">Date Created</a> </th>
<th> <a href="http://localhost:6543/orders/?p=1&amp;n=12&amp;o=cas.asc">CAS / Description</a> </th>
<th> <a href="http://localhost:6543/orders/?p=1&amp;n=12&amp;o=vendor.asc">Vendor</a> </th>
<th> <a href="http://localhost:6543/orders/?p=1&amp;n=12&amp;o=catalog.asc">Catalog Nr.</a> </th>
<th> <a href="http://localhost:6543/orders/?p=1&amp;n=12&amp;o=status.asc">Status</a> </th>
<th> <a href="http://localhost:6543/orders/?p=1&amp;n=12&amp;o=user.asc">Ordered By</a> </th>
<th>Actions</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="marked" value="5615">
</td>
<td>2017-10-11 12:30</td>
<td>Ethanol 96% denaturated</td>
<td>VWR</td>
<td>APPCA2551.9010</td>
<td> <span> completed </span></td>
<td> <a href="http://localhost:6543/orders/?user=HolgerFrey" title="click to view all orders from user">HolgerFrey</a> </td>
<td> <a href="http://localhost:6543/orders/5615/edit" title="Edit Order"><i class="oi oi-pencil"></i></a> <a href="http://localhost:6543/orders/5615/delete" title="Delete Order"><i class="oi oi-trash"></i></a> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="marked" value="5614">
</td>
<td>2017-10-04 16:27</td>
<td>Präzisionspinzette -Gebogene, extra feine Spitzen</td>
<td>VWR</td>
<td>232-1230</td>
<td> <span> completed </span></td>
<td> <a href="http://localhost:6543/orders/?user=StefanMuellers" title="click to view all orders from user">StefanMuellers</a> </td>
<td> <a href="http://localhost:6543/orders/5614/edit" title="Edit Order"><i class="oi oi-pencil"></i></a> <a href="http://localhost:6543/orders/5614/delete" title="Delete Order"><i class="oi oi-trash"></i></a> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="marked" value="5613">
</td>
<td>2017-10-04 16:24</td>
<td>Pinzette für Deckgläser</td>
<td>VWR</td>
<td>232-0111</td>
<td> <span> completed </span></td>
<td> <a href="http://localhost:6543/orders/?user=StefanMuellers" title="click to view all orders from user">StefanMuellers</a> </td>
<td> <a href="http://localhost:6543/orders/5613/edit" title="Edit Order"><i class="oi oi-pencil"></i></a> <a href="http://localhost:6543/orders/5613/delete" title="Delete Order"><i class="oi oi-trash"></i></a> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="marked" value="5612">
</td>
<td>2017-10-02 11:11</td>
<td>Vakkum-Exsikkator</td>
<td>VWR</td>
<td>467-0087</td>
<td> <span> approval </span></td>
<td> <a href="http://localhost:6543/orders/?user=MartinSchoenstein" title="click to view all orders from user">MartinSchoenstein</a> </td>
<td> <a href="http://localhost:6543/orders/5612/edit" title="Edit Order"><i class="oi oi-pencil"></i></a> <a href="http://localhost:6543/orders/5612/delete" title="Delete Order"><i class="oi oi-trash"></i></a> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="marked" value="5611">
</td>
<td>2017-09-28 10:53</td>
<td>Ethanol 96%, vergällt mit 1%MEK</td>
<td>Carl-Roth</td>
<td>T171.2</td>
<td> <span> completed </span></td>
<td> <a href="http://localhost:6543/orders/?user=NataliaSchatz" title="click to view all orders from user">NataliaSchatz</a> </td>
<td> <a href="http://localhost:6543/orders/5611/edit" title="Edit Order"><i class="oi oi-pencil"></i></a> <a href="http://localhost:6543/orders/5611/delete" title="Delete Order"><i class="oi oi-trash"></i></a> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="marked" value="5610">
</td>
<td>2017-09-28 10:53</td>
<td>n-Hexan, 95%, z.Synthese</td>
<td>Carl-Roth</td>
<td>3907.4</td>
<td> <span> completed </span></td>
<td> <a href="http://localhost:6543/orders/?user=NataliaSchatz" title="click to view all orders from user">NataliaSchatz</a> </td>
<td> <a href="http://localhost:6543/orders/5610/edit" title="Edit Order"><i class="oi oi-pencil"></i></a> <a href="http://localhost:6543/orders/5610/delete" title="Delete Order"><i class="oi oi-trash"></i></a> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="marked" value="5609">
</td>
<td>2017-09-28 10:52</td>
<td>Aceton, 99,7%, reinst</td>
<td>Carl-Roth</td>
<td>CP40.6</td>
<td> <span> completed </span></td>
<td> <a href="http://localhost:6543/orders/?user=NataliaSchatz" title="click to view all orders from user">NataliaSchatz</a> </td>
<td> <a href="http://localhost:6543/orders/5609/edit" title="Edit Order"><i class="oi oi-pencil"></i></a> <a href="http://localhost:6543/orders/5609/delete" title="Delete Order"><i class="oi oi-trash"></i></a> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="marked" value="5608">
</td>
<td>2017-09-28 10:52</td>
<td>Essigsäureethylester, 99,5%, reinst</td>
<td>Carl-Roth</td>
<td>CP42.6</td>
<td> <span> completed </span></td>
<td> <a href="http://localhost:6543/orders/?user=NataliaSchatz" title="click to view all orders from user">NataliaSchatz</a> </td>
<td> <a href="http://localhost:6543/orders/5608/edit" title="Edit Order"><i class="oi oi-pencil"></i></a> <a href="http://localhost:6543/orders/5608/delete" title="Delete Order"><i class="oi oi-trash"></i></a> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="marked" value="5607">
</td>
<td>2017-09-28 10:51</td>
<td>Dichlormethan, 99,5%, reinst</td>
<td>Carl-Roth</td>
<td>CP45.4</td>
<td> <span> completed </span></td>
<td> <a href="http://localhost:6543/orders/?user=NataliaSchatz" title="click to view all orders from user">NataliaSchatz</a> </td>
<td> <a href="http://localhost:6543/orders/5607/edit" title="Edit Order"><i class="oi oi-pencil"></i></a> <a href="http://localhost:6543/orders/5607/delete" title="Delete Order"><i class="oi oi-trash"></i></a> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="marked" value="5606">
</td>
<td>2017-09-28 10:46</td>
<td>GHP Acrodisc, Porengröße: 0,45 µm, Dmr:25 mm 1 * 50 ST</td>
<td>VWR</td>
<td>514-4036</td>
<td> <span> completed </span></td>
<td> <a href="http://localhost:6543/orders/?user=NataliaSchatz" title="click to view all orders from user">NataliaSchatz</a> </td>
<td> <a href="http://localhost:6543/orders/5606/edit" title="Edit Order"><i class="oi oi-pencil"></i></a> <a href="http://localhost:6543/orders/5606/delete" title="Delete Order"><i class="oi oi-trash"></i></a> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="marked" value="5605">
</td>
<td>2017-09-28 09:29</td>
<td>Gewindeflasche, braun, 20ml</td>
<td>VWR</td>
<td>548-0638</td>
<td> <span> ordered </span></td>
<td> <a href="http://localhost:6543/orders/?user=SebastianAnders" title="click to view all orders from user">SebastianAnders</a> </td>
<td> <a href="http://localhost:6543/orders/5605/edit" title="Edit Order"><i class="oi oi-pencil"></i></a> <a href="http://localhost:6543/orders/5605/delete" title="Delete Order"><i class="oi oi-trash"></i></a> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="marked" value="5604">
</td>
<td>2017-09-27 15:21</td>
<td>Anthranilsäure, f. S.</td>
<td>SA</td>
<td>8201120100</td>
<td> <span> ordered </span></td>
<td> <a href="http://localhost:6543/orders/?user=NataliaSchatz" title="click to view all orders from user">NataliaSchatz</a> </td>
<td> <a href="http://localhost:6543/orders/5604/edit" title="Edit Order"><i class="oi oi-pencil"></i></a> <a href="http://localhost:6543/orders/5604/delete" title="Delete Order"><i class="oi oi-trash"></i></a> </td>
</tr>
</tbody>
</table>
<!-- pagination -->
<div>
<ul class="pagination">
<li class="page-item disabled"> <a class="page-link" href="">← Previous</a> </li>
<li class="page-item active"> <a class="page-link" href="http://localhost:6543/orders/?p=1&amp;n=12&amp;o=created.desc">1</a> </li>
<li class="page-item"> <a class="page-link" href="http://localhost:6543/orders/?p=2&amp;n=12&amp;o=created.desc">2</a> </li>
<li class="page-item"> <a class="page-link" href="http://localhost:6543/orders/?p=3&amp;n=12&amp;o=created.desc">3</a> </li>
<li class="page-item"> <a class="page-link" href="http://localhost:6543/orders/?p=4&amp;n=12&amp;o=created.desc">4</a> </li>
<li class="page-item"> <a class="page-link" href="">...</a> </li>
<li class="page-item"> <a class="page-link" href="http://localhost:6543/orders/?p=2&amp;n=12&amp;o=created.desc">Next →</a> </li>
</ul>
</div>
</div>
</div>
<!-- end of content -->
</main>
<footer class="container-fluid">
<div class="row">
<div class="col-12">
<a target="_blank" href="http://distractedbysquirrels.com/">This software was orignially written by Sebastian Sebald.</a>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>

108
ordr2/templates/layout.jinja2

@ -1,64 +1,82 @@ @@ -1,64 +1,82 @@
<!DOCTYPE html>
<html lang="{{request.locale_name}}">
<head>
<html lang="{{ request.locale_name }}">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="pyramid web application">
<meta name="author" content="Pylons Project">
<link rel="shortcut icon" href="{{request.static_url('ordr2:static/pyramid-16x16.png')}}">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="{{ request.static_url('ordr2:static/shortcut-16x16.png') }}">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Icons -->
<link href="{{ request.static_url('ordr2:static/font/css/open-iconic-bootstrap.css') }}" rel="stylesheet">
<!-- Custom styles for this scaffold -->
<link href="{{ request.static_url('ordr2:static/style.css') }}" rel="stylesheet">
<title>Cookiecutter Alchemy project for the Pyramid Web Framework</title>
</head>
<!-- Bootstrap core CSS -->
<link href="//oss.maxcdn.com/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<body>
<header>
<!-- header level one -->
<nav class="navbar navbar-dark bg-dark navbar-expand">
<!-- ordr logo on the right -->
<div class="col-sm-2 branding">
<a class="navbar-brand" href="{{ request.resource_url(request.root) }}">ordr</a>
</div>
<!-- Custom styles for this scaffold -->
<link href="{{request.static_url('ordr2:static/theme.css')}}" rel="stylesheet">
<!-- main section links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="http://localhost:6543/orders">Orders</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:6543/faq">FAQs</a></li>
<li class="nav-item"><a class="nav-link" href="http://localhost:6543/admin">Admin</a></li>
</ul>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<!-- user login and setting stuff on the right -->
<ul class="navbar-nav">
<li class="nav-item dropdown" id="user-options">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownUserSettings" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Logged in as <span>HolgerFrey</span>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownUserSettings">
<li class="dropdown-item"><a href="http://localhost:6543/account/settings">Settings</a></li>
<li class="dropdown-item"><a href="https://git.cpi.imtek.uni-freiburg.de/holgi/ordr2/issues">Submit an Issue</a></li>
<li class="dropdown-item"></li>
<li class="dropdown-item"><a href="http://localhost:6543/account/logout">Logout</a></li>
</ul>
</li>
</ul>
</nav>
<body>
<!-- header level two -->
{% block sub_header %} {% endblock sub_header %}
</header>
<div class="starter-template">
<div class="container">
<main class="container-fluid">
<div class="row">
<div class="col-md-2">
<img class="logo img-responsive" src="{{request.static_url('ordr2:static/pyramid.png') }}" alt="pyramid web framework">
</div>
<div class="col-md-10">
{% block content %}
<p>No content</p>
{% endblock content %}
</div>
</div>
<div class="row">
<div class="links">
<ul>
<li><i class="glyphicon glyphicon-cog icon-muted"></i><a href="https://github.com/Pylons/pyramid">Github Project</a></li>
<li><i class="glyphicon glyphicon-globe icon-muted"></i><a href="https://webchat.freenode.net/?channels=pyramid">IRC Channel</a></li>
<li><i class="glyphicon glyphicon-home icon-muted"></i><a href="http://pylonsproject.org">Pylons Project</a></li>
</ul>
</div>
</div>
</main>
<footer class="container-fluid">
<div class="row">
<div class="copyright">
Copyright &copy; Pylons Project
</div>
<div class="col-12">
<a target="_blank" href="http://distractedbysquirrels.com/">This software was orignially written by Sebastian Sebald.</a>
</div>
</div>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//oss.maxcdn.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//oss.maxcdn.com/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>

2
ordr2/templates/mytemplate.jinja2

@ -1,7 +1,7 @@ @@ -1,7 +1,7 @@
{% extends "layout.jinja2" %}
{% block content %}
<div class="content">
<div class="col-12">
<h1><span class="font-semi-bold">Pyramid</span> <span class="smaller">Alchemy project</span></h1>
<p class="lead">Welcome to <span class="font-normal">Ordr2</span>, a&nbsp;Pyramid application generated&nbsp;by<br><span class="font-normal">Cookiecutter</span>.</p>
</div>