switch, webcam positioning

sdhoek · May 7, 2018 · 4ebde51 · 4ebde51
1 parent 24565a8
commit 4ebde51
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 19 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,4 +1,7 @@
-<webcam *ngIf="showWebcam"></webcam>
-<button class="cameraSwitch" (click)="toggleWebcam();"> x </button>
+<div class="webcam-display">
+ <webcam *ngIf="showWebcam"></webcam>
+ <button *ngIf="showWebcam" class="cameraSwitch" (click)="toggleWebcam();"> <img src="../assets/[email protected]"> </button>
+ <button *ngIf="!showWebcam" class="cameraSwitch" (click)="toggleWebcam();"> <img src="../assets/[email protected]"> </button>
+</div>
 <router-outlet>
 </router-outlet>
diff --git a/src/app/map/from-to/from-to.component.css b/src/app/map/from-to/from-to.component.css
@@ -7,13 +7,12 @@
  z-index: 500;
  right: 20px;
  left: 108px;
- top: 71px;
+ top: 124px;
  padding: 7px 10px 7px;
 }
 
 @media(min-width: 550px){
  .from-to-container {
- top: 72px;
  left: inherit;
  width: auto;
  width: 200px;
@@ -120,9 +119,10 @@ button:active {
  top: 20px;
  width: 66%;
  width: calc(100% - 144px);
- padding: 10px;
+ padding: 10px 10px 7px;
  display: block;
  background: #f6be0e;
+ text-align: center;
 }
 
 @media(min-width: 550px){
@@ -132,6 +132,11 @@ button:active {
  }
 }
 
+.checkbox-container b{
+ margin-bottom: 5px;
+ display: block;
+}
+
 .checkbox {
  width: 18px;
  height: 18px;
@@ -141,4 +146,65 @@ button:active {
 .checkbox-container span{
  padding-left: 27px;
  font-size: 14px;
-}
+}
+
+
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ height: 34px;
+ margin-top: 13px;
+ margin-bottom: 0;
+ }
+
+
+ .switch input {
+ display:none;
+ }
+
+ .slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ffe490;
+ -webkit-transition: .4s;
+ transition: .4s;
+ }
+
+ .slider:before {
+ position: absolute;
+ content: "";
+ height: 26px;
+ width: 26px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+ }
+
+ input:checked + .slider {
+ background-color: #c99d0c;
+ }
+
+ input:focus + .slider {
+ box-shadow: 0 0 1px #c99d0c;
+ }
+
+ input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+ }
+
+ .slider {
+ border-radius: 34px;
+ }
+
+ .slider:before {
+ border-radius: 50%;
+ }
diff --git a/src/app/map/from-to/from-to.component.html b/src/app/map/from-to/from-to.component.html
@@ -1,6 +1,9 @@
 <div class="checkbox-container">
- <input type="checkbox" class="checkbox" [(ngModel)]="onbegluurd" name="gluren" (change)="setOnbegluurd($event)" value="false">
- <span>Ik wil onbegluurd fietsen.</span>
+ <b>Ik wil onbegluurd fietsen.</b>
+ <label class="switch">
+ <input type="checkbox" [(ngModel)]="onbegluurd" name="gluren" (change)="setOnbegluurd($event)" value="false">
+ <span class="slider"></span>
+ </label>
 </div>
 
 <div class="from-to-container">

diff --git a/src/styles.css b/src/styles.css
@@ -101,28 +101,46 @@ app-colofon{
 /* webcam */
 
 video{
- width: 201px;
- height: 60px;
+ width: 220px;
+ height: 165px;
+}
+
+.webcam-display{
+ position: absolute;
+ right: 20px;
+ top: 314px;
+ z-index: 600;
+
 }
 
 webcam{
- position: fixed;
- right: 0;
- bottom: 0;
- width: 141px;
- height: 60px;
+ width: 220px;
+ height: 165px;
  overflow: hidden;
- z-index: 402;
+ display: none;
+ position: relative;
+}
+
+@media(min-width: 550px){
+ webcam{
+ display: block;
+ }
 }
 
 .cameraSwitch{
- position: fixed;
- right: 0;
- bottom: 0;
+ position: absolute;
+ right: 0px;
+ top: 0;
  background: #f6be0e;
  border: none;
  font-weight: bold;
  z-index: 402;
+ padding-top: 3px;
+ cursor: pointer;
+}
+
+.cameraSwitch img{
+ width: 19px;
 }
 
 /* GRAPH */