jude/reminder-bot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

Fix styling on buttons

Browse Source 
Prevent template buttons from wrapping by consuming more vertical space on middle-sized screens
This commit is contained in:
jude 2023-08-03 18:07:03 +01:00
parent 9405cfcee9
commit a5678e15dc
2 changed files with 61 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/static/css/style.css
View File

@ -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;
} }

14
web/templates/reminder_dashboard/guild_reminder.html.tera
View File

@ -234,19 +234,24 @@
</div> </div>
</div> </div>
<div class="button-row">
<span class="pad-left"></span>
{% if creating %} {% if creating %}
<div class="button-row">
<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>
</div>
<div class="button-row-template">
<button class="button is-success is-outlined" id="createTemplate"> <button class="button is-success is-outlined" id="createTemplate">
<span>Create Template</span> <span class="icon"><i class="fas fa-file-spreadsheet"></i></span> <span>Create Template</span> <span class="icon"><i class="fas fa-file-spreadsheet"></i></span>
</button> </button>
<button class="button is-outlined show-modal is-pulled-right" data-modal="chooseTemplateModal"> <button class="button is-outlined show-modal is-pulled-right" data-modal="chooseTemplateModal">
Load Template Load Template
</button> </button>
</div>
</div>
{% else %} {% 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,12 +260,9 @@
<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-->
<!-- </button>-->
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>