Skip to content

GitLab

Commit b24c671e authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

mise à jour page 25x25

parent d4c44367
Hide whitespace changes
Inline Side-by-side
public/index.html
View file @ b24c671e
......@@ -13,22 +13,26 @@
<body>
<div class="header">Cette application est un prototype en cours de conception. <a href="https://groups.google.com/d/forum/alem-app" target="_blank"><b>Accéder au forum</b></a> pour échanger avec la communauté et faire vos suggestions.</div>
<div style="position: relative;">
<div class="parametres-left">
<span onclick="changeSize(1.1)" class="glyphicon glyphicon-plus-sign" aria-hidden="true" title="Grossir les cartes"></span>
<span onclick="changeSize(0.9)" class="glyphicon glyphicon-minus-sign" aria-hidden="true" title="Rapetisser les cartes"></span>
<img src="im/logo_phonodrop.png" class="logo" title="PhonoDrop">
</div>
<div class="parametres-center">
<img src="im/icongrille.png" onclick="toggleGrille()" title="Afficher/masquer la grille"/>
<img src="im/interlignePlus.png" onclick="changeInterligne(5)" title="Augmenter l'interligne"/>
<img src="im/interligneMoins.png" onclick="changeInterligne(-5)" title="Réduire l'interligne"/>
<span onclick="save2url()" class="glyphicon glyphicon-floppy-disk" aria-hidden="true" title="Enregistrer cette page"></span>
</div>
<div class="parametres-right">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" title="Attribution-NonCommercial-ShareAlike 4.0 International"><img height="15px" src="im/cc-by-nc-sa.png" title="Attribution-NonCommercial-ShareAlike 4.0 International" class="licence-element licence-img"/></a>
<span class="ado">Inspiré des outils d'<a href="mailto:do.alexandre38@gmail.com">Alexandre Do</a></span>
<a id="hrefNewPage" href=""><img src="im/new-page.png" title="Ouvrir une nouvelle page"/></a>
<span onclick="eraseAll()" class="glyphicon glyphicon-remove-sign" aria-hidden="true" title="Tout effacer"></span>
<div class="paramTop">
<div class="parametres-left">
<span onclick="changeSize(1.1)" class="glyphicon glyphicon-plus-sign" aria-hidden="true" title="Grossir les cartes"></span>
<span onclick="changeSize(0.9)" class="glyphicon glyphicon-minus-sign" aria-hidden="true" title="Rapetisser les cartes"></span>
<img src="im/logo_phonodrop.png" class="logo" title="PhonoDrop">
</div>
<div class="parametres-center">
<img src="im/icongrille.png" onclick="toggleGrille()" title="Afficher/masquer la grille"/>
<img src="im/interlignePlus.png" onclick="changeInterligne(5)" title="Augmenter l'interligne"/>
<img src="im/interligneMoins.png" onclick="changeInterligne(-5)" title="Réduire l'interligne"/>
<span onclick="save2url()" class="glyphicon glyphicon-floppy-disk" aria-hidden="true" title="Enregistrer cette page"></span>
</div>
<div class="ado">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" title="Attribution-NonCommercial-ShareAlike 4.0 International"><img src="im/cc-by-nc-sa.png" title="Attribution-NonCommercial-ShareAlike 4.0 International" class="licence-element licence-img"/></a>
<span>Inspiré des outils d'<a href="mailto:do.alexandre38@gmail.com">Alexandre Do</a></span>
</div>
<div class="parametres-right">
<a id="hrefNewPage" href=""><img src="im/new-page.png" title="Ouvrir une nouvelle page"/></a>
<span onclick="eraseAll()" class="glyphicon glyphicon-remove-sign" aria-hidden="true" title="Tout effacer"></span>
</div>
</div>
<div class="parametres-bottom">
<span onclick="mvTiroir(20)" class="glyphicon glyphicon-upload" aria-hidden="true" title="Agrandir le panier"></span><br>
......
public/scripts/script.js
View file @ b24c671e
......@@ -19,7 +19,8 @@ const thisURL = window.location.href;
var wcarte = '80px'; // à modifier dans css
var marginbot = '00px'; // à modifier dans css
var grille = true; // grille par défaut
var nombreCases = 300;
var nbrow = 25;
var nbcol = 25;
var dateCreation = false; // sera initialisé lors de l'export, ou récupéré si page déjà enregistrée
var page = new Object();
......@@ -51,7 +52,6 @@ $.ajax ({
grille = data.grille;
marginbot = data.marginBot;
document.documentElement.style.setProperty('--marginbot', marginbot);
nombreCases = data.nbCases;
dateCreation = data.dateCreation;
page = data.page;
loadPage();
......@@ -73,11 +73,17 @@ function loadPage() {
document.getElementById('panier').innerHTML = '';
document.getElementById('casesZone').innerHTML = '';
for (let i=1; i<=nombreCases; i++) {
var newCase = document.createElement('div');
newCase.id = "case"+i;
newCase.classList = "targetZone case";
document.getElementById('casesZone').appendChild(newCase);
for (let i=1; i<=nbrow; i++) {
var newRow = document.createElement('div');
newRow.id = "r"+i;
newRow.classList = "row";
document.getElementById('casesZone').appendChild(newRow);
for (let j=1; j<=nbcol; j++) {
var newCase = document.createElement('div');
newCase.id = "r"+i+"c"+j;
newCase.classList = "targetZone case";
newRow.appendChild(newCase);
}
}
if (grille) {
......@@ -174,7 +180,6 @@ function loadPage() {
// Création de la carte et append dans la case cible
var newDiv = document.createElement('div');
newDiv.id = page[i];
newDiv.className = "carte";
newDiv.draggable = true;
......@@ -264,6 +269,7 @@ function loadPage() {
repCases[this.id] = item.id;
logg("DROP! in "+this.id+' from '+item.parentNode.id);
item.classList.remove("invisible");
e.currentTarget.innerHTML = ''; // On vide la case cible avant d'y poser la carte.
e.currentTarget.appendChild(item);
} else {
// si elle arrive ailleurs (panier etc) : suppression de la carte
......@@ -413,7 +419,6 @@ async function save2url(){
wCarte: getComputedStyle(document.documentElement).getPropertyValue('--wcarte'),
marginBot: getComputedStyle(document.documentElement).getPropertyValue('--marginbot'),
grille: grille,
nbCases: nombreCases,
ipCli: '',
dateCreation: dateCreation,
dateModif: dateTime,
......
public/styles/styles.css
View file @ b24c671e
......@@ -18,7 +18,7 @@ body {
}
.ecritoire {
padding: 40px 10px;
padding: 5px 10px;
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
......@@ -27,22 +27,17 @@ body {
justify-content: left;
}
.parametres-left {
position: absolute;
top: 0px;
left: 15px;
.paramTop {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 2em;
padding: 0 10px;
}
.parametres-left span {
cursor: pointer;
}
.parametres-right {
position: absolute;
top: 0px;
right: 15px;
font-size: 2em;
}
.parametres-right span {
cursor: pointer;
}
......@@ -55,9 +50,21 @@ body {
margin-left: 10px;
margin-right: 30px;
vertical-align: middle;
/* font-style: italic; */
font-size: 0.6em;
}
.ado img {
height:20px;
}
.parametres-center img {
height: 30px;
border: solid black 1px;
cursor: pointer;
}
.parametres-center span {
cursor: pointer;
transform: translateY(28%);
}
.parametres-bottom {
position: fixed;
......@@ -71,34 +78,20 @@ body {
cursor: pointer;
}
.parametres-center {
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
font-size: 2em;
}
.parametres-center img {
height: 30px;
border: solid black 1px;
cursor: pointer;
}
.parametres-center span {
cursor: pointer;
transform: translateY(28%);
}
#casesZone {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
align-items: center;
justify-content: center;
float: left;
overflow-x: scroll;
text-align: left;
border: solid black 1px;
background-color: white;
border-radius: 5px;
padding: 5px;
padding: 5px 20px;
}
.row {
display: flex;
/* overflow-x: auto; */
}
#tiroir {
......@@ -149,6 +142,7 @@ body {
}
.case {
flex: 0 0 auto;
display: inline-block;
width: var(--wcarte);
height: var(--hcarte);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment