Skip to content
This repository has been archived by the owner on Aug 17, 2018. It is now read-only.

Commit

Permalink
Feature/mobile (#65)
Browse files Browse the repository at this point in the history 
* index.html: hide some images on devices

* [ux] replace table with responsive list group

Makes the site really usable from mobile. While there, add more
goodies from the bootstrap CSS.

* .gitignore: ignore *.swp

* [ux] no redundant mobile-only markers
  • Loading branch information
@bassosimone
bassosimone committed Apr 21, 2016
1 parent 4fe0626 commit 7ca9ed1
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 72 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@
/roarmap.db
/static/app.bundle.js
/test/fixtures/test-vector.json.new
*.swp
8 changes: 8 additions & 0 deletions lib/client/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,9 @@ angular.module("roarmap-h2020-view", ["ngRoute"])
} else {
entry.value = entry.value.replace(/_/g, " ");
}
// Add color for boostrap list-group-item
entry.color = (entry.is_compliant) ?
"success" : "danger";
});

// TODO: this block of code actually belongs to the
Expand All @@ -167,6 +170,11 @@ angular.module("roarmap-h2020-view", ["ngRoute"])
$scope.g.selected.percentage = (total > 0) ?
(compliant / total) * 100.0 : 0;

// Make policymaker_type more readable
$scope.g.selected.policymaker_type =
$scope.g.selected.policymaker_type
.replace(/_/g, " ");

return;
}
}
Expand Down
21 changes: 0 additions & 21 deletions static/app.css
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,3 @@
th {
background-color: #4CAF50;
color: white;
}

tr:nth-child(even) {
background-color: #f2f2f2
}

tr:hover {
background-color: #f3f781
}

.compliant-true {
color: #228B22
}

.compliant-false {
color: #FF0000
}

span.policymaker_name {
font-weight: bold;
}
Expand Down
15 changes: 8 additions & 7 deletions static/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,14 @@
<body ng-app="roarmap-h2020-view">
<div class="container">

<a href="https://github.com/nexacenter/roarmap-h2020-view">
<img style="position: absolute; top: 0; left: 0; border: 0;"
src="img/forkme.png" alt="Fork me on GitHub"></a>

<a href="https://nexa.polito.it/">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="img/nexa.png" alt="Nexa Center" width="200px"></a>
<div class="hidden-sm hidden-xs">
<a href="https://github.com/nexacenter/roarmap-h2020-view">
<img style="position: absolute; top: 0; left: 0; border: 0;"
src="img/forkme.png" alt="Fork me on GitHub"></a>
<a href="https://nexa.polito.it/">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="img/nexa.png" alt="Nexa Center" width="200px"></a>
</div>

<div class="page-header center">
<a href="http://www.pasteur4oa.eu/">
Expand Down
110 changes: 66 additions & 44 deletions static/partials/institution.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,57 +3,79 @@
<div ng-show="g.selected">

<div class="center">
<div class="h1">{{g.selected.title}}</div>
<div>
<span class="policymaker_name">{{g.selected.title}}</span>
({{g.selected.policymaker_type}})
<kbd>Type</kbd> {{g.selected.policymaker_type}}
<kbd>Last Modified</kbd> {{g.selected.lastmod}}
</div>
<div>Last Modified: {{g.selected.lastmod}}</div>
<div>
(<a href="{{g.selected.uri}}">roarmap url</a>)
(<a href="{{g.selected.policymaker_url}}">policy maker url</a>)
(<a href="{{g.selected.repository_url}}">repository url</a>)
(<a href="{{g.selected.policy_url}}">policy url</a>)
<span ng-show="g.selected.url">
(<a href="{{g.selected.uri}}">roarmap url</a>)
</span>
<span ng-show="g.selected.policymaker_url">
(<a href="{{g.selected.policymaker_url}}">policy maker url</a>)
</span>
<span ng-show="g.selected.repository_url">
(<a href="{{g.selected.repository_url}}">repository url</a>)
</span>
<span ng-show="g.selected.policy_url">
(<a href="{{g.selected.policy_url}}">policy url</a>)
</span>
</div>
<div class="lead">
<kbd>Compliance</kbd> <mark>{{g.selected.percentage|number:2}}%</mark>
</div>
<div>compliance: {{g.selected.percentage|number:2}}%</div>
</div>

<div class="table-responsive"><table
class="table table-stripped table-condensed">
<tr>
<th>#</th>
<th>field</th>
<th>value</th>
<th>reason</th>
<th>caveats</th>
<th>guidelines</th>
<th>gmga</th>
</tr>

<!-- Note: g.selected.nexa contains evaluation of the H2020 compliance
rules developed by Nexa Center -->
<tr ng-repeat="entry in g.selected.nexa | orderBy:'field_id'"
class="compliant-{{entry.is_compliant}}">
<td>{{entry.field_id}}</td>
<td>{{entry.field}}</td>
<td>{{entry.value}}</td>
<td>{{entry.reason}}</td>
<td>{{entry.caveats}}</td>
<!-- Note: g.selected.nexa contains evaluation of the H2020 compliance
rules developed by Nexa Center -->
<ul ng-repeat="entry in g.selected.nexa | orderBy:'field_id'"
class="list-group lead">
<li class="list-group-item list-group-item-{{entry.color}} expandable"
ng-init="view = false" ng-click="view = !view">
{{entry.field_id}}. {{entry.field}}
<span class="badge">{{entry.is_compliant}}</span>
<ul class="list-group-item" ng-show="view">
<li class="list-group-item list-group-item-{{entry.color}}">
value <span class="badge">{{entry.value}}</span>
</li>
<li class="list-group-item list-group-item-{{entry.color}}">
reason <span class="badge">{{entry.reason}}</span>
</li>
<li class="list-group-item list-group-item-{{entry.color}}"
ng-show="entry.caveats">
caveats <span class="badge">{{entry.caveats}}</span>
</li>

<!-- Note: a possible improvement would be to open details in a
disposable div rather than in a new tab -->
<td>
<span ng-repeat="ref in entry.gmga">
<a href="/details.html#{{ref}}" target="_blank">[{{ref}}]</a>
</span>
</td>
<td>
<span ng-repeat="ref in entry.guidelines">
<a href="/details.html#{{ref}}" target="_blank">[{{ref}}]</a>
</span>
</td>
</td>
<tr>
</table></div>
<!-- Note: a possible improvement would be to open details in a
disposable div rather than in a new tab -->
<li class="list-group-item list-group-item-{{entry.color}}"
ng-show="entry.gmga">
gmga refs:
<ul class="list-group-item">
<li ng-repeat="ref in entry.gmga"
class="list-group-item list-group-item-{{entry.color}}">
<a href="/details.html#{{ref}}" target="_blank">
Sect. {{ref}}
</a>
</li>
</ul>
</li>
<li class="list-group-item list-group-item-{{entry.color}}"
ng-show="entry.guidelines">
guidelines refs:
<ul class="list-group-item">
<li ng-repeat="ref in entry.guidelines"
class="list-group-item list-group-item-{{entry.color}}">
<a href="/details.html#{{ref}}" target="_blank">
Sect. {{ref}}
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

</div>
</div>

0 comments on commit 7ca9ed1

Please sign in to comment.