Sothis/viabiliza
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

REFACTOR: Melhorias do CSS e HTML para telas menores.

Browse Source
This commit is contained in:
tulioperdigao 2025-10-27 10:21:32 -03:00
parent f8874b33b9
commit 0e8815fe77
3 changed files with 54 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}

8
public/index.html
View File

@ -43,8 +43,10 @@
<div class="mb-3"> <div class="mb-3">
<input class="form-control" type="file" id="csvfile" accept=".csv" required /> <input class="form-control" type="file" id="csvfile" accept=".csv" required />
</div> </div>
<button class="btn btn-primary" type="submit">Enviar CSV</button> <div class="card-buttons__container">
<button type="button" class="btn btn-primary" id="card__button-download">Baixar Modelo</button> <button class="btn btn-primary button-mobile" type="submit">Enviar CSV</button>
<button type="button" class="btn btn-primary button-mobile" id="card__button-download">Baixar Modelo</button>
</div>
</form> </form>
<div id="uploadResult" class="mt-3"></div> <div id="uploadResult" class="mt-3"></div>
<div class="progress mt-2" style="height:24px; display:none;" id="progressWrap"> <div class="progress mt-2" style="height:24px; display:none;" id="progressWrap">
@ -63,7 +65,7 @@
<div class="row g-2"> <div class="row g-2">
<div class="col-md-4"><input id="cep" class="form-control" placeholder="CEP (somente números)"></div> <div class="col-md-4"><input id="cep" class="form-control" placeholder="CEP (somente números)"></div>
<div class="col-md-4"><input id="numero" class="form-control" placeholder="Número"></div> <div class="col-md-4"><input id="numero" class="form-control" placeholder="Número"></div>
<div class="col-md-4"><button id="btnConsultaCep" class="btn btn-secondary">Consultar CEP</button></div> <div class="col-md-4 card-buttons__container"><button id="btnConsultaCep" class="btn btn-secondary">Consultar CEP</button></div>
</div> </div>
<div id="consultaResult" class="mt-3"></div> <div id="consultaResult" class="mt-3"></div>
</div> </div>

46
public/style.css
View File

@ -24,10 +24,19 @@
font-size: 30px; font-size: 30px;
} }
.container {
padding-bottom: 50px;
margin-bottom: 20px;
}
.p-4 { .p-4 {
padding: 0px !important; padding: 0px !important;
} }
.card-buttons__container {
display: flex;
}
button { button {
background-color: #31a3b5 !important; background-color: #31a3b5 !important;
border: none !important; border: none !important;
@ -71,6 +80,43 @@ button:hover {
.header-logo__container > img { .header-logo__container > img {
width: 80px; width: 80px;
} }
.description__container {
padding-right: 20px;
padding-left: 20px;
}
.description-title {
margin-bottom: 30px;
}
.description-title, .description-content {
text-align: center;
}
.card-body > h5, .card-body > p {
text-align: center;
margin-bottom: 30px;
}
.card-buttons__container {
flex-direction: column-reverse;
justify-content: center;
align-items: center;
}
.button-mobile {
min-width: 150px;
}
#card__button-download {
margin-left: 0px;
margin-bottom: 10px;
}
#btnConsultaCep {
margin-top: 10px;
}
} }
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {