Fix styling on buttons
Prevent template buttons from wrapping by consuming more vertical space on middle-sized screens
This commit is contained in:
parent
9405cfcee9
commit
a5678e15dc
@ -593,13 +593,52 @@ li.highlight {
|
|||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
.button-row {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-row > div {
|
||||||
|
margin: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-row .button-row-reminder {
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-row-template {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1408px) {
|
||||||
.button-row {
|
.button-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-row > button {
|
.button-row .button-row-reminder {
|
||||||
|
width: 100%;
|
||||||
|
margin: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-row .button-row-template button {
|
||||||
|
flex-basis: 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-row-reminder button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.button-row-edit {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-row-edit > button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
}
|
}
|
||||||
|
@ -234,19 +234,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="button-row">
|
{% if creating %}
|
||||||
<span class="pad-left"></span>
|
<div class="button-row">
|
||||||
{% if creating %}
|
<div class="button-row-reminder">
|
||||||
<button class="button is-success" id="createReminder">
|
<button class="button is-success" id="createReminder">
|
||||||
<span>Create Reminder</span> <span class="icon"><i class="fas fa-sparkles"></i></span>
|
<span>Create Reminder</span> <span class="icon"><i class="fas fa-sparkles"></i></span>
|
||||||
</button>
|
</button>
|
||||||
<button class="button is-success is-outlined" id="createTemplate">
|
</div>
|
||||||
<span>Create Template</span> <span class="icon"><i class="fas fa-file-spreadsheet"></i></span>
|
<div class="button-row-template">
|
||||||
</button>
|
<button class="button is-success is-outlined" id="createTemplate">
|
||||||
<button class="button is-outlined show-modal is-pulled-right" data-modal="chooseTemplateModal">
|
<span>Create Template</span> <span class="icon"><i class="fas fa-file-spreadsheet"></i></span>
|
||||||
Load Template
|
</button>
|
||||||
</button>
|
<button class="button is-outlined show-modal is-pulled-right" data-modal="chooseTemplateModal">
|
||||||
{% else %}
|
Load Template
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<div class="button-row-edit">
|
||||||
<button class="button is-success save-btn">
|
<button class="button is-success save-btn">
|
||||||
<span>Save</span> <span class="icon"><i class="fas fa-save"></i></span>
|
<span>Save</span> <span class="icon"><i class="fas fa-save"></i></span>
|
||||||
</button>
|
</button>
|
||||||
@ -255,11 +260,8 @@
|
|||||||
<button class="button is-danger delete-reminder">
|
<button class="button is-danger delete-reminder">
|
||||||
Delete
|
Delete
|
||||||
</button>
|
</button>
|
||||||
<!-- <button class="button is-info demo-reminder">-->
|
</div>
|
||||||
<!-- Demo-->
|
{% endif %}
|
||||||
<!-- </button>-->
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user