From fb3780a96520bdfd64ba16dfa522a3514479d94d Mon Sep 17 00:00:00 2001
From: David Beniamine <david.beniamine@tetras-libre.fr>
Date: Tue, 12 May 2020 18:30:17 +0200
Subject: [PATCH] Responsive theme
Fix #4
---
src/app/static/css/app.css | 4 ++
src/app/static/package-lock.json | 5 ++
src/app/static/package.json | 3 +-
src/app/templates/base.html | 8 ++-
src/app/templates/home.html | 13 +++--
src/app/templates/unl2rdf.html | 94 ++++++++++++++++++++++++--------
6 files changed, 96 insertions(+), 31 deletions(-)
diff --git a/src/app/static/css/app.css b/src/app/static/css/app.css
index 82e6025..95b37bf 100644
--- a/src/app/static/css/app.css
+++ b/src/app/static/css/app.css
@@ -7,3 +7,7 @@
text-decoration: underline;
color: #0056b3;
}
+
+h1, h2 {
+ text-align:center;
+}
diff --git a/src/app/static/package-lock.json b/src/app/static/package-lock.json
index fa2d49e..1c121a1 100644
--- a/src/app/static/package-lock.json
+++ b/src/app/static/package-lock.json
@@ -18,6 +18,11 @@
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
"integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
+ },
+ "jquery": {
+ "version": "3.5.1",
+ "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
+ "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
}
}
}
diff --git a/src/app/static/package.json b/src/app/static/package.json
index 15b606b..6c1fedb 100644
--- a/src/app/static/package.json
+++ b/src/app/static/package.json
@@ -11,6 +11,7 @@
"dependencies": {
"@fortawesome/fontawesome-free": "^5.13.0",
"bootstrap": "^4.4.1",
- "file-saver": "^2.0.2"
+ "file-saver": "^2.0.2",
+ "jquery": "^3.5.1"
}
}
diff --git a/src/app/templates/base.html b/src/app/templates/base.html
index 32298a4..bf29175 100644
--- a/src/app/templates/base.html
+++ b/src/app/templates/base.html
@@ -3,6 +3,8 @@
<head>
{% block head %}
<link href="{{ url_for('static', filename='node_modules/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
+ <script src="{{ url_for('static', filename='node_modules/jquery/dist/jquery.min.js')}}"></script>
+ <script src="{{ url_for('static', filename='node_modules/bootstrap/dist/js/bootstrap.min.js')}}"></script>
<link href="{{ url_for('static', filename='node_modules/@fortawesome/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
<script src="{{ url_for('static', filename='node_modules/file-saver/dist/FileSaver.min.js')}}"></script>
<link href="{{ url_for('static', filename='css/app.css') }}" rel="stylesheet">
@@ -11,14 +13,16 @@
{% endblock %}
</head>
<body>
- <div id="content">{% block content %}{% endblock %}</div>
- <div id="footer">
+ <div id="content" class="container">{% block content %}{% endblock %}</div>
+ <div id="footer" class="d-flex justify-content-center">
{% block footer %}
+ <p>
© Copyright 2020 <a href="https://www.grenoble-inp.fr/">Institut polytechnique de Grenoble (Grenoble INP Institute of Engineering and
Management)</a>.<br />
Research and development by <a href="https://www.tetras-libre.fr/">Tétras Libre SARL</a>, funded by the RAPID project
UNseL.<br />
<a href="https://gitlab.tetras-libre.fr/unl/">Code available under CeCILL-B License</a>
+ </p>
{% endblock %}
</div>
</body>
diff --git a/src/app/templates/home.html b/src/app/templates/home.html
index 0d8e9bc..e9726e7 100644
--- a/src/app/templates/home.html
+++ b/src/app/templates/home.html
@@ -1,9 +1,12 @@
{% extends "base.html" %}
{% block title %}UNL demo{% endblock %}
{% block content %}
-<h1>Demo tools for UNL</h1>
-
-<ul>
- <li><a href='/unl2rdf'>Unl2Rdf</a></li>
-</ul>
+<div class="d-flex justify-content-center">
+ <div class="p-2">
+ <h1>Demo tools for UNL</h1>
+ <ul>
+ <li><a href='/unl2rdf'>Unl2Rdf</a></li>
+ </ul>
+ </div>
+</div>
{% endblock %}
diff --git a/src/app/templates/unl2rdf.html b/src/app/templates/unl2rdf.html
index 59b138b..a009e9d 100644
--- a/src/app/templates/unl2rdf.html
+++ b/src/app/templates/unl2rdf.html
@@ -2,10 +2,12 @@
{% block title %}UNL 2 RDF demo{% endblock %}
{% block content %}
{% if not unl %}
-<div class="form-group">
- <form action="{{request.path}}" method="POST">
- <h2>Enter some UNL here I will convert it for you</h2>
- <textarea class="form-control" name="unl" cols="120" rows="30" style="width: 80%;">
+<form action="{{request.path}}" method="POST">
+ <h1>Enter some UNL here I will convert it for you</h1>
+ <div class="form-group row">
+ <div class="col-12 col-md-8">
+ <h2>UNL</h3>
+ <textarea class="form-control" name="unl" cols="120" rows="30" >
; Type in your UNL text, it may be a simple graph enclosed in [S] and [/S] tags
; or a structures UNL documents using [D] [P] [T] [S] flags
; with or without the multilingual facets (enclosed in {org}, {fr}, etc... flags
@@ -41,56 +43,102 @@ obj(when(icl>how,com>always,tim<uw,obj>uw),:01)
{/unl}
[/S]
[/D]
- </textarea>
- <h2>Tell me which output(s) you want</h2>
- <ul>
- <li><label><input type="checkbox" name="outputs" value="rdf" checked>RDF</label></li>
- <li><label><input type="checkbox" name="outputs" value="dot" checked>Graph (dot)</label></li>
- </ul>
- <button class="btn btn-primary" type="submit">Submit</button>
- </form>
-</div>
+ </textarea>
+ </div>
+ <div class="col-4">
+ <h3>Settings</h2>
+ <ul>
+ <li><label><input type="checkbox" name="outputs" value="rdf" checked>RDF</label></li>
+ <li><label><input type="checkbox" name="outputs" value="dot" checked>Graph (dot)</label></li>
+ </ul>
+ <button class="btn btn-primary" type="submit">Submit</button>
+ </div>
+ </div>
+</form>
{% else %}
+<div class="row">
{% if output['error'] %}
+ <div class='col-12 md-6'>
<h2> Error </h2>
<pre>
{{ output['error'] }}
</pre>
+ </div>
{% endif %}
{% if output['svg'] %}
+ <div class='col-12 md-6'>
<h2> Unl graph </h2>
- <span class='clickable' onclick="download('graph.svg', 'svg', 'html', 'image/svg+xml')">Download image (svg)<i class="fas fa-download" ></i></span><br />
- <span class='clickable' onclick="download('graph.dot', 'dot', 'text', 'text/plain;charset=utf-8')">Download source (dot) <i class="fas fa-download" ></i></span>
- <div id='svg'>
- {{ output['svg'] | safe }}
+ <div class='row justify-content-center'>
+ <div class='col-3'>
+ <button class="btn btn-primary" type="button" onclick="download('graph.svg', 'svg', 'html',
+ 'image/svg+xml')">Download image <i class="fas fa-download"
+ ></i></button>
+ </div>
+ <div class='col-3'>
+ <button class="btn btn-primary" type="button" onclick="download('graph.dot', 'dot', 'text',
+ 'text/plain;charset=utf-8')">Download source <i class="fas
+ fa-download" ></i></button>
+ </div>
+ <div class='col-3'>
+ <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#svg" aria-expanded="true" aria-controls="svg">Toggle image</button>
+ </div>
+ <div class='col-3'>
+ <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#dotdiv" aria-expanded="false" aria-controls="dotdiv">Toggle source</button>
+ </div>
</div>
- <div class='hidden'>
+ <div id='svg' class='collapse show'>
+ {{ output['svg'] | safe }}
+ </div>
+ <div id='dotdiv' class='collapse'>
<pre>
<code id='dot'>
{{ output['dot'] }}
</code>
</pre>
</div>
+ </div>
{% endif %}
{% if output['rdf'] %}
+ <div class='col-12 md-6'>
<h2> RDF </h2>
- <span class='clickable' onclick="download('out.ttl', 'rdf', 'text', 'application/x-turtle')">Download<i class="fas fa-download" ></i></span>
+ <div class='row justify-content-center'>
+ <div class='col-3'>
+ <button class="btn btn-primary" type="button" onclick="download('out.ttl', 'rdf', 'text', 'application/x-turtle')">Download RDF <i class="fas fa-download" ></i></button>
+ </div>
+ <div class='col-3'>
+ <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#rdf" aria-expanded="true" aria-controls="rdf">Toggle RDF</button>
+ </div>
+ </div>
+
<pre>
<code id='rdf'>
{{ output['rdf'] }}
</code>
</pre>
+ </div>
{% endif %}
- <h2> UNL </h2>
- <span class='clickable' onclick="download('in.unl', 'unl', 'text', 'text/plain;charset=utf-8')">Download<i class="fas fa-download" ></i></span>
- <pre>
+ <div class='col-12 md-6'>
+ <h2> UNL </h2>
+ <div class='row justify-content-center'>
+ <div class='col-3'>
+ <button class="btn btn-primary" type="button" onclick="download('in.unl', 'unl', 'text', 'text/plain;charset=utf-8')">Download UNL <i class="fas fa-download" ></i></button>
+ </div>
+ <div class='col-3'>
+ <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#unl" aria-expanded="true" aria-controls="unl">Toggle UNL</button>
+ </div>
+ </div>
+
+
+ <pre>
<code id='unl'>
{{ unl }}
</code>
- </pre>
+ </pre>
+ </div>
+</div>
{% endif %}
{% endblock %}
--
GitLab