footer

templates/auth/login/index.html

@@ -1,3 +1,4 @@
+<div class="tmp-layout">
 <. include!("../../components/headers.html"); .>
 <main class="auth-main">
   <div class="auth-inner-container">

templates/auth/register/index.html

@@ -1,3 +1,4 @@
+<div class="tmp-layout">
 <. include!("../../components/headers.html"); .>
 <main class="auth-main">
   <div class="auth-inner-container">

templates/components/_main.scss

@@ -17,7 +17,7 @@
 @import '../vars';
 
 @mixin main {
-  min-height: 100%;
+  max-height: 100%;
   background-color: $backdrop;
-  padding-bottom: 20px;
+  flex: 2;
 }

templates/components/details-footers.html

@@ -1,4 +1,5 @@
-<footer role="contentinfo">
+<footer role="contentinfo" class="details__container">
+    <p class="details__copyright"> &copy; mCaptcha developers </p>
   <ul class="details">
     <li class="details__item">
       <a class="details__link" href="<.= crate::PKG_HOMEPAGE .>">Homepage</a>

templates/components/details.scss

@@ -16,16 +16,30 @@
  */
 @import '../_vars.scss';
 
+$footer-font-size: 14px;
+
+.details__container {
+  display: flex;
+  font-size: $footer-font-size;
+  //  margin-left: auto;
+}
+
+.details__copyright {
+  flex: 2;
+  font-size: $footer-font-size;
+}
+
 .details {
   list-style: none;
-  position: relative;
   bottom: 0px;
   box-sizing: border-box;
-  width: 95%;
   display: flex;
   font-size: 14px;
-  margin: auto;
   background-color: $backdrop;
+
+  //position: relative;
+  // width: 95%;
+  //margin: auto;
 }
 
 .details__item {

templates/components/footers.html

@@ -1,5 +1,6 @@
 </main>
 <. include!("./details-footers.html"); .>
+</div>
 </body>
 <link rel="stylesheet" href="<.= &*crate::CSS .>" type="text/css" media="all">
 <script src="<.= &*crate::JS .>"></script>

templates/main.scss

@@ -18,13 +18,8 @@
 // creadits: https://codepen.io/rachelandrew/pen/MmOvPr/?editors=1100
 .layout {
   display: grid;
-  grid-template-columns: 1fr 5fr;
+  grid-template-columns: minmax(250px, auto) 1fr;
-  grid-template-rows: 1fr 6fr 1fr;
+  grid-template-areas: 'navbar mainContent';
-}
-
-h1,
-p {
-  margin: 0 0 1em 0;
 }
 
 /* no grid support? check this out later */
@@ -41,17 +36,27 @@ p {
 */
 
 /* make a grid */
-header,
+//header,
-footer {
+//footer {
-  grid-column: 2 / 5;
+//  grid-column: 2 / 5;
-  /* needed for the floated layout */
+//  /* needed for the floated layout */
-  clear: both;
+//  clear: both;
-}
+//}
 
 nav {
-  grid-row: 1/ 4;
+  //  grid-row: 1/ 4;
   /* needed for the floated layout */
   clear: both;
+  grid-area: navbar;
+  height: 100%;
+}
+
+.tmp-layout {
+  //  grid-column: 2 / 5;
+  grid-area: mainContent;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 /* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps.

templates/panel/index.html

@@ -1,5 +1,6 @@
 <. include!("../components/headers.html"); .>
 <. include!("./navbar/index.html"); .>
+<div class="tmp-layout">
 <. include!("./header/index.html"); .>
 <main class="panel-main">
   <. include!("./help-banner/index.html"); .>

templates/panel/navbar/index.html

@@ -1,5 +1,5 @@
 <nav class="secondary-menu">
-  <ul>
+  <ul class="secondary-menu__lsit">
     <li class="secondary-menu__heading">
       <img class="secondary-menu__logo" src="<.= crate::FILES.get("./static-assets/img/icon-trans.png").unwrap() .>" alt="Logo" />
       <div class="secondary-menu__brand-name">

templates/panel/navbar/main.scss

@@ -33,6 +33,12 @@
   color: $light-text;
 }
 
+.secondary-menu__lsit{
+	position: fixed;
+	top: 0;
+	bottom: 0;
+}
+
 .secondary-menu__heading {
   margin: auto;
   padding: 20px 5px;

templates/panel/sitekey/add/index.html

@@ -1,5 +1,6 @@
 <. include!("../../../components/headers.html"); .> 
 <. include!("../../navbar/index.html"); .>
+<div class="tmp-layout">
 <. include!("../../header/index.html"); .>
 
 <main class="panel-main">

templates/panel/sitekey/add/ts/form/index.ts

@@ -54,7 +54,7 @@ const submit = async (e: Event) => {
   const res = await fetch(formUrl, genJsonPayload(payload));
   if (res.ok) {
     alert('success');
-    window.location.assign(VIEWS.sitekey);
+    window.location.assign(VIEWS.listSitekey);
   } else {
     const err = await res.json();
     alert(`error: ${err.error}`);

templates/panel/sitekey/list/index.html

@@ -1,5 +1,6 @@
 <. include!("../../../components/headers.html"); .> 
 <. include!("../../navbar/index.html"); .>
+<div class="tmp-layout">
 <. include!("../../header/index.html"); .>
 <main class="panel-main">
   <.include!("../../help-banner/index.html"); .>

templates/views/v1/routes.ts

@@ -21,7 +21,7 @@ const ROUTES = {
   signoutUser: '/api/v1/signout',
   panelHome: '/',
   docsHome: '/docs/',
-  sitekey: '/sitekey',
+  listSitekey: '/sitekey/view',
   addSiteKey: '/sitekey/add',
 };