[DESIGN] - Redesigns des boutons

4 years ago · 3209391ab2
parent 4cbd564f56
commit 3209391ab2
3 changed files with 82 additions and 51 deletions
--- a/SwichGIT/src/css/PartieGame.css
+++ b/SwichGIT/src/css/PartieGame.css
@ -9,6 +9,18 @@
    display: flex;
 }

+/*Partie Menu du haut*/
+.menu{
+    align-items: center;
+    justify-content: center;
+}
+
+.divmenu {
+    width: 10vw;
+    height: inherit;
+    margin-right: 1vw;
+}
+
 .retourstp {
    position: absolute;
 }
@ -19,23 +31,19 @@
 }

 #affPoints {
-    position: absolute;
    text-align: center;
    font-family: Montserrat, impact, Arial Black;
-    font-size: 2.5vw;
-    margin-top: 1%;
-    margin-left: 28vw;
+    font-size: 2vw;
+    margin-top: 1.2vw;
    color: var(--lightsedonca);
 }

 #affSolution {
-    position: absolute;
    text-align: center;
    font-family: Montserrat, impact, Arial Black;
    font-size: 2.5vw;
-    margin-top: 40vw;
-    margin-left: 14vw;
    color: var(--lightsedonca);
+    width: inherit;
 }

 #textjouer2 {
--- a/SwichGIT/src/css/desktops.css
+++ b/SwichGIT/src/css/desktops.css
@ -8,9 +8,30 @@
    /*===========================================*/


-
+    .logoboutton{
+        font-size: 2vw;    
+        color: var(--lightprima);
+        margin: 0.25vw; 
+    }

    /*Externe*/
+    .bouttonMenuHaut{
+        height: 4vw;
+        width: 4vw;
+        background-color: var(--lightsedonca);
+        border-radius: 50%;
+        margin: 0 auto;
+        margin-top: 0.45vw;
+        position: relative;
+        display: block;
+    }
+
+    .containButtonForm{
+        height: 2.5vw;
+        width: 2.5vw;
+        margin: 0.75vw;
+        position: absolute;
+    }

    .buttonretour {
        position: relative;
@ -52,15 +73,14 @@
        overflow-x: auto;
        display: flex;
        flex-wrap: wrap;
-        padding-left: 5%;
        padding-top: 7vw;
+        justify-content: center;
    }

    .logop2 img {
        width: 20vh;
        padding-top: 1vh;
        position: relative;
-        left: 43.5vw;
    }


--- a/SwichGIT/src/index.html
+++ b/SwichGIT/src/index.html
@ -16,7 +16,8 @@

    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/menu.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" />
+    <script src="https://use.fontawesome.com/releases/v5.7.2/css/all.css"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 </head>
 <body onload="settingOpen()">
@ -611,55 +612,57 @@
    </div>

   <div id="pageGame">
-       <div class="menuhaut">
-           <div id="Redistribution">
-               <a onclick="redistribuer()" id="relancerbtn">
-                   <div id="contourbuttonvalider">
-                       <div class="bouttonvalider violet">
-                           <h1 id="textjouer2">RELANCER</h1>
-                       </div>
-                   </div>
-               </a>
-           </div>
-           <div>
-               <p id="affSolution"></p>
-           </div>
-           <div>
+        <div class="menuhaut menu">
+            <div class="divmenu"></div>
+            
+            <div class="divmenu">
+                <a onclick="retour()" class="bouttonMenuHaut">
+                    <div class="containButtonForm">
+                        <i class="fa fa-arrow-left logoboutton"></i>  
+                    </div>
+                </a>
+            </div>
+
+            <div class="divmenu">
               <p id="affPoints">Score : 0</p>
           </div>
-           <div id="Redistribution2">
-               <a id="relancerbtn" onclick="testPourJeuClassique()">
-                   <div id="contourbuttonvalider">
-                       <div class="bouttonvalider vert">
-                           <h1 id="textjouer2">VALIDER</h1>
-                       </div>
-                   </div>
-               </a>
-           </div>
-           <div id="Redistribution3">
-               <a id="relancerbtn" onclick="chercheCombi2()">
-                   <div id="contourbuttonvalider">
-                       <div class="bouttonvalider vert">
-                           <h1 id="textjouer2">CHERCHER</h1>
-                       </div>
-                   </div>
-               </a>
-           </div>
-           <div class="logop2">
+
+            <div class="divmenu logop2">
               <a onclick="journuit()">
                   <img src="imgs/swishjour.png" id="imglogo2">
               </a>
-           </div>
-           <a class="retourstp" onclick="retour()">
-               <div class="buttonretour">
-                   <h1 class="txt">X</h1>
-               </div>
-           </a>
-       </div>
+           </div>   
+            <div class="divmenu">
+                <a onclick="redistribuer()" class="bouttonMenuHaut">
+                    <div class="containButtonForm">
+                        <i class="fa fa-redo logoboutton"></i>  
+                    </div>
+                </a>
+            </div>
+            <div class="divmenu">
+                <a class="bouttonMenuHaut" onclick="chercheCombi2()">
+                    <div class="containButtonForm">
+                        <i class="fas fa-search logoboutton"></i>  
+                    </div>
+                </a>
+            </div>
+            <div class="divmenu">
+                <a onclick="testPourJeuClassique()" id="relancerbtn" class="bouttonMenuHaut">
+                    <div class="containButtonForm">
+                        <i class="fa fa-check logoboutton"></i>  
+                    </div>
+                </a>
+            </div>
+        </div>
+

        <div id="containcards" class="containcards">

        </div>
+
+        <div>
+            <p id="affSolution"></p>
+        </div>
    </div>

 </body>