Changed the layout to use two columns

Preparing to implement attachments
This commit is contained in:
Erik Thuning 2019-10-28 16:55:08 +01:00
parent e3d97e4966
commit 3cc2b91ed4
9 changed files with 639 additions and 429 deletions

@ -21,7 +21,7 @@
name="action" name="action"
value="checkout" /> value="checkout" />
</form> </form>
<table> <table id="user-table">
<thead> <thead>
<tr> <tr>
<th> <th>
@ -62,6 +62,24 @@
</td> </td>
</tr> </tr>
¤¤ product_page ¤¤
<div id="product-table">
<form id="product-create"
action="./"
method="get">
<input type="hidden"
name="page"
value="products" />
<input type="hidden"
name="action"
value="new" />
<button>
Ny artikel
</button>
¤product_table¤
</form>
</div>
¤¤ product_table ¤¤ ¤¤ product_table ¤¤
<table> <table>
<thead> <thead>
@ -99,23 +117,10 @@
</td> </td>
</tr> </tr>
¤¤ create_product ¤¤
<form action="./"
method="get">
<input type="hidden"
name="page"
value="products" />
<input type="hidden"
name="action"
value="new" />
<button>
Ny artikel
</button>
</form>
¤¤ template_management ¤¤ ¤¤ template_management ¤¤
<h2>Mallar</h2> <div>
<form class="dark templates" <h2>Mallar</h2>
<form class="dark templates"
onSubmit="JavaScript:loadTemplate(event)"> onSubmit="JavaScript:loadTemplate(event)">
<datalist id="template_suggest"></datalist> <datalist id="template_suggest"></datalist>
<input type="hidden" <input type="hidden"
@ -140,13 +145,15 @@
<button onClick="JavaScript:deleteTemplate(event)"> <button onClick="JavaScript:deleteTemplate(event)">
Ta bort Ta bort
</button> </button>
</form> </form>
</div>
¤¤ product_details ¤¤ ¤¤ product_details ¤¤
<h2>Artikeldata</h2> <div id="product-details">
<form id="productdata" <h2>Artikeldata</h2>
<form id="product-data"
onSubmit="JavaScript:saveProduct(event)" onSubmit="JavaScript:saveProduct(event)"
class="left"> class="data">
<input type="hidden" <input type="hidden"
name="id" name="id"
value="¤id¤" /> value="¤id¤" />
@ -259,10 +266,9 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</form> </form>
¤label¤ <form id="product-actions"
<div class="clear"></div> class="¤hidden¤">
<form class="¤hidden¤">
<input type="hidden" <input type="hidden"
name="id" name="id"
value="¤id¤" /> value="¤id¤" />
@ -272,10 +278,55 @@
<button onClick="JavaScript:toggleService(event)"> <button onClick="JavaScript:toggleService(event)">
¤service¤ ¤service¤
</button> </button>
</form> </form>
</div>
<div id="product-history"
class="¤hidden¤">
<h2>Artikelhistorik</h2>
¤history¤
</div>
<!--
<div id="product-attachments"
class="¤hidden¤">
<h2>Bilagor</h2>
¤attachments¤
<form id="attachment_upload"
onSubmit="JavaScript:uploadAttachment(event)">
<input type="hidden"
name="id"
value="¤id¤" />
<input id="uploadfile"
name="uploadfile"
type="file"
onchange="show_file(event)"/>
<input id="filename"
name="filename"
type="text"
placeholder="Välj en fil..."
onclick="select_file(event)"
readonly />
<button>Ladda upp</button>
</form>
</div>
-->
<div id="product-label"
class="¤hidden¤">
<h2>Etikett</h2>
¤label¤
</div>
¤¤ attachment_list ¤¤
<ul>
¤attachments¤
</ul>
¤¤ attachment ¤¤
<li>
<strong>¤name¤</strong>: <a href="./?page=dl&id=¤id¤">Ladda ner</a>
</li>
¤¤ product_label ¤¤ ¤¤ product_label ¤¤
<div class="qr left"> <div class="qr">
<a href="./?page=print&id=¤id¤" <a href="./?page=print&id=¤id¤"
title="Skriv ut"> title="Skriv ut">
<span>¤name¤</span> <span>¤name¤</span>
@ -332,7 +383,8 @@
</p> </p>
¤¤ user_details ¤¤ ¤¤ user_details ¤¤
<form onSubmit="JavaScript:updateUser(event)"> <div id="user-details">
<form onSubmit="JavaScript:updateUser(event)">
<input type="hidden" <input type="hidden"
name="id" name="id"
value="¤id¤" /> value="¤id¤" />
@ -384,8 +436,8 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</form> </form>
<form method="GET"> <form method="GET">
<input type="hidden" <input type="hidden"
name="action" name="action"
value="checkout" /> value="checkout" />
@ -393,14 +445,19 @@
value="¤name¤"> value="¤name¤">
Nytt lån Nytt lån
</button> </button>
</form> </form>
<h2>Aktuella lån</h2> </div>
¤active_loans¤ <div id="active-loans">
<h2>Gamla lån</h2> <h2>Aktuella lån</h2>
¤inactive_loans¤ ¤active_loans¤
</div>
<div id="inactive-loans">
<h2>Gamla lån</h2>
¤inactive_loans¤
</div>
¤¤ history_table ¤¤ ¤¤ history_table ¤¤
<table> <table class="history">
<thead> <thead>
<tr> <tr>
<th class="status"> <th class="status">
@ -464,8 +521,9 @@
¤¤ checkout_page ¤¤ ¤¤ checkout_page ¤¤
<h2>Välj låntagare</h2> <div id="user-select">
<form class="dark" <h2>Välj låntagare</h2>
<form class="dark"
action="./" action="./"
method="GET"> method="GET">
<datalist id="user_suggest"></datalist> <datalist id="user_suggest"></datalist>
@ -473,12 +531,13 @@
name="page" name="page"
value="checkout" /> value="checkout" />
<div> <div>
<span class="label"> <label for="user">
Användarnamn: Användarnamn:
</span> </label>
<input onFocus="JavaScript:suggest(this, 'user')" <input onFocus="JavaScript:suggest(this, 'user')"
type="text" type="text"
name="user" name="user"
id="user"
list="user_suggest" list="user_suggest"
autocomplete="off" autocomplete="off"
placeholder="Användarnamn" placeholder="Användarnamn"
@ -489,24 +548,28 @@
</button> </button>
</div> </div>
<div> <div>
<span class="label"> <label for="displayname">
Namn: Namn:
</span> </label>
<input type="text" <input type="text"
name="displayname" name="displayname"
id="displayname"
value="¤displayname¤" value="¤displayname¤"
disabled /> disabled />
</div> </div>
<div> <div>
<span class="label"> <label for="notes">
Anteckningar: Anteckningar:
</span> </label>
<textarea name="notes" <textarea name="notes"
id="notes"
disabled>¤notes¤</textarea> disabled>¤notes¤</textarea>
</div> </div>
</form> </form>
<h2>Låna ut artikel</h2> </div>
<form class="light" <div id="product-checkout">
<h2>Låna ut artikel</h2>
<form class="light"
onSubmit="JavaScript:checkoutProduct(event)"> onSubmit="JavaScript:checkoutProduct(event)">
<input type="hidden" <input type="hidden"
name="page" name="page"
@ -514,8 +577,9 @@
<input type="hidden" <input type="hidden"
name="user" name="user"
value="¤user¤"> value="¤user¤">
<span class="label">Artikel:</span> <label for="product">Artikel:</label>
<input type="text" <input type="text"
id="product"
name="product" name="product"
placeholder="Serienummer" placeholder="Serienummer"
required required
@ -524,16 +588,17 @@
Låna ut Låna ut
</button> </button>
<br/> <br/>
<span class="label">Slutdatum:</span> <label for="end">Slutdatum:</label>
<input type="text" <input type="text"
id="end" id="end"
onClick="JavaScript:calendar(event)" onClick="JavaScript:calendar(event)"
name="end" name="end"
value="¤end¤" value="¤end¤"
¤disabled¤ /> ¤disabled¤ />
</form> </form>
¤subtitle¤ ¤subtitle¤
¤loan_table¤ ¤loan_table¤
</div>
¤¤ inventory_start ¤¤ ¤¤ inventory_start ¤¤
<form class="dark" <form class="dark"
@ -544,7 +609,9 @@
</form> </form>
¤¤ inventory_do ¤¤ ¤¤ inventory_do ¤¤
<p class="dark">
<div id="inventory-overview"
class="dark">
<span class="label"> <span class="label">
Startdatum: Startdatum:
</span> </span>
@ -567,28 +634,39 @@
Avsluta inventering Avsluta inventering
</button> </button>
</form> </form>
</p> </div>
<form class="light ¤hide¤" <form id="inventory-register"
class="light ¤hide¤"
onSubmit="JavaScript:inventoryProduct(event)"> onSubmit="JavaScript:inventoryProduct(event)">
<span class="label"> <label for="serial">
Artikel: Artikel:
</span> </label>
<input type="text" <input type="text"
name="serial" name="serial"
id="serial"
placeholder="Serienummer" /> placeholder="Serienummer" />
<button> <button>
Registrera Registrera
</button> </button>
</form> </form>
<div id="unseen-products">
<h2>¤unseen_title¤</h2>
¤unseen¤
</div>
<div id="seen-products">
<h2>Inventerade artiklar</h2>
¤seen¤
</div>
¤¤ return_page ¤¤ ¤¤ return_page ¤¤
<form class="dark" <form class="dark"
onSubmit="JavaScript:returnProduct(event)"> onSubmit="JavaScript:returnProduct(event)">
<span class="label"> <label for="serial">
Artikel: Artikel:
</span> </label>
<input type="text" <input type="text"
name="serial" name="serial"
id="serial"
placeholder="Serienummer" placeholder="Serienummer"
required /> required />
<button> <button>
@ -597,7 +675,7 @@
</form> </form>
¤¤ inventory_table ¤¤ ¤¤ inventory_table ¤¤
<table> <table id="inventory-history">
<thead> <thead>
<tr> <tr>
<th> <th>
@ -646,17 +724,18 @@
</tr> </tr>
¤¤ search_form ¤¤ ¤¤ search_form ¤¤
<form onSubmit="JavaScript:doSearch(event)" <form onSubmit="JavaScript:doSearch(event)"
id="search" id="search"
class="dark"> class="dark">
<p> <p>
<label for="q">Sökterm:</label>
<input type="hidden" <input type="hidden"
name="page" name="page"
value="search" /> value="search" />
<input type="text" <input type="text"
onKeyPress="JavaScript:searchInput(event)" onKeyPress="JavaScript:searchInput(event)"
name="q" name="q"
id="q"
placeholder="Vad letar du efter?" placeholder="Vad letar du efter?"
value="" value=""
autofocus /> autofocus />
@ -669,10 +748,19 @@
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</form> </form>
<p> <p id="hints">
Du kan göra mer avancerade sökningar genom att börja med ett nyckelord avslutat med kolon, ex: <strong>serienummer:123456</strong> eller <strong>tag:dator</strong> Du kan göra mer avancerade sökningar genom att börja med ett nyckelord avslutat med kolon, ex: <strong>serienummer:123456</strong> eller <strong>tag:dator</strong>
</p> </p>
<div id="found-products"
class="¤hide¤">
<h2>Artiklar</h2>
¤product_results¤
</div>
<div id="found-users"
class="¤hide¤">
<h2>Användare</h2>
¤user_results¤
</div>
¤¤ search_term ¤¤ ¤¤ search_term ¤¤

