From 0bb9130e0fa5aab4eff391e9fb9bc70f4dcb46d6 Mon Sep 17 00:00:00 2001 From: waridrox Date: Tue, 20 Jul 2021 04:55:32 +0530 Subject: [PATCH] New interface with refactored capture code at new-capture.js --- app/assets/stylesheets/new-capture.css | 610 +++++++++++++++++++++++++ app/assets/stylesheets/style.css | 2 +- app/views/capture/index2.html.erb | 393 ++++++++++------ public/images/landing-wallpaper.jpg | Bin 0 -> 63462 bytes 4 files changed, 871 insertions(+), 134 deletions(-) create mode 100644 app/assets/stylesheets/new-capture.css create mode 100644 public/images/landing-wallpaper.jpg diff --git a/app/assets/stylesheets/new-capture.css b/app/assets/stylesheets/new-capture.css new file mode 100644 index 000000000..7cc962d3b --- /dev/null +++ b/app/assets/stylesheets/new-capture.css @@ -0,0 +1,610 @@ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +*:before, +*:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html { + font-size: 14px; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + background: #272727; + display: block; + width: 100%; + height: 100%; +} + +h1, h2, h3, h4, h5, h6 { + font-family: inherit; + font-weight: 500; + line-height: 1.1; + color: inherit; +} + +#login-status { + font-weight: 200; + color: white; + padding: 10px; +} + +p { + font-size: 14px; +} + +.float-container { + display: flex; + margin-top: 4rem; +} + +.float-child-left { + flex: 1; + padding: 10px; +} + +.float-child-right { + flex: 3; + padding: 10px; +} + +p.capture-messages { + font-size: 14px; +} + +div.float-container { + background-color: #353535; + height: fit-content; + box-shadow: 1px 1px 11px 2px #151515; + border-radius: 5px; +} + +body { + font-size: 14px; + background: #f9f9f9; + color: black; + position: relative; +} + +.full-strecth-block { + display: block; + width: 100%; + height: auto; +} + +div.full-strecth-flex-vertical.content, div.full-strecth-flex-vertical { + padding-top: 8rem; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; +} + +div.full-strecth-flex-horizontal { + display: flex; + flex-direction: row; + width: 100%; + height: 100%; +} + +div#capture-phase-right { + background-color: #353535; + height: fit-content; + box-shadow: 1px 1px 11px 2px #151515; + border-radius: 5px; + margin-left: 1.5rem; + margin-right: 1.5rem; + margin-top: 10rem; +} + +div#canvas-prev-responsive { + background-color: #353535; + height: fit-content; + box-shadow: 1px 1px 11px 2px #151515; + border-radius: 5px; + margin-top: 1rem; + margin-left: 1rem; +} + +div#capture-settings { + height: 100vh; + width: 100%; +} + +.bs-stepper .content.dstepper-block { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; +} + +.demo-button { + border: none; + color: white; + padding: 1rem; + border-radius: 6px; + background-image: linear-gradient(to bottom,#08c,#04c); +} + +.tab-content { + display: flex; + flex-direction: row; + overflow: auto; +} + +.tab-pane { + min-width: 100%; +} + +.center-content { + align-items: center; + justify-content: center; +} + +#graph { + width: 1024px; + height: 200px; + margin: 10px 0px; +} + +.bs-stepper:not(.vertical) .content.dstepper-none { + display: initial; +} + +div.content { + position: absolute; +} + +div.bs-stepper-content { + padding: 0; +} + +.bs-stepper .content.fade { + visibility: initial !important; +} + +.bs-stepper .content.fade.active, .bs-stepper-pane.fade.active { + z-index: 100; +} + +.bs-stepper .line { + background-color: grey; +} + +.step.active .step-trigger{ + color: #007bff; +} + +.navbar { + border-radius: 0px; + z-index: 9999; +} + +@media screen and (max-width: 350px), screen and (max-height: 570px) { + p.capture-messages { + font-size: 10px; + } + + body, p { + font-size: 10px; + } + + bs-stepper-label { + margin: 0rem; + font-size: 10px; + } + + .tooltip { + display: none !important; + } +} + +@media only screen and (max-width: 1200px) { + + p.capture-messages { + font-size: 10px; + } + + #graph { + width: 800px; + } + + div#capture-settings { + height: 100vh; + } + + .tooltip { + display: none !important; + } +} + +@media only screen and (max-width: 992px) { + + p.capture-messages { + font-size: 10px; + } + + body, p { + font-size: 10px; + } + + div#testnav { + padding: 0rem; + } + + #graph { + width: 650px; + } + + .full-strecth-block { + padding-left: 0rem; + padding-right: 0rem; + } + + .bs-stepper-header { + margin: 0rem; + } + + .bs-stepper-label { + margin: 0rem; + font-size: 10px; + } + + div#capture-phase-right { + margin-top: 10rem; + } + + div#capture-settings { + height: 100vh; + } + + .tooltip { + display: none !important; + } +} + +@media only screen and (max-width: 767px) { + + p.capture-messages { + font-size: 10px; + } + + body, p { + font-size: 10px; + } + + div#testnav { + padding: 0rem; + } + + #graph { + width: 520px; + } + + .full-strecth-block { + padding-left: 0rem; + padding-right: 0rem; + } + + div#canvas-prev-responsive { + display: none; + } + + .bs-stepper-header { + margin: 0rem; + } + + div#capture-phase-right { + margin-top: 10rem; + } + + div#capture-settings { + height: auto; + } + + .bs-stepper-label { + margin: 0rem; + font-size: 10px; + } + + .tooltip { + display: none !important; + } +} + +@media only screen and (max-width: 576px) { + + p.capture-messages { + font-size: 10px; + } + + body, p { + font-size: 10px; + } + + .responsive-hide { + display: none; + } + + .float-child-right { + width: 100%; + float: left; + padding: 10px; + } + + div#testnav { + padding: 0rem; + } + + #graph { + width: auto; + } + + .full-strecth-block { + padding-left: 0rem; + padding-right: 0rem; + } + + div#canvas-prev-responsive { + display: none; + } + + .bs-stepper-header { + margin: 0rem; + } + + div#capture-phase-right { + margin-top: 10rem; + } + + div#capture-settings { + height: auto; + } + + .bs-stepper-label { + margin: 0rem; + font-size: 10px; + } + + .tooltip { + display: none !important; + } +} + +@media screen and (min-height: 360px) and (max-height: 600px) { + + p.capture-messages { + font-size: 10px; + } + + body, p { + font-size: 10px; + } + + div#capture-settings { + height: auto; + } + + .bs-stepper-label { + margin: 0rem; + font-size: 10px; + } + + .tooltip { + display: none !important; + } +} + +@media only screen and (max-width: 1000px) and (orientation:landscape) { + + p.capture-messages { + font-size: 10px; + } + + body, p { + font-size: 10px; + } + + div#capture-settings { + height: auto; + position: absolute; + } + + bs-stepper-label { + margin: 0rem; + font-size: 10px; + } + + .tooltip { + display: none !important; + } +} + +@media (max-width: 767px) { + + p.capture-messages { + font-size: 10px; + } + + .float-child-left { + display: none; + } + + .navbar-inner { + margin-right: 0px !important; + } + + .navbar { + border-radius: 0px; + margin-bottom: 0px; + z-index: 9999; + } + + bs-stepper-label { + margin: 0rem; + font-size: 10px; + } + .tooltip { + display: none !important; + } +} + +/* Individual Component Style -------------------------------------------*/ + +#landing-page, #landing-page2 { + justify-content: center; + align-items: center; +} + +#landing-page-content:before { + background-image: url('/images/landing-wallpaper.jpg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + content: ' '; + display: block; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: -1; + opacity: 0.3; +} + +#landing-page-content { + width: 100%; + justify-content: space-around; + text-align: center; + align-items: center; + padding: 5rem; + margin: 0 auto; + margin-top: 7rem; + margin-bottom: 2rem; + position: absolute; + z-index: 100; +} + +#landing-page-content h1 { + margin-top: 0px; +} + +#landing-page-content p { + color: grey +} + +#landing-page-content span { + font-size: 1.7rem; + opacity: 0.5; +} + +#stepper, .bs-stepper-header { + width: 100%; + display: flex; + justify-content: space-around; + align-items: center; + padding: 0 25rem; + margin: 0 auto; + margin-top: 1rem; + position: absolute; + z-index: 100; +} +#stepper .dotted-line { + width: 11rem; + border: 1px dashed grey; + height: 0; +} + +#webcam { + position: relative; +} + +.spectrum-example-horizontal { + text-align: center; +} + +.spectrum-example-vertical { + text-align: center; +} + +#settings, #capture { + background: #272727; + color: #b7b7b7 +} + +#capture .full-strecth-flex-horizontal { + margin-top: 6rem; + height: 60%; +} + +#capture .full-strecth-flex-horizontal > div { + background-color: #353535; + height: 100%; + box-shadow: 1px 1px 11px 2px #151515; + border-radius: 5px; +} + +#capture-phase-right .btn-group { + display: flex; + width: 100%; + justify-content: flex-end; +} + +#capture-phase-right > div { + margin: 1rem +} + +div#capture-settings { + background: #272727; + color: #b7b7b7; + position: absolute; + top: 6rem; +} + +div#capture-page-content { + background: #272727; + color: #b7b7b7; +} + +#capture-page-next { + margin:0 auto; + display:block; + margin-top: 2rem; +} + +#plotting > div:first-child { + width: 100%; + max-width: 1000px; +} + +#plotting-note { + background: #dedede; + max-width: 300px; + padding: 1.5rem; + border-radius: 5px; +} + +#graph1 { + height: 300px !important; +} + +.fade.in { + opacity: 1; +} + +#login-prompt-modal, #loginmodal { + z-index: 9999; +} + +.navbar-inner { + margin-right: 0px !important; + border-radius: 0px; +} + +.navbar { + margin-bottom: 0px; + z-index: 9999; +} \ No newline at end of file diff --git a/app/assets/stylesheets/style.css b/app/assets/stylesheets/style.css index 1aed74882..1483674e8 100644 --- a/app/assets/stylesheets/style.css +++ b/app/assets/stylesheets/style.css @@ -91,7 +91,7 @@ h5 small { } .capture-navbar.red .nav .active a { - background-color: #900; !important + background-color: #900; } #display { diff --git a/app/views/capture/index2.html.erb b/app/views/capture/index2.html.erb index 3f9b4217b..29eedc766 100644 --- a/app/views/capture/index2.html.erb +++ b/app/views/capture/index2.html.erb @@ -1,89 +1,156 @@ -<%= stylesheet_link_tag "new-capture" %> -<%= javascript_include_tag "new-capture" %> - - - - - - - - - -
-
- -
- - +<%= javascript_include_tag "new-capture" %> - } - } - + + + + +<%= stylesheet_link_tag "new-capture" %> -
- +<% unless logged_in? %> + +<% end %> + + - + +
+
+
+ -
+ $("#capture-page-content").css('height','100vh'); + $("#capture-page-content").css('width','auto'); - + $("div#save-page").hide(); -
- -
- + +
+
+
+ +
+
+
+ +
+ - } - - - + +

@@ -106,8 +173,6 @@ - -
@@ -116,7 +181,6 @@

Requesting camera access...
(Firefox, Opera or Chrome on Android, or Bowser on iOS). Please click "Allow" when prompted, or try the Upload interface.

-