Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

CSS/HTML: Nicer styling of branding on the login page

Browse Source
This commit is contained in:
JC Brand 2019-01-10 21:11:18 +01:00
parent 4f8cb48fb3
commit 1eb00d3e5d
7 changed files with 116 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
css/converse.css
View File

@ -9566,8 +9566,9 @@ body.converse-fullscreen {
margin-bottom: 2em; margin-bottom: 2em;
margin-left: -2.7em; margin-left: -2.7em;
word-spacing: 5px; } word-spacing: 5px; }
#conversejs-bg .converse-brand__text .subdued {
opacity: 0.25; } #conversejs-bg .subdued, #conversejs .subdued {
opacity: 0.35; }
#conversejs { #conversejs {
bottom: 0; bottom: 0;
@ -9594,15 +9595,34 @@ body.converse-fullscreen {
#conversejs .brand-heading-container { #conversejs .brand-heading-container {
text-align: center; } text-align: center; }
#conversejs .brand-heading { #conversejs .brand-heading {
font-size: 200%;
display: inline-flex; display: inline-flex;
align-items: flex-end; flex-direction: row;
align-items: flex-start;
font-family: var(--branding-font); font-family: var(--branding-font);
color: var(--link-color); } color: var(--link-color);
margin-bottom: 1em; }
#conversejs .brand-heading .brand-name {
color: var(--link-color);
display: flex;
flex-direction: column;
align-items: center;
margin-top: -0.5em; }
#conversejs .brand-heading .brand-name__text {
font-size: 120%;
vertical-align: text-bottom; }
#conversejs .brand-heading .byline {
margin: 0;
font-family: var(--heading-font);
font-size: 0.25em;
opacity: 0.55;
margin-left: -4em;
word-spacing: 5px;
margin-top: -15px; }
#conversejs .brand-heading .converse-svg-logo { #conversejs .brand-heading .converse-svg-logo {
height: 1.2em; color: var(--link-color);
height: 1.5em;
margin-right: 0.25em; margin-right: 0.25em;
margin-bottom: -0.3em; } margin-bottom: -0.25em; }
#conversejs .brand-heading .converse-svg-logo .cls-1 { #conversejs .brand-heading .converse-svg-logo .cls-1 {
isolation: isolate; } isolation: isolate; }
#conversejs .brand-heading .converse-svg-logo .cls-2 { #conversejs .brand-heading .converse-svg-logo .cls-2 {
@ -10063,7 +10083,7 @@ body.converse-fullscreen {
#conversejs form.converse-form { #conversejs form.converse-form {
background: white; background: white;
padding: 1.5em; } padding: 1.2rem; }
#conversejs form.converse-form legend { #conversejs form.converse-form legend {
color: var(--text-color); color: var(--text-color);
font-size: 125%; font-size: 125%;
@ -10786,10 +10806,6 @@ body.converse-fullscreen {
padding-bottom: 1em; } padding-bottom: 1em; }
#conversejs #controlbox .conn-feedback p.feedback-subject.error { #conversejs #controlbox .conn-feedback p.feedback-subject.error {
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox .brand-heading-container .brand-heading {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox #converse-login-panel, #conversejs #controlbox #converse-register-panel { #conversejs #controlbox #converse-login-panel, #conversejs #controlbox #converse-register-panel {
padding-top: 0; padding-top: 0;
padding-bottom: 0; } padding-bottom: 0; }
@ -11009,12 +11025,11 @@ body.converse-fullscreen {
#conversejs.converse-mobile #controlbox .brand-heading-container { #conversejs.converse-mobile #controlbox .brand-heading-container {
flex: 0 0 100%; flex: 0 0 100%;
max-width: 100%; max-width: 100%;
margin-bottom: 1em; margin-top: 5em;
text-align: center; } margin-bottom: 1em; }
#conversejs.converse-fullscreen #controlbox .brand-heading-container .brand-heading, #conversejs.converse-fullscreen #controlbox .brand-heading-container .brand-heading,
#conversejs.converse-mobile #controlbox .brand-heading-container .brand-heading { #conversejs.converse-mobile #controlbox .brand-heading-container .brand-heading {
font-size: 150%; font-size: 500%;
font-size: 600%;
padding: 0.7em 0 0 0; padding: 0.7em 0 0 0;
opacity: 0.8; opacity: 0.8;
color: var(--brand-heading-color); } color: var(--brand-heading-color); }
@ -11133,9 +11148,15 @@ body.converse-fullscreen {
#conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open .chatbox:not(#controlbox) { #conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open .chatbox:not(#controlbox) {
display: none; } display: none; }
#conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open #controlbox .controlbox-pane { #conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open #controlbox .controlbox-pane {
display: block; } display: block; } }
#conversejs.converse-overlayed .converse-chatboxes .chatbox .box-flyout {
margin-left: 30px; } } #conversejs.converse-overlayed .brand-heading {
padding-top: 0.8rem;
padding-left: 0.8rem;
width: 100%; }
#conversejs.converse-overlayed .converse-svg-logo {
height: 1em; }
#conversejs #converse-modals .set-xmpp-status { #conversejs #converse-modals .set-xmpp-status {
margin: 1em; } margin: 1em; }

