QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-15 20:30:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #560 from bigcapitalhq/fix-onboarding-on-small-screens

Browse Source 
fix: Onboarding layout on small screens
This commit is contained in:
Ahmed Bouhuolia
2024-08-01 19:53:09 +02:00
committed by GitHub
parent 4cd0405078 219e6fb466
commit ded4e2bb59
4 changed files with 27 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/webapp/src/containers/Setup/SetupSubscription/SetupSubscription.module.scss
View File

@@ -2,6 +2,7 @@
.root{
margin: 0 auto;
padding: 0 40px;
padding-right: 20px;
}
.periodSwitch {

2
packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx
View File

@@ -6,7 +6,7 @@ export function SubscriptionPlans() {
const subscriptionPlans = useSubscriptionPlans();
return (
<Group spacing={14} noWrap align="stretch">
<Group spacing={10} noWrap align="stretch">
{subscriptionPlans.map((plan, index) => (
<SubscriptionPlan
key={index}

2
packages/webapp/src/style/App.scss
View File

@@ -39,7 +39,7 @@
@import "section";
.App {
min-width: 960px;
min-width: 1100px;
}
// =======

63
packages/webapp/src/style/pages/Setup/SetupPage.scss
View File

@@ -1,36 +1,25 @@
@import "../../_base.scss";
.setup-page {
display: grid;
grid-template-columns: 40% 60%;
max-width: 1600px;
min-height: 100vh;
@media only screen and (max-width: 1500px) {
grid-template-columns: 35% 65%;
}
@media only screen and (max-width: 1200px) {
grid-template-columns: 26% 74%;
}
&__right-section {
display: flex;
flex-direction: row;
width: 100%;
&:before {
content: '';
display: block;
width: 100%;
height: 1px;
max-width: 600px;
min-width: 600px;
@media only screen and (max-width: 1500px) {
min-width: 500px;
max-width: 500px;
}
@media only screen and (max-width: 1024px) {
min-width: 400px;
max-width: 400px;
}
}
overflow: auto;
h1 {
font-size: 22px;
}
h1,
h3 {
font-weight: 500;
@@ -44,22 +33,9 @@
}
&__left-section {
position: fixed;
background-color: #2f3d6f;
overflow: auto;
z-index: 1;
height: 100%;
width: 100%;
left: 0;
top: 0;
width: 600px;
@media only screen and (max-width: 1500px) {
width: 500px;
}
@media only screen and (max-width: 1024px) {
width: 400px;
}
.content {
display: flex;
@@ -76,6 +52,11 @@
padding-left: 10px;
}
&__header{
position: sticky;
top: 0;
}
&__title {
font-size: 50px;
font-weight: 100;
@@ -84,8 +65,8 @@
margin-top: 14px;
color: rgba(255, 255, 255, 0.75);
@media only screen and (max-width: 1024px) {
font-size: 45px;
@media only screen and (max-width: 1200px) {
font-size: 36px;
}
}
@@ -111,16 +92,20 @@
&__footer {
margin-top: auto;
position: sticky;
bottom: 20px;
}
&__links {
text-align: left;
opacity: 0.65;
display: flex;
flex-direction: row;
gap: 10px;
flex-wrap: wrap;
>div {
font-size: 13px;
margin-right: 15px;
display: inline;
a {
color: #fff;