Accueil Explorer Aide
S'inscrire Connexion
im-changing.ru
/
converse.js
miroir de https://github.com/conversejs/converse.js.git
2
0
Fork 0
Fichiers Tickets 0 Wiki
Parcourir la source

Update the demos with the latest markup

JC Brand il y a 2 semaines
Parent
d545f904ef
commit
9af3b5b1fb
5 fichiers modifiés avec 65 ajouts et 142 suppressions
Vue unifiée Afficher les stats Diff
  1. 3 39
      demo/anonymous.html
  2. 32 43
      demo/embedded.html
  3. 5 48
      demo/index.html
  4. 24 12
      index.html
  5. 1 0
      src/shared/styles/website.scss

+ 3 - 39
demo/anonymous.html
Voir le fichier 

@@ -24,16 +24,7 @@
 
 
 
 <body id="page-top" data-spy="scroll" class="converse-website">
 
 <body id="page-top" data-spy="scroll" class="converse-website">
 
 <section class="section-wrapper">
 
 <section class="section-wrapper">
 
-    <nav class="navbar sticky-top navbar-expand-lg" role="navigation">
 
-        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
 
-            <span class="page-scroll">
 
-                <a class="navbar-brand" href="/"><span class="converse-brand-heading">Home</span></a>
 
-                <a class="navbar-brand" href="/demo"><span class="converse-brand-heading">Demos</span></a>
 
-            </span>
 
-        </div>
 
-    </nav>
 
-
 
-    <section id="intro" class="intro" class="container">
 
+    <section id="intro" class="intro text-center" class="container">
 
         <div class="row">
 
         <div class="row">
 
             <div class="col-md-12 col-md-offset-2">
 
             <div class="col-md-12 col-md-offset-2">
 
                 <h1 class="brand-heading fade-in">
 
                 <h1 class="brand-heading fade-in">
 
@@ -62,7 +53,7 @@
 
                 </span>
 
                 </span>
 
                 </h1>
 
                 </h1>
 
 
 
-                <p class="intro-text">Anonymous login demo</p>
 
+                <h3 class="mt-5">Anonymous login demo</h3>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </section>
 
     </section>
 
@@ -70,35 +61,8 @@
 
 </body>
 
 </body>
 
 
 
 <script>
 
 <script>
 
