Merge pull request #206 from c4dt/203

clean up tab contents

Author: PascalinDe

assets/css/products.css

@@ -86,15 +86,25 @@ div.columns label {
   margin: 0.5em;
 }
 
-img.left {
-  float: left;
-  margin: 0.5em;
-  width: 30%;
+@media screen and (width < 64rem) {
+  img.left {
+    margin: auto;
+    height: 30%;
+  }
+}
+
+@media screen and (width >= 64rem) {
+  img.left {
+    float: left;
+    margin: 0.5em;
+    width: 30%;
+  }
 }
 
 img.center {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
+  margin: auto;
 }
 
 p {

data/customHTMLContent/demo/at2.vue

@@ -8,7 +8,6 @@
   <div class="columns">
     <div class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img
           src="/showcase_v2/products/images/at2/at2-demo-1.png"
           alt="Welcome screen of the AT2 demo showing some text and an
@@ -19,7 +18,6 @@
     </div>
     <div class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img
           src="/showcase_v2/products/images/at2/at2-demo-2.png"
           alt="A short explanation of how to create an account, a field for
@@ -32,7 +30,6 @@
   <div class="columns">
     <div class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img
           src="/showcase_v2/products/images/at2/at2-demo-3.png"
           alt="A simple form to send some of your assets over to network
@@ -44,7 +41,6 @@
     </div>
     <div class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img
           src="/showcase_v2/products/images/at2/at2-demo-4.png"
           alt="A form to choose a destination and how much transactions should be performed.

data/customHTMLContent/demo/garfield.vue

@@ -9,7 +9,6 @@
   <div class="columns">
     <div class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img
           src="/showcase_v2/products/images/garfield/garfield-demo-1.png"
           alt="This shows the first step of six in the demo. It contains the introduction
@@ -23,7 +22,6 @@
     </div>
     <div class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img
           src="/showcase_v2/products/images/garfield/garfield-demo-2.png"
           alt="Step 2: 'Simple training' with a short explanation that we need
@@ -40,7 +38,6 @@
   <div class="columns">
     <div class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img
           src="/showcase_v2/products/images/garfield/garfield-demo-3.png"
           alt="Step 3: 'Adding data' allows the user to choose how many additional
@@ -56,7 +53,6 @@
     </div>
     <div class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img
           src="/showcase_v2/products/images/garfield/garfield-demo-4.png"
           alt="Step 4: 'Byzantine behaviour' gives the user a choice to change some
@@ -74,7 +70,6 @@
   <div class="columns">
     <div class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img
           src="/showcase_v2/products/images/garfield/garfield-demo-5.png"
           alt="Step 5: 'Byzantine resilience' looks similar to step 4, with 4 systems,
@@ -90,7 +85,6 @@
     </div>
     <div class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img
           src="/showcase_v2/products/images/garfield/garfield-demo-6.png"
           alt="Step 6: 'Comparison with other projects' shows a text comparing it to another

data/customHTMLContent/demo/medco.vue

@@ -13,7 +13,6 @@
 
   <div class="click-zoom center">
     <label>
-      <input type="checkbox" />
       <img src="/showcase_v2/products/images/medco/demo.png" width="50%" />
       <br />The query building in medco
     </label>

data/customHTMLContent/demo/odyssey.vue

@@ -22,14 +22,12 @@
   <div class="columns">
     <div class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img src="/showcase_v2/products/images/calypso/pilot-dom-welcome.png" />
         <br />The Data Manager can add new data sources, change the access control, and verify the usage of their data
       </label>
     </div>
     <div class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img src="/showcase_v2/products/images/calypso/pilot-dsm-welcome.png" />
         <br />The Data Scientist can request different data sources, and will get these resources delivered in a
         personalized, temporary virtual machine

data/customHTMLContent/demo/spindle.vue

@@ -25,7 +25,6 @@
 
   <div class="click-zoom center">
     <label>
-      <input type="checkbox" />
       <img src="/showcase_v2/products/images/spindle/demo-start.png" width="50%" />
       <br />The start page of the demo
     </label>
@@ -58,12 +57,10 @@
 
   <div class="columns click-zoom">
     <label>
-      <input type="checkbox" />
       <img src="/showcase_v2/products/images/spindle/demo-calculate.png" />
       <br />During calculation of the result
     </label>
     <label>
-      <input type="checkbox" />
       <img src="/showcase_v2/products/images/spindle/demo-predict.png" />
       <br />Ready to predict outcomes
     </label>

data/customHTMLContent/pilot/dvoting.vue

@@ -2,14 +2,12 @@
   <div class="center" style="width: 100%; display: flex">
     <div style="margin: 1em; flex: 1" class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img src="/showcase_v2/products/images/d-voting/d-voting_at_EPFL.png" />
         <br />Finalized Elections with results
       </label>
     </div>
     <div style="margin: 1em; flex: 1" class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img src="/showcase_v2/products/images/d-voting/d-voting-overview.png" />
         <br />Overview of the components of the system
       </label>

data/customHTMLContent/pilot/omniledger.vue

@@ -39,14 +39,12 @@
   <div class="center" style="width: 100%; display: flex">
     <div style="margin: 1em" class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img src="/showcase_v2/products/images/omniledger/pilot-01-login.png" />
         <br />User information
       </label>
     </div>
     <div style="margin: 1em" class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img src="/showcase_v2/products/images/omniledger/pilot-02-transaction.png" />
         <br />Update in progress
       </label>
@@ -69,21 +67,18 @@
   <div class="columns">
     <div class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img src="/showcase_v2/products/images/omniledger/pilot-04-login-wordpress.png" />
         <br />The "Sign in with OmniLedger" button in Wordpress
       </label>
     </div>
     <div class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img src="/showcase_v2/products/images/omniledger/pilot-05-login-wordpress-confirmation.png" />
         <br />A user has to confirm the login
       </label>
     </div>
     <div class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img src="/showcase_v2/products/images/omniledger/pilot-07-login-wordpress-transaction.png" />
         <br />The login is written to the blockchain
       </label>
@@ -92,14 +87,12 @@
   <div class="columns">
     <div class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img src="/showcase_v2/products/images/omniledger/pilot-06-login-wordpress-complete.png" />
         <br />The access to the protected area in Wordpress
       </label>
     </div>
     <div class="click-zoom">
       <label>
-        <input type="checkbox" />
         <img src="/showcase_v2/products/images/omniledger/pilot-08-login-matrix-cas.png" />
         <br />Logging in to Matrix
       </label>
@@ -127,7 +120,6 @@
   </p>
   <div style="margin: 1em" class="click-zoom center">
     <label>
-      <input type="checkbox" />
       <img src="/showcase_v2/products/images/omniledger/pilot-03-devices.png" width="50%" />
       <br />An account with a number of keys and a recovery account
     </label>