Fix path to converse.css and add some mockup fixes

This commit is contained in:
JC Brand 2019-06-04 09:29:21 +02:00
parent 1d9bbb8ddd
commit 48adc04740
9 changed files with 649 additions and 668 deletions

View File

@ -48,7 +48,7 @@ The Converse repository does not include the minified files in the ``dist`` or
To only generate the minified files, you can make them individually. :: To only generate the minified files, you can make them individually. ::
make dist/converse.min.js make dist/converse.min.js
make css/converse.min.css make dist/converse.min.css
.. note:: .. note::

View File

@ -1,23 +1,27 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=en> <html lang=en>
<head> <head>
<title>Converse.js</title> <title>Converse</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Converse.js: An XMPP chat client which can be integrated into any website" /> <meta name="description" content="Converse: An XMPP chat client which can be integrated into any website" />
<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 Converse" />
<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" /> <!-- These files are NOT needed when using converse.js in your own project. -->
<link type="text/css" rel="stylesheet" media="screen" href="css/font-awesome.min.css" /> <link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
<link type="text/css" rel="stylesheet" media="screen" href="css/theme.min.css" /> <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/font-awesome.min.css" />
<script type="text/javascript" src="analytics.js"></script> <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/website.min.css" />
<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>
<script src="src/website.js"></script> <script type="text/javascript" src="/src/website.js"></script>
<script type="text/javascript" src="analytics.js"></script>
<!-- *********************************************************************** -->
<![if gte IE 11]> <![if gte IE 11]>
<link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/converse.min.css" />
<script src="dist/converse.js"></script> <script src="https://cdn.conversejs.org/3rdparty/libsignal-protocol.min.js"></script>
<script src="https://cdn.conversejs.org/4.2.0/dist/converse.min.js"></script>
<![endif]> <![endif]>
</head> </head>

View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Converse.js Mockups</title> <title>Converse.js Mockups</title>
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
</head> </head>
<body class="reset"> <body class="reset">
@ -50,12 +50,11 @@
</span> </span>
<div class="chat-msg__body"> <div class="chat-msg__body">
<div class="chat-msg__message"> <div class="chat-msg__message">
<span class="chat-msg__text"> <span class="chat-msg__text">He jests at scars that never felt a wound.</span>
He jests at scars that never felt a wound.
</span>
</div> </div>
</div> </div>
</div> </div>
<span class="fa fa-check chat-msg__receipt"></span>
<div class="chat-msg__actions"> <div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button> <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div> </div>
@ -75,12 +74,12 @@
</span> </span>
<div class="chat-msg__body"> <div class="chat-msg__body">
<div class="chat-msg__message"> <div class="chat-msg__message">
<span class="chat-msg__text"> <span class="chat-msg__text">But soft, what light through yonder window breaks?</span>
But soft, what light through yonder window breaks?
</span>
</div> </div>
</div> </div>
</div> </div>
<span class="fa fa-check chat-msg__receipt"></span>
<i title="This message has been edited" class="fa fa-edit chat-msg__edit-modal"></i>
<div class="chat-msg__actions"> <div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button> <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div> </div>
@ -95,12 +94,11 @@
</span> </span>
<div class="chat-msg__body"> <div class="chat-msg__body">
<div class="chat-msg__message"> <div class="chat-msg__message">
<span class="chat-msg__text"> <span class="chat-msg__text">It is the east and Juliet is the sun!</span>
It is the east and Juliet is the sun!
</span>
</div> </div>
</div> </div>
</div> </div>
<span class="fa fa-check chat-msg__receipt"></span>
<div class="chat-msg__actions"> <div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button> <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div> </div>
@ -115,12 +113,11 @@
</span> </span>
<div class="chat-msg__body"> <div class="chat-msg__body">
<div class="chat-msg__message"> <div class="chat-msg__message">
<span class="chat-msg__text"> <span class="chat-msg__text">Arise, fair sun, and kill the envious moon,</span>
Arise, fair sun, and kill the envious moon,
</span>
</div> </div>
</div> </div>
</div> </div>
<span class="fa fa-check chat-msg__receipt"></span>
<div class="chat-msg__actions"> <div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button> <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div> </div>
@ -138,10 +135,7 @@
</span> </span>
<div class="chat-msg__body"> <div class="chat-msg__body">
<div class="chat-msg__message"> <div class="chat-msg__message">
<span class="chat-msg__text"> <span class="chat-msg__text">O Romeo, Romeo! wherefore art thou Romeo? Deny thy father and refuse thy name;</span>
O Romeo, Romeo! wherefore art thou Romeo?
Deny thy father and refuse thy name;
</span>
</div> </div>
</div> </div>
</div> </div>
@ -160,10 +154,7 @@
</span> </span>
<div class="chat-msg__body"> <div class="chat-msg__body">
<div class="chat-msg__message"> <div class="chat-msg__message">
<span class="chat-msg__text"> <span class="chat-msg__text">Or, if thou wilt not, be but sworn my love, And I'll no longer be a Capulet.</span>
Or, if thou wilt not, be but sworn my love,
And I'll no longer be a Capulet.
</span>
</div> </div>
</div> </div>
</div> </div>

