make top bar fixed

394-w25 · Jan 21, 2025 · bff0607 · bff0607
1 parent e005e8a
commit bff0607
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 29 deletions.
diff --git a/src/components/Account/Account.css b/src/components/Account/Account.css
@@ -1,3 +1,11 @@
 .account-details {
     margin-bottom: 20px;
+}
+
+.account-content {
+    text-align: center;
+    padding-top: 20px;
+    height: calc(100vh - 56px - 64px); /* This is the height of the viewport minus the height of the app bar and the bottom navigation bar */
+    margin-top: 4rem;
+    margin-bottom: 6rem;
 }
diff --git a/src/components/Account/Account.jsx b/src/components/Account/Account.jsx
@@ -23,7 +23,7 @@ function Account({ userName, userEmail, profilePic }) {
       <AppBar />
       <Container 
         maxWidth="sm"
-        style={{ textAlign: 'center', paddingTop: '20px', height: '100vh' }}
+        className="account-content"
       >
         <Box
           style={{

diff --git a/src/components/AppBar/AppBar.css b/src/components/AppBar/AppBar.css
@@ -6,6 +6,12 @@
     color: white;
     height: 4rem;
     padding: 0 1rem;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 1000;
   }
 
   .app-bar-title {

diff --git a/src/components/Feed/Feed.css b/src/components/Feed/Feed.css
@@ -1,4 +1,4 @@
-.feed-screen {
-    background-color: white;
-    width: 100%;
+.feed-content {
+    margin-top: 4rem;
+    margin-bottom: 4rem;
 }
diff --git a/src/components/Feed/Feed.jsx b/src/components/Feed/Feed.jsx
@@ -79,26 +79,26 @@ function Feed() {
   return (
     <div>
       <AppBar />
-      <Tabs value={value} onChange={handleChange} centered>
-        <Tab label="Friends" icon={<PeopleIcon />} component={Link} to="/feed" />
-        <Tab label="Public" icon={<PublicIcon />} component={Link} to="/public" />
-      </Tabs>
-      <CourseSelect searchFunc={setSearch} />
-      <Container maxWidth="sm">
-        <Box paddingBottom="30px">
-          <Stack spacing={3}>
-              { filteredposts.length === 0 ?
-                (<p>No results found...</p>) :
-                  (filteredposts
-                    .slice()
-                    .sort((a, b) => b.date.seconds - a.date.seconds).map((post) => 
-                    <div key={post.id}>
-                      <Post post={post} friends={fake_friends} />
-                    </div>)
-                  )
-              }
-          </Stack>
-        </Box>
+      <Container className="feed-content" maxWidth="sm">
+        <Tabs value={value} onChange={handleChange} centered>
+          <Tab label="Friends" icon={<PeopleIcon />} component={Link} to="/feed" />
+          <Tab label="Public" icon={<PublicIcon />} component={Link} to="/public" />
+        </Tabs>
+        <CourseSelect searchFunc={setSearch} />
+          <Box paddingBottom="30px">
+            <Stack spacing={3}>
+                { filteredposts.length === 0 ?
+                  (<p>No results found...</p>) :
+                    (filteredposts
+                      .slice()
+                      .sort((a, b) => b.date.seconds - a.date.seconds).map((post) => 
+                      <div key={post.id}>
+                        <Post post={post} friends={fake_friends} />
+                      </div>)
+                    )
+                }
+            </Stack>
+          </Box>
       </Container>
     <NavigationBar />
     </div>

diff --git a/src/components/NavigationBar/NavigationBar.css b/src/components/NavigationBar/NavigationBar.css
@@ -1,6 +1,8 @@
 .nav-bar {
     background-color: 	#f5f5f5 !important;
-    position: sticky;
+    position: fixed;
+    left: 0;
+    right: 0;
     bottom: 0;
     width: 100%;
 }
diff --git a/src/components/Submission/Submission.css b/src/components/Submission/Submission.css
@@ -1,6 +1,7 @@
-.submission-page {
-    padding: 3em;
-    height: 100vh;
+.submission-content {
+    height: calc(100vh - 56px - 64px);
+    margin-top: 6rem;
+    margin-bottom: 6rem;
 }
 
 #rating {

diff --git a/src/components/Submission/Submission.jsx b/src/components/Submission/Submission.jsx
@@ -59,7 +59,7 @@ function Submission({ userName }) {
 
     <div>
       <AppBar />
-      <Container className="submission-page">
+      <Container className="submission-content">
         <Stack spacing={2}>
           <TextField required id="title" label="Title" value={title} type='text' onChange={(e) => setTitle(e.target.value)} />
           <TextField required id="course" label="Course" value={course} type='text' onChange={(e) => setCourse(e.target.value)} />