dslak
/
coze_demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add compatibility

develop
Carmine De Rosa 7 years ago
parent
b7e2b6d718
commit
c9801acce2
17 changed files with 1415 additions and 138 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 0
      TMP/COZeAnimDemo/HTML+JS/loading.js
  2. 53
      compatibility.php
  3. 193
      css/styles.css
  4. 4
      index.php
  5. 18
      js/compatibility.js
  6. 1060
      js/loading.js
  7. 16
      js/scripts.js
  8. 12
      modules.php
  9. 1
      scripts/compatibility.php
  10. 3
      scripts/modules.php
  11. BIN
      scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/forms.scssc
  12. BIN
      scss/.sass-cache/5f9cd8e8aad7f3f5cd444b9e1c83afcdd207f75c/modules.scssc
  13. BIN
      scss/.sass-cache/5f9cd8e8aad7f3f5cd444b9e1c83afcdd207f75c/sections.scssc
  14. 66
      scss/forms.scss
  15. 60
      scss/sections/compatibility.scss
  16. 66
      scss/sections/modules.scss
  17. 1
      scss/sections/sections.scss

0
TMP/COZeAnimDemo/HTML+JS/Animazione_Demo01.js → TMP/COZeAnimDemo/HTML+JS/loading.js
View File

53
compatibility.php
View File

@ -0,0 +1,53 @@
<div class="compatibility pattern">
<div class="row">
<div class="col-12">
<p class="font-14 font-bold text-upper text-red p-5">Analisi compatibilità del modulo</p>
</div>
</div>
<div class="row content">
<div class="col-4 user-sheet">
<div class="avatar"><img src="<?= $BASE_PATH;?>/images/avatar/luca.png"></div>
<div class="name">Luca</div>
<div class="rule">Stagista</div>
<p class="sheet-title">Modulo differenze culturali</p>
<div class="sheet-container">
<p class="font-10 text-upper pt-3 pb-2">Compatibilità knowledge</p>
<div class="value"><div class="percent" data-percent="60"></div></div>
<p class="font-10 text-upper pt-3 pb-2">Prestazioni storiche sul corso</p>
<div class="value"><div class="percent" data-percent="40"></div></div>
<p class="font-10 text-upper pt-3 pb-2">Carico didattico sostenibile</p>
<div class="value"><div class="percent" data-percent="70"></div></div>
</div>
</div>
<div class="col-4 user-sheet">
<div class="avatar"><img src="<?= $BASE_PATH;?>/images/avatar/sara.png"></div>
<div class="name">Sara</div>
<div class="rule">Venditore</div>
<p class="sheet-title">Modulo differenze culturali</p>
<div class="sheet-container">
<p class="font-10 text-upper pt-3 pb-2">Compatibilità knowledge</p>
<div class="value"><div class="percent" data-percent="40"></div></div>
<p class="font-10 text-upper pt-3 pb-2">Prestazioni storiche sul corso</p>
<div class="value"><div class="percent" data-percent="90"></div></div>
<p class="font-10 text-upper pt-3 pb-2">Carico didattico sostenibile</p>
<div class="value"><div class="percent" data-percent="30"></div></div>
</div>
</div>
</div>
<div class="row p-5">
<div class="col-12 px-2">
<button class="button big confirm">Avvia personalizzazione e attiva corso</button>
<button class="button big discard">Annulla</button>
</div>
</div>
</div>

193
css/styles.css
View File

@ -14576,24 +14576,25 @@ a:hover {
/* line 3, forms.scss */
input, button {
border: none;
border-radius: 3px;
margin: 5px 0;
-webkit-appearance: none;
}
/* line 7, forms.scss */
/* line 8, forms.scss */
input::-ms-clear, button::-ms-clear {
display: none;
}
/* line 10, forms.scss */
/* line 11, forms.scss */
input:focus, button:focus {
outline: none;
}
/* line 11, forms.scss */
/* line 12, forms.scss */
input::-moz-focus-inner, button::-moz-focus-inner {
border: 0;
}
/* line 14, forms.scss */
/* line 15, forms.scss */
input[type=text],
input[type=password] {
border: 1px solid #ccc;
@ -14604,53 +14605,40 @@ input[type=password] {
box-sizing: border-box;
}
/* line 24, forms.scss */
/* line 25, forms.scss */
input[type=button],
input[type=submit],
button {
background-color: #4e984a;
color: white;
text-align: center;
button,
.button {
padding: 5px 20px;
font-size: 0.75rem;
margin: 10px;
border-radius: 4px;
cursor: pointer;
border: none;
transition: .5s;
}
/* line 37, forms.scss */
input[type=button]:hover,
input[type=submit]:hover,
button:hover {
text-align: center;
font-size: 0.625rem;
text-transform: uppercase;
color: white;
background-color: #ccc;
}
/* line 46, forms.scss */
input[type="radio"],
input[type="checkbox"] {
display: none;
}
/* line 50, forms.scss */
input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
border: solid 1px black;
background: transparent;
cursor: pointer;
vertical-align: middle;
margin: -4px 4px 0 0;
font-size: 1rem;
line-height: 10px;
/* line 38, forms.scss */
input[type=button].big,
input[type=submit].big,
button.big,
.button.big {
padding: 10px 25px;
}
/* line 42, forms.scss */
input[type=button].confirm,
input[type=submit].confirm,
button.confirm,
.button.confirm {
background: #bf0f3d;
}
/* line 65, forms.scss */
input[type="radio"]:checked + label::before,
input[type="checkbox"]:checked + label::before {
font-family: 'FontAwesome';
content: "\f00c";
padding: 0 0 1px 0;
/* line 45, forms.scss */
input[type=button].discard,
input[type=submit].discard,
button.discard,
.button.discard {
background: black;
}
/* line 2, header.scss */
@ -14722,7 +14710,7 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu
line-height: 40px;
margin: 20px 0 10px 0;
background: #ccc;
border-radius: 5px;
border-radius: 8px;
color: white;
text-align: center;
font-size: 0.75rem;
@ -14736,7 +14724,7 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu
color: white;
text-align: center;
font-size: 0.75rem;
border-radius: 5px;
border-radius: 8px;
cursor: grab;
}
/* line 34, sections/modules.scss */
@ -14833,7 +14821,7 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu
color: white;
text-align: center;
font-size: 0.75rem;
border-radius: 5px;
border-radius: 8px;
}
/* line 133, sections/modules.scss */
.modules .content .user-sheet {
@ -14892,7 +14880,7 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu
color: white;
text-align: center;
font-size: 0.75rem;
border-radius: 5px;
border-radius: 8px;
}
/* line 189, sections/modules.scss */
.modules .content .user-sheet .modules-empty {
@ -14905,7 +14893,7 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu
text-align: center;
font-size: 0.75rem;
border: 2px dotted #ccc;
border-radius: 5px;
border-radius: 8px;
}
/* line 208, sections/modules.scss */
@ -14916,7 +14904,7 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu
top: 50px;
height: calc(100vh - 50px);
width: 100%;
background: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
}
/* line 218, sections/modules.scss */
@ -14936,22 +14924,99 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu
font-size: 0.75rem;
font-weight: 700;
}
/* line 236, sections/modules.scss */
#dropConfirm .alert .button {
padding: 5px 20px;
margin: 10px;
border-radius: 4px;
cursor: pointer;
/* line 239, sections/modules.scss */
#dropLoading {
display: none;
position: fixed;
left: 0;
top: 50px;
height: calc(100vh - 50px);
width: 100%;
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
}
/* line 248, sections/modules.scss */
#dropLoading #animation_container {
position: absolute;
height: 300px;
width: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* line 257, sections/modules.scss */
#dropLoading #countdown {
position: fixed;
height: 30px;
line-height: 30px;
width: 50px;
z-index: 9999;
top: calc(50% + 30px);
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 0.625rem;
text-transform: uppercase;
font-size: 1.125rem;
color: white;
}
/* line 246, sections/modules.scss */
#dropConfirm .alert .button.confirm {
background: #bf0f3d;
/* line 2, sections/compatibility.scss */
.compatibility {
min-height: calc(100vh - 50px);
width: 100%;
}
/* line 249, sections/modules.scss */
#dropConfirm .alert .button.discard {
background: black;
/* line 6, sections/compatibility.scss */
.compatibility .content {
padding: 0 50px;
}
/* line 10, sections/compatibility.scss */
.compatibility .content .user-sheet {
position: relative;
padding-top: 80px;
}
/* line 13, sections/compatibility.scss */
.compatibility .content .user-sheet .avatar {
position: absolute;
top: 0;
left: 10px;
height: 60px;
width: 60px;
}
/* line 19, sections/compatibility.scss */
.compatibility .content .user-sheet .avatar img {
height: 60px;
width: 60px;
}
/* line 24, sections/compatibility.scss */
.compatibility .content .user-sheet .name {
position: absolute;
left: 85px;
top: 12px;
font-size: 0.75rem;
font-weight: 700;
}
/* line 31, sections/compatibility.scss */
.compatibility .content .user-sheet .rule {
position: absolute;
left: 85px;
top: 30px;
font-size: 0.625rem;
}
/* line 37, sections/compatibility.scss */
.compatibility .content .user-sheet .sheet-title {
font-size: 0.75rem;
font-weight: 700;
}
/* line 42, sections/compatibility.scss */
.compatibility .content .user-sheet .sheet-container .value {
width: 90%;
height: 25px;
background: #ccc;
margin-bottom: 10px;
}
/* line 47, sections/compatibility.scss */
.compatibility .content .user-sheet .sheet-container .value .percent {
width: 0%;
height: 25px;
background: #bf0f3d;
}

