Skip to content

C
converse.js
Commit 0833478d authored by JC Brand's avatar JC Brand
Browse files
Options

Use bootstrap4 for the Converse website

parent 48dc02cf
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 5547 additions and 159 deletions
css/bootstrap.min.css deleted 100644 → 0
View file @ 48dc02cf
This source diff could not be displayed because it is too large. You can view the blob instead.
css/converse.css
View file @ 0833478d
...@@ -9938,6 +9938,8 @@ body.reset { ...@@ -9938,6 +9938,8 @@ body.reset {
#conversejs.converse-overlayed #controlbox .box-flyout { #conversejs.converse-overlayed #controlbox .box-flyout {
min-width: 250px !important; min-width: 250px !important;
width: 250px; } width: 250px; }
#conversejs.converse-overlayed #controlbox #converse-login-trusted {
margin-top: 0.5em; }
#conversejs.converse-overlayed #controlbox:not(.logged-out) .controlbox-head { #conversejs.converse-overlayed #controlbox:not(.logged-out) .controlbox-head {
height: 15px; } height: 15px; }
#conversejs.converse-overlayed #controlbox .controlbox-head { #conversejs.converse-overlayed #controlbox .controlbox-head {
......
css/website.css
View file @ 0833478d
This diff is collapsed.
demo/embedded.html
View file @ 0833478d
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
<meta name="author" content="JC Brand" /> <meta name="author" content="JC Brand" />
<meta name="keywords" content="xmpp chat webchat converse.js" /> <meta name="keywords" content="xmpp chat webchat converse.js" />
<link rel="shortcut icon" type="image/ico" href="../css/images/favicon.ico"/> <link rel="shortcut icon" type="image/ico" href="../css/images/favicon.ico"/>
<link type="text/css" rel="stylesheet" media="screen" href="/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" media="screen" href="/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/css/theme.min.css" /> <link type="text/css" rel="stylesheet" media="screen" href="/css/website.css" />
<script type="text/javascript" src="/src/website.js"></script> <script type="text/javascript" src="/src/website.js"></script>
<script type="text/javascript" src="/analytics.js"></script> <script type="text/javascript" src="/analytics.js"></script>
<noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript> <noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
...@@ -26,20 +26,42 @@ ...@@ -26,20 +26,42 @@
</style> </style>
</head> </head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom"> <body id="page-top" data-spy="scroll">
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation"> <nav class="navbar sticky-top navbar-expand-lg" role="navigation">
<div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<div class="navbar-header page-scroll"> <span class="navbar-toggler-icon"></span>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> </button>
<i class="fa fa-bars"></i> <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
</button> <a class="navbar-brand" href="/"><span class="converse-brand-heading"><i class="icon-conversejs"></i>Converse</span></a>
</div> <ul class="navbar-nav mt-2 mt-lg-0">
<div class="collapse navbar-collapse navbar-right navbar-main-collapse"> <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<ul class="nav navbar-nav"><li> <a href="/docs/html/index.html">Documentation</a> </li> <li class="hidden">
</ul> <a class="nav-link" href="#page-top"></a>
</div> </li>
</div> <li class="nav-item page-scroll">
</nav> <a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item page-scroll">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item page-scroll">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item page-scroll">
<a class="nav-link" href="#sponsors">Sponsor</a>
</li>
<li class="nav-item page-scroll">
<a class="nav-link" href="#hosting">Hosting</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/docs/html/index.html">Documentation&nbsp;<i class="fa fa-external-link-alt"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/jcbrand/converse.js/releases" class="button" target="_blank" rel="noopener">Download&nbsp;<i class="fa fa-external-link-alt"></i></a>
</li>
</ul>
</div>
</nav>
<section class="intro"> <section class="intro">
<div class="intro-body"> <div class="intro-body">
......
demo/index.html
View file @ 0833478d
...@@ -10,9 +10,8 @@ ...@@ -10,9 +10,8 @@
<meta name="keywords" content="xmpp chat webchat converse.js" /> <meta name="keywords" content="xmpp chat webchat converse.js" />
<link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/> <link rel="shortcut icon" type="image/ico" href="css/images/favicon.ico"/>
<link type="text/css" rel="stylesheet" media="screen" href="/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/css/font-awesome.min.css" /> <link type="text/css" rel="stylesheet" media="screen" href="/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/css/theme.min.css" /> <link type="text/css" rel="stylesheet" media="screen" href="/css/website.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/css/converse.min.css" /> <link type="text/css" rel="stylesheet" media="screen" href="/css/converse.min.css" />
<script src="/src/website.js"></script> <script src="/src/website.js"></script>
<script type="text/javascript" src="/analytics.js"></script> <script type="text/javascript" src="/analytics.js"></script>
...@@ -22,59 +21,52 @@ ...@@ -22,59 +21,52 @@
<![endif]> <![endif]>
</head> </head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom"> <body id="page-top" data-spy="scroll">
<section class="section-wrapper">
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation"> <nav class="navbar sticky-top navbar-expand-lg" role="navigation">
<div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<div class="navbar-header page-scroll"> <span class="navbar-toggler-icon"></span>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> </button>
<i class="fa fa-bars"></i> <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
</button> <a class="navbar-brand" href="/"><span class="converse-brand-heading"><i class="icon-conversejs"></i>Converse</span></a>
<a class="navbar-brand" href="/#page-top"> <ul class="navbar-nav mt-2 mt-lg-0">
<i class="fa fa-play-circle"></i> <span class="light">Home</span> <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
</a> <li class="hidden">
</div> <a class="nav-link" href="#page-top"></a>
</li>
<!-- Collect the nav links, forms, and other content for toggling --> <li class="nav-item page-scroll">
<div class="collapse navbar-collapse navbar-right navbar-main-collapse"> <a class="nav-link" href="#about">About</a>
<ul class="nav navbar-nav"> </li>
<!-- Hidden li included to remove active class from about link when scrolled up past about section --> <li class="nav-item page-scroll">
<li class="hidden"> <a class="nav-link" href="#features">Features</a>
<a href="#page-top"></a> </li>
</li> <li class="nav-item page-scroll">
<li class="page-scroll"> <a class="nav-link" href="#contact">Contact</a>
<a href="#about">About</a> </li>
</li> <li class="nav-item page-scroll">
<li class="page-scroll"> <a class="nav-link" href="#sponsors">Sponsor</a>
<a href="#features">Features</a> </li>
</li> <li class="nav-item page-scroll">
<li class="page-scroll"> <a class="nav-link" href="#hosting">Hosting</a>
<a href="#contact">Contact</a> </li>
</li> <li class="nav-item">
<li> <a class="nav-link" href="/docs/html/index.html">Documentation&nbsp;<i class="fa fa-external-link-alt"></i></a>
<a href="/docs/html/manual.html">User Manual</a> </li>
</li> <li class="nav-item">
<li> <a class="nav-link" href="https://github.com/jcbrand/converse.js/releases" class="button" target="_blank" rel="noopener">Download&nbsp;<i class="fa fa-external-link-alt"></i></a>
<a href="/docs/html/index.html">Documentation</a> </li>
</li> </ul>
<li> </div>
<a href="https://github.com/jcbrand/converse.js/releases" class="button" target="_blank">Download</a> </nav>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<section class="intro" class="container"> <section class="intro" class="container">
<div class="row"> <div class="row">
<h1 class="brand-heading"><i class="icon-conversejs"></i> Converse</h1> <div class="col-md-12 col-md-offset-2">
<div class="col-md-8 col-md-offset-2"> <h1 class="brand-heading"><i class="icon-conversejs"></i> Converse</h1>
<p class="intro-text">Demos:</p> <p class="intro-text">Demos:</p>
<p class="intro-text"> <p class="intro-text">
<ul style="list-style: none; font-size: 22px;"> <ul style="list-style: none; font-size: 22px;">
<li><a href="https://inverse.chat" target="_blank" rel="noopener">As a fullscreen application</a></li> <li><a href="/fullscreen.html">As a fullscreen application</a></li>
<li><a href="/demo/anonymous.html">Anonymous login</a></li> <li><a href="/demo/anonymous.html">Anonymous login</a></li>
<li><a href="/demo/embedded.html">Single MUC chatroom embedded into the page</a></li> <li><a href="/demo/embedded.html">Single MUC chatroom embedded into the page</a></li>
<li><a href="/demo/without_bundled_dependencies.html">Dependencies loaded externally as &lt;script&gt; tags</a></li> <li><a href="/demo/without_bundled_dependencies.html">Dependencies loaded externally as &lt;script&gt; tags</a></li>
...@@ -83,6 +75,7 @@ ...@@ -83,6 +75,7 @@
</div> </div>
</div> </div>
</section> </section>
</section>
</body> </body>
<script> <script>
......
dist/converse.js
View file @ 0833478d
...@@ -75694,6 +75694,8 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_ ...@@ -75694,6 +75694,8 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
_converse.xmppstatus.save({ _converse.xmppstatus.save({
'status': show 'status': show
}, {
'silent': true
}); });
const status_message = _.propertyOf(presence.querySelector('status'))('textContent'); const status_message = _.propertyOf(presence.querySelector('status'))('textContent');
...@@ -79452,11 +79454,11 @@ __e(o.__("Password:")) + ...@@ -79452,11 +79454,11 @@ __e(o.__("Password:")) +
__e(o.__('password')) + __e(o.__('password')) +
'">\n </div>\n '; '">\n </div>\n ';
} ; } ;
__p += '\n <div class="form-group form-check">\n <input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" '; __p += '\n <div class="form-group form-check login-trusted">\n <input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" ';
if (o._converse.config.get('trusted')) { ; if (o._converse.config.get('trusted')) { ;
__p += ' checked="checked" '; __p += ' checked="checked" ';
} ; } ;
__p += '>\n <label for="converse-login-trusted" class="form-check-label">' + __p += '>\n <label for="converse-login-trusted" class="form-check-label login-trusted__desc">' +
__e(o.__('This is a trusted device')) + __e(o.__('This is a trusted device')) +
'</label>\n <i class="fa fa-info-circle" data-toggle="popover"\n data-title="Trusted device?"\n data-content="' + '</label>\n <i class="fa fa-info-circle" data-toggle="popover"\n data-title="Trusted device?"\n data-content="' +
__e(o.__('To improve performance, we cache your data in this browser. Uncheck this box if this is a public computer or if you want your data to be deleted when you log out. It\'s important that you explicitly log out, otherwise not all cached data might be deleted.')) + __e(o.__('To improve performance, we cache your data in this browser. Uncheck this box if this is a public computer or if you want your data to be deleted when you log out. It\'s important that you explicitly log out, otherwise not all cached data might be deleted.')) +
index.html
View file @ 0833478d
This diff is collapsed.
sass/_controlbox.scss
View file @ 0833478d
...@@ -352,6 +352,9 @@ ...@@ -352,6 +352,9 @@
width: $controlbox-width; width: $controlbox-width;
} }
#converse-login-trusted {
margin-top: 0.5em;
}
&:not(.logged-out) { &:not(.logged-out) {
.controlbox-head { .controlbox-head {
height: 15px; height: 15px;
......
sass/_website.scss
View file @ 0833478d
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/input-group";
@import "bootstrap/scss/custom-forms";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/media";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/utilities";
html { html {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -51,7 +74,14 @@ a:hover, a:focus { ...@@ -51,7 +74,14 @@ a:hover, a:focus {
margin-bottom: 0; margin-bottom: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.3);
text-transform: uppercase; text-transform: uppercase;
background-color: #211018; background: transparent;
.navbar-collapse {
justify-content: space-between;
}
a {
color: white;
}
} }
.navbar-brand { .navbar-brand {
...@@ -88,7 +118,6 @@ a:hover, a:focus { ...@@ -88,7 +118,6 @@ a:hover, a:focus {
} }
@media (min-width: 767px) { @media (min-width: 767px) {
.navbar { .navbar {
padding: 20px 0;
border-bottom: none; border-bottom: none;
letter-spacing: 1px; letter-spacing: 1px;
background: transparent; background: transparent;
...@@ -97,7 +126,8 @@ a:hover, a:focus { ...@@ -97,7 +126,8 @@ a:hover, a:focus {
transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
} }
.top-nav-collapse { .top-nav-collapse {
padding: 0; padding-top: 0;
padding-bottom: 0;
background-color: #211018; background-color: #211018;
} }
.navbar-custom.top-nav-collapse { .navbar-custom.top-nav-collapse {
...@@ -119,6 +149,8 @@ a:hover, a:focus { ...@@ -119,6 +149,8 @@ a:hover, a:focus {
color: #fff; color: #fff;
} }
.intro { .intro {
margin-top: -4em;
height: calc(100vh + 4em);
background: url(images/header.jpg) no-repeat bottom center scroll; background: url(images/header.jpg) no-repeat bottom center scroll;
background-color: #211018; background-color: #211018;
-webkit-background-size: cover; -webkit-background-size: cover;
...@@ -154,7 +186,7 @@ section { ...@@ -154,7 +186,7 @@ section {
font-weight: normal; font-weight: normal;
font-size: 2em; font-size: 2em;
text-align: center; text-align: center;
margin-top: 2.5em; margin-top: 1.5em;
} }
.brand-heading .icon-conversejs { .brand-heading .icon-conversejs {
font-size: 60%; font-size: 60%;
...@@ -169,7 +201,6 @@ section { ...@@ -169,7 +201,6 @@ section {
} }
@media (min-width: 767px) { @media (min-width: 767px) {
.intro { .intro {
height: 100%;
padding: 0; padding: 0;
} }
.brand-heading { .brand-heading {
...@@ -216,6 +247,14 @@ section { ...@@ -216,6 +247,14 @@ section {
-moz-animation-timing-function: linear; -moz-animation-timing-function: linear;
} }
.nav-item {
&.active {
a {
color: #E7A151 !important;
}
}
}
.content-section { .content-section {
padding-top: 100px; padding-top: 100px;
padding-top: 100px; padding-top: 100px;
...@@ -275,9 +314,11 @@ section { ...@@ -275,9 +314,11 @@ section {
} }
.banner-social-buttons { .banner-social-buttons {
padding-top: 3em; padding-top: 3em;
a { a {
padding: 0.15em; padding: 0.15em;
i {
font-size: 115%;
}
} }
} }
::-moz-selection { ::-moz-selection {
...@@ -352,9 +393,9 @@ ul.features { ...@@ -352,9 +393,9 @@ ul.features {
} }
.mastodon { .mastodon {
width: 4em; width: 3.6em;
height: 4em; height: 3.6em;
margin-top: 0.9em; margin-top: 0.6em;
} }
.sponsors { .sponsors {
......
src/templates/login_panel.html
View file @ 0833478d
...@@ -18,9 +18,9 @@ ...@@ -18,9 +18,9 @@
<input id="converse-login-password" class="form-control" required="required" type="password" name="password" placeholder="{{{o.__('password')}}}"> <input id="converse-login-password" class="form-control" required="required" type="password" name="password" placeholder="{{{o.__('password')}}}">
</div> </div>
{[ } ]} {[ } ]}
<div class="form-group form-check"> <div class="form-group form-check login-trusted">
<input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" {[ if (o._converse.config.get('trusted')) { ]} checked="checked" {[ } ]}> <input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" {[ if (o._converse.config.get('trusted')) { ]} checked="checked" {[ } ]}>
<label for="converse-login-trusted" class="form-check-label">{{{o.__('This is a trusted device')}}}</label> <label for="converse-login-trusted" class="form-check-label login-trusted__desc">{{{o.__('This is a trusted device')}}}</label>
<i class="fa fa-info-circle" data-toggle="popover" <i class="fa fa-info-circle" data-toggle="popover"
data-title="Trusted device?" data-title="Trusted device?"
data-content="{{{o.__('To improve performance, we cache your data in this browser. Uncheck this box if this is a public computer or if you want your data to be deleted when you log out. It\'s important that you explicitly log out, otherwise not all cached data might be deleted.')}}}"></i> data-content="{{{o.__('To improve performance, we cache your data in this browser. Uncheck this box if this is a public computer or if you want your data to be deleted when you log out. It\'s important that you explicitly log out, otherwise not all cached data might be deleted.')}}}"></i>
......
src/website.js
View file @ 0833478d
...@@ -3,12 +3,11 @@ ...@@ -3,12 +3,11 @@
window.addEventListener('scroll', function (ev) { window.addEventListener('scroll', function (ev) {
var navbar = document.querySelector(".navbar"); var navbar = document.querySelector(".navbar");
var fixed_top = document.querySelector(".navbar-fixed-top");
var rect = navbar.getBoundingClientRect(); var rect = navbar.getBoundingClientRect();
if (rect.top + window.scrollY > 50) { if (rect.top + window.scrollY > 50) {
fixed_top.classList.add("top-nav-collapse"); navbar.classList.add("top-nav-collapse");
} else { } else {
fixed_top.classList.remove("top-nav-collapse"); navbar.classList.remove("top-nav-collapse");
} }
}); });
...@@ -23,7 +22,12 @@ ...@@ -23,7 +22,12 @@
Array.prototype.forEach.call(document.querySelectorAll('.page-scroll a'), function (el) { Array.prototype.forEach.call(document.querySelectorAll('.page-scroll a'), function (el) {
el.addEventListener('click', function (ev) { el.addEventListener('click', function (ev) {
ev.preventDefault(); ev.preventDefault();
var hash = this.getAttribute("href") Array.prototype.forEach.call(document.querySelectorAll('.page-scroll'), function (child) {
child.classList.remove('active');
});
this.parentElement.classList.add('active');
var hash = this.getAttribute("href");
var endLocation = document.querySelector(hash).offsetTop; var endLocation = document.querySelector(hash).offsetTop;
var startLocation = window.pageYOffset; var startLocation = window.pageYOffset;
var distance = endLocation - startLocation; var distance = endLocation - startLocation;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7