From b525c0d13329e1e11b0cf859113e6e2fedda510f Mon Sep 17 00:00:00 2001 From: waridrox Date: Fri, 25 Jun 2021 19:01:28 +0530 Subject: [PATCH] Added support for responsive layouts --- app/assets/stylesheets/new-capture.css | 570 +++++++++++++++++++++++++ app/views/capture/index.html.erb | 12 +- app/views/capture/index2.html.erb | 362 ++++++++++++++++ 3 files changed, 939 insertions(+), 5 deletions(-) create mode 100644 app/assets/stylesheets/new-capture.css create mode 100644 app/views/capture/index2.html.erb diff --git a/app/assets/stylesheets/new-capture.css b/app/assets/stylesheets/new-capture.css new file mode 100644 index 00000000..af5df20b --- /dev/null +++ b/app/assets/stylesheets/new-capture.css @@ -0,0 +1,570 @@ +html { + display: block; + width: 100%; + height: 100%; + } + + body { + height: 100%; + background: #f9f9f9; + color: black; + position: relative; + padding-bottom: 200px; + } + + .full-strecth-block { + display: block; + width: 100%; + height: 100%; + } + + .content, div.full-strecth-flex-vertical { + display: flex; + flex-direction: column; + margin-top: 0rem; + width: 100%; + height: 100%; + } + + div.full-strecth-flex-horizontal { + display: flex; + flex-direction: row; + width: 100%; + height: 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; + } + + .img-rot { + padding-bottom: 7rem; + } + + div#responsive-graph { + width: auto; + max-width: 100vw; + } + div#capture-phase-right { + margin-right: 2rem; + margin-top: 8rem; + width: auto; + } + + .responsive-capture-prev { + width: 28em; + margin-right: 1em; + } + + div#canvas-prev-responsive { + margin-top: 8rem; + margin-right: 1rem; + margin-left: 2rem; + } + + div#header { + margin-bottom: 0px; + } + + #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; + } + + div#landing-page { + position: relative; + justify-content: center; + align-content: center; + } + + div#landing-page-content { + padding: 10rem 5rem 5rem 5rem; + margin-left: 0px; + position: absolute; + top: 60%; + left: 50%; + transform: translate(-50%, -50%); + } + + .bs-stepper .content.fade { + visibility: initial !important; + } + + .bs-stepper .content.fade.active, .bs-stepper-pane.fade.active { + z-index: 90; + } + + .bs-stepper .line { + background-color: grey; + } + + .step.active .step-trigger{ + color: #007bff; + } + + #header.navbar-inner { + margin-right:-40px; + } + + div#header { + text-align: center; + align-items: center; + height: 0px; + } + + .capture-messages { + padding-top: auto; + float:top; + padding:0px 10px; + } + + /* Individual Component Style -------------------------------------------*/ + + #landing-page: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, #landing-page2 { + justify-content: center; + align-items: center; + } + #landing-page-content { + width: 100%; + justify-content: space-around; + text-align: center; + align-items: center; + padding: 18rem; + margin: 0 auto; + margin-top: 0rem; + 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: auto; + 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 + } + + #capture-page-next { + margin:0 auto; + display:block; + margin-top: 10rem; + } + + #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: 0; + } + + #setting { + height: 100%; + overflow: hidden; + } + +@media only screen and (max-width: 600px) { + +div#capture-page-content { + height: fit-content; + background-color: #272727; +} + +.capture-messages { + padding-top: auto; + float:top; + padding:0px 10px; +} + +div#header { + height: 0px; +} +} + +@media only screen and (max-width: 767px) { + +html, body { + width: 100%; + height: 100%; +} + +.capture-messages { + padding-top: auto; + float:top; + padding:0px 10px; +} + +div#header { + height: 0px; +} + +img#cfl-resp { + height: 150px; +} + +div#webcam { + align-items: center; + width: auto; + padding: 2rem 1rem 1rem 1rem; +} + +.content { + display: flex; + flex-direction: column; + margin-top: 0rem; + width: 100%; + height: 100vh; +} + +div.full-strecth-flex-vertical { + height : 100vh; +} + +div#responsive-graph { + max-width: 100vw; +} + +div#responsive-graph { + width: 33rem; +} + +div#capture-phase-right { + width: 36rem; + margin-left: 20px; +} + +.tooltip { + display: none !important; +} + +#graph { + width: auto; +} +div.bs-stepper-header { + margin: 0% 0%; + margin-left: -20px; + padding-left: 1rem; + padding-right: 1rem; + z-index: 999; + width: 100%; +} + +div.full-strecth-flex-vertical.content, div.full-strecth-flex-vertical { +padding-top: 15vw; +} + +.responsive-hide { + display: none; +} + +.responsive-capture-prev { + width: 5rem; + height: 5rem; +} + +div#capture { + margin-left: -20px; + height: -webkit-fill-available; +} + +.navbar-inner { + margin-right: 0px !important; +} +#header { + margin-bottom: 0px; +} + +.navbar-static-top { + margin-right: -20px; + margin-left: -20px; + border-width: 0px 0px 0px 0px; +} + +div#landing-page { + align-content: center; + text-align: center; + width: 100%; +} + +#landing-page { + margin-left: 0px; + width: 100%; +} + +div#landing-page-content { + padding: 15rem 2rem 2rem 2rem; + margin-left: 0px; + margin-top: 0rem; +} + +div#settings { + margin-bottom: auto; + max-height: 100vh; + margin-left: -20px; +} + +#landing-page-content h1 { + margin-top: 0px; +} + +#landing-page-content p { + color: grey +} + +#landing-page-content span { + font-size: 1.7rem; + opacity: 0.5; +} + +div#canvas-prev-responsive { + margin-top: 8rem; +} + +p { + font-size: 2.5vw; +} +} + +@media only screen and (max-width: 992px) { + +p { + font-size: 2vw; +} + +.tooltip { + display: none !important; +} + +.capture-messages { + padding-top: auto; + float:top; + padding:0px 10px; +} + +div#header { + height: 0px; +} + +#graph { + width: 650px; +} + +div#landing-page-content { + margin-left: 0px; +} + +div#cfl-resp { + height:200px; +} +} + +@media only screen and (max-width: 767px) and (orientation:landscape) { + +div#capture-page-content { + height: fit-content; + background-color: #272727; +} + +div#landing-page-content { + margin-top: 10rem; + padding: 6rem 5rem 5rem 5rem; +} + +.full-strecth-block { + height: 100vh; +} + +p { + font-size: 1rem; +} + +div#responsive-graph { + width: auto; + max-width: 100vw; +} + +div#capture-phase-right { + width:fit-content; +} + +div#capture { + height: -webkit-fill-available; +} + +div#full-strecth-flex-vertical { + padding-top: 10rem; +} +div#webcam { + padding: 1rem 1rem 1rem 1rem; +} +} + +@media only screen and (max-width: 1000px) and (orientation:landscape) { + +div#capture-page-content { + height: fit-content; + background-color: #272727; +} + +div#landing-page-content { + margin-top: 0rem; + padding: 6rem 5rem 5rem 5rem; +} + +.full-strecth-block { + height: 100vh; +} + +p { + font-size: 1rem; +} + +div#responsive-graph { + width: auto; + max-width: 100vw; +} + +div#capture-phase-right { + width:fit-content; +} + +div#capture { + height: auto; +} + +div#full-strecth-flex-vertical { + padding-top: 10rem; +} + +div#webcam { + padding: 1rem 1rem 1rem 1rem; +} +} \ No newline at end of file diff --git a/app/views/capture/index.html.erb b/app/views/capture/index.html.erb index b674590a..521f035f 100644 --- a/app/views/capture/index.html.erb +++ b/app/views/capture/index.html.erb @@ -1,16 +1,18 @@ + + <% unless logged_in? %>