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. ::
make dist/converse.min.js
make css/converse.min.css
make dist/converse.min.css
.. note::

View File

@ -1,23 +1,27 @@
<!DOCTYPE html>
<html lang=en>
<head>
<title>Converse.js</title>
<title>Converse</title>
<meta 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="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="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" />
<script type="text/javascript" src="analytics.js"></script>
<meta name="keywords" content="xmpp chat webchat converse.js Converse" />
<!-- These files are NOT needed when using converse.js in your own project. -->
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/font-awesome.min.css" />
<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>
<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]>
<link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
<script src="dist/converse.js"></script>
<link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/4.2.0/css/converse.min.css" />
<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]>
</head>

View File

@ -5,11 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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="../../css/converse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
</head>
<body class="reset">
<div id="conversejs" class="fullscreen converse-fullscreen">
<div id="conversejs" class="fullscreen converse-fullscreen">
<div class="sidebar"></div>
<div class="converse-chatboxes row no-gutters">
<div id="controlbox" class="chatbox">
@ -50,12 +50,11 @@
</span>
<div class="chat-msg__body">
<div class="chat-msg__message">
<span class="chat-msg__text">
He jests at scars that never felt a wound.
</span>
<span class="chat-msg__text">He jests at scars that never felt a wound.</span>
</div>
</div>
</div>
<span class="fa fa-check chat-msg__receipt"></span>
<div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
@ -75,12 +74,12 @@
</span>
<div class="chat-msg__body">
<div class="chat-msg__message">
<span class="chat-msg__text">
But soft, what light through yonder window breaks?
</span>
<span class="chat-msg__text">But soft, what light through yonder window breaks?</span>
</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">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
@ -95,12 +94,11 @@
</span>
<div class="chat-msg__body">
<div class="chat-msg__message">
<span class="chat-msg__text">
It is the east and Juliet is the sun!
</span>
<span class="chat-msg__text">It is the east and Juliet is the sun!</span>
</div>
</div>
</div>
<span class="fa fa-check chat-msg__receipt"></span>
<div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
@ -115,12 +113,11 @@
</span>
<div class="chat-msg__body">
<div class="chat-msg__message">
<span class="chat-msg__text">
Arise, fair sun, and kill the envious moon,
</span>
<span class="chat-msg__text">Arise, fair sun, and kill the envious moon,</span>
</div>
</div>
</div>
<span class="fa fa-check chat-msg__receipt"></span>
<div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
@ -138,10 +135,7 @@
</span>
<div class="chat-msg__body">
<div class="chat-msg__message">
<span class="chat-msg__text">
O Romeo, Romeo! wherefore art thou Romeo?
Deny thy father and refuse thy name;
</span>
<span class="chat-msg__text">O Romeo, Romeo! wherefore art thou Romeo? Deny thy father and refuse thy name;</span>
</div>
</div>
</div>
@ -160,10 +154,7 @@
</span>
<div class="chat-msg__body">
<div class="chat-msg__message">
<span class="chat-msg__text">
Or, if thou wilt not, be but sworn my love,
And I'll no longer be a Capulet.
</span>
<span class="chat-msg__text">Or, if thou wilt not, be but sworn my love, And I'll no longer be a Capulet.</span>
</div>
</div>
</div>
@ -198,7 +189,7 @@
</div>
</div>
<div id="converse-modals" class="modals"></div>
</div>
</div>
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>

View File

@ -5,11 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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="../../css/converse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
</head>
<body class="reset">
<div id="conversejs" class="fullscreen converse-fullscreen">
<div id="conversejs" class="fullscreen converse-fullscreen">
<div class="sidebar"></div>
<div class="converse-chatboxes row no-gutters">
<div id="controlbox" class="chatbox">
@ -41,8 +41,7 @@
<time class="separator-text" datetime="2018-06-03T00:00:00.000Z"><span>Tue Jun 03 2018</span></time>
</div>
<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>
<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>
<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">
@ -77,8 +76,7 @@
<time class="separator-text" datetime="2018-06-04T00:00:00.000Z"><span>Tue Jun 04 2018</span></time>
</div>
<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>
<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>
<div class="message chat-msg">
<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 class="message chat-msg chat-msg--followup">
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
<div class="chat-msg__content">
@ -141,12 +140,7 @@
</div>
<div class="chat-msg__body">
<div class="chat-msg__message">
<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>
<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>
</div>
<div class="chat-msg__actions">
<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>
</div>
<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">
<span class="chat-msg__text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</span>
</div>
<i title="This message has been edited" class="fa fa-edit chat-msg__edit-modal"></i>
<div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
@ -250,9 +244,7 @@
</div>
<div class="chat-msg__body">
<div class="chat-msg__message">
<span class="chat-msg__text">
Take our good meaning, for our judgment sits.
Five times in that ere once in our five wits.</span>
<span class="chat-msg__text">Take our good meaning, for our judgment sits. Five times in that ere once in our five wits.</span>
</div>
<div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
@ -270,12 +262,7 @@
</span>
<div class="chat-msg__body">
<div class="chat-msg__message">
<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>
<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>
<div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
@ -523,9 +510,9 @@
</div>
</div>
</div>
</div>
<div id="converse-modals" class="modals"></div>
</div>
</div>
<div id="converse-modals" class="modals"></div>
</div>
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>

View File

@ -6,7 +6,7 @@
<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/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>
<body>

View File

@ -4,8 +4,8 @@
<head>
<title>Converse.js Live Mockup</title>
<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="../css/converse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../dist/website.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../dist/converse.css" />
</head>
<body>

View File

@ -5,8 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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="../../css/converse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../../dist/converse.css" />
</head>
<body class="reset">

View File

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

View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Converse</title>
<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>
</head>
<body>