mirror of https://github.com/xwiki-labs/cryptpad
Merge pull request #1232 from cryptpad/1085-homepage-layout-issues
Fix homepage layout issues on small screens
This commit is contained in:
commit
3a9505465f
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue