Responsive CSS fixes.

README.md

@@ -8,7 +8,7 @@
 git clone https://github.com/mikecao/umami.git
 ```
 
-### Go into your repo folder
+### Go into the repo folder
 
 ```
 cd umami
@@ -53,7 +53,7 @@ postgresql://username:mypassword@localhost:5432/mydb
 mysql://username:mypassword@localhost:3306/mydb
 ```
 
-The `HASH_SALT` is used to generate unique session values for your installation.
+The `HASH_SALT` is used to generate unique values for your installation.
 
 ### Generate database client
 

components/charts/QuickButtons.module.css

@@ -25,3 +25,9 @@
     display: none;
   }
 }
+
+@media only screen and (max-width: 576px) {
+  .buttons {
+    display: none;
+  }
+}

components/common/UserButton.js

@@ -48,7 +48,13 @@ export default function UserButton() {
         <Icon icon={<Chevron />} size="small" />
       </div>
       {showMenu && (
-        <Menu options={menuOptions} onSelect={handleSelect} float="bottom" align="right" />
+        <Menu
+          className={styles.menu}
+          options={menuOptions}
+          onSelect={handleSelect}
+          float="bottom"
+          align="right"
+        />
       )}
     </div>
   );

components/common/UserButton.module.css

@@ -11,3 +11,7 @@
 .username:hover {
   background: var(--gray50);
 }
+
+.menu {
+  z-index: 100;
+}

components/layout/Footer.module.css

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   font-size: var(--font-size-small);
-  padding: 40px 0;
+  min-height: 100px;
 }
 
 .footer button {

components/layout/Header.js

@@ -13,14 +13,14 @@ export default function Header() {
   return (
     <header className="container">
       <div className={classNames(styles.header, 'row align-items-center')}>
-        <div className="col">
+        <div className="col-12 col-md-6">
           <div className={styles.title}>
             <Icon icon={<Logo />} size="large" className={styles.logo} />
             {user ? <Link href="/">umami</Link> : 'umami'}
           </div>
         </div>
         {user && (
-          <div className="col">
+          <div className="col-12 col-md-6">
             <div className={styles.nav}>
               <Link href="/dashboard">Dashboard</Link>
               <Link href="/settings">Settings</Link>

components/layout/Header.module.css

@@ -1,16 +1,16 @@
 .header {
   display: flex;
-  height: 80px;
+  min-height: 100px;
-}
-
-.header > div {
-  flex: 1;
 }
 
 .title {
   font-size: var(--font-size-large);
 }
 
+.logo {
+  margin-right: 12px;
+}
+
 .nav {
   list-style: none;
   display: flex;
@@ -24,6 +24,13 @@
   margin-left: 40px;
 }
 
-.logo {
+@media only screen and (max-width: 768px) {
-  margin-right: 12px;
+  .title {
+    text-align: center;
+  }
+
+  .nav {
+    display: flex;
+    justify-content: space-evenly;
+  }
 }

components/layout/MenuLayout.js

@@ -14,16 +14,18 @@ export default function MenuLayout({
   children,
 }) {
   return (
-    <div className={classNames(styles.container, className)}>
+    <div className={classNames(styles.container, className, 'row')}>
       <Menu
         options={menu}
         selectedOption={selectedOption}
-        className={classNames(styles.menu, menuClassName)}
+        className={classNames(styles.menu, menuClassName, 'col-12 col-lg-3')}
         selectedClassName={styles.selected}
         optionClassName={classNames(styles.option, optionClassName)}
         onSelect={onMenuSelect}
       />
-      <div className={classNames(styles.content, contentClassName)}>{children}</div>
+      <div className={classNames(styles.content, contentClassName, 'col-12 col-lg-9')}>
+        {children}
+      </div>
     </div>
   );
 }

components/layout/MenuLayout.module.css

@@ -1,31 +1,27 @@
 .container {
   display: flex;
   flex: 1;
+  position: relative;
 }
 
 .container .menu {
+  display: flex;
+  flex-direction: column;
+  padding: 30px 0;
   border: 0;
 }
 
-.menu {
+.container .content {
-  display: flex;
-  flex-direction: column;
-  padding-top: 30px;
-}
-
-.content {
   display: flex;
   flex-direction: column;
   border-left: 1px solid var(--gray300);
   padding-left: 30px;
-  flex: 1;
 }
 
 .option {
   font-size: var(--font-size-normal);
   padding: 8px 16px;
   cursor: pointer;
-  min-width: 160px;
   margin-right: 30px;
   border-radius: 4px;
 }
@@ -37,3 +33,11 @@
 .selected {
   font-weight: 600;
 }
+
+@media only screen and (max-width: 992px) {
+  .container .content {
+    border-top: 1px solid var(--gray300);
+    border-left: 0;
+    padding-left: 0;
+  }
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "umami",
-  "version": "0.2.0",
+  "version": "0.3.0",
-  "description": "Delicious web stats",
+  "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",
   "homepage": "https://github.com/mikecao/umami",
@@ -10,10 +10,9 @@
     "url": "https://github.com/mikecao/umami.git"
   },
   "scripts": {
-    "dev": "next dev -p 8000",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "build-cli": "rollup -c rollup.cli.config.js",
     "build-tracker": "rollup -c rollup.tracker.config.js",
     "build-mysql-schema": "dotenv prisma introspect -- --schema=./prisma/schema.mysql.prisma",
     "build-mysql-client": "dotenv prisma generate -- --schema=./prisma/schema.mysql.prisma",