Merge pull request #78 from offen/development

click to copy code, update table

.circleci/config.yml

@@ -43,6 +43,7 @@ workflows:
   build_deploy:
     jobs:
       - deploy:
+          context: AWS
           filters:
             branches:
               only:

build/Dockerfile

@@ -3,10 +3,6 @@ FROM nikolaik/python-nodejs:python3.7-nodejs12
 ENV PATH "/root/.local/bin:$PATH"
 ENV NODE_PATH="/usr/lib/node_modules"
 
-ARG siteurl
-ENV SITEURL=$siteurl
-ARG offenaccountid
-ENV OFFEN_ACCOUNT_ID=$offenaccountid
 
 RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
 RUN npm install -g postcss-cli@^6.1.3 autoprefixer@^9.7.0 svgo@^1.3.0 cssnano@^4.1.10
@@ -19,4 +15,10 @@ COPY ./homepage/requirements.txt /code/homepage/requirements.txt
 RUN pip install --user -r requirements.txt
 
 COPY ./homepage /code/homepage
+
+ARG siteurl
+ENV SITEURL=$siteurl
+ARG offenaccountid
+ENV OFFEN_ACCOUNT_ID=$offenaccountid
+
 RUN make publish && rm -rf output/theme/.webassets-cache

homepage/theme/static/css/fix.css

@@ -95,7 +95,8 @@ LAYOUT
 	width: 27%;
 }
 .wx-table-b,
