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

33
templates/header.html
View file

@ -1,5 +1,6 @@
<!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>
@ -13,31 +14,33 @@
{% 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 %} {%- else %}
<body style="
max-width: 720; <body style="
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;
"> ">
{%- endif %} {%- endif %}
<br> <br>
{% if !args.hide_header %} {% if !args.hide_header %}
<b style="margin-right: 0.5rem"> <b style="margin-right: 0.5rem">
{% if !args.hide_logo %} {% if !args.hide_logo %}
<i><span style="font-size:2.2rem; margin-right:1rem">μ</span></i> <i><span style="font-size:2.2rem; margin-right:1rem">μ</span></i>
@ -48,14 +51,14 @@
{%- else %} {%- else %}
{{ args.title.as_ref().unwrap() }} {{ args.title.as_ref().unwrap() }}
{%- endif %} {%- endif %}
</b> </b>
<a href="{{ args.public_path }}/" style="margin-right: 0.5rem; margin-left: 0.5rem">New Pasta</a> <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 }}/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> <a href="{{ args.public_path }}/help" style="margin-right: 0.5rem; margin-left: 0.5rem">Help</a>
<hr> <hr>
{%- endif %} {%- endif %}

27
templates/index.html
View file

@ -63,8 +63,10 @@
<div> <div>
<label>File attachment</label> <label>File attachment</label>
<br> <br>
<div id="input-bg">
<input style="width: 100%;" type="file" id="file" name="file"> <input style="width: 100%;" type="file" id="file" name="file">
</div> </div>
</div>
{% endif %} {% endif %}
</div> </div>
<label>Content</label> <label>Content</label>
@ -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" %}

51
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,14 +46,14 @@
</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;
@ -66,26 +68,29 @@ code-line::before {
-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 {
min-height: 2rem;
}
.code-container {
position: relative; position: relative;
} }
.hidden { .hidden {
display: none; display: none;
} }
.copy-button {
position: absolute;
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" %}