More layout related polishing

frontend/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0 --port 3000",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"

frontend/src/App.css

@@ -1,8 +1,3 @@
 a{
 	padding: 1em;
-}
-
-.blogContent{
-	margin-left:25% !important;
-	margin-right:25% !important;
 }

frontend/src/components/blog.jsx

@@ -36,7 +36,8 @@ function Blog(props) {
         </Col>
       </Row>
       <Row className="mr-2 ml-2 mb-2 mt-1 blogContent">
-        <Col>
+        <Col xs="3" className="d-none d-md-block"></Col>
+        <Col xs={`${console.log(window.screen.width) >= 765 ? '6':''}`}>
           <h1 className={`${ThemeConfig[GlobalTheme].textColor}`}>{blogData.name}</h1>
           <h4 className={`${ThemeConfig[GlobalTheme].textColor}`}>{blogData.description}</h4>
           <div>
@@ -50,16 +51,18 @@ function Blog(props) {
               Share
             </Button>
             <UncontrolledCollapse toggler="#toggler">
-              <Card>
+              <Card style={{overflowX: 'auto'}}>
                 <CardBody>
                   <ButtonGroup
+                    vertical
                     className="my-2"
                   >
                   <Button outline>
                     <Link to="#" onClick={(e) => {
                       e.preventDefault();
-                      navigator.clipboard.writeText(window.location.href)
+                      navigator.clipboard.writeText(window.location.href).then(() => {
-                      props.notificationToggler("Link copied")
+                        props.notificationToggler("Link copied")
+                      })
                       return false;
                     }}>
                       Copy Link
@@ -98,6 +101,7 @@ function Blog(props) {
             </UncontrolledCollapse>
           </div>
         </Col>
+        <Col xs="3" className="d-none d-md-block"></Col>
       </Row>
 
       <Row className={`my-2 ${ThemeConfig[GlobalTheme].background}`}>
@@ -106,12 +110,16 @@ function Blog(props) {
         </Col>
       </Row>
 
-      <Row className="mr-5 ml-5 mt-1 blogContent">
+      <Row className="mr-2 ml-2 mt-1">
-        <Col style={{marginBottom: '25px'}}>
+      <Col xs="3" className="d-none d-md-block"></Col>
-          <div style={{marginLeft: '50px', marginRight: '50px'}} className={`${ThemeConfig[GlobalTheme].textColor}`} dangerouslySetInnerHTML={{ __html: blogData.contentBody }} />
+
-          <div style={{marginLeft: '50px', marginRight: '50px'}} className={`${ThemeConfig[GlobalTheme].textColor}`} dangerouslySetInnerHTML={{ __html: blogData.contentBody }} />
+      <Col xs={`${console.log(window.screen.width) >= 765 ? '6':''}`} style={{marginBottom: '25px'}}>
-          <div style={{marginLeft: '50px', marginRight: '50px'}} className={`${ThemeConfig[GlobalTheme].textColor}`} dangerouslySetInnerHTML={{ __html: blogData.contentBody }} />
+        <div className={`${ThemeConfig[GlobalTheme].textColor}`} dangerouslySetInnerHTML={{ __html: blogData.contentBody }} />
-        </Col>
+        <div className={`${ThemeConfig[GlobalTheme].textColor}`} dangerouslySetInnerHTML={{ __html: blogData.contentBody }} />
+        <div className={`${ThemeConfig[GlobalTheme].textColor}`} dangerouslySetInnerHTML={{ __html: blogData.contentBody }} />
+      </Col>
+
+      <Col xs="3" className="d-none d-md-block"></Col>
       </Row>
     </Container>
   );

frontend/src/components/shared/navbar.jsx

@@ -31,14 +31,6 @@ function Header(props) {
     props.ThemeSwitcher(themeSelected)
   }, [themeSelected])
 
-  const onExiting = () => {
-    setCollapseClasses('collapsing-out');
-  };
-
-  const onExited = () => {
-    setCollapseClasses('');
-  };
-
   if (GlobalTheme && ThemeConfig && UserData)
   return (
     <header className="header-global">
@@ -61,20 +53,6 @@ function Header(props) {
             </Button>
           </Link>
         </NavbarBrand>
-        <button
-          aria-controls="navbar-default"
-          aria-expanded={false}
-          aria-label="Toggle navigation"
-          className="navbar-toggler"
-          data-target="#navbar-default"
-          data-toggle="collapse"
-          id="navbar-default"
-          type="button"
-        >
-          <span className="navbar-toggler-icon" />
-        </button>
-
-        <UncontrolledCollapse navbar toggler="#navbar-default" className={collapseClasses} onExiting={onExiting} onExited={onExited}>
           <Nav className="ml-lg-auto" navbar>
           <NavItem>
           <ButtonGroup style={{marginTop: '15px', marginBottom: '15px'}}>
@@ -104,7 +82,6 @@ function Header(props) {
                 </ButtonGroup>
               </NavItem>
           </Nav>
-        </UncontrolledCollapse>
       </Container>
     </Navbar>
     </header>

frontend/src/services/media-service.jsx

@@ -1,9 +1,5 @@
-import Config from '../config.json';
-
-const pathPrefix = Config.localBackendMode ? '/public' : Config.baseUrl;
-
 const getMedia = (mediaPath) => {
-  return `${pathPrefix}/data/${mediaPath}`;
+  return `/data/${mediaPath}`;
 }
 
 export default { getMedia };

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "rangolio",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}