-.wx-table-c {
+.wx-table-c,
+.wx-table-d {
 	width: 16%;
 }
 .hx24 {
@@ -124,7 +125,8 @@ LAYOUT
 	.wx-table-b {
 		width: 20%;
 	}
-	.wx-table-c {
+	.wx-table-c,
+	.wx-table-d {
 		width: 16%;
 	}
 	.hx-try-user {
@@ -139,7 +141,8 @@ LAYOUT
 		width: 100%;
 	}
 	.wx-table-b,
-	.wx-table-c {
+	.wx-table-c,
+	.wx-table-d {
 		width: 25%;
 	}
 	.hx-compare-c,
@@ -318,12 +321,30 @@ i {
 .inner-shaddow {
 	box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.75);
 }
+/* Table */
+	.bg-table {
+		display: none;
+	}
+.hscroll {
+	padding: 2rem;
+}
 @media only screen and (max-width: 45em) {
+	.bg-table {
+		display: inline-block;
+		top: 0;
+		right: 0;
+		z-index : 560;
+	}
 	.hscroll {
 	  overflow-x: auto;
+		padding-left: 1.6rem;
 	}
 	.hscroll table {
-		width: 46rem;
+		width: 47rem;
+	}
+	.wx-table-d {
+		width: 8rem;
+		padding-right: 4rem;
 	}
 }
 
@@ -395,10 +416,11 @@ STACKING IMAGES
 	z-index : 550;
 }
 .bg-cta-pfeil {
-	top: -11rem;
+	top: -13rem;
 	left: 66%;
 	z-index : 570;
 }
+
 @media only screen and (min-width: 30em) {
 	.bg-feature-1 {
 		left: calc(50% - 21rem);
@@ -413,10 +435,9 @@ STACKING IMAGES
 	.bg-metrics-bulb {
 		top: 11rem;
 		left: calc(100% - 30rem);
-		z-index : 550;
 	}
 	.bg-cta-pfeil {
-		top: -12rem;
+		top: -14rem;
 		left: 72%;
 	}
 }

homepage/theme/static/scripts/NOTICE

@@ -0,0 +1,24 @@
+clipboard.js
+Copyright (C) Zeno Rocha
+
+MIT License
+
+Copyright (c) Zeno Rocha
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

homepage/theme/static/scripts/click-to-copy.js

@@ -0,0 +1,3 @@
+$(document).ready(function () {
+  var clipboard = new ClipboardJS('.js-click-to-copy')
+})

homepage/theme/templates/base.html

@@ -199,7 +199,7 @@
       {% endif %}
     </div>
     {% block scripts %}
-      {% assets filters="rjsmin", output="scripts/packed.js", "scripts/jquery-3.4.1.min.js", "scripts/menu.js", "scripts/fade.js" %}
+      {% assets filters="rjsmin", output="scripts/packed.js", "scripts/jquery-3.4.1.min.js", "scripts/menu.js", "scripts/fade.js", "scripts/clipboard.min.js", "scripts/click-to-copy.js" %}
         <script src="/{{ ASSET_URL }}"></script>
       {% endassets %}
     {% endblock %}

homepage/theme/templates/index.html

@@ -499,7 +499,13 @@
 
             <!-- BOX -->
             <div class="mh0 mh5-l">
-              <div class="w-100 dib br0 br2-l pa4 mb5 mb0-l shadow-4 cclr-fnt-black-mid bg-white">
+              <div class="w-100 dib br0 br2-l mb5 mb0-l shadow-4 cclr-fnt-black-mid bg-white">
+
+                <div class="relative">
+                  <div class="absolute bg-table">
+                    <img src="/theme/images/gfx-table-fade.png" alt="fade" width="100px" height="290px">
+                  </div>
+                </div>
 
                 <div class="hscroll">
 
@@ -511,7 +517,7 @@
                         <td class="wx-table-b truncate pv2 pl2 pr1 gray">Google Analytics</td>
                         <td class="wx-table-b truncate pv2 pl2 pr1 gray">Matomo On-Premise</td>
                         <td class="wx-table-c truncate pv2 pl2 pr1 gray">Fathom</td>
-                        <td class="wx-table-c truncate pv2 pl2 pr1">Offen</td>
+                        <td class="wx-table-d truncate pv2 pl2 pr1">Offen</td>
                       </tr>
 
                       <tr class="bg-near-white">
@@ -531,7 +537,7 @@
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
                           </svg>
                         </td>
-                        <td class="truncate pv2 pl2 pr1">
+                        <td class="wx-table-d truncate pv2 pl2 pr1">
                           <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
                           </svg>
@@ -555,7 +561,7 @@
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
                           </svg>
                         </td>
-                        <td class="truncate pv2 pl2 pr1">
+                        <td class="wx-table-d truncate pv2 pl2 pr1">
                           <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
                           </svg>
@@ -579,7 +585,7 @@
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
                           </svg>
                         </td>
-                        <td class="truncate pv2 pl2 pr1">
+                        <td class="wx-table-d truncate pv2 pl2 pr1">
                           <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
                           </svg>
@@ -603,7 +609,7 @@
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
                           </svg>
                         </td>
-                        <td class="truncate pv2 pl2 pr1">
+                        <td class="wx-table-d truncate pv2 pl2 pr1">
                           <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
                           </svg>
@@ -627,7 +633,7 @@
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#CCCCCC"/>
                           </svg>
                         </td>
-                        <td class="truncate pv2 pl2 pr1">
+                        <td class="wx-table-d truncate pv2 pl2 pr1">
                           <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <circle cx="7.5" cy="7.5" r="7.5" fill="#F7BF08"/>
                           </svg>

homepage/theme/templates/trydemo.html

@@ -19,7 +19,7 @@
       </p>
       <div class="flex flex-column items-center">
         <div class="w-100 ph4 pv2 mb5 inner-shaddow bg-gray">
-          <code class="ma0 lh-solid word-wrap white">
+          <code class="ma0 lh-solid word-wrap white js-click-to-copy pointer" data-clipboard-text="curl https://demo.offen.dev | bash" title="Click to copy">
             curl https://demo.offen.dev | bash
           </code>
         </div>
@@ -30,7 +30,7 @@
       </p>
       <div class="flex flex-column items-center">
         <div class="w-100 ph4 pv2 mb5 inner-shaddow bg-gray">
-          <code class="ma0 lh-solid word-wrap white">
+          <code class="ma0 lh-solid word-wrap white js-click-to-copy pointer" data-clipboard-text="docker run --rm -it -p 9876:9876 offen/offen:latest demo -port 9876" title="Click to copy">
             docker run --rm -it -p 9876:9876 offen/offen:latest demo -port 9876
           </code>
         </div>