Commit ec27e7fc authored by Sarath's avatar Sarath

More UI tweaks; Added fontawesome icons to sidebar

parent 6a76f81f
......@@ -77,10 +77,49 @@ html, body {
.shutdown-state {
font-weight: bold;
font-size: 20px;
display: inline;
}
.shutdown.summary {
line-height: 30px;
font-size: 18px;
display: inline-block;
margin-left: 10px;
}
.shutdown.count {
display: inline-block;
text-align: center;
background-color: red;
line-height: 30px;
width: 30px; height: 30px;
border-radius: 50%;
color: white;
font-size: 18px;
font-weight: bolder;
}
.shutdown-case {
margin: 2px;
padding: 2px;
background-color: rgba(100,100,100,0.2);
margin: 0px -8px;
border-bottom: solid 2px black;
padding: 10px 5px;
background-color: #ffffff10;
}
.shutdown.date {
font-size: smaller;
line-height: 12px;
float: left;
}
.shutdown.source {
font-size: smaller;
line-height: 12px;
float: right;
}
.shutdown.desc {
display: inline-block;
margin-top: 2px;
}
......@@ -34,14 +34,11 @@ function prepareData(raw) {
function stateDetails (name) {
if (shutdowns.stateWise[name]) {
var info = "<div class='shutdown-details'>";
var stateName = '<div class= "shutdown-state-name">' + name + '</div>';
count = shutdowns.stateWise[name].length;
var summary = '<div class = "shutdown summary">' + count + ' shutdowns reported so far</div>';
shutdowns.stateWise[name].forEach(function (item) {
info += "<div class='shutdown-case'>";
info += "<div class='shutdown date'>" + item.date + " </div>";
info += "<div class='shutdown date fa fa-calendar'>" + moment(item.date).format("DD MMMM YYYY") + " </div>";
info += "<div class='shutdown source fa fa-external-link'> <a href='" + item.source + "'> Source </a> </div>";
info += "<div class='shutdown desc'>" + item.description + " </div>";
info += "<div class='shutdown source'> <a href='" + item.source + "'> Source </a> </div>";
info += "</div>";
});
info += "</div>";
......@@ -86,7 +83,7 @@ info.update = function (props, stateHTML) {
if (shutdowns.stateWise[props.name]) {
count = shutdowns.stateWise[props.name].length;
}
var summary = '<div class = "shutdown summary"> Number of shutdowns so far: <span class="shutdown-count">' + count + '</span></div>';
var summary = '<div class = "shutdown summary"><span class="shutdown count">' + count + '</span></div>';
this._div.innerHTML = header + stateName + summary;
if (stateHTML) {
this._div.innerHTML += stateHTML;
......@@ -190,7 +187,7 @@ legend.onAdd = function (map) {
"</span> </div>";
var instructions = L.DomUtil.create('div', 'instructions', container);
instructions.innerHTML = "Report issues | Contribute code | <a href='https://gitlab.com/sflc.in/internetshutdowns'>GitLab</a>";
instructions.innerHTML = "Report issues | Contribute code | <a class='fa fa-gitlab fa-calendar' href='https://gitlab.com/sflc.in/internetshutdowns'>GitLab</a>";
return container;
};
......
......@@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<link rel="stylesheet" href="assets/css/app.css">
</head>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment