Commit 658c9639273038e380ba2f5c59b819dabc31e474

Authored by Felipe Bormann
1 parent f688228e

fixed broken layout for reports

analytics/static/.sass-cache/9bdb779ec82a4a96f72be09b83b7c997addd0129/general.sassc
No preview for this file type
analytics/static/analytics/general.css
1 .report-body { 1 .report-body {
2 border: 1px solid #3ebeb4; 2 border: 1px solid #3ebeb4;
3 border-radius: 20px; 3 border-radius: 20px;
4 - padding: 10px; } 4 + padding: 10px;
  5 + overflow: auto;
  6 + width: 100%; }
5 7
6 #general-report-header { 8 #general-report-header {
7 height: 10%; 9 height: 10%;
@@ -32,7 +34,11 @@ @@ -32,7 +34,11 @@
32 background: linear-gradient(to right, #0e8999, #6bf0ce); 34 background: linear-gradient(to right, #0e8999, #6bf0ce);
33 height: 40px; 35 height: 40px;
34 border-radius: 10px; 36 border-radius: 10px;
35 - color: #ffffff; } 37 + color: #ffffff;
  38 + padding-top: 1px;
  39 + margin-top: 10px; }
  40 + #most-used-tags-header h4 {
  41 + margin-left: 1%; }
