very nais front page

webgui/stats/templates/stats/networks.html

@@ -9,7 +9,7 @@
 {% block keywords %}irc networks{% endblock %}
 {% block keywords-not %}{% endblock %}
 {% block content %}
-        <article class="ui container">
+        <article class="ui text container">
             <header class="ui four statistics">
                 <div class="statistic">
                     <div class="value">
@@ -68,63 +68,57 @@
             </div>
             </section>
         </article>
-        <section class="ui padded center aligned equal width grid">
-            <div class="ui column">
-                <div class="header">
-                    <i class="users icon"></i>
-                    Messages per network
-                </div>
+        <section class="ui center aligned grid">
+            <div class="content">
                 <script type="text/javascript">
-                            google.charts.load("current", {packages:["corechart"]});
-                            google.charts.setOnLoadCallback(drawChart1);
-                            function drawChart1() {
-                                var data = google.visualization.arrayToDataTable([
-                                    ['Network', 'Users'],
-                                        {% for network in networklist.items %}
-                                            ['{{ network.0 }}',     {{ network.1.messages }}],
-                                        {% endfor %}
-                                    ]);
-                                var options = {
-                                    legend: 'none',
-                                    pieSliceText: 'label',
-                                };
-                                var chart = new google.visualization.PieChart(document.getElementById('messageschart'));
-                                chart.draw(data, options);
-                            }
-                            $(window).resize(function(){
-        drawChart1();
-        });
+                    google.charts.load("current", {packages:["corechart"]});
+                    google.charts.setOnLoadCallback(drawChart0);
+                    function drawChart0() {
+                        var data = google.visualization.arrayToDataTable([
+                            ['Network', 'Users'],
+                            {% for network in networklist.items %}
+                                ['{{ network.0 }}',     {{ network.1.messages }}],
+                            {% endfor %}
+                        ]);
+                        var options = {
+                            legend: 'none',
+                            pieSliceText: 'label',
+                            height: '300',
+
+                            'chartArea': {'width': '100%', 'height': '95%'},
+                            pieSliceText: 'label',
+                        };
+                        var chart = new google.visualization.PieChart(document.getElementById('messageschart'));
+                        chart.draw(data, options);
+                    }
+                           
                 </script>
-                <div id="messageschart" style="width:100%; height: 400px;"></div>
+                <div id="messageschart"></div>
             </div>
-            <div class="ui column">
-                <div class="header">
-                    <i class="users icon"></i>
-                    Users per network
-                </div>
                 <script type="text/javascript">
-                                google.charts.load("current", {packages:["corechart"]});
-                                google.charts.setOnLoadCallback(drawChart);
-                                function drawChart() {
-                                    var data = google.visualization.arrayToDataTable([
-                                        ['Network', 'Users'],
-                                            {% for network in networklist.items %}
-                                                ['{{ network.0 }}',     {{ network.1.users }}],
-                                            {% endfor %}
-                                        ]);
-                                    var options = {
-                                        legend: 'none',
-                                        pieSliceText: 'label',
-                                    };
-                                    var chart = new google.visualization.PieChart(document.getElementById('userschart'));
-                                    chart.draw(data, options);
-                                }
-                                $(window).resize(function(){
-        drawChart();
-        });
+                    google.charts.load("current", {packages:["corechart"]});
+                    google.charts.setOnLoadCallback(drawChart);
+                    function drawChart() {
+                        var data = google.visualization.arrayToDataTable([
+                            ['Network', 'Users'],
+                                {% for network in networklist.items %}
+                                    ['{{ network.0 }}',     {{ network.1.users }}],
+                                {% endfor %}
+                            ]);
+                        var options = {
+                            legend: 'none',
+                            pieSliceText: 'label',
+                            height: '300',
+                            'chartArea': {'width': '100%', 'height': '95%'},
+                        };
+                        var chart = new google.visualization.PieChart(document.getElementById('userschart'));
+                        chart.draw(data, options);
+                    }
+                                
                 </script>
-                <div id="userschart" style=height:400px;
-        "> </div>
+                <!--div class="ui content"-->
+                    <div class="content" id="userschart" > </div>
+                <!--/div-->
             </div>
 
         </section>

webgui/webgui/templates/base.html

@@ -21,6 +21,38 @@
         {% block head %}{% endblock %}
         <!-- Maak % blokken % voor aantal zoekresultaten per pagina: <meta name="itemsPerPage" content=""> -->
         <title>{% block title %}{% endblock %}</title>
+        <style>
+        .ui.fluid.container {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+
+}
+div.stretchy-wrapper {
+        width: 100%;
+        padding-bottom: 56.25%; /* 16:9 */
+        position: relative;
+
+        background: blue;
+}
+
+div.stretchy-wrapper > div {
+        position: absolute;
+        top: 0; bottom: 0; left: 0; right: 0;
+
+        color: white;
+        font-size: 24px;
+        text-align: center;
+}
+
+/* Other aspect ratios to try:
+ * 56.25% = 16:9
+ * 75% = 4:3
+ * 66.66% = 3:2
+ * 62.5% = 8:5
+ */
+
+
+</style>
     </head>
     <body>
         <div class="ui relaxed menu"></div>