fixes loklak#163 - Added footer

Fixes issue loklak#163. The main page now contains a footer and store listing page now contains a footer.
djmgit · Jun 20, 2017 · 041fc23 · 041fc23
1 parent a15fedd
commit 041fc23
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 28 deletions.
diff --git a/css/dashboard.css b/css/dashboard.css
@@ -231,6 +231,34 @@ border-radius: 0px;
   padding-left: 10px
   width:100%;
 }
+.footer {
+  width: 100%;
+  background: #f2f2f2;
+  padding: 0px 14px;
+  border-top: 1px solid #e4e4e4;
+  display:  flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20vh;
+}
+.footer a {
+  padding: 0px 6px;
+  color: #666;
+  font-size: small;
+  line-height: 40px;
+}
+.left-side {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.right-side {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
 @media (min-width: 768px) {
   .sidebar {
     position: fixed;
@@ -293,6 +321,30 @@ border-radius: 0px;
     padding: 15px;
     border-color: #999;
   }
+  .footer {
+    width: 100%;
+    background: #f2f2f2;
+    padding: 0px 14px;
+    border-top: 1px solid #e4e4e4;
+    display:  flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10vh;
+    position: relative;
+    margin-top: 220px;
+  }
+
+  .footer a {
+    padding: 0px 6px;
+    color: #666;
+    font-size: small;
+    line-height: 40px;
+  }
+
+  .main {
+    min-height: 300px;
+  }
 }
 .sidebar{
   margin-top: 30px;
@@ -327,6 +379,7 @@ border-radius: 0px;
 .main {
   padding-left: 10px;
   padding-right: 20px;
+  min-height: 300px;
 }
 @media (min-width: 768px) {
   .main {
@@ -344,32 +397,7 @@ section{
   padding-top: 50px;
   margin-top: -50px;
 }
-footer{
-  z-index: 1000;
-  width: 85%;
-  border-top: 1px solid #e4e4e4;
-  background-color: #f1f1f1;
-  padding: 0px 14px;
-  margin-top:30px;
-}
-footer a {
-    padding: 0px 14px;
-    color:rgb(119,119,119);
-    line-height: 40px;
-    display:block;
-    font-size: small;
-    font-family:"Courier New";
-}
-footer .left{
-  float:left;
-  color:#C8254D;
-}
-footer .right{
-  float:right;
-}
-footer .right:hover{
-  color:rgb(51,51,51);
-}
+
 /* styling for suggestion box */
 
 .tt-hint {

diff --git a/css/details.css b/css/details.css
@@ -258,6 +258,27 @@ body {
     color: #424242;
 }
 
+.footer {
+    width: 100%;
+    background: #f2f2f2;
+    padding: 0px 14px;
+    border-top: 1px solid #e4e4e4;
+    display:  flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10vh;
+    position: relative;
+    margin-top: 220px;
+}
+
+.footer a {
+    padding: 0px 6px;
+    color: #666;
+    font-size: small;
+    line-height: 40px;
+}
+
 @media (max-width: 960px) {
     .sidebar {
         width: 0px;
@@ -288,6 +309,33 @@ body {
         display: block;
     }
 
+    .footer {
+        width: 100%;
+        background: #f2f2f2;
+        padding: 0px 14px;
+        border-top: 1px solid #e4e4e4;
+        display:  flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        margin-top: 10vh;
+    }
+    .footer a {
+        padding: 0px 6px;
+        color: #666;
+        font-size: small;
+        line-height: 40px;
+    }
+    .left-side {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    .right-side {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
 }
 
 @media (max-width: 500px) {

diff --git a/details.html b/details.html
@@ -154,6 +154,18 @@ <h4>{{app.headline}}</h4>
       </div>
     </div>
   </body>
-  <footer>
-  </footer>
+  <div class="footer">
+    <div class="left-side">
+      <a href="http://loklak.net/about">About</a>
+      <a href="http://blog.loklak.net">Blog</a>
+      <a href="http://dev.loklak.org">Developers</a>
+      <a href="http://api.loklak.org">API</a>
+      <a href="http://apps.loklak.org">Apps</a>
+      <a href="https://github.com/fossasia/apps.loklak.org">Code</a>
+    </div>
+    <div class="right-side">
+      <a href="http://loklak.net/terms">Terms</a>
+      <a href="http://loklak.net/contact">Contact</a>
+    </div>
+  </div>
 </html>
diff --git a/index.html b/index.html
@@ -173,6 +173,21 @@ <h1>
             </center>
         </div>
       </div>
+      </div>
+      <div class="footer">
+        <div class="left-side">
+          <a href="http://loklak.net/about">About</a>
+          <a href="http://blog.loklak.net">Blog</a>
+          <a href="http://dev.loklak.org">Developers</a>
+          <a href="http://api.loklak.org">API</a>
+          <a href="http://apps.loklak.org">Apps</a>
+          <a href="https://github.com/fossasia/apps.loklak.org">Code</a>
+        </div>
+        <div class="right-side">
+          <a href="http://loklak.net/terms">Terms</a>
+          <a href="http://loklak.net/contact">Contact</a>
+        </div>
+      </div>
       <script src="./app_list.js"></script>
       <script src="/js/bootstrap.min.js" async></script>
       <script src="/js/ie10-viewport-bug-workaround.js" async></script>