-    /*
 
-    @licstart
 
-    This is free and unencumbered software released into the public domain.
 
-
 
-    Anyone is free to copy, modify, publish, use, compile, sell, or
 
-    distribute this software, either in source code form or as a compiled
 
-    binary, for any purpose, commercial or non-commercial, and by any
 
-    means.
 
-
 
-    In jurisdictions that recognize copyright laws, the author or authors
 
-    of this software dedicate any and all copyright interest in the
 
-    software to the public domain. We make this dedication for the benefit
 
-    of the public at large and to the detriment of our heirs and
 
-    successors. We intend this dedication to be an overt act of
 
-    relinquishment in perpetuity of all present and future rights to this
 
-    software under copyright law.
 
-
 
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 
-    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 
-    MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 
-    IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
 
-    OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
 
-    ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 
-    OTHER DEALINGS IN THE SOFTWARE.
 
-
 
-    For more information, please refer to <http://unlicense.org/>
 
-    @licend
 
-	*/
 
         converse.initialize({
 
         converse.initialize({
 
+            view_mode: 'overlayed',
 
             allow_logout: false, // No point in logging out when we have auto_login as true.
 
             allow_logout: false, // No point in logging out when we have auto_login as true.
 
             allow_muc_invitations: false, // Doesn't make sense to allow because only
 
             allow_muc_invitations: false, // Doesn't make sense to allow because only
 
                                           // roster contacts can be invited
 
                                           // roster contacts can be invited

+ 32 - 43
demo/embedded.html
Voir le fichier 

@@ -31,50 +31,39 @@
 
 
 
 <body id="page-top" data-spy="scroll" class="converse-website">
 
 <body id="page-top" data-spy="scroll" class="converse-website">
 
 <section class="section-wrapper">
 
 <section class="section-wrapper">
 
-    <nav class="navbar sticky-top navbar-expand-lg" role="navigation">
 
-        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
 
-            <span class="page-scroll">
 
-                <a class="navbar-brand" href="/"><span class="converse-brand-heading">Home</span></a>
 
-		<a class="navbar-brand" href="/demo"><span class="converse-brand-heading">Demos</span></a>
 
-            </span>
 
-        </div>
 
-    </nav>
 
-    <section class="intro">
 
-        <div class="intro-body">
 
-            <div class="container">
 
-                <div class="row">
 
-                    <div class="col-md-12">
 
-			<h1 class="brand-heading fade-in" style="margin: 1.5em 0 0 0">
 
-			    <svg class="converse-svg-logo"
 
-				xmlns:svg="http://www.w3.org/2000/svg"
 
-				xmlns="http://www.w3.org/2000/svg"
 
-				xmlns:xlink="http://www.w3.org/1999/xlink"
 
-				viewBox="0 0 364 364">
 
+    <section id="intro" class="intro text-center" class="container">
 
+        <div class="row">
 
+            <div class="col-md-12 col-md-offset-2">
 
+                <h1 class="brand-heading fade-in">
 
+                    <svg class="converse-svg-logo"
 
+                        xmlns:svg="http://www.w3.org/2000/svg"
 
+                        xmlns="http://www.w3.org/2000/svg"
 
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
 
+                        viewBox="0 0 364 364">
 
+                    <title>Converse</title>
 
+                    <g class="cls-1" id="g904">
 
+                        <g data-name="Layer 2">
 
+                            <g data-name="Layer 7">
 
+                                <path
 
+                                    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" />
 
+                                <path
 
+                                    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" />
 
+                            </g>
 
+                        </g>
 
+                    </g>
 
+                </svg>
 
+                <span class="brand-heading__text">
 
+                    <span>converse<span class="subdued">.js</span></span>
 
+                    <p class="byline">messaging freedom</p>
 
+                </span>
 
+                </h1>
 
+
 
+                <h3 class="mt-5">Embedded groupchat demo</h3>
 
 
 
-				<title>Home</title>
 
-				<g class="cls-1" id="g904">
 
-				    <g data-name="Layer 2">
 
-					<g data-name="Layer 7">
 
-					    <path
 
-						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" />
 
-					    <path
 
-						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" />
 
-					</g>
 
-				    </g>
 
-				</g>
 
-			    </svg>
 
-			    <span class="brand-heading__text">
 
-				<span>converse<span class="subdued">.js</span></span>
 
-				<p class="byline">messaging freedom</p>
 
-			    </span>
 
-			</h1>
 
-                        <p class="intro-text">Embedded MUC chat demo</p>
 
-                        <div class="converse-container">
 
-                            <converse-root></converse-root>
 
-                        </div>
 
-                    </div>
 
+                <div class="converse-container mx-auto" style="width: 50vw"">
 
+                    <converse-root></converse-root>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>

+ 5 - 48
demo/index.html
Voir le fichier 

@@ -24,15 +24,7 @@
 
 
 
 <body id="page-top" data-spy="scroll" class="converse-website">
 
 <body id="page-top" data-spy="scroll" class="converse-website">
 
 <section class="section-wrapper">
 
 <section class="section-wrapper">
 
-    <nav class="navbar sticky-top navbar-expand-lg" role="navigation">
 
-        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
 
-            <span class="page-scroll">
 
-                <a class="navbar-brand" href="/"><span class="converse-brand-heading">Home</span></a>
 
-            </span>
 
-        </div>
 
-    </nav>
 
-
 
-    <section id="intro" class="intro" class="container">
 
+    <section id="intro" class="intro text-center" class="container">
 
         <div class="row">
 
         <div class="row">
 
             <div class="col-md-12 col-md-offset-2">
 
             <div class="col-md-12 col-md-offset-2">
 
                 <h1 class="brand-heading fade-in">
 
                 <h1 class="brand-heading fade-in">
 
@@ -41,7 +33,7 @@
 
                         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>Home</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">
 
@@ -61,9 +53,10 @@
 
                 </span>
 
                 </span>
 
                 </h1>
 
                 </h1>
 
 
 
-                <p class="intro-text">Demos:</p>
 
+                <h3 class="mt-5">Demos</h3>
 
+
 
                 <p class="intro-text">
 
                 <p class="intro-text">
 
-                    <ul style="list-style: none; font-size: 22px;">
 
+                    <ul class="list-group" style="list-style: none">
 
                         <li><a href="/fullscreen.html">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>
 
@@ -72,42 +65,6 @@
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </section>
 
     </section>
 
-    </section>
 
 </section>
 
 </section>
 
 </body>
 
 </body>
 
-
 
-<script>
 
-    /*
 
-    @licstart
 
-    This is free and unencumbered software released into the public domain.
 
-
 
-    Anyone is free to copy, modify, publish, use, compile, sell, or
 
-    distribute this software, either in source code form or as a compiled
 
-    binary, for any purpose, commercial or non-commercial, and by any
 
-    means.
 
-
 
-    In jurisdictions that recognize copyright laws, the author or authors
 
-    of this software dedicate any and all copyright interest in the
 
-    software to the public domain. We make this dedication for the benefit
 
-    of the public at large and to the detriment of our heirs and
 
-    successors. We intend this dedication to be an overt act of
 
-    relinquishment in perpetuity of all present and future rights to this
 
-    software under copyright law.
 
-
 
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 
-    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 
-    MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 
-    IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
 
-    OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
 
-    ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 
-    OTHER DEALINGS IN THE SOFTWARE.
 
-
 
-    For more information, please refer to <https://unlicense.org/>
 
-    @licend
 
-    */
 
-    converse.initialize({
 
-        // Please use this connection manager only for testing purposes
 
-        bosh_service_url: 'https://conversejs.org/http-bind/'
 
-    });
 
-</script>
 
 </html>
 
 </html>

+ 24 - 12
index.html
Voir le fichier 

@@ -135,19 +135,31 @@
 
 
 
     <section id="about" class="content-section">
 
     <section id="about" class="content-section">
 
         <div class="container mx-auto w-50">
 
         <div class="container mx-auto w-50">
 
-            <div class="row row-cols-1 g-2">
 
-                <div class="col text-center">
 
-                    <div class="h-100 p-3 bg-light rounded-3">
 
-                        <h2>Why Choose Converse?</h2>
 
-                        <p>Converse is the leading open-source XMPP chat solution for developers, communities, organizations and businesses needing feature-rich, secure and customizable messaging.</p>
 
+            <div class="row row-cols-1 row-cols-lg-2 g-2">
 
+                <div class="col">
 
+                    <div class="h-100 p-3">
 
+                        <h2>Why Choose Converse? 🤔</h2>
 
+                        <p>Converse is the leading open-source XMPP chat solution for developers, communities, organizations and businesses needing secure and customizable messaging.</p>
 
                         <p>Get a feature-rich chat solution with just a few lines of JavaScript.</p>
 
                         <p>Get a feature-rich chat solution with just a few lines of JavaScript.</p>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
+                <div class="col">
 
+                    <div class="h-100">
 
+                        <h2>Demos:</h2>
 
+                        <p>
 
+                            <ul class="list-group">
 
+                                <li><a href="/fullscreen.html"><strong>Standalone app</strong> (in fullscreen view mode)</a></li>
 
+                                <li><a href="demo/anonymous.html"><strong>Anonymous login</strong> (in overlayed view mode)</a></li>
 
+                                <li><a href="demo/embedded.html"><strong>Single chat</strong> (in embedded view mode)</a></li>
 
+                            </ul>
 
+                        </p>
 
+                    </div>
 
+                </div>
 
             </div>
 
             </div>
 
 
 
             <div class="row row-cols-1 row-cols-lg-2 g-2">
 
             <div class="row row-cols-1 row-cols-lg-2 g-2">
 
                 <div class="col">
 
                 <div class="col">
 
-                    <div class="h-100 p-3 bg-light">
 
+                    <div class="h-100 p-3">
 
                         <h2>Powerful Features 💪</h2>
 
                         <h2>Powerful Features 💪</h2>
 
                         <ul class="list-group">
 
                         <ul class="list-group">
 
                             <li><strong>Flexible Deployment</strong> - Embed as an overlayed chat, an embedded widget or use as a full-page app.</li>
 
                             <li><strong>Flexible Deployment</strong> - Embed as an overlayed chat, an embedded widget or use as a full-page app.</li>
 
@@ -180,12 +192,12 @@
 
                         <div class="h-100">
 
                         <div class="h-100">
 
                             <h2>Developer Friendly 🔨</h2>
 
                             <h2>Developer Friendly 🔨</h2>
 
                             <p>Built by developers, for developers
 
                             <p>Built by developers, for developers
 
-                            <ul class="list-group">
 
-                                <li><strong>No vendor lock-in</strong> - <a href="https://github.com/conversejs/converse.js/blob/master/LICENSE" target="_blank" rel="noopener">MPLv2</a> licensed</li>
 
-                                <li><strong>Plugin architecture</strong> - Enables easy customization</li>
 
-                                <li><strong>Comprehensive <a href="/docs/html/index.html">documentation</a> and <a href="/demo">demos</a></strong></li>
 
-                                <li>Active <strong>community</strong> with 130+ contributors</li>
 
-                            </ul>
 
+                                <ul class="list-group">
 
+                                    <li><strong>No vendor lock-in</strong> - <a href="https://github.com/conversejs/converse.js/blob/master/LICENSE" target="_blank" rel="noopener">MPLv2</a> licensed</li>
 
+                                    <li><strong>Plugin architecture</strong> - Enables easy customization</li>
 
+                                    <li><strong>Comprehensive <a href="/docs/html/index.html">documentation</a></strong></li>
 
+                                    <li>Active <strong>community</strong> with 130+ contributors</li>
 
+                                </ul>
 
                             </p>
 
                             </p>
 
                         </div>
 
                         </div>

+ 1 - 0
src/shared/styles/website.scss
Voir le fichier 

@@ -126,6 +126,7 @@ a {
 
         linear-gradient(45deg, #85505f, #384955, #655361);
 
         linear-gradient(45deg, #85505f, #384955, #655361);
 
     p {
 
     p {
 
         opacity: 0.9;
 
         opacity: 0.9;
 
+        line-height: 1.3em;
 
     }
 
     }
 
 }
 
 }