update style

GitDataAI · Feb 1, 2024 · 6f361a3 · 6f361a3
1 parent 9a48dbc
commit 6f361a3
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 35 deletions.
diff --git a/src/lib/components/leftnav.tsx b/src/lib/components/leftnav.tsx
@@ -32,7 +32,7 @@ const RepositoryList = (refresh,prefix, after) => {
                                                 pathname: `/repositories/:user/:repoId/objects`,
                                                 params: {repoId: repo.name,user},
                                             }}>
-                                                <img src="/pub/jiaozifs3.png" alt="" /><span>{user+'/'}{repo.name}</span>
+                                                <span><img src="/jiaozifs3.png" alt="" />{user+'/'}{repo.name}</span>
                                             </Link>
                             </Col>
                         </Row>

diff --git a/src/lib/components/loading/index.tsx b/src/lib/components/loading/index.tsx
@@ -50,12 +50,13 @@ const Loadingpage = ()  =>{
     return (
         <>
         <div className="welcome">
-            <img src="/pub/jiaozifs.png"/>
-            <h1>Welecome to Jiazozi FS Cloud</h1>
-           <h2><code>For data security, please be patient and wait for the environment check to complete.</code></h2>
+            <img src="/jiaozifs.png"/>
+            <h1>Welcome to JiaoziFS Cloud</h1>
+           <code>Get started with a fully functional playground environment and start data versioning at scale today!</code><br/> 
+           <code>No deployment, installing, maintaining and scaling overhead.</code>
         </div>
       <div className="Progress">
-            {ver?<strong className="version">version:{ver.api_version}</strong>:<strong className="version">It's getting version from server now</strong>}
+            {ver?<span className="version">version: {ver.latest_version}</span>:<span className="version">It's getting version from server now</span>}
             <ProgressBar animated now={loading} />
       </div>
       </>

diff --git a/src/lib/components/navbar.tsx b/src/lib/components/navbar.tsx
@@ -74,17 +74,8 @@ const TopNav = ({logged = true}) => {
             <Container fluid={true}>
                 <Link component={Navbar.Brand} href="/">
                     <img src="/jiaozifs3.png" alt="JiaoziFS" className="logo"/>
+                    <TopNavLink href="/repositories"><strong>JiaoziFS Cloud</strong></TopNavLink>
                 </Link>
-
-                <Navbar.Toggle aria-controls="navbarScroll" />
-                <Navbar.Collapse id="navbarScroll">
-
-                    <Nav className="me-auto my-2 my-lg-0"
-                         style={{ maxHeight: '100px' }}
-                         navbarScroll>
-                        <TopNavLink href="/repositories">JiaoziFS Cloud</TopNavLink>
-                    </Nav>
-                </Navbar.Collapse>
             </Container>
         </Navbar>
     );

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -15,6 +15,7 @@ export const IndexPage = () => {
                         <Route path="/" element={<Navigate to="/repositories"/>} />
                         <Route path="/repositories/*" element={<Repositories/>} />
                         <Route path="/login/*" element={<Login/>} />
+                        <Route path="/loading/*" element={<Loadingpage/>} />
                         <Route path="/register/*" element={<Register/>} />
                         <Route path="*" element={<Navigate to="/repositories" replace />} />
                     </Routes>

diff --git a/src/pages/repositories/index.tsx b/src/pages/repositories/index.tsx
@@ -66,7 +66,8 @@ useEffect(()=>{
         <Layout>
             <Container fluid="xl" className="mt-3">
                 {<ActionsBar>
-                    <Form style={{minWidth: 300}} onSubmit={e => { e.preventDefault(); }}>
+                    <h2><strong>Repositories Lists</strong></h2>
+                    {/* <Form style={{minWidth: 300}} onSubmit={e => { e.preventDefault(); }}>
                         <Form.Group>
                             <Col>
                                 <InputGroup>
@@ -82,7 +83,7 @@ useEffect(()=>{
                                 </InputGroup>
                             </Col>
                         </Form.Group>
-                    </Form>
+                    </Form> */}
                     <ButtonToolbar className="ms-auto mb-2">
                         <CreateRepositoryButton variant={"success"} enabled={true} onClick={createRepositoryButtonCallback} />
                     </ButtonToolbar>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -24,11 +24,6 @@ html{
   right: 0;
 }
 
-.main-app {
-  display: flex;
-}
-
-
 .navbar-brand {
   padding: 0;
 }

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -6,6 +6,14 @@ a {
   color: inherit;
   text-decoration: none;
 }
+.main-app {
+  display: flex;
+}
+@media (max-width: 600px) {
+  .main-app {
+    display: grid;
+  }
+}
 .logo {
   margin-left: 20px;
   margin-right: -10px;
@@ -147,6 +155,14 @@ a {
   margin-right: 10px;
   background-color: #fff;
 }
+@media (max-width: 600px) {
+  .sidebar {
+    height: 60vh;
+    margin-left: 5rem;
+    width: 20rem;
+    border: 2px solid #dbe0fc;
+  }
+}
 .sidebar .navbar-expand {
   justify-content: center;
 }
@@ -178,6 +194,12 @@ a {
   margin: 15px;
   width: 100%;
 }
+@media (max-width: 600px) {
+  .child {
+    margin-left: 5rem;
+    border: 2px solid #dbe0fc;
+  }
+}
 .diif-remove span {
   background-color: rgba(255, 0, 0, 0.2);
   text-decoration: line-through;
@@ -192,27 +214,43 @@ a {
   border-radius: 5px;
 }
 .welcome {
+  margin-top: 100px;
   display: grid;
   justify-content: center;
 }
+.welcome code {
+  color: #827a7e;
+  margin: auto  ;
+}
 .welcome img {
+  width: 70px;
   margin: 0 auto;
 }
 .welcome h1 {
-  margin: 0 auto;
+  font-size: 16px;
+  margin: 20px auto;
 }
 .Progress {
-  width: 50%;
-  position: absolute;
-  bottom: 2rem;
-  left: 25%;
+  width: 40%;
+  margin: 10rem auto;
+}
+.Progress .progress-bar {
+  background-color: #95a3a7;
 }
 .Progress .version {
   display: block;
-  width: 102px;
+  width: 200px;
   margin: 0 auto;
 }
 .topNav {
   background-color: #f1f1f3;
   border-bottom: 2px solid #dbe0fc;
 }
+.topNav .navbar-brand {
+  display: flex;
+}
+.topNav .navbar-brand .nav-link {
+  line-height: 30px;
+  margin-left: 1rem;
+  font-size: 16px;
+}
diff --git a/src/styles/index.less b/src/styles/index.less
@@ -8,6 +8,13 @@ a {
   color: inherit;    
   text-decoration: none; 
 }
+
+.main-app {
+  display: flex;
+  @media (max-width: 600px) {
+    display: grid;
+   }
+}
 .logo{
   margin-left: 20px;
   margin-right: -10px;
@@ -150,6 +157,12 @@ a {
   border-right: 2px solid rgb(219, 224, 252);
   margin-right: 10px;
   background-color: #fff;
+  @media (max-width: 600px) {
+    height: 60vh;
+    margin-left: 5rem;
+    width: 20rem;
+    border: 2px solid rgb(219, 224, 252);
+  }
   .navbar-expand {
     justify-content: center;
   }
@@ -183,6 +196,10 @@ a {
 .child{
   margin: 15px;
   width: 100%;
+  @media (max-width: 600px) {
+    margin-left: 5rem;
+    border: 2px solid rgb(219, 224, 252);
+  }
 }
 
 .diif-remove{
@@ -203,28 +220,43 @@ a {
   border-radius: 5px;
 }
 .welcome{
-
+  margin-top: 100px;
   display: grid;
   justify-content: center;
+  code{
+    color: #827a7e;
+    margin: auto  ;
+  }
   img{
+    width: 70px;
     margin: 0 auto;
   }
   h1{
-    margin: 0 auto;
+    font-size: 16px;
+    margin: 20px auto;
   }
 }
 .Progress{
-  width: 50%;
-  position: absolute;
-  bottom: 2rem;
-  left: 25%;
+  width: 40%;
+  margin:10rem auto;
+  .progress-bar{
+    background-color: #95a3a7;
+  }
   .version{
     display: block;
-    width: 102px;
+    width: 200px;
     margin: 0 auto;
   }
 }
 .topNav{
   background-color: #f1f1f3;
   border-bottom: 2px solid rgb(219, 224, 252);
+  .navbar-brand{
+    display: flex;
+    .nav-link{
+      line-height: 30px;
+      margin-left: 1rem;
+      font-size: 16px;
+    }
+  }
 }