Merge branch '107-responsividade-na-pagina-de-edicao-de-equipamentos' into 'development'

Resolve "Responsividade na página de edição de equipamentos"

Closes #107

See merge request !125

pinsisApp/src/app/edit-machine/edit-machine.component.html

@@ -25,13 +25,13 @@
 
             <span class="container search_machine">
 
-              <div class="col-md-1 d-none d-sm-block border-right"></div>
+              <div class= "container-search">
 
-                <div class=" photos-btn">
+                <div class="col-12 col-sm-4 container photosS-btn">
                   <img src='assets/images/{{machineS.imagePath}}' alt="Avatar" class="img"/>
                 </div>
 
-                <div class="container text bnt">
+                <div class="col-12 col-sm-8 container text bnt" style="padding-top:30px">
 
                   <form>
                     <div>
@@ -74,16 +74,18 @@
 
                         <p style="display:none" id="image_selected_{{machineS.id}}"><b>Imagem selecionada:</b> {{machineS.image.name}}</p>
 
-                       <div class="text-center">
-													<button class="btn" style="margin-right: 40%; margin-block: 1%" (click)="removeMachine(idSearch)"> Remover máquina </button>
-                       <!-- Botão "salvar alteracoes" -->
-                        	<button class="btn" style="margin-block: 1%" (click)="searchUpdate(machineS, idSearch)"> Salvar alterações </button>
-												</div>
                     </div>
-
                   </form>
 
+                  <!-- Botão "Remover máquina" -->
+                  <div class="text-center">
+                    <button class="btn" (click)="removeMachine(i)"> Remover máquina </button>
+                  <!-- Botão "salvar alteracoes" -->
+                    <button class="btn" (click)="update(i)"> Salvar alterações </button>
+                  </div>
+
                 </div>
+              </div>
             </span>
           </div>
 
@@ -143,7 +145,7 @@
 													</div>
                         </form>
 												<!-- Botão "Remover máquina" -->
-                        <div class="text-center">
+                        <div class="text-center" style="margin-bottom=1.5%">
 													<button class="btn" (click)="removeMachine(i)"> Remover máquina </button>
                         <!-- Botão "salvar alteracoes" -->
                         	<button class="btn" (click)="update(i)"> Salvar alterações </button>

pinsisApp/src/app/edit-machine/edit-machine.component.scss

@@ -47,6 +47,15 @@
   }
 }
 
+.container-search {
+  display:flex;
+  @media screen and (max-width: $break-small) {
+    display:inline;
+
+  }
+
+}
+
 .photos-page {
     hyphens: auto;
     font-family: $font-default;
@@ -155,33 +164,46 @@
 
 //Tag para procurar equipamento
 .search_machine {
+
   display: none;
   font-family: "Open Sans", sans-serif;
   font-size: 20px;
   line-height: 1.1em;
-  border-radius: 4px;
+  border-radius: 8px;
   max-width: 950px;
   padding-top: 1.5rem !important;
   border-top-right-radius: 8px;
   border-top-left-radius: 8px;
+
 }
 
 //Card que encapsula a imagem para o resultado de procurar
 .photosS-btn {
+  align-items: center;
   background-color: #b0cfed;
-  float: left;
-  margin-left: 10px;
-  border-top-right-radius: 8px;
+  padding: 5px;
+
   border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+
+  @media screen and (max-width: $break-small) {
+    border-radius: 8px 8px 0px 0px;
+  }
 
 }
 //texto resultado do search
 .text{
-  float:right;
+  background-color: #b0cfed;
+  padding-bottom:2%;
+
+  border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
 
-  background-color: #b0cfed;
+
+    @media screen and (max-width: $break-small) {
+      border-radius: 0px 0px 8px 8px;
+    }
+
  }
 
 .search{

pinsisApp/src/app/events/events.component.scss

@@ -166,34 +166,28 @@
   background-color: #b0cfed;
   padding: 5px;
 
-  @media scream and (max-width: $break-large){
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-  }
+
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+
 
   @media screen and (max-width: $break-small) {
-    border-top-left-radius: 8px !important;
-    border-top-right-radius: 8px;
+    border-radius: 8px 8px 0px 0px;
   }
 
 }
 
 .text{
-  float:right;
-
-
   background-color: #b0cfed;
-  @media scream and ( max-width: $break-large){
+  padding-bottom:1%;
+
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
 
-    border-top-right-radius: 8px;
-    border-bottom-right-radius: 8px;
-  }
 
   @media screen and (max-width: $break-small) {
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
+    border-radius: 0px 0px 8px 8px;
   }
-
  }
 
  .search{