Skip to content

GitLab

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

optimisations pour téléphone

parent 6f6f09ff
Hide whitespace changes
Inline Side-by-side
static/js/clavier.js
View file @ c16ce8c2
......@@ -102,6 +102,7 @@ function recupPhon(identifiant){
gz += "</table>";
graphZone.innerHTML = gz;
showGraphies();
}
function initGraph(){
......@@ -206,6 +207,8 @@ function writeGraph(graph,phon){
document.getElementById(curseurPos).classList.remove('startPoint');
curseurPos = graphSpan.id;
document.getElementById(curseurPos).classList.add('startPoint');
hideGraphies()
}
//fonction entrer
......@@ -637,3 +640,15 @@ function readResponse(response) {
var audio = '<audio autoplay="true" controls>' + source + '</audio>';
document.getElementById('audio').innerHTML = audio;
}
///////////////////////////////////
///////// RESPONSIVE TOOLS ////////
function hideGraphies() {
if (window.innerWidth < 700) document.getElementById('graphies').style.display = "none"
}
function showGraphies() {
document.getElementById('graphies').style.display = "block"
}
\ No newline at end of file
static/js/dragdrop.js
View file @ c16ce8c2
......@@ -3,6 +3,7 @@
// const rep -> div d'écriture
// https://www.youtube.com/watch?v=jfYWwQrtzzY&t=102s
// ajouter DragDropTouch.js pour compatibilité tactile
rep.addEventListener('dragover', e => {
e.preventDefault()
......
static/styles/clavier.css
View file @ c16ce8c2
......@@ -80,12 +80,34 @@
border: 2px solid #5cb85c;
}
.boutons {
display: inline-flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
}
.boutons button {
border: solid 1px black;
padding: auto 15px;
margin: 4px;
height: min-content;
}
@media only screen and (max-width: 800px) {
.btnshowIfSmall {
display: block;
}
.btnhideIfSmall {
display: none;
}
}
@media only screen and (min-width: 800px) {
.btnshowIfSmall {
display: none;
}
.btnhideIfSmall {
display: block;
}
}
.textZone {
display: inline-table;
background-color: black;
......@@ -94,9 +116,14 @@
text-align: left;
padding: 10px;
font-weight:bold;
font-size: 2.2em;
font-size: 2.2rem;
position: relative;
}
@media only screen and (min-width: 1000px) {
.textZone {
font-size: 3rem;
}
}
.textZone-white {
background-color: white;
......@@ -159,6 +186,7 @@
align-items: flex-start;
cursor: pointer;
}
.superposeBack {
position: relative;
margin: auto;
......@@ -220,8 +248,8 @@
.btnPros {
position: absolute;
top: 5px;
left: 15px;
top: 0px;
left: 30px;
padding: 5px;
z-index: 100;
cursor: pointer;
......@@ -253,6 +281,7 @@
flex: var(--graphSize);
position: relative;
}
.graphiesZone {
position: absolute;
left: 10px;
......@@ -270,7 +299,6 @@
width:100%;
height:100%;
background-color: black;
border: outset;
}
.graphiesZoneTable-white {
background-color: white;
......@@ -371,3 +399,65 @@ footer {
background-color: white;
border: 2px solid black;
}
/* RESPONSIVE CSS */
@media only screen and (max-width: 700px) {
.clavier-graphiesZone {
position: relative;
}
.clavier {
flex: 100%;
}
.graphies {
display: none;
flex: 100%;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
position: absolute;
background-color: black;
}
.graphiesZone {
position: absolute;
top: 20px;
left: 0px;
width: 100%;
height: 100%;
}
.hideGraphies {
display: block;
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
padding-left: 5px;
padding-top: 5px;
}
.control-clavier {
display: none;
}
.graph1 {
font-size: 5vw;
}
.graph4 {
font-size: 5vw;
}
.graph2 {
font-size: 7vw;
}
.graph3 {
font-size: 9vw;
}
.container-fluid {
padding: 0px; /* suppression marge auto Bootstrap */
}
.fenetre {
margin: 5px 0px;
}
.modal-content {
width: 90%;
}
}
\ No newline at end of file
static/styles/main.css
View file @ c16ce8c2
......@@ -14,6 +14,12 @@ h2 {
margin: auto;
}
@media only screen and (max-width: 800px) {
.hideIfSmall {
display: none;
}
}
.contours {
-webkit-text-stroke-width: 0.7px;
-webkit-text-stroke-color: black;
......@@ -60,6 +66,11 @@ h2 {
margin-top: 30px;
text-align: left;
}
@media only screen and (max-width: 700px) {
.registerBlock {
width: 90%;
}
}
.createSerieBlock {
background-color: rgb(252, 235, 205);
......
static/styles/player.css
View file @ c16ce8c2
......@@ -152,6 +152,19 @@
background-size: 100% 100%;
margin: 2px;
}
@media only screen and (max-width: 700px) {
.carte {
width: 60px;
height: 42px;
}
.divReponse {
display: block;
}
.divReponseDroit, .divReponseGauche, .divReponseMilieu {
width: 100%;
text-align: center;
}
}
.dragging {
opacity: .3;
......@@ -177,10 +190,9 @@
#bravo {
position: fixed;
top: 50%;
left:50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
width: 400px;
padding: 10px;
border: solid 2px rgb(62, 212, 62);
border-radius: 10px;
......@@ -189,7 +201,7 @@
}
#bravo_text {
font-size: 3em;
font-size: 3rem;
font-weight: bold;
}
......
static/styles/popup.css
View file @ c16ce8c2
......@@ -20,7 +20,7 @@
margin: auto;
padding: 0;
border: 1px solid #888;
width: 50%;
width: 60%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
......
templates/base.html
View file @ c16ce8c2
......@@ -28,25 +28,22 @@
<script defer src="{% static 'js/download.js' %}"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light navbarPerso">
<nav class="navbar navbar-expand-md navbar-light navbarPerso" style="flex-wrap: nowrap;">
<!-- LOGO PHONOGRAPHE -->
<a class="navbar-brand mr-4" href="/"><img height="60px" src="{% static 'im/logo_phonographe3.png' %}"></a>
<!-- COLLAPSE -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex justify-content-between" id="navbarToggle">
<!-- TITRE -->
<div class="navbar-nav mr-auto fs-2 fw-bold">
<div class="navbar-nav mr-auto fw-bold fs-2">
{% if titrePage == "phonographe" %}
<a class="nav-item nav-link contours" href="/"><span id="sp_soustitre" class="langspan"></span></a>
<a class="nav-item nav-link contours hideIfSmall" href="/"><span id="sp_soustitre" class="langspan"></span></a>
{% elif titrePage == "phonoplayer" %}
<a class="nav-item nav-link" href="/player"><span id="sp_playerHeader" class="langspan"></span></a>
<a class="nav-item nav-link hideIfSmall" href="/player"><span id="sp_playerHeader" class="langspan"></span></a>
{% elif titrePage == "page_perso" %}
<span id="sp_profileHeader" class="langspan"></span>
<span id="sp_profileHeader" class="langspan hideIfSmall"></span>
{% endif %}
</div>
......@@ -54,7 +51,7 @@
<div class="navbar-nav">
{% if user.is_authenticated %}
<div class="btn-group dropstart">
<a class="nav-item nav-link nav-login dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<a class="nav-item nav-link nav-login dropdown-toggle p-2" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
{{ user.username }}
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
......@@ -64,7 +61,7 @@
</ul>
</div>
{% else %}
<a class="nav-item nav-link nav-login" href="{% url 'login' %}">Se connecter</a>
<a class="nav-item nav-link nav-login p-2" href="{% url 'login' %}">Se connecter</a>
{% endif %}
</div>
......@@ -89,8 +86,7 @@
<footer class="footer-copyright text-center py-3">
<div><span id="sp_footfirefox" class="langspan"></span></div>
<div><a href="mailto:sylvain.coulange@univ-genoble-alpes.fr">S.Coulange</a>, {{ updateTime }} | <a href="https://gricad-gitlab.univ-grenoble-alpes.fr/pedagogies-multimodales/phonographe"><span id="sp_footcode" class="langspan"></span></a> - <a href="https://gricad-gitlab.univ-grenoble-alpes.fr/pedagogies-multimodales/phonographe/-/commits/master"><span id="sp_footjournal" class="langspan"></span></a></div>
<div>{{ updateTime }} <a href="https://gricad-gitlab.univ-grenoble-alpes.fr/pedagogies-multimodales/phonographe"><span id="sp_footcode" class="langspan"></span></a> - <a href="https://gricad-gitlab.univ-grenoble-alpes.fr/pedagogies-multimodales/phonographe/-/commits/master"><span id="sp_footjournal" class="langspan"></span></a></div>
<div class="licence-div">
<div><span id="sp_footlicence" class="langspan"></span></div>
......
templates/clavier.html
View file @ c16ce8c2
......@@ -7,9 +7,7 @@
var dataPage = JSON.parse("{{dataPage|escapejs}}");
</script>
<!-- fermeture conteneur -->
<div class="d-flex justify-content-between mx-2 mt-2">
<div class="d-flex justify-content-between align-self-center mx-2 mt-2">
<div class="d-flex param">
<div onclick="savePage()" title="Enregistrer ce travail"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-cloud-upload-fill nobg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0zm-.5 14.5V11h1v3.5a.5.5 0 0 1-1 0z"/></svg></div>
<a href="/" id="hrefNewPage" target="_blank" style="color:inherit"><div title="Ouvrir une nouvelle page"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-file-earmark nobg" viewBox="0 0 16 16"><path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/><path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/></svg></div></a>
......@@ -41,25 +39,32 @@
<div id="audio"></div>
<div class="boutons">
<button type="button" class="btn btn-secondary" onclick="writeGraph('. ','punct pause')">.</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph(', ','punct pause')">,</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph(' ? ','punct pause')">?</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph(' ! ','punct pause')">!</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph(' : ','punct')">:</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph(' ; ','punct pause')">;</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph('-','punct')">-</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph(' « ','punct')">«</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph(' » ','punct')">»</button>
<div class="boutons btn-punctuations">
<div class="d-flex justify-content-around">
<button type="button" class="btn btn-secondary" onclick="writeGraph('. ','punct pause')">.</button>
<button type="button" class="btn btn-secondary" onclick="writeGraph(', ','punct pause')">,</button>
<button type="button" class="btn btn-secondary btnshowIfSmall" onclick="showPunct()">?!-</button>
<button type="button" class="btn btn-secondary btnhideIfSmall" onclick="writeGraph(' ? ','punct pause')">?</button>
<button type="button" class="btn btn-secondary btnhideIfSmall" onclick="writeGraph(' ! ','punct pause')">!</button>
<button type="button" class="btn btn-secondary btnhideIfSmall" onclick="writeGraph(' : ','punct')">:</button>
<button type="button" class="btn btn-secondary btnhideIfSmall" onclick="writeGraph(' ; ','punct pause')">;</button>
<button type="button" class="btn btn-secondary btnhideIfSmall" onclick="writeGraph('-','punct')">-</button>
<button type="button" class="btn btn-secondary btnhideIfSmall" onclick="writeGraph(' « ','punct')">«</button>
<button type="button" class="btn btn-secondary btnhideIfSmall" onclick="writeGraph(' » ','punct')">»</button>
</div>
<button type="button" class="btn btn-warning btn-lg px-5" onclick="writeGraph(' ','punct')" class="btn-car-space"><span id="sp_btnspace" class="langspan"></span></button>
<button type="button" class="btn btn-secondary" onclick="writeEnter()" class="btn-car-enter" title="Aller à la ligne">↵</button>
<button type="button" class="btn btn-secondary" onclick="erasePreviousSpan()"><span id="sp_btnerase" class="langspan"></span></button>
<button type="button" class="btn btn-secondary" onclick="gotoPrecedent()" title="Aller à la graphie précédente"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-caret-left-fill nobg" viewBox="0 0 16 16"><path d="M3.86 8.753l5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/></svg></button>
<button type="button" class="btn btn-secondary" onclick="gotoNext()" title="Aller à la graphie suivante"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-caret-right-fill nobg" viewBox="0 0 16 16"><path d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/></svg></button>
<button type="button" class="btn btn-secondary" onclick="putAnchorOnLast()" title="Aller à la dernière graphie"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-chevron-bar-right nobg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.146 3.646a.5.5 0 0 0 0 .708L7.793 8l-3.647 3.646a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0zM11.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5z"/></svg></button>
<div>
<button type="button" class="btn btn-secondary" onclick="gotoPrecedent()" title="Aller à la graphie précédente"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-caret-left-fill nobg" viewBox="0 0 16 16"><path d="M3.86 8.753l5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/></svg></button>
<button type="button" class="btn btn-secondary" onclick="gotoNext()" title="Aller à la graphie suivante"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-caret-right-fill nobg" viewBox="0 0 16 16"><path d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/></svg></button>
<button type="button" class="btn btn-secondary" onclick="putAnchorOnLast()" title="Aller à la dernière graphie"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-chevron-bar-right nobg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.146 3.646a.5.5 0 0 0 0 .708L7.793 8l-3.647 3.646a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0zM11.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5z"/></svg></button>
</div>
<button type="button" class="btn btn-danger" onclick="eraseAll()"><span id="sp_btneraseall" class="langspan"></span></button>
</div>
<div class="clavier-graphiesZone">
<div class="clavier" id="clavier">
......@@ -94,13 +99,19 @@
</div>
</div>
<div class="graphies">
<div id="graphies" class="graphies">
<div id="graphiesZone" class="graphiesZone"></div>
<div class="hideGraphies" onclick="hideGraphies()">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#fff" class="bi bi-x-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
</div>
<div class="btnPros">
<div id="btnStress1" class="btnStress" onclick="toggleStress1()">Primary</div>
<div id="btnStress2" class="btnStress" onclick="toggleStress2()">Secondary</div>
</div>
<div class="btnCasse" onclick="toggleCasse()" title="Majuscules/minuscules"><?xml-stylesheet type="text/css" href="../styles/clavier.css"?><svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 32px; height: 32px;" xml:space="preserve"><g><path class="st0" d="M502.65,394.055c-1.581-3.012-2.922-6.18-3.798-9.129c-0.884-2.942-1.293-5.646-1.289-7.849c0-10.191,0-62.152,0-98.828c0.015-12.047-2.52-23.551-7.372-33.632c-3.618-7.565-8.497-14.272-14.182-19.919c-8.544-8.484-18.813-14.547-29.7-18.479c-10.906-3.932-22.486-5.788-34.218-5.788c-2.319,0-4.643,0.079-6.963,0.22c-6.378,0.409-12.283,1.644-17.827,3.232c-8.304,2.406-15.848,5.638-22.643,8.886c-6.774,3.255-12.802,6.558-17.563,9.113l23.378,43.438c6.57-3.546,13.824-7.486,20.763-10.474c3.448-1.486,6.782-2.721,9.723-3.57c2.945-0.857,5.485-1.297,7.254-1.4c1.313-0.087,2.606-0.126,3.876-0.126c5.764,0,11.162,0.834,15.774,2.28c3.468,1.094,6.492,2.516,9.004,4.144c3.774,2.477,6.39,5.269,8.257,8.61c1.832,3.366,3.082,7.455,3.114,13.462c0,1.18,0,2.375,0,3.586c-9.354,0-20.079,0-28.128,0c-25.926,0-48.891,7.392-65.947,21.161c-8.508,6.865-15.475,15.341-20.256,24.998c-4.797,9.641-7.352,20.445-7.34,31.509c-0.012,10.734,2.21,21.028,6.381,30.173c6.24,13.761,16.777,24.73,29.362,31.957c12.602,7.258,27.243,10.946,42.498,10.954c10.746-0.008,21.22-2.147,30.991-5.889c7.856-3.02,15.267-7.093,22.029-12.071c1.726,3.483,3.523,6.739,5.32,9.664c4.234,6.872,8.37,12.157,11.402,15.703l37.45-32.09C509.916,405.497,505.776,400.087,502.65,394.055z M448.239,360.203c-0.539,2.242-1.376,4.474-2.56,6.732c-3.283,6.306-9.408,12.59-16.957,17.009c-7.522,4.458-16.274,6.943-23.914,6.912c-11.374,0-20.724-3.696-26.822-9.059c-3.074-2.698-5.406-5.803-7.05-9.405c-1.635-3.617-2.626-7.785-2.638-12.888c0.011-4.772,1.038-8.996,2.995-12.966c2.953-5.93,8.15-11.466,16.258-15.774c8.076-4.285,19.03-7.195,32.558-7.187c8.049,0,18.774,0,28.128,0C448.239,337.305,448.239,350.279,448.239,360.203z"></path> <path class="st0" d="M183.798,72.006H145.29c-15.598,0-29.331,9.956-34.179,24.778L0,436.275h58.76l35.166-107.478H202.52l27.365,107.478h74.585L218.648,99.088C214.591,83.141,200.26,72.006,183.798,72.006z M108.127,285.421l40.497-123.763h11.356l31.505,123.763H108.127z"></path></g></svg></div>
<div id="graphiesZone" class="graphiesZone"></div>
</div>
</div>
......
templates/playerPhono.html
View file @ c16ce8c2
......@@ -62,7 +62,7 @@
<center>
<div id="bravo" style="display: none;">
<img id="bravo_img" src="" width="80%">
<img id="bravo_img" src="" style="height:50vh;">
<div id="bravo_text"></div>
<button id="bravo_next" onclick="loadNext()" type="button" class="btn btn-success btn-lg">Continuer</button>
<a href="/player/"><button id="bravo_quit" style="display:none" type="button" class="btn btn-primary btn-lg">Quitter</button></a>
......
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