Update styles for mobile

This commit is contained in:
jude 2023-09-23 18:04:41 +01:00
parent 8587bed703
commit 37177c2431
2 changed files with 153 additions and 49 deletions

View File

@ -129,6 +129,12 @@ div.split-controls {
margin-top: 0 !important; margin-top: 0 !important;
} }
.reminder-settings > .column {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
}
div.reminderContent { div.reminderContent {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
@ -291,10 +297,19 @@ div.dashboard-sidebar:not(.mobile-sidebar) {
flex-direction: column; flex-direction: column;
} }
ul.guildList {
flex-grow: 1;
flex-shrink: 1;
overflow: auto;
}
div.dashboard-sidebar:not(.mobile-sidebar) .aside-footer { div.dashboard-sidebar:not(.mobile-sidebar) .aside-footer {
position: fixed; flex-shrink: 0;
bottom: 0; flex-grow: 0;
width: 226px; }
div.dashboard-sidebar svg {
flex-shrink: 0;
} }
div.mobile-sidebar { div.mobile-sidebar {
@ -444,8 +459,7 @@ input.default-width {
.customizable.is-400x300 img { .customizable.is-400x300 img {
margin-top: 10px; margin-top: 10px;
width: 100%; width: 100%;
min-height: 100px; height: 100px;
max-height: 400px;
} }
.customizable.is-32x32 img { .customizable.is-32x32 img {
@ -589,6 +603,14 @@ input.default-width {
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
} }
.channel-selector {
width: 100%;
}
.select {
width: 100%;
}
li.highlight { li.highlight {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
@ -632,6 +654,21 @@ li.highlight {
} }
} }
@media only screen and (max-width: 1023px) {
p.title.pageTitle {
display: none;
}
.dashboard-frame {
margin-top: 4rem !important;
}
.customizable.thumbnail img {
width: 60px;
height: 60px;
}
}
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.button-row-edit { .button-row-edit {
display: flex; display: flex;
@ -642,26 +679,6 @@ li.highlight {
width: 100%; width: 100%;
margin: 4px; margin: 4px;
} }
p.title.pageTitle {
display: none;
}
.dashboard-frame {
margin-top: 4rem !important;
}
}
@media only screen and (max-width: 768px) {
.customizable.thumbnail img {
width: 60px;
height: 60px;
}
.customizable.is-24x24 img {
width: 16px;
height: 16px;
}
} }
/* loader */ /* loader */
@ -679,6 +696,86 @@ li.highlight {
/* END */ /* END */
div.reminderError {
margin: 10px;
padding: 14px;
background-color: #f5f5f5;
border-radius: 8px;
}
div.reminderError .errorHead {
display: flex;
flex-direction: row;
}
div.reminderError .errorIcon {
padding: 8px;
border-radius: 4px;
margin-right: 12px;
}
div.reminderError .errorIcon .fas {
display: none
}
div.reminderError[data-case="deleted"] .errorIcon {
background-color: #e7e5e4;
}
div.reminderError[data-case="failed"] .errorIcon {
background-color: #fecaca;
}
div.reminderError[data-case="sent"] .errorIcon {
background-color: #d9f99d;
}
div.reminderError[data-case="deleted"] .errorIcon .fas.fa-trash {
display: block;
}
div.reminderError[data-case="failed"] .errorIcon .fas.fa-exclamation-triangle {
display: block;
}
div.reminderError[data-case="sent"] .errorIcon .fas.fa-check {
display: block;
}
div.reminderError .errorHead .reminderName {
font-size: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
color: rgb(54, 54, 54);
flex-grow: 1;
}
div.reminderError .errorHead .reminderTime {
font-size: 1rem;
display: flex;
flex-direction: column;
flex-shrink: 1;
justify-content: center;
color: rgb(54, 54, 54);
background-color: #ffffff;
padding: 8px;
border-radius: 4px;
border-color: #e5e5e5;
border-width: 1px;
border-style: solid;
}
div.reminderError .reminderMessage {
font-size: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
color: rgb(54, 54, 54);
flex-grow: 1;
font-style: italic;
}
/* other stuff */ /* other stuff */
.half-rem { .half-rem {
@ -716,6 +813,18 @@ a.switch-pane {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.guild-submenu {
display: none;
}
.guild-submenu li {
font-size: 0.8rem;
}
a.switch-pane.is-active ~ .guild-submenu {
display: block;
}
.feedback { .feedback {
background-color: #5865F2; background-color: #5865F2;
} }

View File

@ -133,32 +133,27 @@
</article> </article>
</div> </div>
<div class="column settings"> <div class="column settings">
<div class="columns"> <div class="field channel-field">
<div class="column"> <div class="collapses">
<div class="field channel-field"> <label class="label" for="channelOption">Channel*</label>
<div class="collapses"> </div>
<label class="label" for="channelOption">Channel*</label> <div class="control has-icons-left">
</div> <div class="select">
<div class="control has-icons-left"> <select name="channel" class="channel-selector">
<div class="select"> </select>
<select name="channel" class="channel-selector"> </div>
</select> <div class="icon is-small is-left">
</div> <i class="fas fa-hashtag"></i>
<div class="icon is-small is-left">
<i class="fas fa-hashtag"></i>
</div>
</div>
</div> </div>
</div> </div>
<div class="column"> </div>
<div class="field">
<div class="control"> <div class="field">
<label class="label collapses"> <div class="control">
Time* <label class="label collapses">
<input class="input prefill-now" type="datetime-local" step="1" name="time"> Time*
</label> <input class="input prefill-now" type="datetime-local" step="1" name="time">
</div> </label>
</div>
</div> </div>
</div> </div>