More responsive

This commit is contained in:
Ruben 2017-03-11 13:08:28 +01:00
parent ae4753ba6a
commit a4e9a1e7de
2 changed files with 34 additions and 16 deletions

View file

@ -77,27 +77,23 @@ class ColourHandler(tornado.web.RequestHandler):
statHtml = "<aside id='stats'>"; statHtml = "<aside id='stats'>";
if not req_emotion: if not req_emotion:
statHtml += "<h4>Emoties</h4>" statHtml += "<div><h4>Emoties</h4>"
emotionScores = models.getEmotionFractionsFromArtworks(images) emotionScores = models.getEmotionFractionsFromArtworks(images)
statHtml += charts.createPie(emotionScores) if len(emotionScores) else "Geen emoties opgegeven" statHtml += charts.createPie(emotionScores) if len(emotionScores) else "Geen emoties opgegeven"
statHtml += "</div>"
else: else:
statHtml += "<h4>Groep</h4>" statHtml += "<div><h4>Groep</h4>"
statHtml += charts.createPie(models.getGroupFractionsFromArtworks(images)) statHtml += charts.createPie(models.getGroupFractionsFromArtworks(images))
statHtml += "</div>"
statHtml += "<h4>Gezichtsherkenning</h4>" statHtml += "<div><h4>Gezichtsherkenning</h4>"
faceScores = models.getFaceFractionsFromArtworks(images) faceScores = models.getFaceFractionsFromArtworks(images)
statHtml += charts.createPie(faceScores) if len(faceScores) else "Geen gezichten gevonden" statHtml += charts.createPie(faceScores) if len(faceScores) else "Geen gezichten gevonden"
statHtml += "</div>"
# statHtml += "<h4>Gezichten</h4>"
# statHtml += "Geen gezichten gevonden"
# statHtml += "<h4>Unieke woorden</h4>" # sorted(tf * idf)[:5] # statHtml += "<h4>Unieke woorden</h4>" # sorted(tf * idf)[:5]
# statHtml += "Geen woorden gebruikt" # statHtml += "Geen woorden gebruikt"
# statHtml += "<h4>Meest voorkomende woorden</h4>"
# statHtml += "Geen woorden gevonden"
# TODO: licht/donker
# if not req_group:
statHtml += "</aside>"; statHtml += "</aside>";
self.write("\n".join([svg, imgHtml, statHtml]) ) self.write("\n".join([svg, imgHtml, statHtml]) )

View file

@ -170,11 +170,33 @@
color:blue; color:blue;
} }
/* Standard syntax */ @keyframes rotate {
@keyframes rotate {
from {transform: rotate(0deg);} from {transform: rotate(0deg);}
to {transform: rotate(360deg);} to {transform: rotate(360deg);}
} }
@media screen and (orientation:portrait) {
#stats{
display:block;
clear:both;
padding-bottom:4em;
}
#stats > div {
display:inline-block;
}
#main svg{
width:80% !important;
left:20%;
}
#main svg#spinner{
width:5%;
/*top: 44.5% !important;*/
left:20.5% !important;
}
#info{
left: calc(60% - 15em);
}
}
</style> </style>
</head> </head>
<body> <body>
@ -217,7 +239,7 @@
<circle r='155' cx="0" cy="0" style='stroke:none;fill:rgba(0,0,0,0.1);mask: url(#mask1);' /> <circle r='155' cx="0" cy="0" style='stroke:none;fill:rgba(0,0,0,0.1);mask: url(#mask1);' />
</svg> </svg>
<svg id="spinner" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1000 1000" style="width:5%;height:5%;top:47.5%;left:47.5%;"> <svg id="spinner" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1000 1000" style="width:5%;height:5%;top:45%;left:47.5%;">
<g><path d="M500,964.2c-130.9,0-253.9-51-346.5-143.5C61,728.1,10,605.1,10,474.2c0-92.7,26-182.9,75.2-261C133.1,137.3,200.7,76,280.8,35.8l41.2,82.1c-65.1,32.6-120.1,82.5-159,144.2c-40,63.4-61.1,136.6-61.1,212c0,219.5,178.6,398.1,398.1,398.1c219.5,0,398.1-178.6,398.1-398.1c0-75.3-21.1-148.6-61.1-212c-38.9-61.7-93.9-111.6-159-144.2l41.2-82.1C799.3,76,866.9,137.3,914.8,213.2c49.2,78.1,75.2,168.3,75.2,261c0,130.9-51,253.9-143.5,346.5C753.9,913.2,630.9,964.2,500,964.2z"/></g> <g><path d="M500,964.2c-130.9,0-253.9-51-346.5-143.5C61,728.1,10,605.1,10,474.2c0-92.7,26-182.9,75.2-261C133.1,137.3,200.7,76,280.8,35.8l41.2,82.1c-65.1,32.6-120.1,82.5-159,144.2c-40,63.4-61.1,136.6-61.1,212c0,219.5,178.6,398.1,398.1,398.1c219.5,0,398.1-178.6,398.1-398.1c0-75.3-21.1-148.6-61.1-212c-38.9-61.7-93.9-111.6-159-144.2l41.2-82.1C799.3,76,866.9,137.3,914.8,213.2c49.2,78.1,75.2,168.3,75.2,261c0,130.9-51,253.9-143.5,346.5C753.9,913.2,630.9,964.2,500,964.2z"/></g>
</svg> </svg>