36 42
37 .data-container { 43 .data-container {
38 width: 80px; 44 width: 80px;
@@ -48,19 +54,12 @@ @@ -48,19 +54,12 @@
48 font-size: 10px; } 54 font-size: 10px; }
49 55
50 #left-data-selector { 56 #left-data-selector {
51 - background: linear-gradient(#0e8999, #6bf0ce);  
52 - width: 30%; }  
53 -  
54 -.middle-chart {  
55 - width: 30%;  
56 - float: left; }  
57 - .middle-chart h4 {  
58 - color: #009688; } 57 + background: linear-gradient(#0e8999, #6bf0ce); }
59 58
60 -.right-chart { 59 +.chart {
61 width: 30%; 60 width: 30%;
62 float: left; } 61 float: left; }
63 - .right-chart h4 { 62 + .chart h4 {
64 color: #009688; } 63 color: #009688; }
65 64
66 /*# sourceMappingURL=general.css.map */ 65 /*# sourceMappingURL=general.css.map */
analytics/static/analytics/general.css.map
1 { 1 {
2 "version": 3, 2 "version": 3,
3 -"mappings": "AAEA,YAAY;EACX,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;;AAGd,sBAAsB;EACrB,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,KAAK;EACd,yBAAE;IACD,KAAK,EAZO,OAAO;EAcpB,yBAAE;IACD,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IAEX,4BAAE;MACD,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE,GAAG;MACV,KAAK,EAAE,KAAK;MAEZ,yCAAY;QACX,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;MAEpB,gCAAG;QACF,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;;AAIvB,sBAAsB;EACrB,UAAU,EAAE,2CAA2C;EACvD,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;;AAEf,eAAe;EACd,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAEb,UAAU;EACT,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,KAAK,EAAE,IAAI;;AAIZ,SAAS;EACR,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;;AAGhB,mBAAmB;EAClB,UAAU,EAAE,iCAAmC;EAC/C,KAAK,EAAE,GAAG;;AAGX,aAAa;EACZ,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,IAAI;EACX,gBAAE;IACD,KAAK,EAtEO,OAAO;;AAwErB,YAAY;EACX,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,IAAI;EACX,eAAE;IACD,KAAK,EA5EO,OAAO", 3 +"mappings": "AAEA,YAAY;EACR,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,KAAK,EAAE,IAAI;;AAEf,sBAAsB;EAClB,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,KAAK;EACd,yBAAE;IACE,KAAK,EAbC,OAAO;EAejB,yBAAE;IACE,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IAEX,4BAAE;MACE,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE,GAAG;MACV,KAAK,EAAE,KAAK;MAEZ,yCAAY;QACR,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;MAEvB,gCAAG;QACC,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;;AAInC,sBAAsB;EAClB,UAAU,EAAE,2CAA2C;EACvD,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;EAEhB,yBAAE;IACE,WAAW,EAAE,EAAE;;AAEvB,eAAe;EACX,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAEhB,UAAU;EACN,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,KAAK,EAAE,IAAI;;AAIf,SAAS;EACL,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;;AAGnB,mBAAmB;EACf,UAAU,EAAE,iCAAmC;;AAEnD,MAAM;EACF,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,IAAI;EACX,SAAE;IACE,KAAK,EA1EC,OAAO",
4 "sources": ["general.sass"], 4 "sources": ["general.sass"],
5 "names": [], 5 "names": [],
6 "file": "general.css" 6 "file": "general.css"
analytics/static/analytics/general.sass
1 $title-color: #009688 1 $title-color: #009688
2 2
3 .report-body 3 .report-body
4 - border: 1px solid #3ebeb4  
5 - border-radius: 20px  
6 - padding: 10px  
7 - 4 + border: 1px solid #3ebeb4
  5 + border-radius: 20px
  6 + padding: 10px
  7 + overflow: auto
  8 + width: 100%
8 9
9 #general-report-header 10 #general-report-header
10 - height: 10%  
11 - display: block  
12 - h3  
13 - color: $title-color 11 + height: 10%
  12 + display: block
  13 + h3
  14 + color: $title-color
14 15
15 - ul  
16 - float: right  
17 - display: inline-flex  
18 - width: 50%  
19 - height: 15% 16 + ul
  17 + float: right
  18 + display: inline-flex
  19 + width: 50%
  20 + height: 15%
20 21
21 - li  
22 - margin-right: 2%  
23 - width: 50%  
24 - color: white 22 + li
  23 + margin-right: 2%
  24 + width: 50%
  25 + color: white
25 26
26 - div.selected  
27 - background-color: #4dcfbd  
28 - width: 100%  
29 - text-align: center  
30 - border-radius: 20px 27 + div.selected
  28 + background-color: #4dcfbd
  29 + width: 100%
  30 + text-align: center
  31 + border-radius: 20px
31 32
32 - div  
33 - background-color: #0f8a9a  
34 - width: 100%  
35 - text-align: center  
36 - border-radius: 20px 33 + div
  34 + background-color: #0f8a9a
  35 + width: 100%
  36 + text-align: center
  37 + border-radius: 20px
37 38
38 39
39 40
40 #most-used-tags-header 41 #most-used-tags-header
41 - background: linear-gradient(to right, #0e8999, #6bf0ce)  
42 - height: 40px  
43 - border-radius: 10px  
44 - color: #ffffff 42 + background: linear-gradient(to right, #0e8999, #6bf0ce)
  43 + height: 40px
  44 + border-radius: 10px
  45 + color: #ffffff
  46 + padding-top: 1px
  47 + margin-top: 10px
  48 +
  49 + h4
  50 + margin-left: 1%
45 51
46 .data-container 52 .data-container
47 - width: 80px  
48 - height: 40px 53 + width: 80px
  54 + height: 40px
49 55
50 .tag-cloud 56 .tag-cloud
51 - border-radius: 25px  
52 - color: #ffffff  
53 - width: 80px 57 + border-radius: 25px
  58 + color: #ffffff
  59 + width: 80px
54 60
55 - 61 +
56 62
57 .tag-name 63 .tag-name
58 - color: #ffffff  
59 - font-size: 10px 64 + color: #ffffff
  65 + font-size: 10px
60 66
61 67
62 #left-data-selector 68 #left-data-selector
63 - background: linear-gradient( #0e8999, #6bf0ce )  
64 - width: 30%  
65 -  
66 -  
67 -.middle-chart  
68 - width: 30%  
69 - float: left  
70 - h4  
71 - color: $title-color 69 + background: linear-gradient( #0e8999, #6bf0ce )
72 70
73 -.right-chart  
74 - width: 30%  
75 - float: left  
76 - h4  
77 - color: $title-color  
78 \ No newline at end of file 71 \ No newline at end of file
  72 +.chart
  73 + width: 30%
  74 + float: left
  75 + h4
  76 + color: $title-color
79 \ No newline at end of file 77 \ No newline at end of file
analytics/templates/analytics/general.html
@@ -20,22 +20,24 @@ @@ -20,22 +20,24 @@
20 20
21 21
22 {% block content %} 22 {% block content %}
23 - <div id="core-subjects-options-div">  
24 - <ul class="core-subjects-options report-menu-choice">  
25 - <li class="active">  
26 - {% trans "Platform Report" %}  
27 - </li>  
28 - <li>  
29 - {% trans "Category Report" %}  
30 - </li>  
31 - <li>  
32 - {% trans "Subject Report" %}  
33 - </li>  
34 - </ul>  
35 - </div>  
36 -  
37 - <div id="general-report">  
38 - <div id="general-report-header"> 23 + <section id="core-subjects-options-div">
  24 + <nav>
  25 + <ul class="core-subjects-options report-menu-choice">
  26 + <li class="active">
  27 + {% trans "Platform Report" %}
  28 + </li>
  29 + <li>
  30 + {% trans "Category Report" %}
  31 + </li>
  32 + <li>
  33 + {% trans "Subject Report" %}
  34 + </li>
  35 + </ul>
  36 + </nav>
  37 + </section>
  38 +
  39 + <section id="general-report">
  40 + <header id="general-report-header">
39 <h3>{% trans "Amadeus Report" %}</h3> 41 <h3>{% trans "Amadeus Report" %}</h3>
40 42
41 <ul id="report-header-options"> 43 <ul id="report-header-options">
@@ -46,27 +48,25 @@ @@ -46,27 +48,25 @@
46 <div>{% trans "Log" %}<div> 48 <div>{% trans "Log" %}<div>
47 </li> 49 </li>
48 </ul> 50 </ul>
49 - </div> 51 + </header>
50 52
51 - <div class="report-body"> 53 + <article class="report-body">
52 54
53 - <div id="most-used-tags">  
54 - <div id="most-used-tags-header"> 55 + <section id="most-used-tags">
  56 + <header id="most-used-tags-header">
55 <h4 > 57 <h4 >
56 {% trans "most used tags" %} 58 {% trans "most used tags" %}
57 </h4> 59 </h4>
58 - </div> 60 + </header>
59 <div id="most-used-tags-body"> 61 <div id="most-used-tags-body">
60 62
61 </div> 63 </div>
62 - </div>  
63 - <div class="bottom-section">  
64 - <div class="left-chart"> 64 + </section>
  65 + <section class="bottom-section">
  66 + <div class="chart left-chart">
65 <div id="date-selector"> 67 <div id="date-selector">
66 - <p>{% trans "Between" %}</p>  
67 - <p>20-20-17</p>  
68 - <p>{% trans "and" %}</p>  
69 - <p>20-20-17</p> 68 + <p>{% trans "Between" %} 20-20-17 {% trans "and" %}
  69 + 20-20-17</p>
70 </div> 70 </div>
71 71
72 <div id="left-data-selector"> 72 <div id="left-data-selector">
@@ -85,14 +85,19 @@ @@ -85,14 +85,19 @@
85 </div> 85 </div>
86 86
87 </div> 87 </div>
88 - <div class="middle-chart">  
89 - <h4>{% trans "most active users" %}</h4> 88 + <div class="chart middle-chart">
  89 + <article>
  90 + <h4>{% trans "most active users" %}</h4>
  91 + </article>
  92 + </div>
  93 + <div class="chart right-chart">
  94 +
  95 +
90 </div> 96 </div>
91 - <div class="right-chart"></div>  
92 - </div> 97 + </section>
93 98
94 - </div>  
95 - </div> 99 + </article>
  100 + </section>
96 101
97 <script type="text/javascript"> 102 <script type="text/javascript">
98 </script> 103 </script>