Skip to content

Commit c71e75f

Browse files
billbabillba
authored
Merge pull request #360 from danmarshall/sass
Responsive cards
2 parents 93a71a2 + 2bc2ff3 commit c71e75f

11 files changed

Lines changed: 343 additions & 149 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@ webpacked
1414
built
1515
botchat.js
1616
botchat.js.map
17+
*.css

‎README.md‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@ Include `botchat.css` and `botchat.js` in your website, e.g.:
3939
BotChat.App({
4040
directLine: { secret: direct_line_secret },
4141
user: { id: 'userid' },
42-
bot: { id: 'botid' }
42+
bot: { id: 'botid' },
43+
resize: 'detect'
4344
}, document.getElementById("bot"));
4445
</script>
4546
</body>
@@ -105,8 +106,6 @@ You may also wish to go so far as to publish your repo as its own full-fledged,
105106

106107
Different projects have different build strategies, yours may vary considerably from the above. If you come up with a different integration approach that you feel would have broad application, please consider filing a [pull request](https://github.com/Microsoft/BotFramework-WebChat/pulls) for this README.
107108

108-
* Go to the next level with [Advanced WebChat](#advanced-webchat)
109-
110109
## Building WebChat
111110

112111
1. Clone (or fork) this repo
@@ -119,14 +118,18 @@ This builds the following:
119118
* `/built/*.d.ts` declarations for TypeScript users - `/built/BotChat.d.ts` is the root
120119
* `/built/*.js.map` sourcemaps for easier debugging
121120
* `/botchat.js` webpacked UMD file containing all dependencies (React, Redux, RxJS, polyfills, etc.)
122-
123-
`/botchat.css` is currently static, but in the future it may be built
121+
* `/botchat.css` base stylesheet
122+
* `/botchat-fullwindow.css` media query stylesheet for a full-window experience
124123

125124
## Customizing WebChat
126125

127126
### Styling
128127

129-
The most obvious place to start is by altering `/botchat.css` to match the look of your site.
128+
In the `/src/scss/` folder you will find the source files for generating `/botchat.css`. Run `npm run build-css` to compile once you've made your changes. For basic branding, change `colors.scss` to match your color scheme. For advanced styling, change `botchat.scss`.
129+
130+
#### Card Sizes / Responsiveness
131+
132+
WebChat strives to use responsive design when possible. As part of this, WebChat cards come in 3 sizes: narrow (216px), normal (320px) and wide (416px). In a full-window chat, these sizes are invoked by a CSS media query in the `/botchat-fullwindow.css` style sheet. You may customize this style sheet for the media query breakpoints in your own application. Or, if your WebChat implementation is not a full-window experience, you can manually invoke card sizes by adding the CSS classes `wc-narrow` and `wc-wide` to the HTML element containing your chat.
130133

131134
### Strings
132135

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"main": "built/BotChat.js",
66
"types": "built/BotChat.d.ts",
77
"scripts": {
8-
"build": "tsc && webpack",
8+
"build-css": "node ./src/scss/compile.js botchat botchat-fullwindow",
9+
"build": "tsc && npm run build-css && webpack",
910
"watch": "npm-run-all -p -r -l tsc-watch webpack-watch",
1011
"tsc-watch": "tsc -w",
1112
"webpack-watch": "webpack -w",
@@ -46,6 +47,7 @@
4647
"deep-freeze": "0.0.1",
4748
"http-server": "^0.9.0",
4849
"mocha": "^3.2.0",
50+
"node-sass": "^4.5.0",
4951
"npm-run-all": "^3.1.2",
5052
"source-map-loader": "^0.1.5",
5153
"ts-loader": "^1.3.3",

‎samples/backchannel/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242

4343
<body>
4444
<h2 style="font-family:Segoe UI;">Type a color into the WebChat!</h2>
45-
<div id="BotChatGoesHere"></div>
45+
<div id="BotChatGoesHere" class="wc-narrow"></div>
4646
<button onclick="postButtonMessage()" style="width:120px;height:60px;padding:20px;margin-left:80px;margin-top:20px;">Click Me!</button>
4747

4848
<script src="../../botchat.js"></script>

samples/standalone/index.html renamed to samples/fullwindow/index.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE html>
22
<!--
3-
This is a sample HTML file which shows how to embed an instance of WebChat. Useful for testing.
3+
This is a sample HTML file which shows how to embed a full-window instance of WebChat.
44
1. Build the project: "npm run build"
55
2. Start a web server: "npm run start"
66
3. Aim your browser at "http://localhost:8000/samples?[parameters as listed below]"
@@ -27,6 +27,7 @@
2727
}
2828
</style>
2929
<link href="../../botchat.css" rel="stylesheet" />
30+
<link href="../../botchat-fullwindow.css" rel="stylesheet" />
3031
</head>
3132
<body>
3233
<div id="BotChatGoesHere"></div>
@@ -56,6 +57,7 @@
5657
user: user,
5758
bot: bot,
5859
locale: params['locale'],
60+
resize: 'window'
5961
// sendTyping: true, // defaults to false. set to true to send 'typing' activities to bot (and other users) when user is typing
6062
}, document.getElementById("BotChatGoesHere"));
6163
</script>

