From 9b63d1ffb399c078a93253284913f122740d4bea Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Thu, 4 Jun 2020 01:31:47 -0700 Subject: [PATCH 01/10] initial layout --- webroot/index.html | 166 +++++++++++++++++++++++++-------------------- webroot/js/app.js | 2 +- 2 files changed, 94 insertions(+), 74 deletions(-) diff --git a/webroot/index.html b/webroot/index.html index 4e38ad891..ec0025d10 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -6,6 +6,7 @@ href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> + @@ -15,88 +16,107 @@ -
-
-
- -
- {{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}. -
-
+ +
+
+

+ Maybe a header +

+
+
-
-
-
-
-
- + +
-
-

{{ message.author }}

-

-
-
-
+
+
-
-
- - - +
+ {{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + - -
- -
- -
+
-
-
- + +
+
+
+
+
+
+ + +
+

{{ message.author }}

+

+
+
+
+
+ + + + + + + +
+ +
+ +
+
+ +
+
+ +
+
+
- +
+ + + +
-
- - + + + + \ No newline at end of file diff --git a/webroot/js/app.js b/webroot/js/app.js index 4d11cff65..e745becac 100644 --- a/webroot/js/app.js +++ b/webroot/js/app.js @@ -8,7 +8,7 @@ function setupApp() { }) window.app = new Vue({ - el: "#app", + el: "#info", data: { streamStatus: "", viewerCount: 0, From 35a3a907c598cfc465b77294dffa9b29a7d90be5 Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Thu, 4 Jun 2020 01:32:06 -0700 Subject: [PATCH 02/10] add file --- webroot/styles/layout.css | 87 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 webroot/styles/layout.css diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css new file mode 100644 index 000000000..2691d0c12 --- /dev/null +++ b/webroot/styles/layout.css @@ -0,0 +1,87 @@ +body { + font-size: 14px; + background-color: #ccc; +} +::-webkit-scrollbar { + width: 0px; + background: transparent; +} + +#app-container { + width: 100%; + flex-direction: column; + justify-content: flex-start; + position: relative; + + color: white; +} + +header { + position: fixed; + width: 100%; + height: 3em; + top: 0; + left: 0; + background-color: rgba(20,0,40,1); + z-index: 10; +} + +header h1 { + font-size: 1.25em; + font-weight: bold; + color: #ddd; + padding: .5em; +} + + +#main-content-container { + width: 100%; + flex-direction: row; + position: relative; + margin-top: 3em; +} + +.main-cols { + flex-direction: column; + justify-content: flex-start; + position: relative; +} + +.left-col { + width: calc(100vw - 24em); + +} +#video-container { + width: 100%; + height: auto; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +} +#video-container video { + width: 100%; + display: block; +} + +#chat-container { + position: fixed; + z-index: 9; + right: 0; + height: 100%; + width: 24em; + background-color: rgba(20,0,40,.5); + height: calc(100vh - 3em) +} + +#info { + height: 500px; +} + + +.no-chat .left-col { + width: 100vw; +} +.no-chat .right-col { + display: none; +} \ No newline at end of file From 33f994fcfd159d398736102e687f785a745580d8 Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Thu, 4 Jun 2020 02:31:41 -0700 Subject: [PATCH 03/10] mobile considerations --- webroot/index.html | 4 +-- webroot/styles/layout.css | 55 ++++++++++++++++++++++++++++++++++++++- 2 files changed, 56 insertions(+), 3 deletions(-) diff --git a/webroot/index.html b/webroot/index.html index ec0025d10..240aaef10 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -23,7 +23,7 @@ Maybe a header -
+
@@ -40,7 +40,7 @@
{{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}. - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only fpesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index 2691d0c12..e98495923 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -49,8 +49,8 @@ header h1 { .left-col { width: calc(100vw - 24em); - } + #video-container { width: 100%; height: auto; @@ -84,4 +84,57 @@ header h1 { } .no-chat .right-col { display: none; +} + +@media screen and (max-width: 860px) { + #chat-container { + width: 20em; + } + .left-col { + width: calc(100vw - 20em); + } +} + +@media screen and (max-width: 640px ) and (orientation: portrait) { + #main-content-container { + flex-direction: column; + justify-content: space-between; + height: calc(100vh - 3em); + } + + .main-cols { + width: 100vw; + } + .left-col { + flex-direction: column; + justify-content: stretch; + } + .right-col { + overflow: hidden; + } + + + #info { + display: none; + overflow: auto; + height: auto; + } + + #chat-container { + width: 100%; + height: 100%; + position: relative; + height: auto; + } + + .no-chat .left-col { + height: 100%; + } + .no-chat .right-col { + display: none; + } + .no-chat #info { + display: block; + } + } \ No newline at end of file From 60080cd93c066ff127398999fe24cab8359197fa Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Thu, 4 Jun 2020 03:15:27 -0700 Subject: [PATCH 04/10] initial chat form layout --- webroot/index.html | 79 ++++++++++++++++++--------------------- webroot/js/app.js | 2 +- webroot/styles/layout.css | 17 ++++++++- 3 files changed, 52 insertions(+), 46 deletions(-) diff --git a/webroot/index.html b/webroot/index.html index 240aaef10..e9b62b2cf 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -22,13 +22,14 @@

Maybe a header

+ đŸ’¬ +
-
-
+
-
+
{{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only fpesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. @@ -48,10 +49,11 @@
+
-
+
-
- - - - - -
- -
- -
-
- -
-
- -
-
-
+
+
+ + + + + + + + + +
+
diff --git a/webroot/js/app.js b/webroot/js/app.js index e745becac..cbfca1e4e 100644 --- a/webroot/js/app.js +++ b/webroot/js/app.js @@ -23,7 +23,7 @@ function setupApp() { }) window.chatForm = new Vue({ - el: "#chatForm", + el: "#chat-form", data: { message: { author: "",//localStorage.author || "Viewer" + (Math.floor(Math.random() * 42) + 1), diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index e98495923..f70660694 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -74,11 +74,24 @@ header h1 { height: calc(100vh - 3em) } -#info { - height: 500px; +#chat-input-container { + position: absolute; + bottom: 0; + width: 100%; + border-top: 1px solid #eee; + padding: 1em; + background-color: #334; +} + +#chat-form { + flex-direction: column; + align-items: flex-end; + margin-bottom: 0; } + + .no-chat .left-col { width: 100vw; } From 6da9b7c889d6ca326af01d53bcdf983bc0643abc Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Tue, 9 Jun 2020 01:22:32 -0700 Subject: [PATCH 05/10] use css vars --- webroot/styles/layout.css | 27 +++++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index f70660694..dc99c4da8 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -1,3 +1,10 @@ +/* variables */ +:root { + --header-height: 3em; + --right-col-width: 24em; +} + + body { font-size: 14px; background-color: #ccc; @@ -19,7 +26,7 @@ body { header { position: fixed; width: 100%; - height: 3em; + height: var(--header-height); top: 0; left: 0; background-color: rgba(20,0,40,1); @@ -38,7 +45,7 @@ header h1 { width: 100%; flex-direction: row; position: relative; - margin-top: 3em; + margin-top: var(--header-height); } .main-cols { @@ -48,7 +55,7 @@ header h1 { } .left-col { - width: calc(100vw - 24em); + width: calc(100vw - var(--right-col-width)); } #video-container { @@ -69,9 +76,9 @@ header h1 { z-index: 9; right: 0; height: 100%; - width: 24em; + width: var(--right-col-width); background-color: rgba(20,0,40,.5); - height: calc(100vh - 3em) + height: calc(100vh - var(--header-height)) } #chat-input-container { @@ -100,11 +107,15 @@ header h1 { } @media screen and (max-width: 860px) { + :root { + --right-col-width: 20em; + } + #chat-container { - width: 20em; + width: var(--right-col-width); } .left-col { - width: calc(100vw - 20em); + width: calc(100vw - var(--right-col-width)); } } @@ -112,7 +123,7 @@ header h1 { #main-content-container { flex-direction: column; justify-content: space-between; - height: calc(100vh - 3em); + height: calc(100vh - var(--header-height)); } .main-cols { From 21c3520e001499cfcee65fb94123ea70f1161dd3 Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Tue, 9 Jun 2020 14:12:50 -0700 Subject: [PATCH 06/10] style message items --- webroot/index.html | 14 ++++++-------- webroot/js/app.js | 2 +- webroot/styles/layout.css | 22 +++++++++++++++++++++- 3 files changed, 28 insertions(+), 10 deletions(-) diff --git a/webroot/index.html b/webroot/index.html index e9b62b2cf..7dd29f007 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -53,19 +53,17 @@
-
-
+ +
-
-

{{ message.author }}

-

+
+

{{ message.author }}

+

-
diff --git a/webroot/js/app.js b/webroot/js/app.js index cbfca1e4e..f68b997a2 100644 --- a/webroot/js/app.js +++ b/webroot/js/app.js @@ -98,7 +98,7 @@ function setupWebsocket() { setupApp() getStatus() -setupWebsocket() +// setupWebsocket() // setInterval(getStatus, 5000) // HLS Video setup diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css index dc99c4da8..1fd07e152 100644 --- a/webroot/styles/layout.css +++ b/webroot/styles/layout.css @@ -96,7 +96,27 @@ header h1 { margin-bottom: 0; } - +.message { + padding: .85em; + align-items: flex-start; +} +.message-avatar { + height: 2.5em; + width: 2.5em; + margin-right: .75em; + /* background-color: rgba(236, 236, 236, .5); */ + background-color: rgba(0,0,0, .75); +} +.message-content { + font-size: .85em; +} +.message-author { + font-weight: 600; +} +.message-text { + color: #ccc; + font-weight: 100; +} .no-chat .left-col { From 69ba10a898d29dc8c03b160ed67dd918341c2c75 Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Tue, 9 Jun 2020 14:15:00 -0700 Subject: [PATCH 07/10] use app file from web-layout --- webroot/js/app.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/webroot/js/app.js b/webroot/js/app.js index a0d9f2418..a984b6367 100644 --- a/webroot/js/app.js +++ b/webroot/js/app.js @@ -8,7 +8,7 @@ function setupApp() { }) window.app = new Vue({ - el: "#info", + el: "#app", data: { streamStatus: "", viewerCount: 0, @@ -23,7 +23,7 @@ function setupApp() { }) window.chatForm = new Vue({ - el: "#chat-form", + el: "#chatForm", data: { message: { author: "",//localStorage.author || "Viewer" + (Math.floor(Math.random() * 42) + 1), @@ -103,7 +103,7 @@ function setupWebsocket() { setupApp() getStatus() -// setupWebsocket() +setupWebsocket() // setInterval(getStatus, 5000) // HLS Video setup. Commented out for local html work. Uncomment to make HLS work. From 9b2e4f40c95673edf2c7d727b5cc48b71b0e753e Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Thu, 11 Jun 2020 01:24:05 -0700 Subject: [PATCH 08/10] fix msg container --- webroot/index.html | 16 ++++++++++++++-- webroot/js/app.js | 2 +- webroot/styles/layout.css | 22 +++++++++++++++------- 3 files changed, 30 insertions(+), 10 deletions(-) diff --git a/webroot/index.html b/webroot/index.html index 7dd29f007..5f8b0cc44 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -39,9 +39,17 @@ >
-
+
{{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}. - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only fpesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. + Heart rate notifications. +Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation. +
+If a patient’s heart rate is above 120 bpm or below 40 bpm while they appear to have been inactive for 10 minutes, the user will receive a notification. Patients can adjust the threshold bpm or turn these notifications on or off. All heart rate notifications — along with date, time, and heart rate — can be viewed in the Health app on iPhone. +
+Heart rate notifications. +Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation. +
+If a patient’s heart rate is above 120 bpm or below 40 bpm while they appear to have been inactive for 10 minutes, the user will receive a notification. Patients can adjust the threshold bpm or turn these notifications on or off. All heart rate notifications — along with date, time, and heart rate — can be viewed in the Health app on iPhone.
@@ -52,6 +60,9 @@
+ Heart rate notifications. +Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation.— can be viewed in the Health app on iPhone. +
@@ -70,6 +81,7 @@
+
@@ -33,25 +55,13 @@
-
+
{{ streamStatus }} {{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}. - Heart rate notifications. -Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation. -
-If a patient’s heart rate is above 120 bpm or below 40 bpm while they appear to have been inactive for 10 minutes, the user will receive a notification. Patients can adjust the threshold bpm or turn these notifications on or off. All heart rate notifications — along with date, time, and heart rate — can be viewed in the Health app on iPhone. -
-Heart rate notifications. -Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation. -
-If a patient’s heart rate is above 120 bpm or below 40 bpm while they appear to have been inactive for 10 minutes, the user will receive a notification. Patients can adjust the threshold bpm or turn these notifications on or off. All heart rate notifications — along with date, time, and heart rate — can be viewed in the Health app on iPhone. - -
@@ -60,17 +70,12 @@ If a patient’s heart rate is above 120 bpm or below 40 bpm while they appear t
- Heart rate notifications. -Apple Watch checks for unusually high or low heart rates in the background, which could be signs of a serious underlying condition. This could help you and your patients identify situations which may warrant further evaluation.— can be viewed in the Health app on iPhone. -
-
-

{{ message.author }}

@@ -79,9 +84,10 @@ Apple Watch checks for unusually high or low heart rates in the background, whic
-
- - +
+ + +