blaisadmin/FlockPal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed Settings UI

Browse Source
This commit is contained in:
Corey Blais
2026-04-16 21:36:35 -04:00
parent 2ae09149a5
commit 0f587d070a
2 changed files with 59 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+12 -8
View File
@@ -3351,7 +3351,8 @@ function App() {
{activePage === 'settings' ? ( {activePage === 'settings' ? (
<section className="forms-grid settings-grid"> <section className="forms-grid settings-grid">
<article className="panel form-panel"> <div className="settings-column settings-column-left">
<article className="panel form-panel settings-card-flock-profile">
<div className="panel-header"> <div className="panel-header">
<div> <div>
<p className="eyebrow">Flock</p> <p className="eyebrow">Flock</p>
@@ -3414,7 +3415,7 @@ function App() {
</form> </form>
</article> </article>
<article className="panel form-panel"> <article className="panel form-panel settings-card-billing">
<div className="panel-header"> <div className="panel-header">
<div> <div>
<p className="eyebrow">Billing</p> <p className="eyebrow">Billing</p>
@@ -3546,7 +3547,9 @@ function App() {
</div> </div>
</article> </article>
<article className="panel form-panel"> </div>
<div className="settings-column settings-column-right">
<article className="panel form-panel settings-card-collaborators">
<div className="panel-header"> <div className="panel-header">
<div> <div>
<p className="eyebrow">Collaborators</p> <p className="eyebrow">Collaborators</p>
@@ -3639,7 +3642,7 @@ function App() {
) : null} ) : null}
</article> </article>
<article className="panel form-panel"> <article className="panel form-panel settings-card-automation">
<div className="panel-header"> <div className="panel-header">
<div> <div>
<p className="eyebrow">Automation</p> <p className="eyebrow">Automation</p>
@@ -3742,7 +3745,7 @@ function App() {
) : null} ) : null}
</article> </article>
<article className="panel form-panel"> <article className="panel form-panel settings-card-separate-flock">
<div className="panel-header"> <div className="panel-header">
<div> <div>
<p className="eyebrow">Separate flock</p> <p className="eyebrow">Separate flock</p>
@@ -3853,7 +3856,7 @@ function App() {
) : null} ) : null}
</article> </article>
<article className="panel form-panel"> <article className="panel form-panel settings-card-bird-profiles">
<div className="panel-header"> <div className="panel-header">
<div> <div>
<p className="eyebrow">Bird profiles</p> <p className="eyebrow">Bird profiles</p>
@@ -4117,10 +4120,10 @@ function App() {
) : null} ) : null}
</article> </article>
<article className="panel form-panel"> <article className="panel form-panel settings-card-transfer">
<div className="panel-header"> <div className="panel-header">
<div> <div>
<p className="eyebrow">Settings</p> <p className="eyebrow">Transfer</p>
<h2>Bird transfer</h2> <h2>Bird transfer</h2>
</div> </div>
<button <button
@@ -4193,6 +4196,7 @@ function App() {
</> </>
) : null} ) : null}
</article> </article>
</div>
</section> </section>
) : null} ) : null}
</section> </section>
frontend/src/index.css
+47 -7
View File
@@ -436,18 +436,53 @@ textarea {
} }
.settings-grid { .settings-grid {
display: block; display: grid;
column-count: 2; grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 1.5rem; gap: 1.5rem;
align-items: start;
} }
.settings-grid > .panel { .settings-column {
display: inline-grid; display: grid;
gap: 1.5rem;
align-content: start;
}
.settings-column > .panel {
display: grid;
width: 100%; width: 100%;
margin: 0 0 1.5rem; margin: 0;
break-inside: avoid; break-inside: avoid;
} }
.settings-card-bird-profiles {
order: 1;
}
.settings-card-collaborators {
order: 2;
}
.settings-card-separate-flock {
order: 3;
}
.settings-card-automation {
order: 4;
}
.settings-card-transfer {
order: 5;
}
.settings-card-flock-profile {
order: 1;
}
.settings-card-billing {
order: 2;
}
.flock-member-panel, .flock-member-panel,
.flock-member-sections { .flock-member-sections {
display: grid; display: grid;
@@ -1303,7 +1338,12 @@ label {
} }
.settings-grid { .settings-grid {
column-count: 1; grid-template-columns: 1fr;
}
.settings-column,
.settings-column > .panel {
grid-column: auto;
} }
.side-nav { .side-nav {