Merge pull request #28 from jadson179/develop

Responsividade

RELEASES.md

@@ -63,3 +63,7 @@ a ação irá duplicar o usuário administrador e assim o servidor irá para de
 ## VERSÂO 1.0.7
 
 * Update Interface web
+<<<<<<< HEAD
+
+=======
+>>>>>>> 26a8154dbb8f87349c2619d97c45937281e6eaa0

backend/Dockerfile

@@ -9,10 +9,11 @@ WORKDIR /home/node/PAINEL/backend
 
 
 COPY ./package.json /home/node/PAINEL/backend
-RUN npm install
+
+RUN yarn install
 
 COPY . /home/node/PAINEL/backend
 
 EXPOSE 3333 
 
-CMD [ "npm","run","start"]
+CMD [ "yarn","start"]

backend/index.js

@@ -7,6 +7,8 @@ const app = express()
 const server = http.Server(app)
 const io = require('socket.io')(server)
 
+
+
 app.use(cors({
     origin:"*"
 }))

backend/package.json

@@ -11,7 +11,6 @@
   "dependencies": {
     "body-parser": "^1.19.0",
     "cors": "^2.8.5",
-    "crypto": "^1.0.1",
     "express": "^4.17.1",
     "jsonwebtoken": "^8.5.1",
     "knex": "^0.21.1",

backend/yarn.lock

@@ -517,11 +517,6 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-crypto@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/crypto/-/crypto-1.0.1.tgz#2af1b7cad8175d24c8a1b0778255794a21803037"
-  integrity sha512-VxBKmeNcqQdiUQUW2Tzq0t377b54N2bMtXO/qiLa+6eRRmmC4qT3D4OnTGoT/U6O9aklQ/jTwbOtRMTTY8G0Ig==
-
 [email protected], debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"

frontend/Dockerfile

@@ -11,10 +11,8 @@ COPY . /home/node/PAINEL/frontend
 
 RUN echo "export default { backend: {  url: 'http://${ADDRESS_BACKEND_PUBLIC}' }, logo: 'https://jadson179.github.io/SITE-PAINEL/logo192.png' }" > /home/node/PAINEL/frontend/src/config.js
 
-RUN npm install
-
-RUN npm run build
+RUN yarn install && yarn upgrade && yarn build 
 
 EXPOSE 8080 
 
-CMD [ "npm","run","server"]
+CMD [ "yarn","server"]

frontend/package.json

@@ -14,7 +14,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.3.0",
+    "react-scripts": "3.4.1",
     "socket.io-client": "^2.3.0"
   },
   "scripts": {

frontend/src/components/AddRoom/style.css

@@ -50,3 +50,12 @@ input[type="file"]{
     align-items: center;
 }
 
+
+@media only screen and (max-width: 600px){
+    #contianerAddRoom  div button {
+      margin: 0px;  
+    }
+    #contianerAddRoom  {
+        width: 100%;
+    }
+}

frontend/src/components/Administration/index2.js

@@ -47,14 +47,29 @@ function Administration() {
             setUpdate(1)
     },[])
 
