diff --git a/pinsisApp/src/app/edit-machine/edit-machine.component.html b/pinsisApp/src/app/edit-machine/edit-machine.component.html index 4330ae0c67386d367173d240805ea8d268c5e0e8..ce28c11db90eb0c59de12f9b6f2a78940ba2a2b4 100644 --- a/pinsisApp/src/app/edit-machine/edit-machine.component.html +++ b/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> diff --git a/pinsisApp/src/app/edit-machine/edit-machine.component.scss b/pinsisApp/src/app/edit-machine/edit-machine.component.scss index 059ee6f6aa954ff85f59c8466e25e8e94f103e92..61676d9956ef77f7ed134ffac8411c0224a58100 100644 --- a/pinsisApp/src/app/edit-machine/edit-machine.component.scss +++ b/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{ diff --git a/pinsisApp/src/app/events/events.component.scss b/pinsisApp/src/app/events/events.component.scss index 20db42c802ef4ad923218ddd5e4a28f67a16f32f..488d758915de0c7029ea3d6ffc8d620d6818d379 100644 --- a/pinsisApp/src/app/events/events.component.scss +++ b/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{