Minimal styling for heya page

danieldickison · Jul 29, 2024 · 7618dc4 · 7618dc4
1 parent fbed391
commit 7618dc4
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 32 deletions.
diff --git a/public/scss/base.scss b/public/scss/base.scss
@@ -163,6 +163,7 @@ section {
     a {
         color: inherit;
         font-weight: 400;
+        white-space: nowrap;
     }
 
     a.logo {

diff --git a/public/scss/heya.scss b/public/scss/heya.scss
@@ -0,0 +1,20 @@
+#p-heya {
+  > h2 {
+    text-align: left;
+  }
+
+  section {
+    background: var(--color-light-yellow-bg);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    -webkit-backdrop-filter: blur(3px);
+    backdrop-filter: blur(3px);
+  }
+
+  form.expel {
+    display: inline;
+  }
+}
+
+#p-heya-list {
+
+}
diff --git a/templates/base.html b/templates/base.html
@@ -38,13 +38,13 @@
             {%- when Some with (player) -%}
                 {{player.render().unwrap()|safe}}
                 <menu>
-                    <li><a href="{{player.url_path()}}">profile</a></li>
-                    <li><a href="/settings">settings</a></li>
-                    <li><a href="/logout">log out</a></li>
+                    <li><a href="{{player.url_path()}}">Profile</a></li>
+                    <li><a href="/settings">Settings</a></li>
+                    <li><a href="/logout">Log Out</a></li>
 
                     <li><hr /></li>
 
-                    <li><a href="/heya">heya directory</a></li>
+                    <li><a href="/heya">Heya Directory</a></li>
                     {% if let Some(heyas) = player.heyas %}
                       {% for heya in heyas %}
                         <li><a href="{{heya.url_path()}}">{{heya.name}}</a></li>
@@ -53,9 +53,9 @@
 
                     <li><hr /></li>
 
-                    <li><a href="/stats">stats</a></li>
-                    <li><a href="https://discordapp.com/invite/Wg4DsMt" target="_blank">discord</a></li>
-                    <li><a class="dbox-donation-button" href="https://donorbox.org/kachi-clash-website-donations" target="_blank">donate</a></li>
+                    <li><a href="/stats">Stats</a></li>
+                    <li><a href="https://discordapp.com/invite/Wg4DsMt" target="_blank">Discord</a></li>
+                    <li><a class="dbox-donation-button" href="https://donorbox.org/kachi-clash-website-donations" target="_blank">Donate</a></li>
                 </menu>
 
             {%- when None -%}

diff --git a/templates/heya.html b/templates/heya.html
@@ -16,33 +16,38 @@
 
 {% block main %}
   <h1>{{heya.name}}</h1>
+  <h2>Oyakata: {{heya.oyakata.render().unwrap()|safe}}</h2>
 
   {% if is_oyakata %}
-    <form method="POST">
-      <input type="text" name="set_name" value="{{heya.name}}">
-      <button>Update</button>
-    </form>
+    <section>
+      <form method="POST">
+        <input type="text" name="set_name" value="{{heya.name}}">
+        <button>Update</button>
+      </form>
+    </section>
   {% endif %}
 
-  <h2>Oyakata: {{heya.oyakata.render().unwrap()|safe}}</h2>
-
-  <h2>Members</h2>
-  <ul>
-    {% for member in heya.members.as_ref().unwrap() %}
-      <li>
-        {{member.render().unwrap()|safe}}
-        {% if is_oyakata %}
-          <form method="POST">
-            <input type="hidden" name="delete_player_id" value="{{member.id}}">
-            <button>Expel</button>
-          </form>
-        {% endif %}
-      </li>
-    {% endfor %}
-  </ul>
-
-  <form method="POST">
-    <label>player id: <input type="text" name="add_player_id"></label>
-    <button>Recruit</button>
-  </form>
+  <section>
+    <h2>Members</h2>
+    <ul class="members">
+      {% for member in heya.members.as_ref().unwrap() %}
+        <li>
+          {{member.render().unwrap()|safe}}
+          {% if is_oyakata %}
+            <form class="expel" method="POST">
+              <input type="hidden" name="delete_player_id" value="{{member.id}}">
+              <button>Expel</button>
+            </form>
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  </section>
+
+  <section>
+    <form method="POST">
+      <label>player id: <input type="text" name="add_player_id"></label>
+      <button>Recruit</button>
+    </form>
+  </section>
 {% endblock %}