styled invite and reg pages

members_lumbung_space/static/css/lumbung.css

@@ -134,10 +134,6 @@ nav strong{
   text-decoration: none;
 }
 
-.button.is-ghost {
-  padding-left: 0 !important;
-}
-
 footer {
   background-color: #AFAFAF !important; 
   padding: 1rem 1.5rem !important;
@@ -151,3 +147,59 @@ footer .content span {
   padding-bottom: 2rem !important;
 }
 
+#formlogo.logo{
+  background-color: white;
+  border: 1px solid black;
+  transform: rotate(5deg);
+  margin: 0 auto 2em auto !important;
+  width: 75%;
+  position: relative;
+  bottom: 1em;
+  padding: 0.8em
+}
+
+@media all and (min-width: 768px) {
+  #formlogo.logo{
+    width: 50%;
+  }
+  .signup-form-box {
+    max-width: 70%;
+    margin: auto;
+    margin-top: 4em;
+  }
+
+}
+
+.signup-form-box {
+  margin: auto;
+  margin-top: 4em;
+  border: #333 2px solid;
+}
+
+.form-header {
+  background-color: #BCE1D1;
+  height: 3.6em;
+}
+
+.form-body p,.form-body form  {
+  margin-left: 1em;
+}
+
+.form-body {
+  overflow-x: auto;
+}
+
+.form-body button{
+  margin-bottom: 1em;
+}
+
+.form-body .button {
+  padding: 0 4em !important;
+  color: white;
+  background-color: #AFAFAF;
+}
+
+.button {
+  font-family: "Gudea", "sans-serif" !important;
+
+}

members_lumbung_space/templates/invites.html

@@ -2,33 +2,46 @@
 
 {% block content %}
 {% include 'nav.html' %}
-<div class="logo">
+<!-- <div class="logo">
   <img src="{{ url_for('static', path='svg/lumbung_space_logo.svg') }}" alt="lumbung.space logo">
-</div>
+</div> -->
-<div>
+<div class="center-table">
-  {% if user.preferred_username in invites and invites[user.preferred_username]|length > 0 %}
-    <table>
-      <tr>
-        <th>Link</th>
-        <th>Validity</th>
-        <th>Actions</th>
-      </tr>
-      {% for invite in invites[user.preferred_username] %}
-        <tr>
-          <td>
-            <a class="invite" href="{{ url_for('register_invite', invite=invite.link) }}">
-              {{ url_for('register_invite', invite=invite.link) }}
-            </a>
-          </td>
-          <td> {{ invite.validity }} </td>
-          <td> <button class="button is-ghost"><a href="{{ url_for('invite_keycloak_delete') }}?invite={{ invite.link }}">delete</a></button></td>
-        </tr>
-      {% endfor %}
-      </table>
-    {% endif %}
 
-  <p>
+  <div class="signup-form-box">
-    <button class="button is-ghost"><a href="{{ url_for('invite_keycloak_create') }}">Generate</a></button>
+    <div class="form-header">
-  </p>
+      <div id="formlogo" class="logo">
+        <img src="{{ url_for('static', path='svg/lumbung_space_logo.svg') }}" alt="lumbung.space logo">
+      </div>
+    </div>
+    <div class="form-body">
+      <p>
+        Hello {{user.preferred_username}}. Here are links you can send to invite others to register.
+      </p>
+      {% if user.preferred_username in invites and invites[user.preferred_username]|length > 0 %}
+      <table>
+        <tr>
+          <th>Link</th>
+          <th>Validity</th>
+          <th>Actions</th>
+        </tr>
+        {% for invite in invites[user.preferred_username] %}
+          <tr>
+            <td>
+              <a class="invite" href="{{ url_for('register_invite', invite=invite.link) }}">
+                {{ url_for('register_invite', invite=invite.link) }}
+              </a>
+            </td>
+            <td> {{ invite.validity }} </td>
+            <td> <button class="button is-ghost"><a href="{{ url_for('invite_keycloak_delete') }}?invite={{ invite.link }}">delete</a></button></td>
+          </tr>
+        {% endfor %}
+      </table>
+      <div class="overflow-x:auto">
+
+      </div>
+      {% endif %}
+      <button class="button is-ghost"><a href="{{ url_for('invite_keycloak_create') }}">Generate</a></button>
+    </div>
+  </div>
 </div>
 {% endblock %}

members_lumbung_space/templates/register.html

@@ -1,35 +1,48 @@
 {% extends "base.html" %}
 {% block content %}
-  <p>
+  <div class="signup-form-box">
-    You've been invited by {{ invited_by }} 🎉
+    <div class="form-header">
-  </p>
+      <div id="formlogo" class="logo">
+        <img src="{{ url_for('static', path='svg/lumbung_space_logo.svg') }}" alt="lumbung.space logo">
+      </div>
+    </div>
+    <div class="form-body">
+      <p>
+        You've been invited by {{ invited_by }} 🎉
+      </p>
+    
+      {% if exception %}
+      <p class="error">Oops, something went wrong: {{ exception }} 😬</p>
+      {% endif %}
+    
+      <form method="post" action="{{ url_for('form_keycloak_register') }}">
+        <label for="first_name">First name:</label>
+        <input type="text" name="first_name" value="{{ first_name }}" minlength="3" />
+    
+        <label for="last_name">Last name:</label>
+        <input type="text" name="last_name" value="{{ last_name }}" minlength="3"/>
+    
+        <label for="username">Username:</label>
+        <input type="text" name="username" value="{{ username }}" minlength="3"/>
+    
+        <label for="email">Email:</label>
+        <input type="text" name="email" value="{{ email }}" minlength="3"/>
+    
+        <label for="password">Password:</label>
+        <input type="password" name="password" minlength="8"/>
+    
+        <label for="password_again">Password (just to be sure):</label>
+        <input type="password" name="password_again" minlength="8"/>
+    
+        <input type="hidden" name="invited_by" value="{{ invited_by }}"/>
 
-  {% if exception %}
+        <input class="button "type="submit" value="Register" />
-  <p class="error">Oops, something went wrong: {{ exception }} 😬</p>
-  {% endif %}
 
-  <form method="post" action="{{ url_for('form_keycloak_register') }}">
+        
-    <label for="first_name">First name:</label>
+      </form>
-    <input type="text" name="first_name" value="{{ first_name }}" minlength="3" />
+    </div>
 
-    <label for="last_name">Last name:</label>
+  </div>
-    <input type="text" name="last_name" value="{{ last_name }}" minlength="3"/>
 
-    <label for="username">Username:</label>
-    <input type="text" name="username" value="{{ username }}" minlength="3"/>
-
-    <label for="email">Email:</label>
-    <input type="text" name="email" value="{{ email }}" minlength="3"/>
-
-    <label for="password">Password:</label>
-    <input type="password" name="password" minlength="8"/>
-
-    <label for="password_again">Password (just to be sure):</label>
-    <input type="password" name="password_again" minlength="8"/>
-
-    <input type="hidden" name="invited_by" value="{{ invited_by }}"/>
-
-    <input type="submit" value="Register" />
-  </form>
 
 {% endblock %}