Mosque-Screens · alimaslax · Sep 28, 2019 · Sep 28, 2019 · Sep 28, 2019 · Oct 16, 2019
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,6 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react"
+    ]
+}
diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -13,19 +13,35 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-router-dom": "^5.0.0",
-    "react-scripts": "^3.0.1",
-    "request": "^2.88.0"
+    "react-scripts": "3.1.2",
+    "request": "^2.88.0",
+    "react-sortable-pane": "1.1.0"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,json,css}": [
       "prettier --single-quote --write",
       "git add"
     ]
   },
+  "devDependencies": {
+    "lodash": "4.17.15",
+    "webpack": "4.40.2",
+    "webpack-cli": "3.3.6",
+    "webpack-dev-server": "3.8.1",
+    "babel-loader": "8.0.6",
+    "@babel/preset-react": "7.0.0",
+    "@babel/preset-env": "7.5.5",
+    "html-webpack-plugin": "3.2.0",
+    "style-loader": "1.0.0",
+    "css-loader": "3.2.0",
+    "sass-loader": "7.2.0",
+    "node-sass": "4.12.0",
+    "url-loader": "2.1.0"
+  },
   "scripts": {
     "precommit": "lint-staged",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "webpack-dev-server --open",
+    "build": "webpack --mode production",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },

diff --git a/public/index.html b/public/index.html
@@ -11,25 +11,25 @@
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon/favicon.ico">
-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/favicon/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon/favicon-16x16.png">
-    <link rel="manifest" href="%PUBLIC_URL%/favicon/site.webmanifest">
-    <link rel="mask-icon" href="%PUBLIC_URL%/favicon/safari-pinned-tab.svg" color="#5bbad5">
+    <link rel="manifest" href="public/manifest.json">
+    <link rel="shortcut icon" href="public/favicon/favicon.ico">
+    <link rel="apple-touch-icon" sizes="180x180" href="public/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="public/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="public/favicon/favicon-16x16.png">
+    <link rel="manifest" href="public/favicon/site.webmanifest">
+    <link rel="mask-icon" href="public/favicon/safari-pinned-tab.svg" color="#5bbad5">
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
     <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
+      Notice the use of public in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.ico" or "favicon.ico", "public/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Mosque Screen</title>
+    <title>Mosque ScreenSSS</title>
   </head>
   <body>
     <noscript>

diff --git a/src/Admin/Admin.css b/src/Admin/Admin.css
@@ -1,6 +1,23 @@
-.AdminWrapper .AdminContent {
-  display: block;
-  background-color: #fff;
-  color: #000;
-  padding: 50px;
+.AdminContent {
+  display: flex;
+  height: 100px;
+  justify-content: left;
+  background-color: #2772bd;
+  margin-bottom: 100px;
+}
+.SlideContent {
+  height: 400px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  background-color: #686868;
+}
+.child {
+  margin: auto;
+  width: 100px;
+  height: 100px;
+}
+
+img {
+  height: 200px;
+  width: 200px;
 }
diff --git a/src/Admin/Admin.js b/src/Admin/Admin.js
@@ -1,14 +1,58 @@
 import React, { Component } from 'react';
 import './Admin.css';
-
+import Popup from '../components/popup/Popup';
+import { SortablePane, Pane } from 'react-sortable-pane';
+import Img1 from '../../screenshots/BTM-7days.png';
+import Img2 from '../../screenshots/BTM-Black-Screen.png';
+import Img3 from '../../screenshots/HadithOfTheDayView.png';
+import Img4 from '../../screenshots/SingleViewScreenshot.png';
+import { hoverStyle, paneStyle } from './styles';
+import SimpleVertical from '../components/panes/example';
 class Admin extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { showPopup: false, hover: false, panels: SimpleVertical() };
+    this.toggleHover = this.toggleHover.bind(this);
+    this.togglePopup = this.togglePopup.bind(this);
+  }
+  componentDidMount() {}
+  togglePopup() {
+    this.setState({
+      showPopup: !this.state.showPopup,
+      panes: [0, 1, 2]
+    });
+  }
+  toggleHover() {
+    this.setState({ hover: !this.state.hover });
+  }
   render() {
+    const list = [Img1, Img2, Img3, Img4];
+    const panes = list.map((val, index) => (
+      <Pane
+        key={index}
+        defaultSize={{ width: 100, height: 120 }}
+        style={paneStyle}
+      >
+        <img src={val} alt="slide" />
+      </Pane>
+    ));
+    const images = list.map((val, index) => (
+      <img
+        className="child"
+        key={index}
+        src={val}
+        alt="slide"
+        onMouseOver={this.toggleHover}
+        style={this.hover ? { marginBottom: '0px' } : { marginBottom: '50px' }}
+      />
+    ));
     return (
-      <div className="AdminWrapper">
-        <h1>Admin</h1>
-        <div className="AdminContent">
-          <h2>Admin interface coming soon.</h2>
-        </div>
+      <div>
+        <h1>
+          Design Menu <br />
+        </h1>
+        <div className="AdminContent">{images}</div>
+        <div className="SlideContent">{this.state.panels}</div>
       </div>
     );
   }

