schrottkatze/karton
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 2 Packages Wiki Activity

small ui improvements

Browse source 
- fix width for pure html mode
- improve copy button look and placement
- make input field heights more consistent on pasta creation page
This commit is contained in:
Dániel Szabó 2022-10-27 14:12:11 +03:00
parent e258bcc2bd
commit d2e7234d96
4 changed files with 2172 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2060
Cargo.lock generated Normal file
View file

File diff suppressed because it is too large Load diff

71
templates/header.html
View file

@ -1,8 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
{% if args.title.as_ref().is_none() %} {% if args.title.as_ref().is_none() %}
<title>MicroBin</title> <title>MicroBin</title>
{%- else %} {%- else %}
<title>{{ args.title.as_ref().unwrap() }}</title> <title>{{ args.title.as_ref().unwrap() }}</title>
{%- endif %} {%- endif %}
@ -11,51 +12,53 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
{% if !args.pure_html %} {% if !args.pure_html %}
<link rel="stylesheet" href="{{ args.public_path }}/static/water.css"> <link rel="stylesheet" href="{{ args.public_path }}/static/water.css">
{%- endif %} {%- endif %}
</head> </head>
{% if args.wide %} {% if args.wide %}
<body style=" <body style="
max-width: 1080; max-width: 720px;
margin: auto; margin: auto;
padding-left:0.5rem; padding-left:0.5rem;
padding-right:0.5rem; padding-right:0.5rem;
line-height: 1.5; line-height: 1.5;
font-size: 1.1em; font-size: 1.1em;
"> ">
{%- else %}
<body style="
max-width: 720;
margin: auto;
padding-left:0.5rem;
padding-right:0.5rem;
line-height: 1.5;
font-size: 1.1em;
">
{%- endif %}
<br>
{% if !args.hide_header %}
<b style="margin-right: 0.5rem">
{% if !args.hide_logo %}
<i><span style="font-size:2.2rem; margin-right:1rem">μ</span></i>
{%- endif %}
{% if args.title.as_ref().is_none() %}
MicroBin
{%- else %} {%- else %}
{{ args.title.as_ref().unwrap() }}
{%- endif %}
</b>
<a href="{{ args.public_path }}/" style="margin-right: 0.5rem; margin-left: 0.5rem">New Pasta</a> <body style="
max-width: 720px;
margin: auto;
padding-left:0.5rem;
padding-right:0.5rem;
line-height: 1.5;
font-size: 1.1em;
">
{%- endif %}
<br>
<a href="{{ args.public_path }}/pastalist" style="margin-right: 0.5rem; margin-left: 0.5rem">Pasta List</a> {% if !args.hide_header %}
<a href="{{ args.public_path }}/help" style="margin-right: 0.5rem; margin-left: 0.5rem">Help</a> <b style="margin-right: 0.5rem">
<hr> {% if !args.hide_logo %}
<i><span style="font-size:2.2rem; margin-right:1rem">μ</span></i>
{%- endif %}
{%- endif %} {% if args.title.as_ref().is_none() %}
MicroBin
{%- else %}
{{ args.title.as_ref().unwrap() }}
{%- endif %}
</b>
<a href="{{ args.public_path }}/" style="margin-right: 0.5rem; margin-left: 0.5rem">New Pasta</a>
<a href="{{ args.public_path }}/pastalist" style="margin-right: 0.5rem; margin-left: 0.5rem">Pasta List</a>
<a href="{{ args.public_path }}/help" style="margin-right: 0.5rem; margin-left: 0.5rem">Help</a>
<hr>
{%- endif %}

29
templates/index.html
View file

