Merge pull request OpenKnowledgeMaps#576 from OpenKnowledgeMaps/tripl…

…e-searchflow-css-updates How-it-works CSS & logic
chreman · Oct 8, 2021 · 5609b54 · 5609b54
2 parents 89ae1c1 + 5f1d5f6
commit 5609b54
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 9 deletions.
diff --git a/examples/triple/index.php b/examples/triple/index.php
@@ -12,10 +12,9 @@
     <?php include('search-flow/inc/shared/head-search-form.php') ?>
 </head>
 
-<body style="padding-left:10px; padding-right:10px;">
+<body>
     <?php include('search-flow/inc/shared/banner-browser-unsupported.php') ?>
-    <?php include('search-flow/inc/shared/banner-mobile.php') ?>
-    <div>
+    <div style="padding-right: 10px; padding-left: 10px;">
         <h2>Search TRIPLE and turn it into a visualization</h2>
         <?php include('search-flow/inc/search-form/search-form.php') ?>
     <script type="text/javascript " src="search-flow/js/search_form.js "></script>

diff --git a/examples/triple/search.php b/examples/triple/search.php
@@ -14,13 +14,11 @@
     <?php include('search-flow/inc/shared/head-search-form.php') ?>
 </head>
 
-<body style="padding-left:10px; padding-right:10px;" class="searchpage">
+<body class="searchpage">
     <div>
         <?php include('search-flow/inc/shared/banner-browser-unsupported.php') ?>
-        <?php include('search-flow/inc/shared/banner-mobile.php') ?>
-        <?php             
-            include('search-flow/inc/waiting-page/waiting-page.php') 
-        ?>
+        <?php include('search-flow/inc/waiting-page/waiting-page.php') ?>
+        <?php include('search-flow/inc/how-it-works/how-it-works.php') ?>
 
     <script type="text/javascript " src="search-flow/js/search.js "></script>
     <link rel="stylesheet" href="triple-searchflow.css">

diff --git a/examples/triple/triple-searchflow.css b/examples/triple/triple-searchflow.css
@@ -1,5 +1,5 @@
 body, .refine-search {
-font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;     
+    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;    
 }
 
 .center-div {
@@ -96,4 +96,35 @@ font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 .basic-button:hover, .basic-button:active, .basic-button:focus {
     color: #622166;
     background-color: transparent;
+}
+
+.searchpage .h2reverse, .searchpage .number {
+    color: #333;
+}
+
+.howitworks-div {
+    padding: 0px 20px;
+}
+
+@media screen and (max-width: 1030px) {
+
+    .center-div {
+        margin: 0px auto 0;
+    }
+}
+
+@media screen and (max-width: 535px) {
+
+    .center-div {
+        padding: 20px;
+        width: 80%;
+        margin: 0px auto;
+    }
+}
+
+@media screen and (max-width: 360px) {
+    .center-div {
+        padding: 20px;
+        width: 80%;
+    }
 }