Begin implementing Bulma

This commit is contained in:
2022-07-21 13:49:01 +01:00
parent ae8da03c3c
commit 5b77858c78
10 changed files with 358 additions and 320 deletions

View File

@@ -1,59 +1,142 @@
{% extends "base.html" %}
{% load static %}
{% block content %}
<h1 class="title">Welcome to search, {{ user.first_name }}!</h1>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12">
<form method="POST">
{% csrf_token %}
<div class="input-group search-bar">
<input name="query" type="text" class="form-control" placeholder="Search" id="txtSearch"/>
<div class="input-group-btn">
<button class="btn btn-primary" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
<div class="block">
<form method="POST">
<div class="field-body">
<div class="field">
<p class="control is-expanded has-icons-left">
{% csrf_token %}
<input name="query" class="input" type="text" placeholder="Query">
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
</p>
</div>
<div class="field is-horizontal">
<div class="field-body">
<div class="field is-narrow">
<div class="control">
<div class="select is-fullwidth">
<select name="fields">
{% for field in fields %}
<option>{{ field }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
{% if results is not None %}
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">Results for {{ query }}</div>
<div class="table-responsive">
<table class="table table-bordered table-light">
<thead>
<tr>
<th>TS</th>
<th>msg</th>
<th>host</th>
<th>nick</th>
<th>channel</th>
<th>net</th>
</tr>
</thead>
{% for item in results %}
<tr>
<td>{{ item.ts }}</td>
<td>{{ item.msg }}</td>
<td>{{ item.host }}</td>
<td>{{ item.nick }}</td>
<td>{{ item.channel }}</td>
<td>{{ item.net }}</td>
</tr>
{% endfor %}
</table>
</div>
<div class="field-body">
<div class="field is-narrow">
<div class="control">
<div class="select is-fullwidth">
<select>
<option>day</option>
<option>week</option>
<option>month</option>
<option>year</option>
</select>
</div>
</div>
</div>
</div>
</div>
{% endif %}
<div class="field is-horizontal">
<div class="field-body">
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Search all fields</label>
</div>
<div class="field-body">
<div class="field is-narrow">
<div class="control">
<label class="radio">
<input type="radio" name="member">
Yes
</label>
<label class="radio">
<input type="radio" name="member">
No
</label>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Results</label>
</div>
<div class="field-body">
<div class="field is-narrow">
<div class="control">
<div class="select is-fullwidth">
<select name="results">
<option>5</option>
<option>10</option>
<option>25</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="field-body">
<div class="field is-horizontal">
<div class="field-label">
<!-- Left empty for spacing -->
</div>
<div class="field-body">
<div class="field">
<div class="control">
<button class="button is-primary">
Send message
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="block">
<table class="table">
{% if results is not None %}
<thead>
<tr>
<th>TS</th>
<th>msg</th>
<th>host</th>
<th>nick</th>
<th>channel</th>
<th>net</th>
</tr>
</thead>
{% endif %}
<tbody>
{% for item in results %}
<tr>
<td>{{ item.ts }}</td>
<td>{{ item.msg }}</td>
<td>{{ item.host }}</td>
<td>{{ item.nick }}</td>
<td>{{ item.channel }}</td>
<td>{{ item.net }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<p>{{ card }} hits</p>
{% endblock %}