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

7
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>
@ -15,8 +16,9 @@
{%- 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;
@ -24,8 +26,9 @@
font-size: 1.1em; font-size: 1.1em;
"> ">
{%- else %} {%- else %}
<body style=" <body style="
max-width: 720; max-width: 720px;
margin: auto; margin: auto;
padding-left:0.5rem; padding-left:0.5rem;
padding-right:0.5rem; padding-right:0.5rem;

23
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>
@ -98,4 +100,25 @@
<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" %}

31
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>
@ -68,6 +70,10 @@ code-line::before {
user-select: none; user-select: none;
} }
#code {
min-height: 2rem;
}
.code-container { .code-container {
position: relative; position: relative;
} }
@ -77,15 +83,14 @@ code-line::before {
} }
.copy-button { .copy-button {
position: absolute; font-size: small;
background: transparent; background-color: var(--links);
top: 0; color: var(--background-body);
right: 0; margin-right: 0.5rem;
padding: 3px; margin-left: 0.5rem;
margin: 3px; padding: 4px;
cursor: pointer; width: 4rem;
} }
</style> </style>
{% include "footer.html" %} {% include "footer.html" %}