@ -63,7 +63,9 @@
<div> <div>
<label>File attachment</label> <label>File attachment</label>
<br> <br>
<input style="width: 100%;" type="file" id="file" name="file"> <div id="input-bg">
<input style="width: 100%;" type="file" id="file" name="file">
</div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
@ -90,12 +92,33 @@
</div> </div>
{% if args.readonly %} {% if args.readonly %}
<input style="width: 140px; background-color: limegreen" disabled type="submit" value="Read Only"/> <input style="width: 140px; background-color: limegreen" disabled type="submit" value="Read Only" />
{%- else %} {%- else %}
<input style="width: 140px; background-color: limegreen" type="submit" value="Save"/> <input style="width: 140px; background-color: limegreen" type="submit" value="Save" />
{%- endif %} {%- endif %}
</td> </td>
<br> <br>
</form> </form>
<style>
select {
height: 3rem;
}
#file {
/* max-height: 22px; */
padding-top: 7px;
padding-bottom: 13px;
background: none;
}
#input-bg {
background: var(--background);
overflow: hidden;
height: 3rem;
border-radius: 6px;
}
</style>
{% include "footer.html" %} {% include "footer.html" %}

89
templates/pasta.html
View file

@ -8,18 +8,20 @@
</a> </a>
{%- endif %} {%- endif %}
{% if pasta.editable %} {% if pasta.editable %}
<a style="margin-right: 0.5rem; margin-left: 0.5rem" href="{{ args.public_path }}/edit/{{pasta.id_as_animals()}}">Edit</a> <a style="margin-right: 0.5rem; margin-left: 0.5rem"
href="{{ args.public_path }}/edit/{{pasta.id_as_animals()}}">Edit</a>
{%- endif %} {%- endif %}
<a style="margin-right: 0.5rem; margin-left: 0.5rem" href="{{ args.public_path }}/remove/{{pasta.id_as_animals()}}">Remove</a> <a style="margin-right: 0.5rem; margin-left: 0.5rem"
href="{{ args.public_path }}/remove/{{pasta.id_as_animals()}}">Remove</a>
</div> </div>
<div style="float: right"> <div style="float: right">
<a href="{{ args.public_path }}/pasta/{{pasta.id_as_animals()}}"><i>{{pasta.id_as_animals()}}</i></a> <a href="{{ args.public_path }}/pasta/{{pasta.id_as_animals()}}"><i>{{pasta.id_as_animals()}}</i></a>
<button id="copy-button" class="copy-button">
Copy
</button>
</div> </div>
<br> <br>
<div class="code-container"> <div class="code-container">
<a role="button" id="copy-button" class="copy-button">
Copy
</a>
<div style="clear: both;"> <div style="clear: both;">
{% if args.highlightsyntax %} {% if args.highlightsyntax %}
<pre><code id="code">{{pasta.content_syntax_highlighted()}}</code></pre> <pre><code id="code">{{pasta.content_syntax_highlighted()}}</code></pre>
@ -44,48 +46,51 @@
</script> </script>
<style> <style>
code-line { code-line {
counter-increment: listing; counter-increment: listing;
text-align: right; text-align: right;
float: left; float: left;
clear: left; clear: left;
} }
code-line::before { code-line::before {
content: counter(listing); content: counter(listing);
display: inline-block; display: inline-block;
float: left; float: left;
padding-left: auto; padding-left: auto;
margin-left: auto; margin-left: auto;
text-align: left; text-align: left;
width: 1.6rem; width: 1.6rem;
border-right: 1px solid lightgrey; border-right: 1px solid lightgrey;
color: grey; color: grey;
margin-right: 0.4rem; margin-right: 0.4rem;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.code-container { #code {
position: relative; min-height: 2rem;
} }
.hidden { .code-container {
display: none; position: relative;
} }
.copy-button { .hidden {
position: absolute; display: none;
background: transparent; }
top: 0;
right: 0;
padding: 3px;
margin: 3px;
cursor: pointer;
}
.copy-button {
font-size: small;
background-color: var(--links);
color: var(--background-body);
margin-right: 0.5rem;
margin-left: 0.5rem;
padding: 4px;
width: 4rem;
}
</style> </style>
{% include "footer.html" %} {% include "footer.html" %}