settings responsive pt. 1
ripped out all of the old responsive styles from the setting layou and plugged in the new format. still needs some polish but the new structure is in place, so progress will be easier
This commit is contained in:
parent
bdca7f4ace
commit
db5ee3f87f
2 changed files with 83 additions and 95 deletions
|
|
@ -318,111 +318,99 @@ section#site-themes > a {
|
||||||
z-index: 30;
|
z-index: 30;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[class="data-settings"] {
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 900px) {
|
|
||||||
main > article[class="settings"] {
|
|
||||||
width: 97%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 650px) {
|
|
||||||
section[class="member-settings"] div input[type="text"] {
|
|
||||||
width: 99.3%;
|
|
||||||
height: 40px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[class="member-settings"] {
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[class="member-settings"] > div[class="mail"] input {
|
|
||||||
width: 97.7%;
|
|
||||||
height: 40px;
|
|
||||||
padding-left: 5px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[class="member-settings"] div textarea {
|
|
||||||
height: 80px;
|
|
||||||
width: 99.3%;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[class="member-settings"] > div:nth-child(1) {
|
|
||||||
grid-column: 1/2;
|
|
||||||
grid-row: 1/3;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[class="member-settings"] > div:nth-child(2) {
|
|
||||||
grid-column: 2/3;
|
|
||||||
grid-row: 1/3;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[class="member-settings"] > div:nth-child(3) {
|
|
||||||
grid-column: 1/3;
|
|
||||||
grid-row: 3/5;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[class="member-settings"] > div:nth-child(4) {
|
|
||||||
grid-column: 1/2;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[class="member-settings"] > div:nth-child(5) {
|
|
||||||
grid-column: 2/3;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[class="member-settings"] > div:nth-child(6) {
|
|
||||||
grid-column: 1/2;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[class="member-settings"] > div:nth-child(7) {
|
|
||||||
grid-column: 2/3;
|
|
||||||
min-height: 325px;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[class="member-settings"] > div:nth-child(8) {
|
|
||||||
grid-column: 1/3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 530px) {
|
@media only screen and (max-width: 530px) {
|
||||||
section[class="member-settings"] > div[class="mail"] input {
|
article.settings div.tab-toolbar button {
|
||||||
width: 98.5%;
|
width: 20%;
|
||||||
|
height: 40px;
|
||||||
|
color: var(--secondary);
|
||||||
|
font-size: 0.7em;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[class="member-settings"] {
|
section#site-profile {
|
||||||
grid-template-columns: 100%;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[class="member-settings"] div textarea {
|
section#site-profile > div:nth-child(1) {
|
||||||
height: 80px;
|
grid-column: 1/4;
|
||||||
|
grid-row: 1;
|
||||||
|
height: 250px;
|
||||||
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[class="member-settings"] > div:nth-child(1) {
|
section#site-profile > div:nth-child(2) {
|
||||||
grid-row: 1/3;
|
grid-column: 1/4;
|
||||||
height: 200px;
|
grid-row: 2;
|
||||||
|
height: 250px;
|
||||||
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[class="member-settings"] > div:nth-child(2) {
|
section#site-profile > div:nth-child(3) {
|
||||||
grid-row: 3/5;
|
grid-column: 1/4;
|
||||||
grid-column: 1;
|
grid-row: 3;
|
||||||
height: 200px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[class="member-settings"] > div:nth-child(3) {
|
section#site-profile > div:nth-child(4) {
|
||||||
grid-column: 1;
|
grid-column: 1/4;
|
||||||
grid-row: 5/7;
|
grid-row: 4;
|
||||||
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[class="member-settings"] > div:nth-child(4),
|
section#site-profile > div:nth-child(4) a {
|
||||||
section[class="member-settings"] > div:nth-child(5),
|
font-weight: bold;
|
||||||
section[class="member-settings"] > div:nth-child(6),
|
text-decoration: underline;
|
||||||
section[class="member-settings"] > div:nth-child(7),
|
color: var(--primary-highlight);
|
||||||
section[class="member-settings"] > div:nth-child(8) {
|
}
|
||||||
grid-column: 1;
|
|
||||||
|
section#site-profile > div:nth-child(5) {
|
||||||
|
grid-column: 1/4;
|
||||||
|
grid-row: 5;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section#site-profile > div:nth-child(6) {
|
||||||
|
grid-column: 1/4;
|
||||||
|
grid-row: 6;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section#site-profile > div:nth-child(6) div {
|
||||||
|
display: inline-block;
|
||||||
|
color: var(--secondary);
|
||||||
|
word-wrap: break-word;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 49%;
|
||||||
|
}
|
||||||
|
|
||||||
|
section#site-profile > div:nth-child(6) div > span {
|
||||||
|
display: block;
|
||||||
|
background: var(--primary);
|
||||||
|
color: var(--secondary);
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 3px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section#site-profile > div textarea {
|
||||||
|
width: 98.4%;
|
||||||
|
height: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
article.settings section.settings-tabs section.section-tab {
|
||||||
|
width: 98%;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section#site-features > div.features-mail {
|
||||||
|
width: 96%;
|
||||||
|
}
|
||||||
|
|
||||||
|
section#site-features div.site-options button,
|
||||||
|
section#site-features div.site-maintenance button {
|
||||||
|
width: 86%;
|
||||||
|
}
|
||||||
|
|
||||||
|
section#site-features div.option-container span {
|
||||||
|
font-size: 0.7em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
<button id="themes" class="tab-button">THEMES</button>
|
<button id="themes" class="tab-button">THEMES</button>
|
||||||
</div>
|
</div>
|
||||||
<section class="settings-tabs">
|
<section class="settings-tabs">
|
||||||
<section id="site-profile" class="section-tab hide">
|
<section id="site-profile" class="section-tab show">
|
||||||
<div class="member-avatar">
|
<div class="member-avatar">
|
||||||
<div class="avatar" style="background: url({{ $member['avatar'] }} ) no-repeat center center / cover"></div>
|
<div class="avatar" style="background: url({{ $member['avatar'] }} ) no-repeat center center / cover"></div>
|
||||||
<input id="avatar-upload" type="file" name="avatar-upload"/>
|
<input id="avatar-upload" type="file" name="avatar-upload"/>
|
||||||
|
|
@ -142,7 +142,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section id="site-themes" class="section-tab show">
|
<section id="site-themes" class="section-tab hide">
|
||||||
@foreach($themes as $theme)
|
@foreach($themes as $theme)
|
||||||
@if($theme['name'] == $currentTheme)
|
@if($theme['name'] == $currentTheme)
|
||||||
<!--
|
<!--
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue