Skip to content

Commit

Permalink
stile upload file docenti
Browse files Browse the repository at this point in the history
  • Loading branch information
@nkoexe
nkoexe committed Aug 29, 2024
1 parent a084594 commit 09cda1e
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 24 deletions.
12 changes: 7 additions & 5 deletions sostituzioni/view/static/scripts/gestione_impostazioni/docenti.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,25 +225,27 @@ socket.on("elimina tutti docenti annulla successo", () => {

//----------------------------------


const import_docenti_dropzone = document.querySelector("#import-docenti-dropzone")
const docenti_filepicker = document.querySelector("#import-docenti-filepicker")
const docenti_selected_file_label = document.querySelector("#import-docenti-selected-file-label")
const docenti_selected_file_label = document.querySelector("#import-docenti-selected-file-name")

docenti_filepicker.onchange = () => {
if (docenti_filepicker.value == "") {
docenti_selected_file_label.innerHTML = ""
docenti_filepicker.classList.remove("fileselected")
} else {
docenti_filepicker.classList.add("fileselected")
docenti_selected_file_label.innerHTML = docenti_filepicker.files[0].name
}
}
const import_docenti_dropzone = document.querySelector("#import-docenti-dropzone")

import_docenti_dropzone.ondrop = (e) => {
console.log(e.dataTransfer.files)
e.preventDefault();
import_docenti_dropzone.classList.remove("filehover")

let file = e.dataTransfer.files[0]
docenti_filepicker.files = e.dataTransfer.files

docenti_filepicker.onchange()
}

import_docenti_dropzone.ondragover = (e) => {
Expand Down
67 changes: 58 additions & 9 deletions sostituzioni/view/static/style/impostazioni.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -326,7 +326,7 @@ input[type="file"] {
display: none;
}

input[type="file"]+label {
/* input[type="file"]+label {
padding: 15px;
margin-left: 15px;
color: var(--color-text-opzione);
Expand All @@ -336,16 +336,16 @@ input[type="file"]+label {
font-size: 25px;
cursor: pointer;
box-shadow: none;
}
} */

input[type="file"]+label:hover {
/* input[type="file"]+label:hover {
background-color: #ececec;
box-shadow: none !important;
}
} */

#import-docenti-selected-file-label {
/* #import-docenti-selected-file-label {
margin: auto 10px;
}
} */


/* SELEZIONE */
Expand Down Expand Up @@ -389,12 +389,61 @@ input[type="file"]+label:hover {

.opzione-file-dropzone {
width: 100%;
background-color: var(--color-background-opzione);
height: 150px;
padding: 20px;
color: #00000099;
background-color: var(--color-opzioni);
border: var(--border-opzione);
border-style: dashed;
border-width: 2px;
border-radius: 5px;
font-size: 25px;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s;
}

.opzione-file-dropzone:has(.fileselected) {
display: none;
}

.opzione-file-dropzone label {
padding: 20px;
cursor: pointer;
box-shadow: none;
}

.opzione-file-dropzone label:hover {
text-decoration: underline;
}

.opzione-file-dropzone.filehover {
background-color: #00000015;
border-color: #00000062;
box-shadow: 0 0 10px #00000043;
}

.opzione-file-dropzone.filehover label {
pointer-events: none;
}

.import-selected-file {
display: none;
padding: 5px 0 5px 15px;
border: var(--border-opzione);
border-radius: 10px;
}

.import-selected-file-name {
/* font-family: monospace; */
padding: 5px 10px;
margin-left: 5px;
border-radius: 10px;
background-color: var(--color-gestionedati-modificato);
}

.opzione-file:has(.fileselected) .import-selected-file {
display: block;
}

/* Selezione unità del numero */
Expand Down
16 changes: 6 additions & 10 deletions sostituzioni/view/templates/gestione_impostazioni/docenti.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,15 @@
<div id="main-container">
<div class="opzione">
<h5 class="opzione-titolo">Importa docenti da file</h5>
<p class="opzione-descrizione">Usare preferibilmente file esportati dai gruppi Google. Accettati formati XSLX e CSV, con l'email nella colonna 'Member Email'. Il nome del file dovrebbe assomigliare a questo: 'Members_xxxxxxxxxxxxxxxx_01012023_000000.csv.xlsx'</p>
<p class="opzione-descrizione">Usare file esportati dai gruppi Google. Accettati formati XSLX e CSV.</p>
<!-- <p class="opzione-descrizione">Usare file esportati dai gruppi Google. Accettati formati XSLX e CSV, con l'email nella colonna 'Member Email'. Il nome del file dovrebbe assomigliare a questo: 'Members_xxxxxxxxxxxxxxxx_01012023_000000.csv.xlsx'</p> -->
<div class="opzione-file">
<div id="import-docenti-dropzone" class="opzione-file-dropzone">
<div class="opzione-file-dropzone-content">
<span class="material-symbols-rounded icon">upload_file</span>
<span class="opzione-file-dropzone-text">Trascina qui il file da importare</span>
</div>
<input type="file" id="import-docenti-filepicker" accept=".csv,.xlsx">
<label for="import-docenti-filepicker"><span>Selezione un file o trascinalo qui</span></label>
</div>
<input type="file" id="import-docenti-filepicker" accept=".csv,.xlsx">
<label for="import-docenti-filepicker" class="material-symbols-rounded pulsante">upload_file</label>
<button onclick="importa_docenti()" class="pulsante">Importa</button>
<span id="import-docenti-selected-file-label"></span>
<!-- todo pulsante conferma e pulsante cancella file -->
<span id="import-docenti-selected-file" class="import-selected-file">File selezionato: <span id="import-docenti-selected-file-name" class="import-selected-file-name"></span></span>
</div>
</div>
<div id="container-docenti" class="opzione gestione-dati-container">
Expand All @@ -31,7 +28,6 @@ <h5 class="opzione-titolo">Importa docenti da file</h5>
<button class="pulsante gestione-dati-pulsante-nuovo" onclick="nuovo_docente()"><span class="icon material-symbols-rounded">add</span><span class="text">Nuovo Docente</span></button>
</div>
<div id="cerca-docente-container" class="gestione-dati-cerca-container">
<!-- <span class="icon material-symbols-rounded">search</span> -->
<input type="text" id="cerca-docente-input" placeholder="Cerca" oninput="cerca_docente()">
<button class="gestione-dati-pulsante-cerca" onclick="cerca_docente()"><span class="icon material-symbols-rounded">search</span></button>
</div>
Expand Down

0 comments on commit 09cda1e

Please sign in to comment.