mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-06-27 08:20:34 +00:00
Further color updates
This commit is contained in:
Patrick Jentsch
97
web/app/templates/utils/macros.html.j2
Normal file
97
web/app/templates/utils/macros.html.j2
Normal file
@ -0,0 +1,97 @@
|
||||
{%- macro insert_page_content() -%}
|
||||
<noscript>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card red darken-1">
|
||||
<div class="card-content white-text">
|
||||
<span class="card-title">JavaScript is disabled</span>
|
||||
<p>You have JavaScript disabled. Nopaque uses javascript and sockets to send data in realtime to you. For example showing you the status of your jobs and your corpora. Please activate JavaScript to make full use of nopaque.</p>
|
||||
<p>Some services are still useable without Javascript.</p>
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<a href="#">What services can I still use?</a>
|
||||
<a href="#">What services and functions are not available?</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</noscript>
|
||||
{% block page_content %}{% endblock %}
|
||||
{%- endmacro -%}
|
||||
|
||||
{% macro show_metadata(query_metadata) %}
|
||||
|
||||
<div class="col s12">
|
||||
<table class="highlight">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 33%">Metadata Description</th>
|
||||
<th style="width: 66%">Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for pair in query_metadata|dictsort %}
|
||||
<tr>
|
||||
<td>{{ pair[0]|replace("_", " ")|upper() }}</td>
|
||||
{% if pair[0] == "corpus_all_texts"
|
||||
or pair[0] == "text_lookup" %}
|
||||
<td>
|
||||
<ul class="collapsible">
|
||||
{% for key, value in pair[1].items() %}
|
||||
<li class="text-metadata"
|
||||
data-metadata-key="{{ pair[0] }}"
|
||||
data-text-key="{{ key }}">
|
||||
<div class="collapsible-header"
|
||||
data-metadata-key="{{ pair[0] }}"
|
||||
data-text-key="{{ key }}">
|
||||
<i class="material-icons"
|
||||
data-metadata-key="{{ pair[0] }}"
|
||||
data-text-key="{{ key }}">info_outline</i>
|
||||
{{ value['author'] }} - {{ value['publishing_year'] }}
|
||||
- {{ value['title'] }}
|
||||
</div>
|
||||
<div class="collapsible-body">
|
||||
<span>
|
||||
<ul id="bibliographic-data-{{ pair[0] }}-{{ key }}"
|
||||
style="column-count: 2;">
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</td>
|
||||
{% else %}
|
||||
<td>{{ pair[1] }}</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let elems = document.querySelectorAll('.collapsible');
|
||||
let instances = M.Collapsible.init(elems, {accordion: false});
|
||||
});
|
||||
let collapsibles = document.getElementsByClassName("text-metadata");
|
||||
for (let collapsible of collapsibles) {
|
||||
collapsible.onclick = () => {
|
||||
let metadataKey = event.target.dataset.metadataKey;
|
||||
let textKey = event.target.dataset.textKey;
|
||||
let textData = {{ query_metadata|tojson|safe }}[metadataKey][textKey];
|
||||
let bibliographicData = document.getElementById(`bibliographic-data-${metadataKey}-${textKey}`);
|
||||
bibliographicData.innerHTML = "";
|
||||
for (let [key, value] of Object.entries(textData)) {
|
||||
bibliographicData.insertAdjacentHTML("afterbegin",
|
||||
`
|
||||
<li><span style="text-transform: capitalize;">${key}:</span> ${value}</li>
|
||||
`);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endmacro %}
|
||||
100
web/app/templates/utils/materialize.html.j2
Normal file
100
web/app/templates/utils/materialize.html.j2
Normal file
@ -0,0 +1,100 @@
|
||||
{% macro render_field(field) %}
|
||||
{% if field.flags.required and field.type not in ['FileField', 'MultipleFileField'] %}
|
||||
{% if 'class_' in kwargs and 'validate' not in kwargs['class_'] %}
|
||||
{% set tmp = kwargs.update({'class_': kwargs['class_'] + ' validate'}) %}
|
||||
{% else %}
|
||||
{% set tmp = kwargs.update({'class_': 'validate'}) %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if field.type == 'BooleanField' %}
|
||||
{{ render_boolean_field(field, *args, **kwargs) }}
|
||||
{% elif field.type == 'DecimalRangeField' %}
|
||||
{{ render_decimal_range_field(field, *args, **kwargs) }}
|
||||
{% elif field.type == 'IntegerField' %}
|
||||
{% set tmp = kwargs.update({'type': 'number'}) %}
|
||||
{% if 'class_' in kwargs and 'validate' not in kwargs['class_'] %}
|
||||
{% set tmp = kwargs.update({'class_': kwargs['class_'] + ' validate'}) %}
|
||||
{% else %}
|
||||
{% set tmp = kwargs.update({'class_': 'validate'}) %}
|
||||
{% endif %}
|
||||
{{ render_generic_field(field, *args, **kwargs) }}
|
||||
{% elif field.type == 'SubmitField' %}
|
||||
{{ render_submit_field(field, *args, **kwargs) }}
|
||||
{% elif field.type in ['FileField', 'MultipleFileField'] %}
|
||||
{{ render_file_field(field, *args, **kwargs) }}
|
||||
{% elif field.type in ['PasswordField', 'SelectField', 'StringField'] %}
|
||||
{{ render_generic_field(field, *args, **kwargs) }}
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
{% macro render_boolean_field(field) %}
|
||||
{% set label = kwargs.pop('label', True) %}
|
||||
<div class="switch">
|
||||
{% if 'material_icon' in kwargs %}
|
||||
<i class="material-icons prefix">{{ kwargs.pop('material_icon') }}</i>
|
||||
{% endif %}
|
||||
<label>
|
||||
{% if label %}
|
||||
{{ field.label.text }}
|
||||
{% endif %}
|
||||
{{ field(*args, **kwargs) }}
|
||||
<span class="lever"></span>
|
||||
</label>
|
||||
{% for error in field.errors %}
|
||||
<span class="helper-text red-text">{{ error }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro render_file_field(field) %}
|
||||
{% set placeholder = kwargs.pop('placeholder', '') %}
|
||||
<div class="file-field input-field">
|
||||
<div class="btn">
|
||||
<span>{{ field.label.text }}</span>
|
||||
{{ field(*args, **kwargs) }}
|
||||
</div>
|
||||
<div class="file-path-wrapper">
|
||||
<input class="file-path validate" type="text" placeholder="{{ placeholder }}">
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro render_generic_field(field) %}
|
||||
{% set label = kwargs.pop('label', True) %}
|
||||
<div class="input-field">
|
||||
{% if 'material_icon' in kwargs %}
|
||||
<i class="material-icons prefix">{{ kwargs.pop('material_icon') }}</i>
|
||||
{% endif %}
|
||||
{{ field(*args, **kwargs) }}
|
||||
{% if label %}
|
||||
{{ field.label }}
|
||||
{% endif %}
|
||||
{% for error in field.errors %}
|
||||
<span class="helper-text red-text">{{ error }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro render_submit_field(field) %}
|
||||
<button class="btn waves-effect waves-light" id="{{ field.id }}" name="{{ field.name }}" type="submit" value="{{ field.label.text }}">
|
||||
{{ field.label.text }}
|
||||
{% if 'material_icon' in kwargs %}
|
||||
<i class="material-icons right">{{ kwargs.pop('material_icon') }}</i>
|
||||
{% endif %}
|
||||
</button>
|
||||
{% endmacro %}
|
||||
|
||||
{# maybe create a modal template later on for actions like delete etc #}
|
||||
{# {% macro delete_modal_file(file) %}
|
||||
<div id="delete-corpus-file-{{ file.id }}-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Confirm corpus file deletion</h4>
|
||||
<p>Do you really want to delete the corpus file {{ file.filename }}? The file will be permanently deleted!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
|
||||
<a class="btn modal-close red waves-effect waves-light" href="{{ url_for('corpora.delete_corpus_file', corpus_file_id=resource_id, corpus_id=corpus.id) }}"><i class="material-icons left">delete</i>Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %} #}
|
||||
Reference in New Issue
Block a user