‎samples/sidebar/index.html‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<!--
3+
This is a sample HTML file which shows how to embed a sidebar instance of WebChat.
4+
1. Build the project: "npm run build"
5+
2. Start a web server: "npm run start"
6+
3. Aim your browser at "http://localhost:8000/samples?[parameters as listed below]"
7+
8+
For ease of testing, several parameters can be set in the query string:
9+
* s = Direct Line secret, or
10+
* t = Direct Line token (obtained by calling Direct Line's Generate Token)
11+
* domain = optionally, the URL of an alternate Direct Line endpoint
12+
* webSocket = set to 'true' to use WebSocket to receive messages (currently defaults to false)
13+
* userid, username = id (and optionally name) of bot user
14+
* botid, botname = id (and optionally name) of bot
15+
-->
16+
<html>
17+
<head>
18+
<meta charset="UTF-8" />
19+
<title>Bot Chat</title>
20+
<link href="../../botchat.css" rel="stylesheet" />
21+
<style>
22+
.example p {
23+
width: 300px;
24+
}
25+
26+
.wc-chatview-panel {
27+
border: 1px solid #333;
28+
float: right;
29+
height: 600px;
30+
width: 460px;
31+
margin: 20px 320px;
32+
}
33+
34+
.wc-wide .wc-chatview-panel {
35+
width: 768px;
36+
}
37+
38+
.wc-narrow .wc-chatview-panel {
39+
width: 320px;
40+
}
41+
42+
</style>
43+
44+
<script>
45+
46+
function toggleClassName(className) {
47+
var BotChatGoesHere = document.getElementById('BotChatGoesHere');
48+
49+
['wc-narrow', 'wc-normal', 'wc-wide'].forEach(function (c) { BotChatGoesHere.classList.remove(c) });
50+
51+
BotChatGoesHere.classList.add(className);
52+
}
53+
54+
</script>
55+
56+
</head>
57+
<body>
58+
59+
<section class="example">
60+
<p>
61+
This example app hosts the WebChat control as a sidebar on the page, and may be resized with these toggle buttons:
62+
</p>
63+
<p>
64+
<button onclick="toggleClassName('wc-narrow')">narrow</button>
65+
<button onclick="toggleClassName('wc-normal')">normal</button>
66+
<button onclick="toggleClassName('wc-wide')">wide</button>
67+
</p>
68+
<p>
69+
Important: you will need to set the <b>resize</b> option to <b>'detect'</b> when instantiating the WebChat.
70+
</p>
71+
</section>
72+
73+
<div id="BotChatGoesHere"></div>
74+
<script src="../../botchat.js"></script>
75+
<script>
76+
var params = BotChat.queryParams(location.search);
77+
78+
var user = {
79+
id: params['userid'] || 'userid',
80+
name: params["username"] || 'username'
81+
};
82+
83+
var bot = {
84+
id: params['botid'] || 'botid',
85+
name: params["botname"] || 'botname'
86+
};
87+
88+
window['botchatDebug'] = params['debug'] && params['debug'] === "true";
89+
90+
BotChat.App({
91+
directLine: {
92+
secret: params['s'],
93+
token: params['t'],
94+
domain: params['domain'],
95+
webSocket: params['webSocket'] && params['webSocket'] === "true" // defaults to true
96+
},
97+
user: user,
98+
bot: bot,
99+
locale: params['locale'],
100+
resize: 'detect'
101+
// sendTyping: true, // defaults to false. set to true to send 'typing' activities to bot (and other users) when user is typing
102+
}, document.getElementById("BotChatGoesHere"));
103+
</script>
104+
</body>
105+
</html>

‎src/scss/botchat-fullwindow.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import "card-size";
2+
3+
@media (max-width: 450px) {
4+
5+
@include card-size($card_narrow);
6+
7+
}
8+
9+
@media (min-width: 768px) {
10+
11+
@include card-size($card_wide);
12+
13+
}

0 commit comments

Comments
 (0)