Index: lams_central/web/css/components.css =================================================================== diff -u -rbe7a59372762fcbc30a3bc00d449a7f1e4e2b0c6 -r989f22a0c998fff45aabca43d753612f0d8e4358 --- lams_central/web/css/components.css (.../components.css) (revision be7a59372762fcbc30a3bc00d449a7f1e4e2b0c6) +++ lams_central/web/css/components.css (.../components.css) (revision 989f22a0c998fff45aabca43d753612f0d8e4358) @@ -408,9 +408,24 @@ } .component-page-wrapper .graph-con { + position: relative; min-height: 12rem; + width: calc(100% - 8rem); } +.component-page-wrapper .graph-con #myChart { + width: 25rem !important; + height: 12rem !important; + margin-left: -5rem; + margin-bottom: -5rem; + border: 0; +} + +.component-page-wrapper .graph-col { + display: flex; + justify-content: space-between; +} + .component-page-wrapper .graph-col ul { margin: auto 0; width: 8rem; @@ -448,34 +463,7 @@ background-color: #FD3CA5; } -.component-page-wrapper .graph-grades-inner { - background-color: #fff; - box-shadow: 0px 20px 20px #2E384D1A; - border-radius: 1.2rem; - margin-top: 2rem; - padding: 1rem 1.5rem; -} -.component-page-wrapper .graph-star-col { - width: 5rem; -} - -.component-page-wrapper .graph-star-col img { - width: 3rem; - max-width: 100%; -} - -.component-page-wrapper .graph-star-col p { - color: #ACB5CC; - font-family: mont-bold, sans-serif; - text-transform: uppercase; - font-size: .7rem; - margin: 0; - margin-top: .4rem; - letter-spacing: 2px; -} - - /* Switch */ .switch input { Index: lams_monitoring/web/css/components-monitoring-responsive.css =================================================================== diff -u -r08093db7f41897a1a9819503031c6dd7dd009fdd -r989f22a0c998fff45aabca43d753612f0d8e4358 --- lams_monitoring/web/css/components-monitoring-responsive.css (.../components-monitoring-responsive.css) (revision 08093db7f41897a1a9819503031c6dd7dd009fdd) +++ lams_monitoring/web/css/components-monitoring-responsive.css (.../components-monitoring-responsive.css) (revision 989f22a0c998fff45aabca43d753612f0d8e4358) @@ -16,92 +16,89 @@ } @media ( max-width : 992px) { - .visible-xs { + .monitoring-page-wrapper .visible-xs { display: block !important; } - .hidden-xs { + .monitoring-page-wrapper .hidden-xs { display: none !important; } - .content-left, .content-right { + .monitoring-page-wrapper .content-left, .monitoring-page-wrapper .content-right { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } - .content-right { + .monitoring-page-wrapper .content-right { margin-top: 2rem; } .main-content-inner { padding: 2rem 2.8rem; } - .hamburger { + .monitoring-page-wrapper .hamburger { width: 1.5rem; } - .top-menu form { + .monitoring-page-wrapper .top-menu form { display: none; } - .tasks-col-gate p { + .monitoring-page-wrapper .tasks-col-gate p { padding-right: 1rem; } - .content-left { + .monitoring-page-wrapper .content-left { order: 2; } - .content-right { + .monitoring-page-wrapper .content-right { order: 1; } - .tasks { + .monitoring-page-wrapper .tasks { order: 3; } - .insight { + .monitoring-page-wrapper .insight { order: 4; } - .graph-con { - width: inherit !important; - height: inherit !important; - min-height: inherit !important; - overflow: auto; + + .monitoring-page-wrapper .graph-col { + margin-top: 3rem; } - .graph-con #myChart { - width: inherit !important; - height: inherit !important; + + .monitoring-page-wrapper .graph-con #myChart { + width: initial !important; + height: initial !important; margin: 0 !important; } - .graph-con:after { - bottom: 9px; - } - .content-left.content-left1 { + + .monitoring-page-wrapper .content-left.content-left1 { order: 1; } - .user-table-main { + .monitoring-page-wrapper .user-table-main { order: 2; } - .user-page .score-col-inner { + .monitoring-page-wrapper .user-page .score-col-inner { margin-top: 2rem; } - .table-content-left { + .monitoring-page-wrapper .table-content-left { -ms-flex: 0 0 27rem; flex: 0 0 27rem; max-width: 100%; padding-left: 3.5rem; width: 27rem; } - .table-content-right { + .monitoring-page-wrapper .table-content-right { -ms-flex: 0 0 calc(100%); flex: 0 0 calc(100%); max-width: calc(100%); } - .content-graph2:after { + .monitoring-page-wrapper .content-graph2:after { bottom: .6rem; } - .user-table { + .monitoring-page-wrapper .user-table { width: 33rem; } - .user-table-data { + .monitoring-page-wrapper .user-table-data { overflow-x: auto; } } @media ( max-width : 550px) { - .graph-col { + .monitoring-page-wrapper .graph-col { display: inline-block !important; } } \ No newline at end of file Index: lams_monitoring/web/css/components-monitoring.css =================================================================== diff -u -rbe7a59372762fcbc30a3bc00d449a7f1e4e2b0c6 -r989f22a0c998fff45aabca43d753612f0d8e4358 --- lams_monitoring/web/css/components-monitoring.css (.../components-monitoring.css) (revision be7a59372762fcbc30a3bc00d449a7f1e4e2b0c6) +++ lams_monitoring/web/css/components-monitoring.css (.../components-monitoring.css) (revision 989f22a0c998fff45aabca43d753612f0d8e4358) @@ -131,21 +131,54 @@ } */ -.monitoring-page-wrapper .user-map-col { - background-image: url(/lams/images/components/lines.png); - background-size: cover; - background-position: 50%; - background-repeat: no-repeat; - border: 1px solid #D2D7E7; - border-radius: 1rem; - overflow: hidden; + +.monitoring-page-wrapper .content-left { + -ms-flex: 0 0 26.5rem; + flex: 0 0 26.5rem; + max-width: 26.5rem; } -.grades-progress-col { +.monitoring-page-wrapper .content-right { + -ms-flex: 0 0 calc(100% - 26.5rem); + flex: 0 0 calc(100% - 26.5rem); + max-width: calc(100% - 26.5rem); +} + +.monitoring-page-wrapper .graph-grades { + background-color: #fff; + box-shadow: 0px 20px 20px #2E384D1A; + border-radius: 1.2rem; + margin-top: 2rem; + padding: 1rem 1.5rem; + display: flex; + justify-content: space-between; +} + + +.monitoring-page-wrapper .graph-star-col { + width: 5rem; +} + +.monitoring-page-wrapper .graph-star-col img { + width: 3rem; + max-width: 100%; +} + +.monitoring-page-wrapper .graph-star-col p { + color: #ACB5CC; + font-family: mont-bold, sans-serif; + text-transform: uppercase; + font-size: .7rem; + margin: 0; + margin-top: .4rem; + letter-spacing: 2px; +} + +.monitoring-page-wrapper .grades-progress-col { width: calc(100% - 5rem); } -.grades-score p { +.monitoring-page-wrapper .grades-score p { width: 6rem; text-align: right; color: #2E384D; @@ -155,40 +188,37 @@ margin-bottom: .5rem; } -.grades-progress-bar { +.monitoring-page-wrapper .grades-progress-bar { margin-bottom: .5rem; padding-left: 1.5rem; + width: calc(100% - 6rem); } -.grades-score p span { +.monitoring-page-wrapper .grades-score p span { color: #ACB5CC; margin-right: .4rem; } -.grades-progress-bar { - width: calc(100% - 6rem); -} - -.progress-div { +.monitoring-page-wrapper .progress-div { height: 60%; margin-top: .2rem; border-radius: 45px; position: relative; } -#progress-bar-1 { +.monitoring-page-wrapper #progress-bar-1 { background-color: #05CCD6; } -#progress-bar-2 { +.monitoring-page-wrapper #progress-bar-2 { background-color: #FFC337; } -#progress-bar-3 { +.monitoring-page-wrapper #progress-bar-3 { background-color: #F83BA3; } -.progress-div span { +.monitoring-page-wrapper .progress-div span { width: .4rem; height: .4rem; border-radius: 50%; @@ -198,19 +228,15 @@ background-color: #fff; } -.content-left { - -ms-flex: 0 0 26.5rem; - flex: 0 0 26.5rem; - max-width: 26.5rem; -} -.content-right { - -ms-flex: 0 0 calc(100% - 26.5rem); - flex: 0 0 calc(100% - 26.5rem); - max-width: calc(100% - 26.5rem); -} - -.user-map-col { +.monitoring-page-wrapper .user-map-col { + background-image: url(/lams/images/components/lines.png); + background-size: cover; + background-position: 50%; + background-repeat: no-repeat; + border: 1px solid #D2D7E7; + border-radius: 1rem; + overflow: hidden; padding: 3rem; position: relative; } @@ -385,40 +411,7 @@ color: #3C42E0; } -.graph-con { - min-height: 12rem; - width: calc(100% - 8rem); - overflow: hidden; - min-height: 11.11rem !important; -} -.graph-con #myChart { - width: 25rem !important; - height: 12rem !important; - margin-left: -5rem; - margin-bottom: -5rem; - border: 0; - float: left; -} - -.graph-con { - position: relative; -} - -.graph-con:after { - position: absolute; - content: ""; - height: 2px; - background-color: #F6F5F9; - left: 0; - right: 0; - bottom: -1px; -} - -.graph-col { - margin-top: 3rem; -} - .content-left.content-left1 { -ms-flex: 0 0 100%; flex: 0 0 100%; Index: lams_monitoring/web/monitor5.jsp =================================================================== diff -u -rbe7a59372762fcbc30a3bc00d449a7f1e4e2b0c6 -r989f22a0c998fff45aabca43d753612f0d8e4358 --- lams_monitoring/web/monitor5.jsp (.../monitor5.jsp) (revision be7a59372762fcbc30a3bc00d449a7f1e4e2b0c6) +++ lams_monitoring/web/monitor5.jsp (.../monitor5.jsp) (revision 989f22a0c998fff45aabca43d753612f0d8e4358) @@ -50,30 +50,6 @@ animation : { animateScale : true, animateRotate : true - }, - scales : { - xAxes : [ { - gridLines : { - color : "rgba(0, 0, 0, 0)", - zeroLineColor : 'transparent' - }, - ticks : { - display : false - } - } ], - yAxes : [ { - gridLines : { - color : "rgba(0, 0, 0, 0)", - }, - ticks : { - stepSize : 1, - beginAtZero : false, - display : false - } - } ] - }, - gridLines : { - display : false } } }); @@ -128,77 +104,73 @@
-
-
-
- -
-
    -
  • -
    completion
    -
    • -
  • - - Not started -
    • -
  • - - In process -
    • -
  • - - Completed -
    • -
+
+
+
-
-
-
- # -

grades

+
    +
  • +
    completion
    +
    • +
  • + - Not started +
    • +
  • + - In process +
    • +
  • + - Completed +
    • +
+
+
+
+ # +

grades

+
+
+
+
+

High: 99

+
+
+ +
+
-
-
-
-

High: 99

-
-
- -
-
+
+

Median: 68

+
+
+
-
-

Median: 68

-
-
- -
-
+
+
+
+

Low: 28

+
+
+
-
-

Low: 28

-
-
- -
-
-
-
-
-
-
-

8%

-

Students
at risk

- # -
+
+
+
+
+
+

8%

+

Students
at risk

+ #
-
-
-

98%

-

Average
Score

- # -
+
+
+
+

98%

+

Average
Score

+ #