4
index.php
View File

@ -48,6 +48,10 @@
<script type="text/javascript" src="<?php echo $BASE_URL;?>/node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $BASE_URL;?>/js/scripts.js"></script>
<?php
@include 'scripts/'.$getQ[0].'.php';
?>
</body>

18
js/compatibility.js
View File

@ -0,0 +1,18 @@
$(document).ready(()=>{
const compatibility = $('.compatibility')
const sheets = compatibility.find('.sheet-container')
const values = sheets.find('.value')
values.each((index,elem)=>{
const el = $(elem)
const percent = el.find('.percent')
const value = percent.data('percent')+'%'
console.log(percent)
percent.animate({'width': value},500)
})
})

1060
js/loading.js
View File

File diff suppressed because one or more lines are too long

16
js/scripts.js
View File

@ -15,6 +15,7 @@ function drop(ev) {
const target = $(ev.currentTarget).find('.modules-container')
const overlay = $('#dropConfirm')
const loading = $('#dropLoading')
const discard = overlay.find('.discard')
const confirm = overlay.find('.confirm')
const data = ev.dataTransfer.getData("ID")
@ -35,9 +36,15 @@ function drop(ev) {
confirm.on('click', ()=>{
if(once){
const module = $('#'+data)
target.append('<div class="div-drag">'+module.text()+'</div>')
loadingInit()
overlay.fadeOut()
loading.fadeIn()
setTimeout(()=>{
const module = $('#'+data)
loading.fadeOut()
target.append('<div class="div-drag">'+module.text()+'</div>')
},7000)
once = false
}
@ -45,9 +52,12 @@ function drop(ev) {
}
function dragLeave(ev) {
$('.drop-action').removeClass('drop-inactive')
$('.droppable').removeClass('drop-active')
}

12
modules.php
View File

@ -1,7 +1,7 @@
<div class="modules">
<div class="row">
<div class="col-3 sidebar pattern">
<p class="font-14 font-bold text-upper text-red">Moduli disponibili</p>
<p class="font-14 font-bold text-upper text-red pb-4">Moduli disponibili</p>
<div class="px-2">
<div class="div-drag-container">
@ -23,7 +23,7 @@
<div class="col-9 content">
<p class="font-14 font-bold text-upper text-red">Company overview</p>
<p class="font-14 font-bold text-upper text-red pb-4">Company overview</p>
<div class="row my-2">
<div class="col-3 p-0 mx-auto">
@ -152,3 +152,11 @@
<button class="button discard">Annulla</button>
</div>
</div>
<div id="dropLoading">
<div id="animation_container">
<canvas id="canvas"></canvas>
<div id="dom_overlay_container"></div>
</div>
<div id="countdown"></div>
</div>

1
scripts/compatibility.php
View File

@ -0,0 +1 @@
<script type="text/javascript" src="<?php echo $BASE_URL;?>/js/compatibility.js"></script>

3
scripts/modules.php
View File

@ -0,0 +1,3 @@
<script type="text/javascript" src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script type="text/javascript" src="<?php echo $BASE_URL;?>/js/loading.js"></script>

BIN
scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/forms.scssc
View File

Binary file not shown.

BIN
scss/.sass-cache/5f9cd8e8aad7f3f5cd444b9e1c83afcdd207f75c/modules.scssc
View File

Binary file not shown.

BIN
scss/.sass-cache/5f9cd8e8aad7f3f5cd444b9e1c83afcdd207f75c/sections.scssc
View File

Binary file not shown.

66
scss/forms.scss
View File

@ -1,6 +1,7 @@
input,button{
border: none;
border-radius: 3px;
margin: 5px 0;
-webkit-appearance: none;
@ -23,49 +24,26 @@ input[type=password]{
input[type=button],
input[type=submit],
button{
background-color: $green;
color: white;
text-align: center;
padding: 5px 20px;
font-size: $font-12;
cursor: pointer;
border: none;
transition: .5s;
&:hover{
color: white;
background-color: $grey;
}
button,
.button{
padding: 5px 20px;
margin: 10px;
border-radius: 4px;
cursor: pointer;
text-align: center;
font-size: $font-10;
text-transform: uppercase;
color: white;
&.big{
padding: 10px 25px;
}
&.confirm{
background: $red;
}
&.discard{
background: black;
}
}
input[type="radio"],
input[type="checkbox"]{
display: none;
&+label::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
border: solid 1px black;
background: transparent;
cursor: pointer;
vertical-align: middle;
margin: -4px 4px 0 0;
font-size: 1rem;
line-height: 10px;
}
&:checked{
&+label::before{
font-family: 'FontAwesome';
content: "\f00c";
padding: 0 0 1px 0;
}
}
}

60
scss/sections/compatibility.scss
View File

@ -0,0 +1,60 @@
.compatibility{
min-height: calc(100vh - 50px);
width: 100%;
.content{
padding: 0 50px;
.user-sheet{
position: relative;
padding-top: 80px;
.avatar{
position: absolute;
top: 0;
left: 10px;
height: 60px;
width: 60px;
img{
height: 60px;
width: 60px;
}
}
.name{
position: absolute;
left: 85px;
top: 12px;
font-size: $font-12;
font-weight: 700;
}
.rule{
position: absolute;
left: 85px;
top: 30px;
font-size: $font-10;
}
.sheet-title{
font-size: $font-12;
font-weight: 700;
}
.sheet-container{
.value{
width: 90%;
height: 25px;
background: $grey;
margin-bottom: 10px;
.percent{
width: 0%;
height: 25px;
background: $red;
}
}
}
}
}
}

66
scss/sections/modules.scss
View File

@ -13,7 +13,7 @@
line-height: 40px;
margin: 20px 0 10px 0;
background: $grey;
border-radius: 5px;
border-radius: 8px;
color: white;
text-align: center;
font-size: $font-12;
@ -25,7 +25,7 @@
color: white;
text-align: center;
font-size: $font-12;
border-radius: 5px;
border-radius: 8px;
cursor: grab;
}
}
@ -125,7 +125,7 @@
color: white;
text-align: center;
font-size: $font-12;
border-radius: 5px;
border-radius: 8px;
}
@ -182,7 +182,7 @@
color: white;
text-align: center;
font-size: $font-12;
border-radius: 5px;
border-radius: 8px;
}
}
@ -196,7 +196,7 @@
text-align: center;
font-size: $font-12;
border: 2px dotted $grey;
border-radius: 5px;
border-radius: 8px;
}
}
@ -212,7 +212,7 @@
top: 50px;
height: calc(100vh - 50px);
width: 100%;
background: rgba(0,0,0,0.6);
background: rgba(0,0,0,0.8);
overflow: hidden;
.alert{
@ -231,24 +231,40 @@
font-size: $font-12;
font-weight: 700;
}
.button{
padding: 5px 20px;
margin: 10px;
border-radius: 4px;
cursor: pointer;
text-align: center;
font-size: $font-10;
text-transform: uppercase;
color: white;
&.confirm{
background: $red;
}
&.discard{
background: black;
}
}
}
}
#dropLoading{
display: none;
position: fixed;
left: 0;
top: 50px;
height: calc(100vh - 50px);
width: 100%;
background: rgba(0,0,0,0.8);
overflow: hidden;
#animation_container{
position: absolute;
height: 300px;
width: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#countdown{
position: fixed;
height: 30px;
line-height: 30px;
width: 50px;
z-index: 9999;
top: calc(50% + 30px);
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: $font-18;
color: white;
}
}

1
scss/sections/sections.scss
View File

@ -1,3 +1,4 @@
@import "modules";
@import "compatibility";

Write Preview
Loading…
Cancel
Save