Merge branch 'master' into feature/count-signatures

site/config.toml

@@ -79,8 +79,9 @@ DefaultContentLanguage = "en"
   description = "**$ORGS organisations** and **$INDS individuals** support this call for action by signing our [Open Letter](/openletter). Help us to make an impact by signing it, too! We will hand over all signatures to representatives all over Europe that are debating software freedom in public administration."
   formName = "Name (required)"
   formEmail = "Email (required)"
-  formCountry = "Country"
+  formCountry = "Your Country"
   formZip = "ZIP Code"
+  formComment = "Your comment (max. 140 characters)"
   formPermissionPriv = "I have read and accepted the [privacy statement](/privacy)"
   formPermissionNews = "I want to stay informed about the future of this campaign"
   formPermissionPub = "I want my signature to appear in the [list of signatures](/openletter#signatures)"

site/content/openletter.en.md

@@ -3,9 +3,9 @@ title: Open Letter
 type: page
 layout: subpage
 sigtable: true
-tableZip: Zip Code
 tableName: Name
 tableCountry: Country
+tableComment: Comment
 ---
 
 Publicly funded software has to be [Free Software][fs]. While there are plenty of good reasons for that, many politicians don't know about the importance of software yet.

site/layouts/partials/action.html

@@ -52,6 +52,9 @@
                   <label class="sign-input form-zp">
                     <input name="zip" placeholder="{{ .Site.Params.action.formZip }}" type="text" />
                   </label>
+                  <label class="sign-input form-co">
+                    <input name="comment" placeholder="{{ .Site.Params.action.formComment }}" type="text" maxlength="140" />
+                  </label>
                   <p class="form-pe">
                     <label class="form-pe">
                       <input name="permissionPriv" value="yes" type="checkbox" required /> {{ .Site.Params.action.formPermissionPriv | markdownify }}

site/layouts/partials/subpage_sigtable.html

@@ -1,17 +1,19 @@
 <table id="signatures">
-  <tbody>
+  <thead>
     <tr>
       <th>{{ .Params.tableName }}</th>
       <th>{{ .Params.tableCountry }}</th>
-      <th>{{ .Params.tableZip }}</th>
+      <th>{{ .Params.tableComment }}</th>
     </tr>
+  </thead>
+  <tbody>
     {{ range .Site.Data.signatures.data }}
       {{ range sort . "id" "desc" }}
         {{ if (eq .confirmed "yes") | and (eq .permPub "yes")  }}
          <tr>
             <td>{{ .name }}</td>
             <td>{{ .country }}</td>
-            <td>{{ .zip }}</td>
+            <td>{{ .comment }}</td>
          </tr>
         {{ end }}
       {{ end }}

site/static/cgi/sign.php

@@ -88,6 +88,7 @@ if(empty($action)) {
   $email = isset($_POST['email']) ? $_POST['email'] : false;
   $country = isset($_POST['country']) ? $_POST['country'] : false;
   $zip = isset($_POST['zip']) ? $_POST['zip'] : false;
+  $comment = isset($_POST['comment']) ? $_POST['comment'] : false;
   $permPriv = isset($_POST['permissionPriv']) ? $_POST['permissionPriv'] : false;
   $permNews = isset($_POST['permissionNews']) ? $_POST['permissionNews'] : false;
   $permPub = isset($_POST['permissionPub']) ? $_POST['permissionPub'] : false;
@@ -141,6 +142,7 @@ if ($action === "sign") {
                   "email" => $email,
                   "country" => $country,
                   "zip" => $zip,
+                  "comment" => $comment,
                   "permPriv" => $permPriv,
                   "permNews" => $permNews,
                   "permPub" => $permPub,

site/static/css/custom.css

@@ -101,6 +101,7 @@
 }
 #action form label {
   font-weight: 400;
+  margin: 5px 3px;
 }
 .sign-input {
   position: relative;
@@ -119,6 +120,9 @@
   width: 270px;
   height: 31px;
 }
+.sign-input.form-co input {
+  width: 554px;
+}
 .sign-input select {
   background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
   border-radius: 7px;
@@ -140,6 +144,10 @@
   content: "\f08d";
   padding-left: 3px;
 }
+.form-co:before {
+  content: "\f27a";
+  padding-left: 3px;
+}
 p.form-pe {
   text-align: left;
   max-width: 530px; /* to not let the checkboxed go far more left than the input boxes above */
@@ -154,14 +162,48 @@ p.form-pe a {
 
 /* SIGNATURE TABLE */
 table#signatures {
-  margin: 0 auto;
+  display: table;
+  width: 100%;
+}
+table#signatures thead, table#signatures tbody {
+  width: 100%;
+}
+table#signatures td:nth-child(1), table#signatures th:nth-child(1) {
+  width: 25%;
+}
+table#signatures td:nth-child(2), table#signatures th:nth-child(2) {
+  width: 25%;
+}
+table#signatures td:nth-child(3), table#signatures th:nth-child(3) {
+  width: 50%;
+}
+table#signatures thead {
+  overflow-y: scroll;
+  display: table;
+  width: calc(100% - 16px);
+  background-color: rgba(230, 230, 230, 0.2);
+}
+table#signatures tbody {
+  overflow: auto;
+  height: 250px;
+  display: block;
+}
+table#signatures tr {
+  width: 100%;
+  display: table;
+  text-align: left;
 }
 table#signatures th, table#signatures td {
-  border: 1px solid darkgrey;
-  border-collapse: collapse;
+  border-bottom: 1px solid darkgrey;
   text-align: left;
-  padding: 2px;
+  padding: 5px;
 }
+table#signatures tr:nth-child(even) {
+  background-color: rgba(230, 230, 230, 0.05);
+} 
+table#signatures tr:hover {
+  background-color: rgba(230, 230, 230, 0.1);
+} 
 
 /* SPECIAL LINK UNDERLINE EFFECT */
 a:not(.btn):not(.hiddenlink) {