@ -22,7 +22,7 @@ class HistoryPage extends Page {
$this->subtitle = 'Inventeringsdetaljer'; $this->subtitle = 'Inventeringsdetaljer';
break; break;
case 'list': case 'list':
$this->subtitle = 'Genomförda inventeringar'; $this->subtitle = 'Historik';
break; break;
} }
} }
@ -30,9 +30,11 @@ class HistoryPage extends Page {
protected function render_body() { protected function render_body() {
switch($this->action) { switch($this->action) {
case 'list': case 'list':
print(replace(array('title' => 'Genomförda inventeringar'),
$this->fragments['subtitle']));
print($this->build_inventory_table()); print($this->build_inventory_table());
print(replace(array('title' => 'Skrotade artiklar'), print(replace(array('title' => 'Skrotade artiklar'),
$this->fragments['title'])); $this->fragments['subtitle']));
$discards = get_items('product_discarded'); $discards = get_items('product_discarded');
if($discards) { if($discards) {
print($this->build_product_table($discards)); print($this->build_product_table($discards));

@ -150,15 +150,17 @@ abstract class Page extends Responder {
case 'overdue': case 'overdue':
$loan = $product->get_active_loan(); $loan = $product->get_active_loan();
$user = $loan->get_user(); $user = $loan->get_user();
$userlink = replace(array('name' => $user->get_displayname(), $replacements = array('name' => $user->get_displayname(),
'id' => $user->get_id(), 'id' => $user->get_id(),
'page' => 'users'), 'page' => 'users');
$userlink = replace($replacements,
$this->fragments['item_link']); $this->fragments['item_link']);
$note = 'Utlånad till '.$userlink; $note = 'Utlånad till '.$userlink;
if($loan->is_overdue()) { if($loan->is_overdue()) {
$note .= ', försenad'; $note .= ', försenad';
} else { } else {
$note .= ', slutdatum '.format_date($loan->get_endtime()); $note .= ', slutdatum '
.format_date($loan->get_endtime());
} }
break; break;
} }
@ -205,42 +207,6 @@ abstract class Page extends Responder {
$this->fragments['history_table']); $this->fragments['history_table']);
} }
final protected function build_product_history_table($history) {
$rows = '';
foreach($history as $event) {
$status = $event->get_status();
$itemlink = 'Service';
$start = $event->get_starttime();
$end = $event->get_returntime();
$note = '';
if($event instanceof Loan) {
$user = $event->get_user();
$product = $event->get_product();
$itemlink = replace(array('id' => $user->get_id(),
'name' => $user->get_name(),
'page' => 'users'),
$this->fragments['item_link']);
if(!$end) {
$end = $event->get_endtime();
$extend = format_date(default_loan_end(time()));
$note = replace(array('id' => $product->get_id(),
'end_new' => $extend),
$this->fragments['loan_extend_form']);
}
}
$rows .= replace(array('status' => $status,
'item_link' => $itemlink,
'start_date' => format_date($start),
'end_date' => format_date($end),
'note' => $note),
$this->fragments['history_row']);
}
return replace(array('rows' => $rows,
'item' => 'Låntagare'),
$this->fragments['history_table']);
}
final protected function build_seen_table($products, $inventory) { final protected function build_seen_table($products, $inventory) {
$rows = ''; $rows = '';
foreach($products as $product) { foreach($products as $product) {
@ -315,26 +281,22 @@ abstract class Page extends Responder {
$missing = 'Kvarvarande artiklar'; $missing = 'Kvarvarande artiklar';
$hidden = ''; $hidden = '';
} }
$out = replace(array('start_date' => $startdate, $unseen_table = 'Inga artiklar saknas.';
if($unseen) {
$unseen_table = $this->build_product_table($unseen);
}
$seen_table = 'Inga artiklar inventerade.';
if($seen) {
$seen_table = $this->build_seen_table($seen, $inventory);
}
return replace(array('start_date' => $startdate,
'total_count' => count($all_products), 'total_count' => count($all_products),
'seen_count' => count($seen), 'seen_count' => count($seen),
'hide' => $hidden), 'hide' => $hidden,
'unseen_title' => $missing,
'unseen' => $unseen_table,
'seen' => $seen_table),
$this->fragments['inventory_do']); $this->fragments['inventory_do']);
$out .= replace(array('title' => $missing),
$this->fragments['subtitle']);
if($unseen) {
$out .= $this->build_product_table($unseen);
} else {
$out .= 'Inga artiklar saknas.';
}
$out .= replace(array('title' => 'Inventerade artiklar'),
$this->fragments['subtitle']);
if($seen) {
$out .= $this->build_seen_table($seen, $inventory);
} else {
$out .= 'Inga artiklar inventerade.';
}
return $out;
} }
} }
?> ?>

@ -401,5 +401,9 @@ class Product {
} }
return $out; return $out;
} }
public function get_attachments() {
return array();
}
} }
?> ?>