diff --git a/src/Admin/styles.ts b/src/Admin/styles.ts
@@ -0,0 +1,17 @@
+export const paneStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    border: 'solid 1px #ddd',
+    backgroundColor: '#f0f0f0'
+  };
+
+export const textStyle = {
+    fontSize: '32px',
+    fontWeight: 'bold',
+    color: '#aaa'
+  };
+
+export const hoverStyle = {
+    backgroundColor: '#BBB'
+  };
diff --git a/src/components/menu/Menu.js b/src/components/menu/Menu.js
@@ -0,0 +1,25 @@
+import './style.css';
+import React, { Component } from 'react';
+
+class Menu extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: true
+    };
+  }
+  render() {
+    return (
+      <div ref="root">
+        <div class="sidenav">
+          <a href="#about">About</a>
+          <a href="#services">Services</a>
+          <a href="#clients">Clients</a>
+          <a href="#contact">Contact</a>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Menu;
diff --git a/src/components/menu/style.css b/src/components/menu/style.css
@@ -0,0 +1,37 @@
+.sidenav {
+  width: 130px;
+  position: fixed;
+  z-index: 1;
+  top: 20px;
+  left: 10px;
+  background: #eee;
+  overflow-x: hidden;
+  padding: 8px 0;
+}
+
+.sidenav a {
+  padding: 6px 8px 6px 16px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #2196f3;
+  display: block;
+}
+
+.sidenav a:hover {
+  color: #064579;
+}
+
+.main {
+  margin-left: 140px; /* Same width as the sidebar + left position in px */
+  font-size: 28px; /* Increased text to enable scrolling */
+  padding: 0px 10px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {
+    padding-top: 15px;
+  }
+  .sidenav a {
+    font-size: 18px;
+  }
+}
diff --git a/src/components/popup/Popup.js b/src/components/popup/Popup.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import './style.css';
+import Example from '../panes/example';
+
+class Popup extends React.Component {
+  render() {
+    return (
+      <div className="popup">
+        <div className="popup\_inner">
+          <h1>{this.props.text}</h1>
+          <button onClick={this.props.closePopup}>close me</button>
+        </div>
+        <Example />
+      </div>
+    );
+  }
+}
+
+export default Popup;
diff --git a/src/components/popup/style.css b/src/components/popup/style.css
@@ -0,0 +1,21 @@
+.popup {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.popup\_inner {
+  position: absolute;
+  left: 25%;
+  right: 25%;
+  top: 25%;
+  bottom: 25%;
+  margin: auto;
+  border-radius: 20px;
+  background: white;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,59 @@
+var HTMLWebpackPlugin = require('html-webpack-plugin');
+var HTMLWebpackPluginConfig = new
+    HTMLWebpackPlugin({
+        template: __dirname + '/public/index.html',
+        filename: 'index.html',
+        inject: 'body'
+    });
+
+module.exports = {
+    entry: './src/index.js',
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx|ts)$/,
+                exclude: /node_modules/,
+                use: [
+                    'babel-loader'
+                ]
+            },
+            {
+                test: /\.(sa|sc|c)ss$/,
+                use: [
+                    'style-loader',
+                    'css-loader',
+                    'sass-loader'
+                ],
+            },
+            { 
+                test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
+                use: [
+                    {
+                        loader: 'url-loader',
+                        options: {
+                            limit:100000
+                        }
+                    }
+                ]
+            }
+        ]
+    },
+    node: {
+        fs: 'empty',
+        tls: 'empty',
+        net: 'empty'
+    },
+    resolve: {
+        extensions: ['*', '.js', '.jsx', '.ts']
+    },
+    output: {
+        path: __dirname + '/dist',
+        publicPath: '/',
+        filename: 'bundle.js'
+    },
+    devServer: {
+        contentBase: './dist',
+        historyApiFallback: true
+    },
+    plugins: [HTMLWebpackPluginConfig]
+};