Merge pull request #1232 from cryptpad/1085-homepage-layout-issues

Fix homepage layout issues on small screens
This commit is contained in:
yflory 2023-09-21 17:17:24 +02:00 committed by GitHub
commit 3a9505465f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 4 deletions

View File

@ -133,7 +133,20 @@ define([
}
// instance title
var instanceTitle = h('h1.cp-instance-title', Pages.Instance.name);
var instanceTitleText = Pages.Instance.name;
var instanceTitle;
var words = instanceTitleText.split(/(\.|:|\/|-| )/); // Split on ., :, /, -, or space
var elements = words.map(function (word) {
if (word === '.' || word === ':' || word === '/' || word === '-') {
return h('span.separator', word); // Apply a class to separators for styling
} else if (word.trim() !== '') {
return h('span', word);
}
return ' '; // Preserve spaces as-is
});
instanceTitle = h('h1.cp-instance-title', elements);
// instance location
var locationBlock;

View File

@ -38,9 +38,14 @@
font-weight: 500;
color: @cryptpad_color_brand;
font-size: 2.8rem;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-line;
span{
display: inline-block;
white-space: nowrap;
}
}
.cp-home-hero {
@ -85,7 +90,9 @@
.cp-instance-links {
padding: 1.3rem;
a {
margin: 1.3rem;
display: inline-block;
margin: 0.5em;
white-space: nowrap;
}
}
}
@ -118,7 +125,7 @@
.cp-app-grid-apps {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
justify-content: center;
padding: 0 0.8rem;
}
a {