Commit 0833478d authored by JC Brand's avatar JC Brand

Use bootstrap4 for the Converse website

parent 48dc02cf
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -9938,6 +9938,8 @@ body.reset {
#conversejs.converse-overlayed #controlbox .box-flyout {
min-width: 250px !important;
width: 250px; }
#conversejs.converse-overlayed #controlbox #converse-login-trusted {
margin-top: 0.5em; }
#conversejs.converse-overlayed #controlbox:not(.logged-out) .controlbox-head {
height: 15px; }
#conversejs.converse-overlayed #controlbox .controlbox-head {
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -9,8 +9,8 @@
<meta name="author" content="JC Brand" />
<meta name="keywords" content="xmpp chat webchat converse.js" />
<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/theme.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/website.css" />
<script type="text/javascript" src="/src/website.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>
......@@ -26,19 +26,41 @@
</style>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
<body id="page-top" data-spy="scroll">
<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav"><li> <a href="/docs/html/index.html">Documentation</a> </li>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="/"><span class="converse-brand-heading"><i class="icon-conversejs"></i>Converse</span></a>
<ul class="navbar-nav mt-2 mt-lg-0">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="nav-link" href="#page-top"></a>
</li>
<li class="nav-item page-scroll">
<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>
</div>
</nav>
<section class="intro">
......
......@@ -10,9 +10,8 @@
<meta name="keywords" content="xmpp chat webchat converse.js" />
<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" />
<link type="text/css" rel="stylesheet" media="screen" href="/css/converse.min.css" />
<script src="/src/website.js"></script>
<script type="text/javascript" src="/analytics.js"></script>
......@@ -22,59 +21,52 @@
<![endif]>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
<body id="page-top" data-spy="scroll">
<section class="section-wrapper">
<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/#page-top">
<i class="fa fa-play-circle"></i> <span class="light">Home</span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="/"><span class="converse-brand-heading"><i class="icon-conversejs"></i>Converse</span></a>
<ul class="navbar-nav mt-2 mt-lg-0">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a href="#page-top"></a>
<a class="nav-link" href="#page-top"></a>
</li>
<li class="page-scroll">
<a href="#about">About</a>
<li class="nav-item page-scroll">
<a class="nav-link" href="#about">About</a>
</li>
<li class="page-scroll">
<a href="#features">Features</a>
<li class="nav-item page-scroll">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="page-scroll">
<a href="#contact">Contact</a>
<li class="nav-item page-scroll">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li>
<a href="/docs/html/manual.html">User Manual</a>
<li class="nav-item page-scroll">
<a class="nav-link" href="#sponsors">Sponsor</a>
</li>
<li>
<a href="/docs/html/index.html">Documentation</a>
<li class="nav-item page-scroll">
<a class="nav-link" href="#hosting">Hosting</a>
</li>
<li>
<a href="https://github.com/jcbrand/converse.js/releases" class="button" target="_blank">Download</a>
<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>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<section class="intro" class="container">
<div class="row">
<div class="col-md-12 col-md-offset-2">
<h1 class="brand-heading"><i class="icon-conversejs"></i> Converse</h1>
<div class="col-md-8 col-md-offset-2">
<p class="intro-text">Demos:</p>
<p class="intro-text">
<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/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>
......@@ -83,6 +75,7 @@
</div>
</div>
</section>
</section>
</body>
<script>
......
......@@ -75694,6 +75694,8 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
_converse.xmppstatus.save({
'status': show
}, {
'silent': true
});
const status_message = _.propertyOf(presence.querySelector('status'))('textContent');
......@@ -79452,11 +79454,11 @@ __e(o.__("Password:")) +
__e(o.__('password')) +
'">\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')) { ;
__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')) +
'</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.')) +
......@@ -11,9 +11,8 @@
<!-- These files are NOT needed when using converse.js in your own project. -->
<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/website.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/website.css" />
<noscript><p><img src="//stats.opkode.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
<script type="text/javascript" src="/src/website.js"></script>
<script type="text/javascript" src="analytics.js"></script>
......@@ -25,60 +24,53 @@
<![endif]>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">
<i class="fa fa-play-circle"></i> <span class="light">Home</span>
</a>
</div>
<body id="page-top" data-spy="scroll">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<section class="section-wrapper">
<nav class="navbar sticky-top navbar-expand-lg" role="navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<span class="page-scroll">
<a class="navbar-brand" href="#intro"><span class="converse-brand-heading"><i class="icon-conversejs"></i>Converse</span></a>
</span>
<ul class="navbar-nav mt-2 mt-lg-0">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a href="#page-top"></a>
<a class="nav-link" href="#page-top"></a>
</li>
<li class="page-scroll">
<a href="#about">About</a>
<li class="nav-item page-scroll">
<a class="nav-link" href="#about">About</a>
</li>
<li class="page-scroll">
<a href="#features">Features</a>
<li class="nav-item page-scroll">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="page-scroll">
<a href="#contact">Contact</a>
<li class="nav-item page-scroll">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="page-scroll">
<a href="#sponsors">Sponsor</a>
<li class="nav-item page-scroll">
<a class="nav-link" href="#sponsors">Sponsor</a>
</li>
<li class="page-scroll">
<a href="#hosting">Hosting</a>
<li class="nav-item page-scroll">
<a class="nav-link" href="#hosting">Hosting</a>
</li>
<li>
<a href="/docs/html/index.html">Documentation</a>
<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>
<a href="https://github.com/jcbrand/converse.js/releases" class="button" target="_blank" rel="noopener">Download</a>
<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>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<section class="intro" class="container">
<section id="intro" class="intro" class="container">
<div class="row">
<div class="col-md-12 col-md-offset-2">
<h1 class="brand-heading converse-brand-heading"><i class="icon-conversejs"></i>Converse</h1>
<div class="col-md-8 col-md-offset-2">
<p class="intro-text">A free and open-source XMPP chat client in your browser</p>
<p>Also available as a <a href="https://conversejs.org/fullscreen.html">fullpage</a> app</p>
<p>Try out the <a href="/fullscreen.html">fullpage</a> version</p>
<p>
<a href="https://inverse.chat/#converse/room?jid=discuss@conference.conversejs.org"
target="_blank" rel="noopener"><img src="https://inverse.chat/badge.svg?room=discuss@conference.conversejs.org"/></a>
......@@ -90,11 +82,11 @@
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2 banner-social-buttons">
<div class="col-md-12 col-md-offset-2 banner-social-buttons">
<ul class="list-inline">
<li><a href="https://twitter.com/jcopkode" class="btn btn-circle btn-lg" title="Twitter" target="_blank" rel="noopener"><i class="fab fa-twitter"></i></a></li>
<li><a href="https://mastodon.xyz/@jcbrand" class="btn btn-lg" title="Mastodon" target="_blank" rel="noopener"><img class="mastodon" src="/logo/mastodon.svg"/></a></li>
<li><a href="https://github.com/jcbrand/converse.js" class="btn btn-circle btn-lg" title="GitHub" target="_blank" rel="noopener"><i class="fab fa-github"></i></a></li>
<li class="list-inline-item"><a href="https://twitter.com/jcopkode" class="btn btn-circle btn-lg" title="Twitter" target="_blank" rel="noopener"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="https://mastodon.xyz/@jcbrand" class="btn btn-lg" title="Mastodon" target="_blank" rel="noopener"><img class="mastodon" src="/logo/mastodon.svg"/></a></li>
<li class="list-inline-item"><a href="https://github.com/jcbrand/converse.js" class="btn btn-circle btn-lg" title="GitHub" target="_blank" rel="noopener"><i class="fab fa-github"></i></a></li>
</ul>
</div>
</div>
......@@ -102,7 +94,7 @@
<section id="about" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="col-lg-12 col-lg-offset-2">
<h2>Converse is easy to set up</h2>
<p class="text-left">You can start using it here immediately, or you can <a href="/docs/html/index.html">integrate it into your own website</a>.</p>
<p class="text-left">Take a look at the <a href="/demo">demo page</a> for other examples of how Converse can be configured and used.</a>
......@@ -194,7 +186,7 @@
<section class="outro content-section text-center" id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="col-lg-12 col-lg-offset-2">
<h2>Contact</h2>
<ul class="contact">
<li>Follow me on <a href="https://twitter.com/jcopkode" target="_blank" rel="noopener">Twitter</a>
......@@ -206,7 +198,7 @@
</ul>
</div>
<div class="col-lg-8 col-lg-offset-2" style="margin-top: 4em; text-align: left">
<div class="col-lg-12 col-lg-offset-2" style="margin-top: 4em; text-align: left">
<h2 style="text-align: center">Professional support and custom development</h2>
<p>
I'm available for paid-for features, custom development and consulting.<br/>
......@@ -223,13 +215,12 @@
<section class="outro content-section text-center" id="sponsors">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2" style="margin-top: 3em">
<div class="col-lg-12 col-lg-offset-2" style="margin-top: 3em">
<div class="sponsors">
<h2>Converse is supported by:</h2>
<ul>
<li><a href="https://www.keycdn.com/?utm_source=conversejs" target="_blank" rel="noopener"><img style="height: 3em" src="/logo/keycdn.svg" alt="KeyCDN"></a></li>
<li><a href="https://wikisuite.org/?utm_source=conversejs" target="_blank" rel="noopener"><img style="height: 4em" src="/logo/wikisuite-white.png" alt="WikiSuite"></a></li>
<li><a href="https://hostpresto.com/?utm_source=conversejs" target="_blank" rel="noopener"><img style="height: 3em" src="/logo/hostpresto.png" alt="HostPresto"></a></li>
</ul>
</div>
......@@ -248,7 +239,7 @@
<section class="outro content-section text-center" id="hosting">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2" style="margin-top: 3em">
<div class="col-lg-12 col-lg-offset-2" style="margin-top: 3em">
<h2>XMPP Account Hosting</h2>
<p>
We provide free XMPP accounts under the domain <strong>conversejs.org</strong>.
......@@ -330,6 +321,7 @@
</div>
</div>
</section>
</section>
</body>
<script>
......
......@@ -352,6 +352,9 @@
width: $controlbox-width;
}
#converse-login-trusted {
margin-top: 0.5em;
}
&:not(.logged-out) {
.controlbox-head {
height: 15px;
......
@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 {
width: 100%;
height: 100%;
......@@ -51,7 +74,14 @@ a:hover, a:focus {
margin-bottom: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
text-transform: uppercase;
background-color: #211018;
background: transparent;
.navbar-collapse {
justify-content: space-between;
}
a {
color: white;
}
}
.navbar-brand {
......@@ -88,7 +118,6 @@ a:hover, a:focus {
}
@media (min-width: 767px) {
.navbar {
padding: 20px 0;
border-bottom: none;
letter-spacing: 1px;
background: transparent;
......@@ -97,7 +126,8 @@ a:hover, a:focus {
transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
padding-top: 0;
padding-bottom: 0;
background-color: #211018;
}
.navbar-custom.top-nav-collapse {
......@@ -119,6 +149,8 @@ a:hover, a:focus {
color: #fff;
}
.intro {
margin-top: -4em;
height: calc(100vh + 4em);
background: url(images/header.jpg) no-repeat bottom center scroll;
background-color: #211018;
-webkit-background-size: cover;
......@@ -154,7 +186,7 @@ section {
font-weight: normal;
font-size: 2em;
text-align: center;
margin-top: 2.5em;
margin-top: 1.5em;
}
.brand-heading .icon-conversejs {
font-size: 60%;
......@@ -169,7 +201,6 @@ section {
}
@media (min-width: 767px) {
.intro {
height: 100%;
padding: 0;
}
.brand-heading {
......@@ -216,6 +247,14 @@ section {
-moz-animation-timing-function: linear;
}
.nav-item {
&.active {
a {
color: #E7A151 !important;
}
}
}
.content-section {
padding-top: 100px;
padding-top: 100px;
......@@ -275,9 +314,11 @@ section {
}
.banner-social-buttons {
padding-top: 3em;
a {
padding: 0.15em;
i {
font-size: 115%;
}
}
}
::-moz-selection {
......@@ -352,9 +393,9 @@ ul.features {
}
.mastodon {
width: 4em;
height: 4em;
margin-top: 0.9em;
width: 3.6em;
height: 3.6em;
margin-top: 0.6em;
}
.sponsors {
......
......@@ -18,9 +18,9 @@
<input id="converse-login-password" class="form-control" required="required" type="password" name="password" placeholder="{{{o.__('password')}}}">
</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" {[ } ]}>
<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"
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>
......
......@@ -3,12 +3,11 @@
window.addEventListener('scroll', function (ev) {
var navbar = document.querySelector(".navbar");
var fixed_top = document.querySelector(".navbar-fixed-top");
var rect = navbar.getBoundingClientRect();
if (rect.top + window.scrollY > 50) {
fixed_top.classList.add("top-nav-collapse");
navbar.classList.add("top-nav-collapse");
} else {
fixed_top.classList.remove("top-nav-collapse");
navbar.classList.remove("top-nav-collapse");
}
});
......@@ -23,7 +22,12 @@
Array.prototype.forEach.call(document.querySelectorAll('.page-scroll a'), function (el) {
el.addEventListener('click', function (ev) {
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 startLocation = window.pageYOffset;
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