Small changes to CSS. README.md with screenshots

.dockerignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+github

Dockerfile

@@ -8,10 +8,15 @@ RUN npm install --only=production
 
 COPY . .
 
-RUN mkdir -p ./public ./data
-RUN mv ./client/build/* ./public
-RUN rm -rf ./client
+RUN mkdir -p ./public ./data \
+    && cd ./client \
+    && npm run build \
+    && cd .. \
+    && mv ./client/build/* ./public \
+    && rm -rf ./client
 
 EXPOSE 5005
 
+ENV NODE_ENV=production
+
 CMD ["node", "server.js"]

README.md

@@ -1,5 +1,7 @@
 # Flame
 
+![Homescreen screenshot](./github/_home.png)
+
 ## Description
 Flame is self-hosted startpage for your server. It's inspired (heavily) by [SUI](https://github.com/jeroenpardon/sui)
 
@@ -20,7 +22,7 @@ git clone https://github.com/pawelmalak/flame
 cd flame
 
 # run only once
-<TODO>
+npm run dev-init
 
 # start backend and frontend development servers
 npm run dev
@@ -32,11 +34,25 @@ npm run dev
 docker build -t flame .
 
 # run container
-docker run \
-  -p 5005:5005 \
-  -v <host_dir>:/app/data \
-  flame
+docker run -p 5005:5005 -v <host_dir>:/app/data flame
 ```
 
 ## Functionality
-todo
+- Applications
+  - Create, update and delete applications using GUI
+  - Pin your favourite apps to homescreen
+
+![Homescreen screenshot](./github/_apps.png)
+
+- Bookmarks
+  - Create, update and delete bookmarks and categories using GUI
+  - Pin your favourite categories to homescreen
+
+![Homescreen screenshot](./github/_bookmarks.png)
+
+- Weather
+  - Get current temperature, cloud coverage and weather status with animated icons
+- Themes
+  - Customize your page by choosing from 12 color themes 
+
+![Homescreen screenshot](./github/_themes.png)

client/src/components/Apps/AppCard/AppCard.module.css

@@ -1,25 +1,18 @@
 .AppCard {
   width: 100%;
-  /* height: 50px; */
-  /* max-width: 150px; */
-  /* border: 1px solid red; */
   display: flex;
   align-items: center;
   margin-bottom: 20px;
 }
 
 .AppCardIcon {
-  /* height: 64px; */
-  width: 40px;
-  height: 40px;
+  width: 35px;
+  height: 35px;
   margin-right: 0.5em;
 }
 
 .AppCardDetails {
   text-transform: uppercase;
-  /* display: flex;
-  flex-direction: column;
-  justify-content: center; */
 }
 
 .AppCardDetails h5 {

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css

@@ -1,5 +1,4 @@
 .BookmarkCard {
-  /* margin-top: 10px; */
   margin-bottom: 30px;
 }
 
@@ -21,8 +20,7 @@
   transition: all 0.25s;
 }
 
-.BookmarkCard a:hover,
-.BookmarkCard a:focus {
+.BookmarkCard a:hover {
   text-decoration: underline;
   padding-left: 10px;
 }

client/src/components/Home/Home.module.css

@@ -53,4 +53,8 @@
   .SettingsLink {
     visibility: hidden;
   }
+}
+
+.HomeSpace {
+  height: 20px;
 }

client/src/components/Home/Home.tsx

@@ -51,17 +51,7 @@ const Home = (props: ComponentProps): JSX.Element => {
 
     const now = new Date();
 
-    const ordinal = (day: number): string => {
-      if (day > 3 && day < 21) return 'th';
-      switch (day % 10) {
-        case 1:  return "st";
-        case 2:  return "nd";
-        case 3:  return "rd";
-        default: return "th";
-      }
-    }
-
-    return `${days[now.getDay()]}, ${now.getDate()}${ordinal(now.getDate())} ${months[now.getMonth()]} ${now.getFullYear()}`;
+    return `${days[now.getDay()]}, ${now.getDate()} ${months[now.getMonth()]} ${now.getFullYear()}`;
   }
 
   const greeter = (): string => {
@@ -94,6 +84,8 @@ const Home = (props: ComponentProps): JSX.Element => {
         : <AppGrid apps={props.apps.filter((app: App) => app.isPinned)} />
       }
 
+      <div className={classes.HomeSpace}></div>
+
       <SectionHeadline title='Bookmarks' link='/bookmarks' />
       {props.categoriesLoading
         ? <Spinner />

client/src/components/Settings/WeatherSettings/WeatherSettings.tsx

@@ -89,7 +89,7 @@ const WeatherSettings = (props: ComponentProps): JSX.Element => {
       .catch(err => console.log(err));
     
     // set localStorage
-    localStorage.setItem('isCelsius', JSON.stringify(formData.isCelsius === 1))
+    localStorage.setItem('isCelsius', JSON.stringify(parseInt(`${formData.isCelsius}`) === 1))
   }
 
   return (

client/src/components/UI/Forms/ModalForm/ModalForm.module.css

@@ -2,9 +2,8 @@
   background-color: var(--color-background);
   color: var(--color-primary);
   border-radius: 6px;
-  width: 60%;
+  width: 95%;
   position: relative;
-  /* height: 50vh; */
   padding: 50px 50px;
 }
 
@@ -17,4 +16,28 @@
 
 .ModalFormIcon:hover {
   cursor: pointer;
+}
+
+@media (min-width: 430px) {
+  .ModalForm {
+    width: 90%;
+  }
+}
+
+@media (min-width: 800px) {
+  .ModalForm {
+    width: 70%;
+  }
+}
+
+@media (min-width: 1000px) {
+  .ModalForm {
+    width: 60%;
+  }
+}
+
+@media (min-width: 1400px) {
+  .ModalForm {
+    width: 40%;
+  }
 }

client/src/components/UI/Modal/Modal.module.css

@@ -1,7 +1,7 @@
 .Modal {
   width: 100%;
   height: 100%;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   z-index: 100;

client/src/index.css

@@ -2,7 +2,6 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  /* user-select: none; */
 }
 
 body {

package.json

@@ -10,8 +10,7 @@
     "dev-init": "npm run init-server && npm run init-client",
     "dev-server": "nodemon server.js",
     "dev-client": "npm start --prefix client",
-    "dev": "concurrently \"npm run dev-server\" \"npm run dev-client\"",
-    "build": "docker build -t flame ."
+    "dev": "concurrently \"npm run dev-server\" \"npm run dev-client\""
   },
   "author": "",
   "license": "ISC",