+
+    function handleSidebar(valor){
+
+        if(valor == 0){
+            document.getElementById("container-sidebar").style.left = "-300px"; 
+        }else {
+            document.getElementById("container-sidebar").style.left = "0px"; 
+        }
+
+
+
+
+    }
+
     return (
         <>
             <ActionAlert />
             <div className="container-administration">
-                <div className="container-sidebar" >
+                <div id="container-sidebar" className="container-sidebar" >
                     <header>
                         <h2>PAINEL DE SALAS</h2>
-                    </header>
+                        <i className="fas fa-times" onClick={()=> handleSidebar(0)} ></i>    
+                   </header>
                     <nav>
                         <ul>
                             <li onClick={()=> handleAdministration("user")}>
@@ -107,6 +122,9 @@ function Administration() {
 
                             </li>
                         </ul>
+                        <ul className="button-show-sidebar">
+                            <i class="fas fa-bars" onClick={()=> handleSidebar(1)}></i>
+                        </ul>
                     </nav>
                     <div className="main">
                         {

frontend/src/components/Administration/style2.css

@@ -19,6 +19,13 @@
     background-color: ivory;
     border-bottom: 0.9px solid rgb(236, 236, 236);
 }
+
+.container-sidebar header i {
+    display: none;
+}
+.container-navbar .button-show-sidebar {
+    display: none;
+}
 .container-sidebar header h2 {
     color: black;
     font-family: 'Roboto',sans-serif;
@@ -75,6 +82,8 @@
 .container-navbar {
     height: 80px;
     width: 100%;
+    display: flex;
+    justify-content: space-between;
     background-color: var(--primary-background-color,--navbar-background-color);
 }
 .container-navbar ul {
@@ -113,4 +122,37 @@ background-color: var(--main-background-color);
 .primary-text-color{
     color: var(--primary-text-color) ;
     text-align: center;
+}
+
+
+@media only screen and (max-width: 700px){
+    .container-sidebar {
+        position: fixed;
+        left: -300px;
+        animation: sidebar 1s ease-in-out;
+    }
+    .container-sidebar header {
+        align-items: center;
+
+    }
+    .container-sidebar header i {
+        display: block;
+        font-size: 30px;
+        margin: 10px 10px 10px 10px;
+        position: relative;
+        cursor: pointer;
+    }
+    .container-navbar .button-show-sidebar {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-end ;
+        font-size: 25px;
+        color: #fff;
+        margin-right: 20px;
+
+    }
+    .container-navbar .button-show-sidebar i {
+        cursor: pointer;
+    }
 }

frontend/src/components/AlterPassword/style.css

@@ -16,3 +16,12 @@
     justify-content: center;
     align-items: center;
 }
+
+@media only screen and (max-width: 600px){
+    .contianerAlterPassword div button {
+      margin: 0px;  
+    }
+    .contianerAlterPassword {
+        width: 100%;
+    }
+}

frontend/src/components/CreateUser/style.css

@@ -43,8 +43,11 @@
     height: 25px;
 }
 
-@media only screen and (max-width: 599px){
+@media only screen and (max-width: 600px){
     .contianerCreateUser div button {
       margin: 0px;  
     }
+    .contianerCreateUser {
+        width: 100%;
+    }
 }

frontend/src/components/DeleteRoom/style.css

@@ -27,3 +27,13 @@
     display: flex;
     justify-content: center;
 }
+
+
+@media only screen and (max-width: 600px){
+    .contianerDeleteRoom div button {
+      margin: 0px;  
+    }
+    .contianerDeleteRoom {
+        width: 100%;
+    }
+}

frontend/src/components/DeleteUser/style.css

@@ -27,3 +27,13 @@
     display: flex;
     justify-content: center;
 }
+
+
+@media only screen and (max-width: 600px){
+    .contianerDeleteUser div button {
+      margin: 0px;  
+    }
+    .contianerDeleteUser {
+        width: 100%;
+    }
+}

frontend/src/components/Login/index.js

@@ -13,15 +13,6 @@ function Login() {
   sessionStorage.setItem('username',username)
   sessionStorage.setItem('password',password)
 
-  useEffect(()=>{
-    async function github(){
-      const response = await api.get('https://raw.githubusercontent.com/jadson179/PAINEL/master/frontend/package.json')
-
-      setVersion(response.data)
-    }
-    github()
-
-  },[])
 async function Auth() { 
     if(username !== '' && password !== ''){
       const {data} = await api.post('/user/auth', { username, password })
@@ -48,10 +39,7 @@ async function Auth() {
           <div id="area-buttons">
           <button className="buttons" onClick={Auth}>Acessar</button>
           </div>
-        </div>
-        <span className="primary-text-color">
-          Nova Versão : {version.version} <i className="fas fa-star"></i>  Data {version.date}  
-        </span>
+        </div>  
       </div>
       </>
     );

frontend/src/components/LogoCostumer/index.js

@@ -3,24 +3,23 @@ import config from "../../config"
 import "./style.css"
 
 
-function handleShowLogo() {
-    document.getElementById('containerCostumer').style.display = "flex";
-    console.log("none")
 
-    setTimeout(()=>{
-        document.getElementById('containerCostumer').style.display = "none";
-        console.log("flex")
 
-    },20000)
-}
-
-setInterval(handleShowLogo,60000)
-
-export default function LogoCostumer() {    
+export default function LogoCostumer() {   
+
+    function handleShowLogo() {
+        document.getElementById('containerCostumer').style.display = "flex";
+        setTimeout(()=>{
+            document.getElementById('containerCostumer').style.display = "none";
+        },20000)
+    }
+
+    setInterval(handleShowLogo,60000)
 
     return (
         <div id="containerCostumer" className="contianerCostumer">
             <img className="logoConstumer" src={`${config.logo}`} />
         </div>
     )
-}
+}
+

frontend/src/components/Sections/style.css

@@ -28,14 +28,14 @@ html, body, #root, #container  {
   zoom: var(--zoom-page-view);
 
 }
-.floors {
+#container .floors {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-.title {
+#container  .title {
   padding-bottom: 13px;
   width: 100%;
   font-size: 20px;
@@ -46,35 +46,27 @@ html, body, #root, #container  {
   line-height: 45px;
 }
 
-.imageCostumer {
+#container .imageCostumer {
   width: 120px;
   height: 65px;
   margin-bottom: 5px;
   object-fit: scale-down;
 }
-.numberCostumer {
+#container  .numberCostumer {
   color: rgb(9, 0, 78);
   font-weight: 600;
 }
 
-.containerRoom {
+#container  .containerRoom {
   display: flex;
   flex-direction: column;
   margin: 0px 0px 5px 5px;
 }
 
 
-@media only screen and (max-width: 599px){
-  .floors {
-    width: 411px;
-  }
-  .imageCostumer {
-    width: 60%;
-  }
-  .numberRoom {
-    width: 30%;
-  }
-  .containerWeather {
-      display: none;
+@media only screen and (max-width: 699px){
+  #container ul.floors {
+    width: 400px;
   }
+
 }