mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-07 19:50:20 +00:00
still trying to fix the scroll div
Still trying to get the scroll div to work correctly with the page for all devices, or at the very least desktop devices.
This commit is contained in:
bobbert committed
1 parent
4d67951956
commit
fe09c45679
6 files changed
+111
-73
No files matched your search
+64
-57
@@ -260,18 +260,17 @@ export default function TeamPage({ params }) {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
padding-bottom: 70px;
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: calc(100vh - 140px); /* Account for header and footer */
|
||||
width: 100%;
|
||||
padding: 80px 0 100px 0;
|
||||
}
|
||||
|
||||
.waves-container {
|
||||
@@ -305,6 +304,7 @@ export default function TeamPage({ params }) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 3;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.team-info {
|
||||
@@ -331,42 +331,60 @@ export default function TeamPage({ params }) {
|
||||
.scroll-background {
|
||||
background-image: url("/images/scroll.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
margin: 20px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 60px 20px 80px 20px;
|
||||
height: calc(100% - 40px);
|
||||
max-height: 100%;
|
||||
width: 80vw;
|
||||
max-width: 450px;
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
flex: 1;
|
||||
min-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.scroll-background {
|
||||
width: 95%;
|
||||
padding: 50px 15px 70px 15px;
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
.members-title {
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.team-actions {
|
||||
width: 90%;
|
||||
bottom: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.members-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.members-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
color: #fff;
|
||||
color: #68543c;
|
||||
text-align: center;
|
||||
margin-top: -46px;
|
||||
margin-top: -30px;
|
||||
}
|
||||
|
||||
.members-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.members-list {
|
||||
@@ -375,6 +393,7 @@ export default function TeamPage({ params }) {
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.member-card {
|
||||
@@ -385,7 +404,7 @@ export default function TeamPage({ params }) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #68543c;
|
||||
border: 1px solid #eaeaea;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
margin: 0 auto 8px auto;
|
||||
@@ -410,7 +429,7 @@ export default function TeamPage({ params }) {
|
||||
max-width: 400px;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 8px;
|
||||
margin: 0 auto;
|
||||
margin: 20px auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -418,12 +437,14 @@ export default function TeamPage({ params }) {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 10px 20px;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
margin-top: 15px;
|
||||
z-index: 5;
|
||||
width: 80%;
|
||||
max-width: 450px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
@@ -446,45 +467,31 @@ export default function TeamPage({ params }) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.loading-container,
|
||||
.error-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #68543c;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
@media (max-height: 500px) {
|
||||
.content-wrapper {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
|
||||
.scroll-background {
|
||||
padding: 40px 15px 60px 15px;
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.members-title {
|
||||
margin-top: -15px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.team-actions {
|
||||
bottom: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 20px;
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-bottom: 20px;
|
||||
color: #d32f2f;
|
||||
@media (min-height: 1000px) {
|
||||
.scroll-background {
|
||||
min-height: 65vh;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user