From 8262aeab389799f2c74e23ac347acfc4b16598c0 Mon Sep 17 00:00:00 2001 From: frperalde Date: Sun, 31 Jan 2021 11:42:09 +0100 Subject: [PATCH] Responsive design tablette --- SwichGIT/src/css/PageDaccueil.css | 42 +--------- SwichGIT/src/css/PartieGame.css | 12 --- SwichGIT/src/css/desktops.css | 67 +++++++++++++++- SwichGIT/src/css/tablet.css | 128 +++++++++++++++++++++++++++++- SwichGIT/src/index.html | 2 +- SwichGIT/src/js/main.js | 66 --------------- 6 files changed, 193 insertions(+), 124 deletions(-) diff --git a/SwichGIT/src/css/PageDaccueil.css b/SwichGIT/src/css/PageDaccueil.css index 9368e35..13688e8 100644 --- a/SwichGIT/src/css/PageDaccueil.css +++ b/SwichGIT/src/css/PageDaccueil.css @@ -376,25 +376,7 @@ label:active:after { z-index: 10; } -#choosemode { - height: 4vw; - width: 16vw; - position: absolute; - left: 42vw; - top: 50vh; - z-index: 15; -} -#conteneurmode{ - width: 80%; - height: 2vw; - left : 10%; - top : 25%; - position: absolute; - margin: 0 auto; - background-color: var(--lightsedonca); - border-radius: 5vw; -} #modeprec{ height: 100%; @@ -417,31 +399,9 @@ label:active:after { left: 15%; } -#textmode { - font-family: Lucida Console, Arial Black, Arial; - font-size: 1vw; - color: #707070; - text-align:center; - margin: 5% auto 0 auto; -} -#triangleprec{ - width: 0; - height: 0; - margin: 0.25vw auto 0 auto; - border-top: 0.75vw solid transparent; - border-right: 1.25vw solid grey; - border-bottom: 0.75vw solid transparent; -} -#trianglesuiv{ - width: 0; - height: 0; - margin: 0.25vw auto 0 auto; - border-top: 0.75vw solid transparent; - border-left: 1.25vw solid grey; - border-bottom: 0.75vw solid transparent; -} + #buttonadd { position: absolute; diff --git a/SwichGIT/src/css/PartieGame.css b/SwichGIT/src/css/PartieGame.css index 013774c..301e8a3 100644 --- a/SwichGIT/src/css/PartieGame.css +++ b/SwichGIT/src/css/PartieGame.css @@ -15,11 +15,6 @@ justify-content: center; } -.divmenu { - width: 10vw; - height: inherit; - margin-right: 1vw; -} .retourstp { position: absolute; @@ -30,13 +25,6 @@ top:-3vw; } -#affPoints { - text-align: center; - font-family: Montserrat, impact, Arial Black; - font-size: 2vw; - margin-top: 1.2vw; - color: var(--lightsedonca); -} #affSolution { text-align: center; diff --git a/SwichGIT/src/css/desktops.css b/SwichGIT/src/css/desktops.css index 7bec418..6320d4f 100644 --- a/SwichGIT/src/css/desktops.css +++ b/SwichGIT/src/css/desktops.css @@ -1,7 +1,10 @@ /*Ecran*/ @media screen and (min-width: 992px) { - + :root{ + --taille : 10vw; + } + /*PARTIE FORMES*/ .containform3 { position: relative; @@ -31,6 +34,52 @@ z-index: 15; } + #choosemode { + height: 4vw; + width: 16vw; + position: absolute; + left: 42vw; + top: 50vh; + z-index: 15; + } + + #conteneurmode{ + width: 80%; + height: 2vw; + left : 10%; + top : 25%; + position: absolute; + margin: 0 auto; + background-color: var(--lightsedonca); + border-radius: 5vw; + } + + #triangleprec{ + width: 0; + height: 0; + margin: 0.25vw auto 0 auto; + border-top: 0.75vw solid transparent; + border-right: 1.25vw solid grey; + border-bottom: 0.75vw solid transparent; + } + + #trianglesuiv{ + width: 0; + height: 0; + margin: 0.25vw auto 0 auto; + border-top: 0.75vw solid transparent; + border-left: 1.25vw solid grey; + border-bottom: 0.75vw solid transparent; + } + + #textmode { + font-family: Lucida Console, Arial Black, Arial; + font-size: 1vw; + color: #707070; + text-align:center; + margin: 5% auto 0 auto; + } + #formSize{ margin : 0 auto; width: 100%; @@ -107,6 +156,20 @@ display: block; } + #affPoints { + text-align: center; + font-family: Montserrat, impact, Arial Black; + font-size: 2vw; + margin-top: 1.2vw; + color: var(--lightsedonca); + } + + .divmenu { + width: 10vw; + height: inherit; + margin-right: 1vw; + } + .containButtonForm{ height: 2.5vw; width: 2.5vw; @@ -127,7 +190,7 @@ .flex-item { background: var(--lightsedonca); - width: 10vw; + width: var(--taille); border-radius: 0.75vw; padding-right: 0.15vw; padding-left: 0.15vw; diff --git a/SwichGIT/src/css/tablet.css b/SwichGIT/src/css/tablet.css index a04ca70..dac108b 100644 --- a/SwichGIT/src/css/tablet.css +++ b/SwichGIT/src/css/tablet.css @@ -1,6 +1,10 @@ /*DemTéléphone 1i Ecran*/ @media screen and (min-width: 669px) and (max-width: 992px) { + :root{ + --taille : 14vw; + } + .containform3 { position: relative; height: calc(1.25*var(--x)); @@ -93,7 +97,6 @@ width: 20vh; padding-top: 1vh; position: relative; - left: 27vw; } .txt { @@ -159,7 +162,128 @@ position: absolute; font-size: 10vw; margin-top: 0.2vw; - margin-left: 12.5vw; + width: inherit; + text-align: center; + color: var(--lightsedonca); + } + + #choosemode { + height: 7vw; + width: 50vw; + position: absolute; + left: 25vw; + top: 50vh; + z-index: 15; + } + + #conteneurmode{ + width: 80%; + height: 80%; + left : 10%; + top : 45%; + position: absolute; + background-color: var(--lightsedonca); + border-radius: 5vw; + } + + #triangleprec{ + width: 0; + height: 0; + margin: 0.25vw auto 0 auto; + border-top: 2vw solid transparent; + border-right: 4vw solid grey; + border-bottom: 2vw solid transparent; + margin-top: 0.75vw; + } + + #trianglesuiv{ + width: 0; + height: 0; + margin: 0.25vw auto 0 auto; + border-top: 2vw solid transparent; + border-left: 4vw solid grey; + border-bottom: 2vw solid transparent; + margin-top: 0.75vw; + } + + #textmode { + font-family: Lucida Console, Arial Black, Arial; + font-size: 3vw; + color: #707070; + text-align:center; + margin: 5% auto 0 auto; + } + + .logoboutton{ + font-size: 2vw; + color: var(--lightprima); + margin: 1vw; + } + + /*Externe*/ + .bouttonMenuHaut{ + height: 4vw; + width: 4vw; + background-color: var(--lightsedonca); + border-radius: 50%; + margin: 0 auto; + margin-top: 2.5vw; + position: relative; + display: block; + } + + + .divmenu { + width: 25vw; + height: inherit; + margin-right: 1vw; + } + + + #affPoints { + text-align: center; + font-family: Montserrat, impact, Arial Black; + font-size: 2vw; + margin-top: 3.5vw; color: var(--lightsedonca); } + + .containcards { + overflow-x: auto; + display: flex; + flex-wrap: wrap; + padding-top: 5vw; + justify-content: center; + width: 70vw; + margin: 0 auto; + grid-row-gap: 2vw; + column-gap: 2vw; + } + + .flex-item { + flex-grow: 1; + background: var(--lightsedonca); + width: var(--taille); + border-radius: 0.75vw; + padding-right: 0.15vw; + padding-left: 0.15vw; + padding-bottom: 0.25vw; + list-style: none; + display: flex; + margin-right: 0.4vw; + margin-left: 0.4vw; + margin-bottom: 1vw; + -webkit-flex-flow: row wrap; + justify-content: space-around; + } + + .item-form { + width: 4vw; + height: 4vw; + padding-left: 0.1vw; + margin-top: 0.25vw; + border-radius: 10px; + background-color: var(--lighttercia); + } + } diff --git a/SwichGIT/src/index.html b/SwichGIT/src/index.html index 01ff10e..bb16043 100644 --- a/SwichGIT/src/index.html +++ b/SwichGIT/src/index.html @@ -642,7 +642,7 @@
- +
diff --git a/SwichGIT/src/js/main.js b/SwichGIT/src/js/main.js index 610eb8f..06b3e30 100644 --- a/SwichGIT/src/js/main.js +++ b/SwichGIT/src/js/main.js @@ -662,72 +662,6 @@ function chercherCombinaison() { window.alert("Nombre de combinaison: " + Cptsolution); } -function test() { - printCombinations([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], 3); -} - -function printCombinations(array, p) { - var combinations = []; - var Cptsolution = 0; - for (k = 2; k < p + 1; k++) { - - function run(level, start) { - for (var i = start; i < array.length - k + level + 1; i++) { - combinations[level] = array[i]; - //console.log(i); - if (level < k - 1) { - - run(level + 1, i + 1); - } else { - - var combTest = []; - for (var j = 0; j < combinations.length; j++) { - combTest.push(deckPartie[combinations[j]]); - //window.alert("Matrice ajouté num" + j + " :" + deckPartie[combinations[j]].getMatrice); - //console.log("i"+j +" :"+ combinations[j]); - } - //console.log("matrice début ex: "+combTest[0].getMatrice); - console.log("Cartes selectionnées :(en partant de indice 0) :") - console.log(combinations.join(" ")); - console.log("----- taille :" + combTest.length + " -------"); - - var cpt = testCombinaison(combTest, combinations, Cptsolution); - Cptsolution = cpt; - } - } - } - run(0, 0); - } - window.alert("nb combi :" + Cptsolution); -} - - -function testCombinaison(DeckTeste, combi, Cptsolution) { - var tabCode = []; - var tab = []; - //window.alert("---------------"); - tab = AssemblageARBRE(copieListeDeCarte(DeckTeste), copieCarte(DeckTeste[0])); - - //Recupération de code - var solution = true; - for (var h = 0; h < tab.length; h++) { - tabCode.push(tab[h].code); - } - //Reagarde si il y a une solution - for (var g = 0; g < tab.length; g++) { - if (tab[g].code == DeckTeste.length) { - solution = false; - } - } - //Reagarde si il y a une solution - if (!solution) { - Cptsolution++; - window.alert("Combinaison à " + (DeckTeste.length) + " cartes trouvée : " + combi); - } - return Cptsolution; -} - - function chercheCombi2() { var Cptsolution = 0;