diff --git a/front/src/css/dashboard.css b/front/src/css/dashboard.css index 407887b..dfb9b3d 100644 --- a/front/src/css/dashboard.css +++ b/front/src/css/dashboard.css @@ -5,7 +5,14 @@ text-align: center; } .summary .globalScore { - margin-bottom: 3em; + display: table; + width: 60%; + margin: 3em auto; +} +.summary .globalScore > div { + display: table-cell; + width: 50%; + vertical-align: middle; } .summary .globalScore .globalGrade { margin: 0.5 auto; @@ -22,6 +29,43 @@ font-weight: bold; margin: 0.5em 0 1em; } +.summary .globalScore .screenshotWrapper.desktop { + display: inline-block; + position: relative; + border: 0.2em solid #AAA; + background: #000; + padding: 0.5em; + border-top-left-radius: 0.4em; + border-top-right-radius: 0.4em; +} +.summary .globalScore .screenshotWrapper.desktop:before { + position: absolute; + width: 15em; + height: 0.6em; + bottom: -0.75em; + left: -1em; + background: #CCC; + border-bottom-left-radius: 0.2em; + border-bottom-right-radius: 0.2em; + content: " "; +} +.summary .globalScore .screenshotWrapper.desktop:after { + position: absolute; + width: 0.4em; + height: 0.2em; + bottom: -0.55em; + left: 12.5em; + background: lime; + content: " "; +} +.summary .globalScore .screenshotWrapper.desktop > div { + width: 12em; + height: 6.75em; + overflow: scroll; +} +.summary .globalScore .screenshot { + width: 100%; +} .summary .notations { display: table; width: 80%; diff --git a/front/src/less/dashboard.less b/front/src/less/dashboard.less index 9813f0e..6c451cf 100644 --- a/front/src/less/dashboard.less +++ b/front/src/less/dashboard.less @@ -7,7 +7,16 @@ } .summary .globalScore { - margin-bottom: 3em; + display: table; + width: 60%; + margin: 3em auto; + + > div { + display: table-cell; + width: 50%; + vertical-align: middle; + } + .globalGrade { margin: 0.5 auto; width: 2.5em; @@ -23,6 +32,48 @@ font-weight: bold; margin: 0.5em 0 1em; } + + .screenshotWrapper.desktop { + display: inline-block; + position: relative; + border: 0.2em solid #AAA; + background: #000; + padding: 0.5em; + border-top-left-radius: 0.4em; + border-top-right-radius: 0.4em; + + &:before { + position: absolute; + width: 15em; + height: 0.6em; + bottom: -0.75em; + left: -1em; + background: #CCC; + border-bottom-left-radius: 0.2em; + border-bottom-right-radius: 0.2em; + content: " "; + } + + &:after { + position: absolute; + width: 0.4em; + height: 0.2em; + bottom: -0.55em; + left: 12.5em; + background: lime; + content: " "; + } + + > div { + width: 12em; + height: 6.75em; + overflow: scroll; + } + } + + .screenshot { + width: 100%; + } } .summary .notations { diff --git a/front/src/views/dashboard.html b/front/src/views/dashboard.html index 7d5a7b6..39d54d4 100644 --- a/front/src/views/dashboard.html +++ b/front/src/views/dashboard.html @@ -2,10 +2,19 @@