Improve mobile layout #17

Merged
blek merged 5 commits from mobile-header into 0.2-dev 2023-11-11 09:28:01 +01:00
3 changed files with 36 additions and 4 deletions

View File

@ -7,6 +7,6 @@ RUN cargo install cargo-watch && \
RUN apt update && \ RUN apt update && \
apt install nodejs npm -y --no-install-recommends && \ apt install nodejs npm -y --no-install-recommends && \
npm i -g uglify-js npm i -g uglify-js html-minifier
CMD [ "/opt/code/dev-entry.sh" ] CMD [ "/opt/code/dev-entry.sh" ]

View File

@ -8,8 +8,24 @@
const root_drag_rop = document.getElementsByClassName('file-drag-n-drop')[0]; const root_drag_rop = document.getElementsByClassName('file-drag-n-drop')[0];
// make the root drag&drop element an ideal circle // make the root drag&drop element an ideal circle
root_drag_rop.style.width = root_drag_rop.offsetWidth + 'px';
root_drag_rop.style.height = root_drag_rop.offsetWidth + 'px'; function updateDragNDrop() {
if (document.body.scrollWidth < 667) {
// mobile
delete root_drag_rop.style.width;
delete root_drag_rop.style.height;
return
}
const width = root_drag_rop.offsetWidth;
root_drag_rop.style.width = width + 'px';
root_drag_rop.style.height = width + 'px';
}
updateDragNDrop();
document.onresize = updateDragNDrop();
/** @type {HTMLElement} */ /** @type {HTMLElement} */
const drag_rop = document.getElementsByClassName('file-drag-n-drop-inside')[0]; const drag_rop = document.getElementsByClassName('file-drag-n-drop-inside')[0];

View File

@ -16,6 +16,22 @@
<title>{{ conf.brand.instance_name }}</title> <title>{{ conf.brand.instance_name }}</title>
<style> .footer svg { height: 32px; margin: 10px 0 } </style> <style> .footer svg { height: 32px; margin: 10px 0 } </style>
<style>
.header .header-text, .header .header-home, .header .header-bg { transition: 250ms ease; }
@media (max-width:667px) {
.header .header-text { text-align: center }
.header .header-home { width: 100% }
.header .header-bg { left: 50% !important; transform: translateX(-50%); -webkit-mask-image: linear-gradient(90deg, #0000, #000, #0000); }
{%- if conf.brand.instance_motto.len() != 0 -%}
.header .header-home-motto {
display:none
}
{%- endif -%}
}
</style>
{%- if cfg!(debug_assertions) -%} {%- if cfg!(debug_assertions) -%}
<link rel="stylesheet" href="/alert.css" /> <link rel="stylesheet" href="/alert.css" />
@ -33,7 +49,7 @@
{{- conf.brand.instance_name -}} {{- conf.brand.instance_name -}}
{%- if conf.brand.instance_motto.len() != 0 -%} {%- if conf.brand.instance_motto.len() != 0 -%}
{#- Whitespace control is stupid -#} {#- Whitespace control is stupid -#}
{{- " - " -}}{{- conf.brand.instance_motto -}} <span class="header-home-motto">{{- " - " -}}{{- conf.brand.instance_motto -}}</span>
{%- endif -%} {%- endif -%}
</a> </a>
</div> </div>