4
dist/converse.js vendored
View File

@ -93077,7 +93077,7 @@ return __p
var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")}; var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")};
module.exports = function(o) { module.exports = function(o) {
var __t, __p = ''; var __t, __p = '';
__p += '<!-- src/templates/converse_brand_heading.html -->\n<span class="brand-heading-container">\n <div class="brand-heading">\n <a href="https://conversejs.org" target="_blank" rel="noopener">\n <svg class="converse-svg-logo"\n xmlns:svg="http://www.w3.org/2000/svg"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n viewBox="0 0 364 364">\n <title>Converse</title>\n <g class="cls-1" id="g904">\n <g data-name="Layer 2">\n <g data-name="Layer 7">\n <path\n class="cls-3"\n d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />\n <path\n class="cls-4"\n d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />\n </g>\n </g>\n </g>\n </svg>\n <span class="brand-name">converse</span>\n </a>\n </div>\n</span>\n'; __p += '<!-- src/templates/converse_brand_heading.html -->\n<span class="brand-heading-container">\n <a class="brand-heading" href="https://conversejs.org" target="_blank" rel="noopener">\n <svg class="converse-svg-logo"\n xmlns:svg="http://www.w3.org/2000/svg"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n viewBox="0 0 364 364">\n <title>Converse</title>\n <g class="cls-1" id="g904">\n <g data-name="Layer 2">\n <g data-name="Layer 7">\n <path\n class="cls-3"\n d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />\n <path\n class="cls-4"\n d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />\n </g>\n </g>\n </g>\n </svg>\n <span class="brand-name">\n <span class="brand-name__text">converse<span class="subdued">.js</span></span>\n </span>\n </a>\n</span>\n';
return __p return __p
}; };
@ -93624,7 +93624,7 @@ return __p
var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")}; var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")};
module.exports = function(o) { module.exports = function(o) {
var __t, __p = '', __e = _.escape; var __t, __p = '', __e = _.escape;
__p += '<!-- src/templates/inverse_brand_heading.html -->\n<div class="row">\n <div class="container brand-heading-container">\n <h1 class="brand-heading brand-heading--inverse">\n <svg class="converse-svg-logo"\n xmlns:svg="http://www.w3.org/2000/svg"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n viewBox="0 0 364 364">\n <title>Converse</title>\n <g class="cls-1" id="g904">\n <g data-name="Layer 2">\n <g data-name="Layer 7">\n <path\n class="cls-3"\n d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />\n <path\n class="cls-4"\n d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />\n </g>\n </g>\n </g>\n </svg>\n <span class="brand-name">converse</span>\n </h1>\n <p class="brand-subtitle">' + __p += '<!-- src/templates/inverse_brand_heading.html -->\n<div class="row">\n <div class="container brand-heading-container">\n <h1 class="brand-heading brand-heading--inverse">\n <svg class="converse-svg-logo"\n xmlns:svg="http://www.w3.org/2000/svg"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n viewBox="0 0 364 364">\n <title>Converse</title>\n <g class="cls-1" id="g904">\n <g data-name="Layer 2">\n <g data-name="Layer 7">\n <path\n class="cls-3"\n d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />\n <path\n class="cls-4"\n d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />\n </g>\n </g>\n </g>\n </svg>\n <span class="brand-name">\n <span class="brand-name__text">converse<span class="subdued">.js</span></span>\n <p class="byline">messaging freedom</p>\n </span>\n </h1>\n <p class="brand-subtitle">' +
__e(o.version_name) + __e(o.version_name) +
'</p>\n <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client brought to you by <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a> </p>\n <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> it into your own language</p>\n </div>\n</div>\n'; '</p>\n <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client brought to you by <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a> </p>\n <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> it into your own language</p>\n </div>\n</div>\n';
return __p return __p

33
sass/_controlbox.scss
View File

@ -164,15 +164,6 @@
} }
} }
.brand-heading-container {
.brand-heading {
text-align: center;
}
.brand-name {
font-size: 120%;
}
}
#converse-login-panel, #converse-register-panel { #converse-login-panel, #converse-register-panel {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
@ -486,11 +477,10 @@
.brand-heading-container { .brand-heading-container {
@include make-col(12); @include make-col(12);
margin-top: 5em;
margin-bottom: 1em; margin-bottom: 1em;
text-align: center;
.brand-heading { .brand-heading {
font-size: 150%; font-size: 500%;
font-size: 600%;
padding: 0.7em 0 0 0; padding: 0.7em 0 0 0;
opacity: 0.8; opacity: 0.8;
color: var(--brand-heading-color); color: var(--brand-heading-color);
@ -605,14 +595,15 @@
} }
} }
} }
#conversejs.converse-overlayed { }
.converse-chatboxes {
.chatbox { #conversejs.converse-overlayed {
.box-flyout { .brand-heading {
margin-left: 30px; // Counteracts Bootstrap margins, but padding-top: 0.8rem;
// not clear why needed... padding-left: 0.8rem;
} width: 100%;
} }
} .converse-svg-logo {
height: 1em;
} }
} }

