bug: optimize download btn for mobile

This commit is contained in:
Seth Falco 2022-01-04 21:13:43 +01:00
parent 5176c18625
commit 558f58e4b2
No known key found for this signature in database
GPG key ID: DE1C217EFF01FEC8
2 changed files with 19 additions and 4 deletions

View file

@ -256,6 +256,17 @@ h3.header {
height: 32px; height: 32px;
} }
#download-btn-wrapper {
display: flex;
justify-content: center;
margin: 2em 0;
}
#download-btn {
display: flex;
align-items: center;
}
@media (min-width: 280px) { @media (min-width: 280px) {
.btn-text { .btn-text {
display: inline; display: inline;

View file

@ -243,20 +243,24 @@
</div> </div>
</div> </div>
</div> </div>
{% if web_version %} {% if web_version %}
<div class="section no-pad-bot"> <div class="section no-pad-bot">
<div class="container"> <div class="container">
<div class="row center"> <div class="row center">
<div class="col s12 m12"> <div class="col s12 m12">
<h3 class="header">Open Source Machine Translation API</h3> <h3 class="header">Open Source Machine Translation API</h3>
<h4 class="header">100% Self-Hosted. Offline Capable. Easy to Setup.</h4> <h4 class="header">100% Self-Hosted. Offline Capable. Easy to Setup.</h4>
<br/><a class="waves-effect waves-light btn btn-large" href="https://github.com/LibreTranslate/LibreTranslate" rel="noopener noreferrer"><i class="material-icons left">cloud_download</i> Download</a> <div id="download-btn-wrapper">
<br/><br/><br/> <a id="download-btn" class="waves-effect waves-light btn btn-large" href="https://github.com/LibreTranslate/LibreTranslate" rel="noopener noreferrer">
<i class="material-icons">cloud_download</i>
<span class="btn-text">Download</span>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
</main> </main>