Skip to content

GitLab

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

Nettoyage du code en cours + compactage mise en page du player

parent ce2b759f
Hide whitespace changes
Inline Side-by-side
clavierPhono/settings.py
View file @ ed4779f8
......@@ -47,7 +47,7 @@ MIDDLEWARE = [
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware'
]
ROOT_URLCONF = 'clavierPhono.urls'
......
static/js/playerPhono.js
View file @ ed4779f8
......@@ -147,7 +147,7 @@ async function getActivity() {
function demarrer() {
document.getElementById('fenetreDeLancement').style.display = "none";
document.getElementById('divConsigne').style.display = "block";
document.getElementById('divReponse').style.display = "block";
document.getElementById('divReponse').style.display = "";
cptitem = 0;
loadNext()
}
......
static/styles/clavier.css
View file @ ed4779f8
......@@ -410,111 +410,3 @@ footer {
background-color: white;
border: 2px solid black;
}
/* PLAYER PHONO */
.playerHeader {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
padding: 0 10px;
}
.playerHeader img {
height: 60px;
cursor: pointer;
margin-right: 20px;
}
.divPlayerConsigneReponse {
background-color: white;
}
.playerClavierPhono {
width: 700px;/*var(--clavSize);*/
margin: 30px 10px 0px 0px;
}
.playerClavier {
flex-direction: column;
margin: auto;
position: relative;
align-items: flex-start;
cursor: pointer;
}
#rep {
margin: 20px 0px;
min-height: 50px;
min-width: 500px;
border: solid 0px gray;
border-radius: 5px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.carte {
width: 80px;
height: 56px;
border: solid 1px black;
border-radius: 5px;
display: inline-block;
background-size: 100% 100%;
margin: 2px;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.playerClavierPhono {
width:100%;
}
}
.headerConsigne {
display: flex;
justify-content: space-between;
font-style: italic;
font-size: .8em;
}
#fenetreDeLancement {
margin: auto;
margin-top: 30px;
padding: 50px;
min-width: 500px;
height: 160px;
border-radius: 10px;
}
#bravo {
position: absolute;
top: 30vh;
left:50%;
transform: translateX(-50%);
z-index: 1000;
height: 150px;
width: 300px;
border: solid 2px rgb(62, 212, 62);
border-radius: 10px;
background-color: rgb(176, 243, 149);
padding-top: 30px;
}
#bravo button {
margin-top:20px;
border-radius: 5px;
}
/* .switchable {
border: 1px transparent solid;
border-radius: 3px;
} */
.switchable:hover {
border: 1px lightgrey solid;
border-radius: 3px;
}
\ No newline at end of file
static/styles/player.css 0 → 100644
View file @ ed4779f8
/************************************/
/********** PLAYER PHONO ************/
/************************************/
.mainContent {
max-width: 1000px;
margin: auto;
}
.playerHeader {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.3em;
padding: 0 10px;
}
.playerHeader img {
height: 60px;
cursor: pointer;
margin-right: 20px;
}
.headerConsigne {
display: flex;
justify-content: space-between;
font-style: italic;
font-size: .8em;
}
.consigne {
font-style: normal;
}
.divPlayerConsigneReponse {
background-color: white;
width:100%;
margin: 10px 0 0 0;
}
.divReponse {
width:100%;
height: 60px;
display: inline-flex;
vertical-align: middle;
}
.divReponseGauche {
width: 20%;
min-width: 60px;
/* background-color: rebeccapurple; */
padding: 5px 0px;
}
.divReponseMilieu {
width: 60%;
text-align: left;
/* background-color: orangered; */
}
.divReponseDroit {
width: 20%;
min-width: 60px;
/* background-color: orange; */
padding: 10px 0;
}
#rep {
border: solid 0px gray;
border-radius: 5px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.carte {
width: 80px;
height: 56px;
border: solid 1px black;
border-radius: 5px;
display: inline-block;
background-size: 100% 100%;
margin: 2px;
}
.playerClavierPhono {
/* max-width: 1000px; */
margin: 5px;
}
.playerClavier {
flex-direction: column;
margin: auto;
position: relative;
align-items: flex-start;
cursor: pointer;
}
#bravo {
position: absolute;
top: 30vh;
left:50%;
transform: translateX(-50%);
z-index: 1000;
height: 40vh;
width: 300px;
border: solid 2px rgb(62, 212, 62);
border-radius: 10px;
background-color: rgb(176, 243, 149);
padding-top: 30px;
}
#bravo button {
margin-top:20px;
border-radius: 5px;
}
/* .switchable {
border: 1px transparent solid;
border-radius: 3px;
} */
.switchable:hover {
border: 1px lightgrey solid;
border-radius: 3px;
}
\ No newline at end of file
templates/clavier.html
View file @ ed4779f8
......@@ -181,8 +181,6 @@
</div>
</div>
{% include 'footer.html' %}
......
templates/playerPhono.html
View file @ ed4779f8
......@@ -10,6 +10,7 @@
<link rel="stylesheet" type="text/css" href="{% static 'styles/phonochromie_alem_v3.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/popup.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/clavier.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/player.css'%}">
<!-- <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
......@@ -25,81 +26,100 @@
<span id="sp_playerHeader" class="langspan"></span>
</div>
</div>
<div class="fenetre divPlayerConsigneReponse">
<div class="headerConsigne">
<div><span id="nomSerie"></span></div>
<div><span id="cptitem">0</span>/<span id="nbMots"></span></div>
</div>
<div class="mainContent">
<div id="fenetreDeLancement" style="display: none;">
<button type="button" class="btn btn-default btn-lg" onclick="demarrer()">Démarrer !</button>
</div>
<div class="fenetre divPlayerConsigneReponse">
<div class="headerConsigne">
<div><span id="nomSerie"></span></div>
<div><span id="divConsigne" class="consigne" style="display: none;">Pointez le mot que vous entendez</span></div>
<div><span id="cptitem">0</span>/<span id="nbMots"></span></div>
</div>
<div id="divConsigne" style="display: none;">
<p>Pointez le mot que vous entendez</p>
<button onclick="playAudio()" id="btnAudio" type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
</button>
</div>
<div id="fenetreDeLancement" style="display: none;">
<button type="button" class="btn btn-default btn-lg" onclick="demarrer()">Démarrer !</button>
</div>
<div id="divReponse" style="display: none;">
<div id="rep"></div>
<button onclick="checkAnswer()" id="btnValider">Valider</button>
<div class="divReponse" id="divReponse" style="display: none;">
<div class="divReponseGauche">
<button onclick="playAudio()" id="btnAudio" type="button" class="btn btn-default btn-lg btnAudio">
<span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
</button>
</div>
<div class="divReponseMilieu">
<div id="rep"></div>
</div>
<div class="divReponseDroit">
<button onclick="checkAnswer()" id="btnValider">Valider</button>
</div>
</div>
<!-- <div class="container" id="divReponse" style="display: none;">
<div class="row">
<div class="col-2"
<button onclick="playAudio()" id="btnAudio" type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
</button>
<button onclick="checkAnswer()" id="btnValider">Valider</button>
</div>
<div class="col">
<div id="rep"></div>
</div>
</div>
</div> -->
</div>
</div>
<center>
<div id="bravo" style="display: none;">
<p>Bravo !</p>
<button onclick="loadNext()" type="button" class="btn btn-default btn-md">Continuer</button>
</div>
</center>
<center>
<div class="playerClavierPhono">
<div class="playerClavier" id="clavier">
<!-- BOUTONS + - INACTIFS DANS LE PLAYER
<div class="control-clavier">
<img src="../static/png/moins.png" id="btn-min" title="réduire le clavier"/>
<img src="../static/png/plus.png" id="btn-max" title="agrandir le clavier"/>
</div> -->
<center>
<div id="bravo" style="display: none;">
<p>Bravo !</p>
<button onclick="loadNext()" type="button" class="btn btn-default btn-md">Continuer</button>
</div>
</center>
<center>
<div class="playerClavierPhono">
<div class="playerClavier" id="clavier">
<!-- BOUTONS + - INACTIFS DANS LE PLAYER
<div class="control-clavier">
<img src="../static/png/moins.png" id="btn-min" title="réduire le clavier"/>
<img src="../static/png/plus.png" id="btn-max" title="agrandir le clavier"/>
</div> -->
<!-- FR Claviers A. DO -->
<embed id="svgFond" src="../static/svg/00.svg" class="superposeBack">
<img id="pngPochoir" class="superpose">
<img id="pngCalq" class="superpose">
<embed id="svgClick" src="../static/svg/00-click.svg" class="superpose">
<img src="" class="popUpProfile" id="popDiv"/>
<div class="doAide" style="right:0px">
<span id="aidbtn" onclick="toggleAides()" class="glyphicon glyphicon-question-sign" aria-hidden="true" title="Afficher/masquer les popups d'aide"></span>
</div>
<!-- FR Claviers A. DO -->
<embed id="svgFond" src="../static/svg/00.svg" class="superposeBack">
<img id="pngPochoir" class="superpose">
<img id="pngCalq" class="superpose">
<embed id="svgClick" src="../static/svg/00-click.svg" class="superpose">
<img src="" class="popUpProfile" id="popDiv"/>
<div class="doAide" style="right:0px">
<span id="aidbtn" onclick="toggleAides()" class="glyphicon glyphicon-question-sign" aria-hidden="true" title="Afficher/masquer les popups d'aide"></span>
</div>
<!-- EN Clavier PronSci UK -->
<embed id="svgEnPronSciBr" style="display: none;" src="../static/svg/en_pronsci-br.svg" class="superpose">
<!-- EN Clavier PronSci UK -->
<embed id="svgEnPronSciBr" style="display: none;" src="../static/svg/en_pronsci-br.svg" class="superpose">
<!-- EN Clavier ALeM -->
<embed id="svgEnAlem" style="display: none;" src="../static/svg/alem-en.svg" class="superpose">
<img id="pngPochoirEnAlem" style="display: none;" src="../static/png/pochoir-en.png" class="superpose">
<img id="pngCalqEnAlemLignes" style="display: none;" src="../static/png/pochoir-en-lignes.png" class="superpose">
<embed id="svgClickEnAlem" style="display: none;" src="../static/svg/alem-en_click.svg" class="superpose">
<!-- EN Clavier ALeM -->
<embed id="svgEnAlem" style="display: none;" src="../static/svg/alem-en.svg" class="superpose">
<img id="pngPochoirEnAlem" style="display: none;" src="../static/png/pochoir-en.png" class="superpose">
<img id="pngCalqEnAlemLignes" style="display: none;" src="../static/png/pochoir-en-lignes.png" class="superpose">
<embed id="svgClickEnAlem" style="display: none;" src="../static/svg/alem-en_click.svg" class="superpose">
</div>
</div>
</div>
</center>
</center>
<div class="zoneParam">
<div class="left">
<div class="fenetre param">
<select id="selectPanneau" onchange="selectPanneau(this.value)"></select>
</div>
<div id="doCalques" class="doCalques">
<input type="image" class="btn-calq" src="../static/png/btn_rien.png" title="Panneau vierge" id="btn-rien" />
<input type="image" class="btn-calq" src="../static/png/btn_vsm.png" title="Voisements et position langue" id="btn-vsm" />
<input type="image" class="btn-calq btnfocus" src="../static/png/btn_bch.png" title="Formes de bouche" id="btn-bch" />
<input type="image" class="btn-calq" src="../static/png/btn_cpsg.png" title="Coupes sagitales" id="btn-cpsg" />
<div class="zoneParam">
<div class="left">
<div class="fenetre param">
<select id="selectPanneau" onchange="selectPanneau(this.value)"></select>
</div>
<div id="doCalques" class="doCalques">
<input type="image" class="btn-calq" src="../static/png/btn_rien.png" title="Panneau vierge" id="btn-rien" />
<input type="image" class="btn-calq" src="../static/png/btn_vsm.png" title="Voisements et position langue" id="btn-vsm" />
<input type="image" class="btn-calq btnfocus" src="../static/png/btn_bch.png" title="Formes de bouche" id="btn-bch" />
<input type="image" class="btn-calq" src="../static/png/btn_cpsg.png" title="Coupes sagitales" id="btn-cpsg" />
</div>
</div>
</div>
</div>
......
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