projects/fipamo
1
0
Fork 1
Code Issues 24 Pull requests 1 Projects 1 Releases 22 Packages Wiki Activity

settings responsive pt. 1

Browse source 
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:
ro 2024-05-28 13:00:25 -06:00
parent bdca7f4ace
commit db5ee3f87f
No known key found for this signature in database
GPG key ID: 29B551CDBD4D3B50
2 changed files with 83 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

174
public/assets/css/dash/settings.css
View file

@ -318,111 +318,99 @@ section#site-themes > a {
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) {
section[class="member-settings"] > div[class="mail"] input {
width: 98.5%;
article.settings div.tab-toolbar button {
width: 20%;
height: 40px;
color: var(--secondary);
font-size: 0.7em;
}
section[class="member-settings"] {
grid-template-columns: 100%;
section#site-profile {
grid-template-columns: 1fr;
}
section[class="member-settings"] div textarea {
height: 80px;
section#site-profile > div:nth-child(1) {
grid-column: 1/4;
grid-row: 1;
height: 250px;
padding: 10px;
}
section[class="member-settings"] > div:nth-child(1) {
grid-row: 1/3;
height: 200px;
section#site-profile > div:nth-child(2) {
grid-column: 1/4;
grid-row: 2;
height: 250px;
padding: 10px;
}
section[class="member-settings"] > div:nth-child(2) {
grid-row: 3/5;
grid-column: 1;
height: 200px;
section#site-profile > div:nth-child(3) {
grid-column: 1/4;
grid-row: 3;
padding-left: 10px;
}
section[class="member-settings"] > div:nth-child(3) {
grid-column: 1;
grid-row: 5/7;
section#site-profile > div:nth-child(4) {
grid-column: 1/4;
grid-row: 4;
padding: 5px;
}
section[class="member-settings"] > div:nth-child(4),
section[class="member-settings"] > div:nth-child(5),
section[class="member-settings"] > div:nth-child(6),
section[class="member-settings"] > div:nth-child(7),
section[class="member-settings"] > div:nth-child(8) {
grid-column: 1;
section#site-profile > div:nth-child(4) a {
font-weight: bold;
text-decoration: underline;
color: var(--primary-highlight);
}
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;
}
}

4
resources/views/back/settings.blade.php
View file

@ -10,7 +10,7 @@
<button id="themes" class="tab-button">THEMES</button>
</div>
<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="avatar" style="background: url({{ $member['avatar'] }} ) no-repeat center center / cover"></div>
<input id="avatar-upload" type="file" name="avatar-upload"/>
@ -142,7 +142,7 @@
</div>
</div>
</section>
<section id="site-themes" class="section-tab show">
<section id="site-themes" class="section-tab hide">
@foreach($themes as $theme)
@if($theme['name'] == $currentTheme)
<!--