const DATA = {
- "title": "Title of the project",
+ "title": "Building a Positive Culture",
"modules": [
{
"id": "0",
<html lang="en">
<head>
<meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width">
<title></title>
<link href="style/style.css" rel="stylesheet">
</head>
</g>
</symbol>
</svg>
-<div id="wrapper">
- <header>
- <div id="logo"></div>
- <div id="tile"></div>
- <h1></h1>
- </header>
- <main>
- <table>
- <thead>
- <tr>
- <th></th>
- <th class="t"></th>
- <th class="y">Type</th>
- <th class="c">Mandatory</th>
- <th class="c">Validated</th>
- <th class="c">Score</th>
- <th></th>
- </tr>
- </thead>
- <tbody>
+<div id="z">
+ <div id="wrapper">
+ <header>
+ <div id="logo"></div>
+ <div id="tile"></div>
+ <h1></h1>
+ </header>
+ <main>
+ <table>
+ <thead>
+ <tr>
+ <th></th>
+ <th class="t"></th>
+ <th class="y">Type</th>
+ <th class="c">Mandatory</th>
+ <th class="c">Validated</th>
+ <th class="c">Score</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
- </tbody>
- </table>
- </main>
+ </tbody>
+ </table>
+ </main>
+ </div>
</div>
<div id="scowin">
$("header #logo").html(getSpriteIcon('logo'));
$("header #tile").html(getSpriteIcon('tile'));
initScorm();
+ $(window).on('resize', function () {
+ resize();
+ });
+ resize();
});
+function resize() {
+ if ($(window).width() < 480) {
+ $("#z").css('transform', 'scale(' + ($(window).width()/480) + ')');
+ }else{
+ $("#z").css('transform', 'scale(1)');
+ }
+}
+
function _cmi(key) {
var res = null;
switch (pipwerks.SCORM.version) {
var score = calcScore(s);
var tr = $('<tr ' + lock + ' data-type="' + v.type + '" data-id="' + v.id + '"><td class="i">' + getSpriteIcon('icon-' + v.type) + '</td></tr>');
$('tbody').append(tr);
+
+ var mandatory = (v.mandatory ? vcheck : xcheck);
+ var validated = (s.completion_status === 'completed' ? vcheck : xcheck);
+ var scoreCol = '<div class="scoreCont">' + (score < 0 ? '-' : score + ' %') + '</div>';
+
tr.append('<td class="t">' + v.title + '</td>');
- tr.append('<td class="y">' + types[v.type] + '</td>');
- tr.append('<td class="c">' + (v.mandatory ? vcheck : xcheck) + '</td>');
- tr.append('<td class="c">' + (s.completion_status === 'completed' ? vcheck : xcheck) + '</td>');
- tr.append('<td class="score c" data-score="' + score + '"><div>' + (score < 0 ? '-' : score + ' %') + '</div></td>');
- tr.append('<td>' + lockCol + '</td>');
+ tr.append('<td class="y d">' + types[v.type] + '</td>');
+ tr.append('<td class="c d">' + mandatory + '</td>');
+ tr.append('<td class="c d">' + validated + '</td>');
+ tr.append('<td class="score c d">' + scoreCol + '</td>');
+ tr.append('<td class="l">' + lockCol + '</td>');
+ $('tbody').append('<tr ' + lock + ' data-id="' + v.id + '" class="m"><td></td><td><strong>Type</strong>' + types[v.type] + '</td><td></td></tr>');
+ $('tbody').append('<tr ' + lock + ' data-id="' + v.id + '" class="m"><td></td><td><strong>Mandatory</strong>' + mandatory + '</td><td></td></tr>');
+ $('tbody').append('<tr ' + lock + ' data-id="' + v.id + '" class="m"><td></td><td><strong>Validated</strong>' + validated + '</td><td></td></tr>');
+ $('tbody').append('<tr ' + lock + ' data-id="' + v.id + '" class="m"><td></td><td><strong>Score</strong>' + scoreCol + '</td><td></td></tr>');
+ $('tbody').append('<tr ' + lock + ' class="m"><td class="sp"></td></tr>');
});
}
min-height: 100%;
}
+body {
+ overflow-x: hidden;
+}
+
* {
padding: 0;
margin: 0;
cursor: pointer;
}
+#z {
+ transform-origin: 0 0;
+}
+
header {
position: relative;
height: 200px;
@media screen and (max-width: 1024px) {
header {
text-align: center;
- height: 200px;
+ height: auto;
+ min-height: 200px;
+ margin-bottom: 30px;
}
}
header #logo {
height: 30px;
color: #fff;
}
+@media screen and (max-width: 1024px) {
+ #scowin #scobar {
+ height: 60px;
+ }
+}
#scowin #scobar a.close {
position: absolute;
top: 5px;
height: 20px;
color: #fff;
}
+@media screen and (max-width: 1024px) {
+ #scowin #scobar a.close svg {
+ width: 30px;
+ height: 30px;
+ }
+}
#scowin #scobar #scoicon {
position: absolute;
top: 4px;
height: 26px;
width: 26px;
}
+@media screen and (max-width: 1024px) {
+ #scowin #scobar #scoicon {
+ top: 6px;
+ width: 36px;
+ height: 36px;
+ }
+}
#scowin #scobar h2 {
margin-left: 40px;
font-size: 18px;
margin-top: 3px;
font-weight: 400;
}
+@media screen and (max-width: 1024px) {
+ #scowin #scobar h2 {
+ margin-left: 50px;
+ font-size: 26px;
+ margin-top: 2px;
+ }
+}
#scowin #sco {
position: absolute;
width: 100%;
left: 0;
background-color: #000;
}
+@media screen and (max-width: 1024px) {
+ #scowin #sco {
+ height: calc(100% - 40px);
+ top: 40px;
+ }
+}
#wrapper {
width: 1024px;
}
@media screen and (max-width: 1024px) {
#wrapper {
+ padding: 0 30px;
+ min-width: 480px;
width: 100%;
}
}
#wrapper main table {
border-collapse: collapse;
- width: 1024px;
+ width: 100%;
+}
+@media screen and (max-width: 1024px) {
+ #wrapper main table thead {
+ display: none;
+ }
}
#wrapper main table th, #wrapper main table td {
padding: 5px 10px;
#wrapper main table th.c, #wrapper main table td.c {
text-align: center;
}
+#wrapper main table tbody tr.m {
+ display: none;
+}
+@media screen and (max-width: 1024px) {
+ #wrapper main table tbody tr.m {
+ display: table-row;
+ }
+ #wrapper main table tbody tr.m td {
+ height: 40px;
+ vertical-align: middle;
+ }
+ #wrapper main table tbody tr.m strong {
+ display: inline-block;
+ width: 50%;
+ }
+ #wrapper main table tbody tr.m svg {
+ height: 20px;
+ }
+}
#wrapper main table tbody tr[data-lock=locked]:hover td.t {
background-color: #fff;
}
#wrapper main table tbody tr:hover td.t {
background-color: #e6e6e6;
}
+#wrapper main table tbody td.sp {
+ height: 30px;
+}
+@media screen and (max-width: 1024px) {
+ #wrapper main table tbody td.t, #wrapper main table tbody td.l {
+ border-bottom: 1px solid #f0f0f0;
+ border-top: 1px solid #f0f0f0;
+ }
+ #wrapper main table tbody td.t:hover, #wrapper main table tbody td.l:hover {
+ background-color: #fff;
+ }
+}
+@media screen and (max-width: 1024px) {
+ #wrapper main table tbody td.d {
+ display: none;
+ }
+}
+#wrapper main table tbody td.l {
+ width: 0;
+}
+#wrapper main table tbody td.i {
+ width: 60px;
+}
#wrapper main table tbody td.i svg {
position: relative;
left: 10px;
border-bottom: 1px solid #f0f0f0;
border-left: 10px solid #000000;
}
-#wrapper main table tbody td.score div {
+#wrapper main table tbody td .scoreCont {
+ display: inline-block;
white-space: nowrap;
width: 70px;
padding: 5px;
margin: 0 auto;
background-color: #e4ff19;
font-weight: 600;
+ text-align: center;
}
#wrapper main table tbody td svg {
height: 30px;
-{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAOA;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;;AAnBA;EAiBF;IAKI;IACA;;;AAEF;EACE;EACA;EACA;EACA;;AA7BF;EAyBA;IAOI;IACA;IACA;IACA;;;AAEF;EACE;;AAEJ;EACE;EACA;EACA;;AA3CF;EAwCA;IAMI;IACA;IACA;IACA;;;AAEF;EAKE;EACA;;AAzDJ;EAmDE;IAEI;IACA;IACA;;;AAIN;EACE;EACA;EACA;;AA9DF;EA2DA;IAKI;IACA;;;;AAGN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAII;EACE,kBAtFC;;AAqFH;EACE,kBAtFC;;AAqFH;EACE,kBAtFC;;AAqFH;EACE,kBAtFC;;AAqFH;EACE,kBAtFC;;AAqFH;EACE,kBAtFC;;AAwFP;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;AArIA;EAmIF;IAII;;;AAGA;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;;AAMI;EACE;;AAEJ;EACE;EACA;;AAIA;EACE,mBA5KP;;AA+KO;EACE,OAhLT;;AA2KK;EACE,mBA5KP;;AA+KO;EACE,OAhLT;;AA2KK;EACE,mBA5KP;;AA+KO;EACE,OAhLT;;AA2KK;EACE,mBA5KP;;AA+KO;EACE,OAhLT;;AA2KK;EACE,mBA5KP;;AA+KO;EACE,OAhLT;;AA2KK;EACE,mBA5KP;;AA+KO;EACE,OAhLT;;AAmLG;EACE;;AAIF;EACE;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;;;AAEZ;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAOA;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;;AAzBA;EAuBF;IAKI;IACA;IACA;IACA;;;AAEF;EACE;EACA;EACA;EACA;;AArCF;EAiCA;IAOI;IACA;IACA;IACA;;;AAEF;EACE;;AAEJ;EACE;EACA;EACA;;AAnDF;EAgDA;IAMI;IACA;IACA;IACA;;;AAEF;EAKE;EACA;;AAjEJ;EA2DE;IAEI;IACA;IACA;;;AAIN;EACE;EACA;EACA;;AAtEF;EAmEA;IAKI;IACA;;;;AAGN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAII;EACE,kBA9FC;;AA6FH;EACE,kBA9FC;;AA6FH;EACE,kBA9FC;;AA6FH;EACE,kBA9FC;;AA6FH;EACE,kBA9FC;;AA6FH;EACE,kBA9FC;;AAgGP;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAzGF;EAmGA;IASI;;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAtHN;EAmHI;IAMI;IACA;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAjIJ;EA4HE;IAQI;IACA;IACA;;;AAGJ;EACE;EACA;EACA;EACA;;AA7IJ;EAyIE;IAMI;IACA;IACA;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;;AAzJF;EAmJA;IASI;IACA;;;;AAEN;EACE;EACA;;AAjKA;EA+JF;IAII;IACA;IACA;;;AAGA;EACE;EACA;;AA1KJ;EA6KI;IAEI;;;AAEJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;;AAIA;EACE;;AAjMV;EAgMQ;IAII;;EAEA;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;;;AAKF;EACE;;AAEJ;EACE;EACA;;AAIA;EACE,mBAjOP;;AAoOO;EACE,OArOT;;AAgOK;EACE,mBAjOP;;AAoOO;EACE,OArOT;;AAgOK;EACE,mBAjOP;;AAoOO;EACE,OArOT;;AAgOK;EACE,mBAjOP;;AAoOO;EACE,OArOT;;AAgOK;EACE,mBAjOP;;AAoOO;EACE,OArOT;;AAgOK;EACE,mBAjOP;;AAoOO;EACE,OArOT;;AAwOG;EACE;;AAGJ;EACE;;AA1OV;EA4OQ;IAEI;IACA;;EACA;IACE;;;AAjPd;EAmPQ;IAEI;;;AAEJ;EACE;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;;AAEZ;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
body, html
min-height: 100%
+body
+ overflow-x: hidden
+
*
padding: 0
margin: 0
[data-id]
cursor: pointer
+#z
+ transform-origin: 0 0
+
header
position: relative
height: 200px
@include media-mob()
text-align: center
- height: 200px
+ height: auto
+ min-height: 200px
+ margin-bottom: 30px
#logo
position: absolute
height: 30px
color: #fff
+ @include media-mob()
+ height: 60px
+
a.close
position: absolute
top: 5px
height: 20px
color: #fff
+ @include media-mob()
+ width: 30px
+ height: 30px
+
#scoicon
position: absolute
top: 4px
height: 26px
width: 26px
+ @include media-mob()
+ top: 6px
+ width: 36px
+ height: 36px
+
h2
margin-left: 40px
font-size: 18px
margin-top: 3px
font-weight: 400
+ @include media-mob()
+ margin-left: 50px
+ font-size: 26px
+ margin-top: 2px
#sco
position: absolute
left: 0
background-color: #000
+ @include media-mob()
+ height: calc(100% - 40px)
+ top: 40px
+
#wrapper
width: 1024px
margin: 0 auto
@include media-mob()
+ padding: 0 30px
+ min-width: 480px
width: 100%
main
table
border-collapse: collapse
- width: 1024px
+ width: 100%
+
+
+ thead
+ @include media-mob()
+ display: none
th, td
padding: 5px 10px
tbody
tr
+ &.m
+ display: none
+
+ @include media-mob()
+ display: table-row
+
+ td
+ height: 40px
+ vertical-align: middle
+
+ strong
+ display: inline-block
+ width: 50%
+
+ svg
+ height: 20px
+
+
&[data-lock="locked"]
&:hover
td.t
background-color: #e6e6e6
td
+ &.sp
+ height: 30px
+
+ &.t, &.l
+ @include media-mob()
+ border-bottom: 1px solid #f0f0f0
+ border-top: 1px solid #f0f0f0
+ &:hover
+ background-color: #fff
+
+ &.d
+ @include media-mob()
+ display: none
+
+ &.l
+ width: 0
+
&.i
+ width: 60px
+
svg
position: relative
left: 10px
border-bottom: 1px solid #f0f0f0
border-left: 10px solid #000000
- &.score
- div
- white-space: nowrap
- width: 70px
- padding: 5px
- margin: 0 auto
- background-color: #e4ff19
- font-weight: 600
+ .scoreCont
+ display: inline-block
+ white-space: nowrap
+ width: 70px
+ padding: 5px
+ margin: 0 auto
+ background-color: #e4ff19
+ font-weight: 600
+ text-align: center
svg
projects / hf-scorm-package.git / commitdiff