nolanlawson
/
pinafore
forked from cybrespace/pinafore
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

tweak style for mobile

This commit is contained in:
Nolan Lawson 2018-01-31 09:06:06 -08:00
parent eebadf8a71
commit 545d2a9d92
3 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
routes/settings/_components/SettingsLayout.html
View File

@ -15,6 +15,11 @@
:global(.settings .free-text h2) { :global(.settings .free-text h2) {
margin: 20px 0 10px; margin: 20px 0 10px;
} }
@media (max-width: 767px) {
.settings {
margin: 20px 10px;
}
}
</style> </style>
<script> <script>
import SettingsNav from './SettingsNav.html'; import SettingsNav from './SettingsNav.html';

32
routes/settings/_components/SettingsList.html
View File

@ -1,18 +1,28 @@
{{#if label}} <div class="settings-list-wrapper">
<ul class="settings-list" aria-label="{{label}}"> {{#if label}}
<slot></slot> <ul class="settings-list" aria-label="{{label}}">
</ul> <slot></slot>
{{else}} </ul>
<ul class="settings-list"> {{else}}
<slot></slot> <ul class="settings-list">
</ul> <slot></slot>
{{/if}} </ul>
{{/if}}
</div>
<style> <style>
.settings-list-wrapper {
margin: 20px 20px;
}
ul.settings-list { ul.settings-list {
list-style: none; list-style: none;
width: 100%; width: 100%;
border: 1px solid var(--settings-list-item-border); border: 1px solid var(--settings-list-item-border);
margin: 20px auto; margin: 0 auto;
max-width: 80%; box-sizing: border-box;
}
@media (max-width: 767px) {
.settings-list-wrapper {
margin: 20px 0;
}
} }
</style> </style>

12
routes/settings/_components/SettingsListItem.html
View File

@ -55,4 +55,16 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@media (max-width: 767px) {
.settings-list-item a {
padding: 20px 10px;
}
.settings-list-item svg {
margin-right: 10px;
}
.settings-list-item .offset-for-icon {
margin-left: 34px;
}
}
</style> </style>