Skip to content

C
converse.js
Commit 3cee6a56 authored by JC Brand's avatar JC Brand
Browse files
Options

mockup.css is no more.

parent 97e31995
Expand all Show whitespace changes
Inline Side-by-side
Showing with 921 additions and 1030 deletions
css/converse.css
View file @ 3cee6a56
This diff is collapsed.
css/inverse.css
View file @ 3cee6a56
This diff is collapsed.
mockup/chatbox.html
View file @ 3cee6a56
...@@ -7,12 +7,11 @@ ...@@ -7,12 +7,11 @@
<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/inverse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
</head> </head>
<body> <body>
<div class="container-fluid"> <div class="container-fluid">
<div id="conversejs" class="fullscreen chatbox"> <div id="conversejs" class="fullscreen">
<div id="controlbox" class="chatbox"> <div id="controlbox" class="chatbox">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="controlbox-panes"> <div class="controlbox-panes">
......
mockup/chatroom.html
View file @ 3cee6a56
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
<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/inverse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
</head> </head>
<body> <body>
......
mockup/converse.html
View file @ 3cee6a56
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
<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="../../css/converse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
</head> </head>
<body style="background-color: #578EA9"> <body style="background-color: #578EA9">
...@@ -184,7 +183,7 @@ ...@@ -184,7 +183,7 @@
</ul> </ul>
</div> </div>
<div class="form-group"> <div class="form-group">
<textarea class="chat-textrea form-control" placeholder="Message"></textarea> <textarea class="chat-textarea form-control" placeholder="Message"></textarea>
</div> </div>
</form> </form>
</div> </div>
......
mockup/css/mockup.css deleted 100644 → 0
View file @ 97e31995
@media screen and (max-width: 767px) {
#conversejs.fullscreen.chatbox > .chatbox,
#conversejs.fullscreen.chatbox .chatroom {
width: calc(100% - 50px);
}
#conversejs.fullscreen.chatbox.sidebar-open #controlbox #users {
display: block;
}
#conversejs.fullscreen.chatbox.sidebar-open > .chatbox:not(#controlbox),
#conversejs.fullscreen.chatbox.sidebar-open .chatroom {
display: none;
}
#conversejs.fullscreen.chatbox .chatbox .box-flyout {
left: 0;
}
#conversejs.login {
margin: 1em;
}
#conversejs.login #controlbox {
margin: 0;
}
#conversejs.login #controlbox .controlbox-pane {
font-size: 1.15em;
}
#conversejs.login #controlbox.chatbox {
width: 100%;
}
#conversejs.login .chatbox .box-flyout {
height: calc(100vh - 20px);
width: 100%;
bottom: 0;
left: 0;
}
#conversejs.sidebar-open #controlbox #users {
display: block;
}
#conversejs.sidebar-open > .chatbox:not(#controlbox) {
display: none;
}
#conversejs #controlbox #users {
position: absolute;
top: 0;
left: 50px;
display: none;
width: calc(100% - 50px);
}
#conversejs #controlbox .box-flyout {
width: 100%;
left: 0;
}
#conversejs #controlbox .sidebar {
display: block;
}
#conversejs #users.controlbox-pane {
height: 100vh;
}
#conversejs #login-dialog .pure-form.converse-form {
padding: 3em 2em 3em;
}
#conversejs > .chatbox {
width: calc(100% - 50px);
}
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
white-space: normal;
}
#conversejs .chatbox .box-flyout {
left: 50px;
bottom: 0;
width: calc(100% - 50px);
height: 100vh;
box-shadow: none;
}
#conversejs .chatbox .box-flyout .chatroom-body .chat-area {
height: calc(100vh - 55px);
}
}
@media screen and (min-width: 576px) {
#conversejs .offset-sm-2 {
margin-left: 16.666667%;
}
}
@media screen and (min-width: 768px) {
#conversejs .offset-md-2 {
margin-left: 16.666667%;
}
#conversejs .offset-md-3 {
margin-left: 25%;
}
}
@media screen and (min-width: 992px) {
#conversejs .offset-lg-2 {
margin-left: 16.666667%;
}
#conversejs .offset-lg-3 {
margin-left: 25%;
}
}
@media screen and (min-width: 1200px) {
#conversejs .offset-xl-2 {
margin-left: 16.666667%;
}
}
@media screen and (max-height: 450px) {
#conversejs {
left: 0;
}
}
@media screen and (max-width: 480px) {
#conversejs {
width: auto;
}
}
mockup/fullscreen-login.html
View file @ 3cee6a56
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
<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/inverse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
</head> </head>
<body> <body>
...@@ -16,7 +15,7 @@ ...@@ -16,7 +15,7 @@
</div> </div>
<div class="container-fluid"> <div class="container-fluid">
<div id="conversejs" class="fullscreen login"> <div id="conversejs" class="fullscreen">
<div id="controlbox" class="chatbox"> <div id="controlbox" class="chatbox">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="controlbox-panes"> <div class="controlbox-panes">
......
mockup/head.html deleted 100644 → 0
View file @ 97e31995
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>inVerse Mockups</title>
<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" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
});
</script>
mockup/less/mockup.less deleted 100644 → 0
View file @ 97e31995
// overrides for the base css of converse/inverse
@link-color: #007bff;
@bg-color: #578ea9;
body {
.brand-heading {
margin: auto;
font-size: 6em;
font-weight: bold;
.icon-conversejs {
font-size: 0.88em;
}
}
}
.converse-bg {
position:relative; height:100vh; text-align:center; color:#fff;
.brand-heading { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
}
#conversejs {
&.fullscreen {
width:100%; height:100%; right:0; bottom:0; color:@text-color;
&.login {
width:calc(~"100vw - 20px"); height:calc(~"100vh - 20px"); margin:10px;
#controlbox #login-dialog {
height:100%; border-radius:5px;
.brand-heading { font-size:6em; }
.converse-form { margin:0; padding:3em 2em 3em; }
}
}
&.chatbox {
margin:0;
.chatbox { width:100%; }
.chatbox .box-flyout { width:100%; height:100vh; }
}
#controlbox {
width:100%; margin-right:0;
.box-flyout { width:100%; }
.controlbox-pane { height:100vh; border-radius:0; }
}
.chatroom .box-flyout .chatroom-body .chat-area { height:calc(~"100vh - 95px"); }
}
.chatbox {
.chat-content { padding:0.5em; }
.chat-body {
background:#fff;
.chat-message {
margin:0.3em;
canvas { vertical-align:middle; background:#777; }
.chat-msg-me canvas { background:@bg-color; }
.chat-msg-them canvas { background:#e77051; }
.chat-msg-author { float:none; }
}
}
form.sendXMPPMessage {
textarea { resize:none; border:none; border-top-left-radius:0; border-top-right-radius:0; }
.chat-toolbar {
a, li.toggle-toolbar-menu { color:@text-color; }
}
}
}
.chatroom .box-flyout .chatroom-body {
.chat-area {
min-width:100%; height:395px;
.chat-content { padding:0.5em; }
}
.chat-info { color:#fff; line-height:normal; }
.occupants {
.chatroom-features { bottom:0; width:auto; }
ul li.feature { float:left; margin-right:0.5em; padding-right:0; font-size:1em; cursor:help; }
}
}
#users {
position:relative;
#chatrooms {
padding-bottom:5px; border-bottom:1px solid #aaa;
.rooms-list-container dl.rooms-list {
.available-chatroom, .open-chatroom { padding:0.1em 0; }
a + a { line-height:22px; }
}
}
#chatrooms, #contacts { margin-top:0.75em; }
.userinfo {
padding-bottom:10px; border-bottom:1px solid #aaa;
.username { margin-left:5px; }
.d-flex { margin-bottom:2px; }
}
&.controlbox-pane { height:450px; text-align:left; }
.chatbox-btn { margin:0; color:@link-color; }
}
}
@media screen and (max-width: 575px) {
body {
.brand-heading { font-size:3.75em; }
}
#conversejs {
&.fullscreen.login, & {
#controlbox #login-dialog .brand-heading { font-size:3.75em; }
}
.chatbox .chat-body { border-radius:7px; }
.flyout { border-radius:4px; }
}
}
@media screen and (max-width: 767px) {
#conversejs {
left:0; margin:0;
&.fullscreen {
&.chatbox {
> .chatbox, .chatroom { width:calc(~"100% - 50px"); }
&.sidebar-open {
#controlbox #users { display:block; }
> .chatbox:not(#controlbox), .chatroom { display:none; }
}
.chatbox .box-flyout { left:0; }
}
}
&.login {
margin:10px;
#controlbox {
margin:0;
.controlbox-pane { font-size:1.15em; }
&.chatbox { width:100%; }
}
.chatbox .box-flyout { height:calc(~"100vh - 20px"); width:100%; bottom:0; left:0; }
}
&.sidebar-open {
#controlbox #users { display:block; }
> .chatbox:not(#controlbox) { display:none; }
}
#controlbox {
#users {
position:absolute; top:0; left:50px; display:none;
width:calc(~"100% - 50px");
}
.box-flyout { width:100%; left:0; }
.sidebar { display:block; }
}
#users.controlbox-pane { height:100vh; }
#login-dialog .pure-form.converse-form { padding:3em 2em 3em; }
> .chatbox { width:calc(~"100% - 50px"); }
.chatbox .chat-body .chat-message .chat-msg-author { white-space:normal; }
.chatbox .box-flyout {
left:50px; bottom:0; width:calc(~"100% - 50px"); height:100vh; box-shadow:none;
.chatroom-body .chat-area { height:calc(~"100vh - 55px"); }
}
}
}
@media screen and (min-width: 576px) {
#conversejs {
.offset-sm-2 { margin-left: 16.666667%; }
}
}
@media screen and (min-width: 768px) {
#conversejs {
.offset-md-2 { margin-left: 16.666667%; }
.offset-md-3 { margin-left: 25%; }
}
}
@media screen and (min-width: 992px) {
#conversejs {
.offset-lg-2 { margin-left: 16.666667%; }
.offset-lg-3 { margin-left: 25%; }
}
}
@media screen and (min-width: 1200px) {
#conversejs {
.offset-xl-2 { margin-left: 16.666667%; }
}
}
@media screen and (max-height: 450px) {
#conversejs { left:0; }
}
@media screen and (max-width: 480px) {
#conversejs { width:auto; }
}
mockup/overlayed-login.html
View file @ 3cee6a56
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1> <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
</div> </div>
<div id="conversejs" class="login"> <div id="conversejs">
<div id="controlbox" class="chatbox"> <div id="controlbox" class="chatbox">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="controlbox-panes"> <div class="controlbox-panes">
......
sass/_chatbox.scss
View file @ 3cee6a56
...@@ -235,7 +235,7 @@ ...@@ -235,7 +235,7 @@
position: relative; position: relative;
} }
} }
form.sendXMPPMessage { .sendXMPPMessage {
-moz-background-clip: padding; -moz-background-clip: padding;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
@include border-bottom-radius($chatbox-border-radius); @include border-bottom-radius($chatbox-border-radius);
...@@ -253,6 +253,7 @@ ...@@ -253,6 +253,7 @@
@media screen and (max-width: $mobile-portrait-length) { @media screen and (max-width: $mobile-portrait-length) {
width: 100%; width: 100%;
} }
.chat-textarea { .chat-textarea {
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
...@@ -263,6 +264,7 @@ ...@@ -263,6 +264,7 @@
border: none; border: none;
resize: none; resize: none;
} }
.send-button { .send-button {
position: absolute; position: absolute;
left: $send-button-margin; left: $send-button-margin;
...@@ -438,3 +440,33 @@ ...@@ -438,3 +440,33 @@
} }
} }
} }
@media screen and (max-width: 767px) {
#conversejs {
#login-dialog {
.pure-form.converse-form {
padding: 3em 2em 3em;
}
}
}
> .chatbox {
width: calc(100% - 50px);
}
.chatbox {
.chat-body {
.chat-message {
.chat-msg-author {
white-space: normal;
}
}
}
.box-flyout {
left: 50px;
bottom: 0;
width: calc(100% - 50px);
height: 100vh;
box-shadow: none;
}
}
}
sass/_chatrooms.scss
View file @ 3cee6a56
...@@ -68,6 +68,8 @@ ...@@ -68,6 +68,8 @@
background-color: white; background-color: white;
border-top: 0; border-top: 0;
width: 100%; width: 100%;
overflow: hidden;
.chat-info { .chat-info {
color: white; color: white;
line-height: normal; line-height: normal;
...@@ -97,10 +99,11 @@ ...@@ -97,10 +99,11 @@
} }
.chat-area { .chat-area {
word-wrap: break-word; word-wrap: break-word;
height: 100%;
width: 100%; width: 100%;
float: left; float: left;
min-width: $chat-width; min-width: $chat-width;
height: calc(100% - 95px);
.new-msgs-indicator { .new-msgs-indicator {
background-color: $chatroom-head-color; background-color: $chatroom-head-color;
max-width: 70%; max-width: 70%;
...@@ -243,7 +246,7 @@ ...@@ -243,7 +246,7 @@
} }
} }
form.sendXMPPMessage { .sendXMPPMessage {
.chat-toolbar { .chat-toolbar {
background-color: $chatroom-toolbar-color; background-color: $chatroom-toolbar-color;
} }
...@@ -264,3 +267,17 @@ ...@@ -264,3 +267,17 @@
} }
} }
} }
@media screen and (max-width: 767px) {
#conversejs {
.chatbox {
.box-flyout {
.chatroom-body {
.chat-area {
height: calc(100vh - 55px);
}
}
}
}
}
}
sass/_controlbox.scss
View file @ 3cee6a56
...@@ -514,3 +514,42 @@ ...@@ -514,3 +514,42 @@
} }
} }
} }
@media screen and (max-width: 767px) {
#conversejs {
#controlbox {
.box-flyout {
width: 100%;
left: 0;
}
.sidebar {
display: block;
}
#users {
position: absolute;
top: 0;
left: 50px;
display: none;
width: calc(100% - 50px);
&.controlbox-pane {
height: 100vh;
}
}
}
&.sidebar-open {
> .chatbox:not(#controlbox) {
display: none;
}
#controlbox {
#users {
display: block;
}
}
}
}
}
sass/_core.scss
View file @ 3cee6a56
...@@ -402,12 +402,40 @@ body { ...@@ -402,12 +402,40 @@ body {
} }
} }
@media screen and (max-width: 767px) {
@media screen and (min-width: 576px) {
#conversejs .offset-sm-2 {
margin-left: 16.666667%;
}
}
@media screen and (min-width: 768px) {
#conversejs .offset-md-2 {
margin-left: 16.666667%;
}
#conversejs .offset-md-3 {
margin-left: 25%;
}
}
@media screen and (min-width: 992px) {
#conversejs .offset-lg-2 {
margin-left: 16.666667%;
}
#conversejs .offset-lg-3 {
margin-left: 25%;
}
}
@media screen and (min-width: 1200px) {
#conversejs .offset-xl-2 {
margin-left: 16.666667%;
}
}
@media screen and (max-height: 450px) {
#conversejs { #conversejs {
&.login { left: 0;
margin: 0;
width: 100%;
height: 100%;
} }
}
@media screen and (max-width: 480px) {
#conversejs {
width: auto;
} }
} }
sass/inverse/_core.scss
View file @ 3cee6a56
...@@ -44,12 +44,6 @@ body { ...@@ -44,12 +44,6 @@ body {
left: 0; left: 0;
right: 0; right: 0;
&.login {
width: calc(100vw - 1em);
height: calc(100vh - 1em);
margin: 0.5em;
}
form { form {
&.pure-form.converse-form { &.pure-form.converse-form {
margin: 1em; margin: 1em;
...@@ -77,11 +71,9 @@ body { ...@@ -77,11 +71,9 @@ body {
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
#conversejs.fullscreen { #conversejs.fullscreen {
&.login {
background-color: white; background-color: white;
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
}
} }
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