@ -48,8 +48,9 @@ class ProductPage extends Page {
protected function render_body() { protected function render_body() {
switch($this->action) { switch($this->action) {
case 'list': case 'list':
print($this->fragments['create_product']); $products = $this->build_product_table(get_items('product'));
print($this->build_product_table(get_items('product'))); print(replace(array('product_table' => $products),
$this->fragments['product_page']));
break; break;
case 'show': case 'show':
print($this->build_product_details()); print($this->build_product_details());
@ -73,6 +74,9 @@ class ProductPage extends Page {
$tags .= replace(array('tag' => ucfirst($tag)), $tags .= replace(array('tag' => ucfirst($tag)),
$this->fragments['tag']); $this->fragments['tag']);
} }
$history = $this->build_history_table($this->product->get_history());
$attachments = $this->build_attachment_list(
$this->product->get_attachments());
$fields = array('id' => $this->product->get_id(), $fields = array('id' => $this->product->get_id(),
'brand' => $this->product->get_brand(), 'brand' => $this->product->get_brand(),
'name' => $this->product->get_name(), 'name' => $this->product->get_name(),
@ -82,7 +86,10 @@ class ProductPage extends Page {
'info' => $info, 'info' => $info,
'label' => '', 'label' => '',
'hidden' => 'hidden', 'hidden' => 'hidden',
'service' => 'Starta service'); 'service' => 'Starta service',
'history' => $history,
'attachments' => $attachments);
$attachments = $this->product->get_attachments();
if(class_exists('QRcode')) { if(class_exists('QRcode')) {
$fields['label'] = replace($fields, $fields['label'] = replace($fields,
$this->fragments['product_label']); $this->fragments['product_label']);
@ -93,16 +100,60 @@ class ProductPage extends Page {
$fields['service'] = 'Avsluta service'; $fields['service'] = 'Avsluta service';
} }
} }
$out = replace($fields, $this->fragments['product_details']); return replace($fields, $this->fragments['product_details']);
$out .= replace(array('title' => 'Artikelhistorik'),
$this->fragments['subtitle']);
$history_table = 'Ingen historik att visa.';
$history = $this->product->get_history();
if($history) {
$history_table = $this->build_product_history_table($history);
} }
$out .= $history_table;
return $out; private function build_history_table($history) {
if(!$history) {
return 'Ingen historik att visa.';
}
$rows = '';
foreach($history as $event) {
$status = $event->get_status();
$itemlink = 'Service';
$start = $event->get_starttime();
$end = $event->get_returntime();
$note = '';
if($event instanceof Loan) {
$user = $event->get_user();
$product = $event->get_product();
$itemlink = replace(array('id' => $user->get_id(),
'name' => $user->get_name(),
'page' => 'users'),
$this->fragments['item_link']);
if(!$end) {
$end = $event->get_endtime();
$extend = format_date(default_loan_end(time()));
$note = replace(array('id' => $product->get_id(),
'end_new' => $extend),
$this->fragments['loan_extend_form']);
}
}
$rows .= replace(array('status' => $status,
'item_link' => $itemlink,
'start_date' => format_date($start),
'end_date' => format_date($end),
'note' => $note),
$this->fragments['history_row']);
}
return replace(array('rows' => $rows,
'item' => 'Låntagare'),
$this->fragments['history_table']);
}
private function build_attachment_list($attachments) {
if(!$attachments) {
return 'Inga bilagor.';
}
$items = '';
foreach($attachments as $attachment) {
$items .= replace(array('name' => $attachment->get_name(),
'id' => $attachments->get_id()),
$this->fragments['attachment']);
}
return replace(array('attachments' => $items),
$this->fragments['attachment_list']);
} }
private function build_new_page() { private function build_new_page() {

@ -1,6 +1,8 @@
<?php <?php
class SearchPage extends Page { class SearchPage extends Page {
private $terms = array(); private $terms = array();
private $product_hits = array();
private $user_hits = array();
public function __construct() { public function __construct() {
parent::__construct(); parent::__construct();
@ -8,7 +10,17 @@ class SearchPage extends Page {
if(isset($_GET['q']) && !$_GET['q']) { if(isset($_GET['q']) && !$_GET['q']) {
unset($_GET['q']); unset($_GET['q']);
} }
$this->terms = $_GET; $this->terms = $this->translate_terms($_GET);
if($this->terms) {
$this->subtitle = 'Sökresultat';
$hits = $this->do_search();
if(isset($hits['product'])) {
$this->product_hits = $hits['product'];
}
if(isset($hits['user'])) {
$this->user_hits = $hits['user'];
}
}
} }
private function do_search() { private function do_search() {
@ -17,7 +29,7 @@ class SearchPage extends Page {
return $out; return $out;
} }
foreach(array('user', 'product') as $type) { foreach(array('user', 'product') as $type) {
$result = $this->search($type, $this->translate_keys($this->terms)); $result = $this->search($type, $this->terms);
if($result) { if($result) {
$out[$type] = $result; $out[$type] = $result;
} }
@ -25,7 +37,14 @@ class SearchPage extends Page {
return $out; return $out;
} }
private function translate_keys($terms) { private function translate_terms($terms) {
$matches = array();
if(isset($terms['q']) && preg_match('/([^:]+):(.*)/',
$terms['q'],
$matches)) {
unset($terms['q']);
$terms[$matches[1]] = $matches[2];
}
$translated = array(); $translated = array();
foreach($terms as $key => $value) { foreach($terms as $key => $value) {
$newkey = $key; $newkey = $key;
@ -121,14 +140,14 @@ class SearchPage extends Page {
} }
protected function render_body() { protected function render_body() {
$hidden = 'hidden';
$terms = ''; $terms = '';
if($this->terms) {
$hidden = '';
foreach($this->terms as $key => $value) { foreach($this->terms as $key => $value) {
if(!is_array($value)) { if(!is_array($value)) {
$terms .= replace(array('term' => ucfirst($key).": $value", $value = array($value);
'key' => $key, }
'value' => $value),
$this->fragments['search_term']);
} else {
foreach($value as $item) { foreach($value as $item) {
$terms .= replace(array('term' => ucfirst($key).": $item", $terms .= replace(array('term' => ucfirst($key).": $item",
'key' => $key, 'key' => $key,
@ -137,28 +156,19 @@ class SearchPage extends Page {
} }
} }
} }
print(replace(array('terms' => $terms), $products = 'Inga artiklar hittade.';
if($this->product_hits) {
$products = $this->build_product_table($this->product_hits);
}
$users = 'Inga användare hittade.';
if($this->user_hits) {
$users = $this->build_user_table($this->user_hits);
}
print(replace(array('terms' => $terms,
'hidden' => $hidden,
'product_results' => $products,
'user_results' => $users),
$this->fragments['search_form'])); $this->fragments['search_form']));
if($this->terms) {
$hits = $this->do_search();
print(replace(array('title' => 'Sökresultat'),
$this->fragments['title']));
$result = '';
if(isset($hits['user'])) {
$result = replace(array('title' => 'Låntagare'),
$this->fragments['subtitle']);
$result .= $this->build_user_table($hits['user']);
}
if(isset($hits['product'])) {
$result .= replace(array('title' => 'Artiklar'),
$this->fragments['subtitle']);
$result .= $this->build_product_table($hits['product']);
}
if(!$result) {
$result = 'Inga träffar.';
}
print($result);
}
} }
} }
?> ?>

@ -357,7 +357,7 @@ function loadTemplate(event) {
function saveTemplate(event) { function saveTemplate(event) {
event.preventDefault() event.preventDefault()
var datalist = productDataList(document.querySelector('#productdata')) var datalist = productDataList(document.querySelector('#product-data'))
datalist.push(['template', event.currentTarget.form.template.value]) datalist.push(['template', event.currentTarget.form.template.value])
ajaxRequest('savetemplate', datalist, showResult) ajaxRequest('savetemplate', datalist, showResult)
} }
@ -511,3 +511,13 @@ function removeTerm(event) {
var parent = term.parentNode var parent = term.parentNode
parent.remove(term) parent.remove(term)
} }
function selectFile(event) {
var fileinput = document.getElementById("uploadfile")
fileinput.click()
}
function showFile(event) {
var filefield = document.getElementById("filename")
filefield.value = event.currentTarget.files[0].name
}

@ -28,7 +28,7 @@ textarea {
padding-left: 2px; padding-left: 2px;
} }
.label { .label, label {
display: inline-block; display: inline-block;
min-width: 100px; min-width: 100px;
} }
@ -153,6 +153,82 @@ input[type="text"].newtemplate {
padding-left: 2px; padding-left: 2px;
} }
#uploadfile {
display: none;
}
h1 {
grid-area: header;
}
#product-details {
grid-column: col 1 / col 2;
grid-row: row 1 / row 3;
}
#user-select {
grid-area: first;
}
#user-table {
grid-area: first;
}
#user-details {
grid-area: first;
}
#active-loans {
grid-area: third;
}
#inactive-loans {
grid-area: fourth;
}
#product-checkout {
grid-area: third;
}
#product-create {
grid-area: first;
}
#product-table {
grid-area: first;
}
#unseen-products {
grid-area: third;
}
#seen-products {
grid-area: fourth;
}
#inventory-register {
grid-area: second;
}
#inventory-overview {
grid-area: first;
}
#inventory-history {
grid-area: third;
}
#search {
grid-column: col 1 / col 3;
grid-row: row 1 / row 2;
justify-self: stretch;
}
#hints {
grid-column: col 1 / col 3;
grid-row: row 2 / row 3;
}
.qr { .qr {
margin: 0 10px; margin: 0 10px;
padding: 5px; padding: 5px;

@ -354,6 +354,13 @@ button:disabled, input[type="submit"]:disabled {
#contents { #contents {
display: grid; display: grid;
grid-template-columns: minmax(min-content, max-content); grid-template-columns: [col] auto [col] auto [col];
grid-template-rows: auto [row] repeat(3, auto [row]);
grid-template-areas: "header header"
"first second"
"third fourth"
"fifth sixth";
grid-gap: 1rem; grid-gap: 1rem;
justify-items: start;
align-items: start;
} }