42
sass/_core.scss
View File

@ -75,9 +75,12 @@ body.converse-fullscreen {
margin-left: -2.7em; margin-left: -2.7em;
word-spacing: 5px; word-spacing: 5px;
} }
.subdued { }
opacity: 0.25; }
}
#conversejs-bg, #conversejs {
.subdued {
opacity: 0.35;
} }
} }
@ -123,16 +126,41 @@ body.converse-fullscreen {
} }
.brand-heading { .brand-heading {
font-size: 200%;
display: inline-flex; display: inline-flex;
align-items: flex-end; flex-direction: row;
align-items: flex-start;
font-family: var(--branding-font); font-family: var(--branding-font);
color: var(--link-color); color: var(--link-color);
margin-bottom: 1em;
.brand-name {
color: var(--link-color);
display: flex;
flex-direction: column;
align-items: center;
margin-top: -0.5em;
}
.brand-name__text {
font-size: 120%;
vertical-align: text-bottom;
}
.byline {
margin: 0;
font-family: var(--heading-font);
font-size: 0.25em;
opacity: 0.55;
margin-left: -4em;
word-spacing: 5px;
margin-top: -15px;
}
.converse-svg-logo { .converse-svg-logo {
height: 1.2em; color: var(--link-color);
height: 1.5em;
margin-right: 0.25em; margin-right: 0.25em;
margin-bottom: -0.3em; margin-bottom: -0.25em;
.cls-1 { .cls-1 {
isolation: isolate; isolation: isolate;
} }

2
sass/_forms.scss
View File

@ -62,7 +62,7 @@
&.converse-form { &.converse-form {
background: white; background: white;
padding: 1.5em; padding: 1.2rem;
legend { legend {
color: var(--text-color); color: var(--text-color);
font-size: 125%; font-size: 125%;

44
src/templates/converse_brand_heading.html
View File

@ -1,26 +1,26 @@
<span class="brand-heading-container"> <span class="brand-heading-container">
<div class="brand-heading"> <a class="brand-heading" href="https://conversejs.org" target="_blank" rel="noopener">
<a href="https://conversejs.org" target="_blank" rel="noopener"> <svg class="converse-svg-logo"
<svg class="converse-svg-logo" xmlns:svg="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 364 364">
viewBox="0 0 364 364"> <title>Converse</title>
<title>Converse</title> <g class="cls-1" id="g904">
<g class="cls-1" id="g904"> <g data-name="Layer 2">
<g data-name="Layer 2"> <g data-name="Layer 7">
<g data-name="Layer 7"> <path
<path class="cls-3"
class="cls-3" d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" />
d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z" /> <path
<path class="cls-4"
class="cls-4" d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />
d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z" />
</g>
</g> </g>
</g> </g>
</svg> </g>
<span class="brand-name">converse</span> </svg>
</a> <span class="brand-name">
</div> <span class="brand-name__text">converse<span class="subdued">.js</span></span>
</span>
</a>
</span> </span>

5
src/templates/inverse_brand_heading.html
View File

@ -20,7 +20,10 @@
</g> </g>
</g> </g>
</svg> </svg>
<span class="brand-name">converse</span> <span class="brand-name">
<span class="brand-name__text">converse<span class="subdued">.js</span></span>
<p class="byline">messaging freedom</p>
</span>
</h1> </h1>
<p class="brand-subtitle">{{{o.version_name}}}</p> <p class="brand-subtitle">{{{o.version_name}}}</p>
<p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client brought to you by <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a> </p> <p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client brought to you by <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a> </p>