View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chatroom Fullscreen</title> <title>Chatroom Fullscreen</title>
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
</head> </head>
<body class="reset"> <body class="reset">
@ -41,8 +41,7 @@
<time class="separator-text" datetime="2018-06-03T00:00:00.000Z"><span>Tue Jun 03 2018</span></time> <time class="separator-text" datetime="2018-06-03T00:00:00.000Z"><span>Tue Jun 03 2018</span></time>
</div> </div>
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;Romeo Montague&quot;"> <div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;Romeo Montague&quot;">Romeo Montague has entered the room</div>
Romeo Montague has entered the room</div>
<div class="message chat-msg chat-msg--action" data-isodate="2018-04-36T18:07:38+02:00"> <div class="message chat-msg chat-msg--action" data-isodate="2018-04-36T18:07:38+02:00">
<div class="chat-msg__content chat-msg__content--action"> <div class="chat-msg__content chat-msg__content--action">
@ -77,8 +76,7 @@
<time class="separator-text" datetime="2018-06-04T00:00:00.000Z"><span>Tue Jun 04 2018</span></time> <time class="separator-text" datetime="2018-06-04T00:00:00.000Z"><span>Tue Jun 04 2018</span></time>
</div> </div>
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;Juliet&quot;"> <div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;Juliet&quot;">Juliet has entered the room</div>
Juliet has entered the room</div>
<div class="message chat-msg"> <div class="message chat-msg">
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas> <canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
@ -114,6 +112,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="message chat-msg chat-msg--followup"> <div class="message chat-msg chat-msg--followup">
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas> <canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
<div class="chat-msg__content"> <div class="chat-msg__content">
@ -141,12 +140,7 @@
</div> </div>
<div class="chat-msg__body"> <div class="chat-msg__body">
<div class="chat-msg__message"> <div class="chat-msg__message">
<div class="chat-msg__text"> <div class="chat-msg__text">O Romeo, Romeo! wherefore art thou Romeo? Deny thy father and refuse thy name; Or, if thou wilt not, be but sworn my love, And I'll no longer be a Capulet.</div>
O Romeo, Romeo! wherefore art thou Romeo?
Deny thy father and refuse thy name;
Or, if thou wilt not, be but sworn my love,
And I'll no longer be a Capulet.
</div>
</div> </div>
<div class="chat-msg__actions"> <div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button> <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
@ -230,10 +224,10 @@
<span class="chat-msg__time">19:49</span> <span class="chat-msg__time">19:49</span>
</div> </div>
<div class="chat-msg__body"> <div class="chat-msg__body">
<i title="This message has been edited" class="fa fa-edit chat-msg__edit-modal"></i>
<div class="chat-msg__message"> <div class="chat-msg__message">
<span class="chat-msg__text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</span> <span class="chat-msg__text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</span>
</div> </div>
<i title="This message has been edited" class="fa fa-edit chat-msg__edit-modal"></i>
<div class="chat-msg__actions"> <div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button> <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div> </div>
@ -250,9 +244,7 @@
</div> </div>
<div class="chat-msg__body"> <div class="chat-msg__body">
<div class="chat-msg__message"> <div class="chat-msg__message">
<span class="chat-msg__text"> <span class="chat-msg__text">Take our good meaning, for our judgment sits. Five times in that ere once in our five wits.</span>
Take our good meaning, for our judgment sits.
Five times in that ere once in our five wits.</span>
</div> </div>
<div class="chat-msg__actions"> <div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button> <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
@ -270,12 +262,7 @@
</span> </span>
<div class="chat-msg__body"> <div class="chat-msg__body">
<div class="chat-msg__message"> <div class="chat-msg__message">
<span class="chat-msg__text"> <span class="chat-msg__text">True, I talk of dreams, Which are the children of an idle brain, Begot of nothing but vain fantasy, Which is as thin of substance as the air And more inconstant than the wind, who wooes Even now the frozen bosom of the north, And, being anger'd, puffs away from thence, Turning his face to the dew-dropping south.</span> </div>
True, I talk of dreams, Which are the children of an idle brain, Begot of nothing but vain fantasy,
Which is as thin of substance as the air And more inconstant than the wind, who wooes
Even now the frozen bosom of the north, And, being anger'd, puffs away from thence,
Turning his face to the dew-dropping south.</span>
</div>
<div class="chat-msg__actions"> <div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button> <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div> </div>

View File

@ -6,7 +6,7 @@
<title>Login Fullscreen</title> <title>Login Fullscreen</title>
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
</head> </head>
<body> <body>

View File

@ -4,8 +4,8 @@
<head> <head>
<title>Converse.js Live Mockup</title> <title>Converse.js Live Mockup</title>
<meta name="description" content="Converse.js: A chat client for your website" /> <meta name="description" content="Converse.js: A chat client for your website" />
<link type="text/css" rel="stylesheet" media="screen" href="../css/website.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../dist/website.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../dist/converse.css" />
</head> </head>
<body> <body>

View File

@ -5,8 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Overlayed</title> <title>Login Overlayed</title>
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
</head> </head>
<body class="reset"> <body class="reset">

View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Overlayed chats</title> <title>Overlayed chats</title>
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
</head> </head>
<body style="background-color: #578EA9"> <body style="background-color: #578EA9">

View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Converse</title> <title>Converse</title>
<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/converse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="dist/converse.css" />
<script src="node_modules/hellojs/dist/hello.all.js"></script> <script src="node_modules/hellojs/dist/hello.all.js"></script>
</head> </head>
<body> <body>