city picker fixes

sdhoek · May 7, 2018 · 70d7126 · 70d7126
1 parent 06ab0e4
commit 70d7126
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/src/app/router/city-picker.component.css b/src/app/router/city-picker.component.css
@@ -60,6 +60,10 @@ h1:after {
  margin-bottom: 0;
 }
 
+.selection-row{
+ flex: 1;
+}
+
 .colofon p {
  padding-bottom: 20px;
 }
@@ -75,13 +79,15 @@ h2 {
 }
 
 .stad{
- width: 250px;
- padding: 36px 0 16px;
+ width: 200px;
+ height: 200px;
+ padding: 2%;
  display: inline-block;
  cursor: pointer;
- border-radius: 125px;
- margin: 17px;
+ border-radius: 200px;
+ margin: 2%;
  background: #1b1b1b;
+ box-sizing: content-box;
  border: 2px solid #f6be0e;
 }
 
@@ -90,9 +96,9 @@ h2 {
 }
 
 .stad img{
- max-width: 150px;
+ max-width: 60%;
  display: block;
- margin: 0 auto 15px;
+ margin: 15px auto 15px;
 }
 
 .colofon{

diff --git a/src/app/router/city-picker.component.html b/src/app/router/city-picker.component.html
@@ -9,6 +9,8 @@ <h2>
  <p>Kies je stad:</p>
  </div>
 
+ <div class="selection-row">
+
  <span class="stad" routerLink="../kaart/utrecht">
  <img src="../assets/[email protected]" />
  <h2>Utrecht</h2>
@@ -29,6 +31,8 @@ <h2>Rotterdam</h2>
  <h2>Den Haag</h2>
  </span>
 
+ </div>
+
  <div class="colofon">
  <p>Gemaakt door <a href="https://geogap.nl/">Geogap</a>, <a href="http://geoloep.nl">Geoloep</a> en 
  <a href="https://webmapper.net/">Webmapper</a> op basis van open data. <span class="link" routerLink="../colofon">Colofon</span></p>