From: Vincent Vanwaelscappel Date: Thu, 16 Dec 2021 14:28:35 +0000 (+0100) Subject: wip #4907 @1.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=20bd7e1d0402c72afe90791ecafa00f9e583799b;p=hf-scorm-package.git wip #4907 @1.5 --- diff --git a/data.js b/data.js index 3454a5a..df2b57d 100644 --- a/data.js +++ b/data.js @@ -1,5 +1,5 @@ const DATA = { - "title": "Title of the project", + "title": "Building a Positive Culture", "modules": [ { "id": "0", diff --git a/index.html b/index.html index 60d4ed4..d890664 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + @@ -157,30 +158,32 @@ -
-
- -
-

-
-
- - - - - - - - - - - - - +
+
+
+ +
+

+
+
+
TypeMandatoryValidatedScore
+ + + + + + + + + + + + - -
TypeMandatoryValidatedScore
-
+ + + +
diff --git a/js/scormpackage.js b/js/scormpackage.js index a9487f0..2f535ba 100644 --- a/js/scormpackage.js +++ b/js/scormpackage.js @@ -41,8 +41,20 @@ $(function () { $("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) { @@ -306,12 +318,22 @@ function setContents() { var score = calcScore(s); var tr = $('' + getSpriteIcon('icon-' + v.type) + ''); $('tbody').append(tr); + + var mandatory = (v.mandatory ? vcheck : xcheck); + var validated = (s.completion_status === 'completed' ? vcheck : xcheck); + var scoreCol = '
' + (score < 0 ? '-' : score + ' %') + '
'; + tr.append('' + v.title + ''); - tr.append('' + types[v.type] + ''); - tr.append('' + (v.mandatory ? vcheck : xcheck) + ''); - tr.append('' + (s.completion_status === 'completed' ? vcheck : xcheck) + ''); - tr.append('
' + (score < 0 ? '-' : score + ' %') + '
'); - tr.append('' + lockCol + ''); + tr.append('' + types[v.type] + ''); + tr.append('' + mandatory + ''); + tr.append('' + validated + ''); + tr.append('' + scoreCol + ''); + tr.append('' + lockCol + ''); + $('tbody').append('Type' + types[v.type] + ''); + $('tbody').append('Mandatory' + mandatory + ''); + $('tbody').append('Validated' + validated + ''); + $('tbody').append('Score' + scoreCol + ''); + $('tbody').append(''); }); } diff --git a/style/style.css b/style/style.css index 8095582..6b1299e 100644 --- a/style/style.css +++ b/style/style.css @@ -2,6 +2,10 @@ body, html { min-height: 100%; } +body { + overflow-x: hidden; +} + * { padding: 0; margin: 0; @@ -13,6 +17,10 @@ body, html { cursor: pointer; } +#z { + transform-origin: 0 0; +} + header { position: relative; height: 200px; @@ -20,7 +28,9 @@ header { @media screen and (max-width: 1024px) { header { text-align: center; - height: 200px; + height: auto; + min-height: 200px; + margin-bottom: 30px; } } header #logo { @@ -119,6 +129,11 @@ header h1 { height: 30px; color: #fff; } +@media screen and (max-width: 1024px) { + #scowin #scobar { + height: 60px; + } +} #scowin #scobar a.close { position: absolute; top: 5px; @@ -129,6 +144,12 @@ header h1 { 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; @@ -136,12 +157,26 @@ header h1 { 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%; @@ -150,6 +185,12 @@ header h1 { left: 0; background-color: #000; } +@media screen and (max-width: 1024px) { + #scowin #sco { + height: calc(100% - 40px); + top: 40px; + } +} #wrapper { width: 1024px; @@ -157,12 +198,19 @@ header h1 { } @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; @@ -177,6 +225,25 @@ header h1 { #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; } @@ -223,6 +290,29 @@ header h1 { #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; @@ -237,13 +327,15 @@ header h1 { 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; diff --git a/style/style.css.map b/style/style.css.map index d1ed892..fd886a2 100644 --- a/style/style.css.map +++ b/style/style.css.map @@ -1 +1 @@ -{"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 diff --git a/style/style.sass b/style/style.sass index 48264e5..ce90b33 100644 --- a/style/style.sass +++ b/style/style.sass @@ -8,6 +8,9 @@ $colors: (IN: #47484e, VI: #d0167c, AN: #84156f, FB: #f8971d, PC: #00a0af, QZ: # body, html min-height: 100% +body + overflow-x: hidden + * padding: 0 margin: 0 @@ -18,13 +21,18 @@ body, html [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 @@ -100,6 +108,9 @@ header height: 30px color: #fff + @include media-mob() + height: 60px + a.close position: absolute top: 5px @@ -110,6 +121,10 @@ header height: 20px color: #fff + @include media-mob() + width: 30px + height: 30px + #scoicon position: absolute top: 4px @@ -117,12 +132,21 @@ header 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 @@ -132,16 +156,27 @@ header 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 @@ -158,6 +193,24 @@ header 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 @@ -181,7 +234,26 @@ header 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 @@ -196,14 +268,15 @@ header 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