Merge pull request #594 from scidsg/glenn-alias-updates

Various updates
scidsg · Sep 19, 2024 · 2475da3 · 2475da3
2 parents fd59dc7 + 156aa75
commit 2475da3
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 5 deletions.
diff --git a/hushline/static/css/style.css b/hushline/static/css/style.css
@@ -93,6 +93,10 @@
     background-image: url("../img/app/icon-menu.png");
   }
 
+  .icon.chevron {
+    background-image: url("../img/app/icon-chevron.png");
+  }
+
   .container {
     border: var(--border);
     background-color: white;
@@ -645,6 +649,10 @@
   .icon.verifiedURL {
     background-image: url("../img/app/icon-verified-dm.png");
   }
+
+  .icon.chevron {
+    background-image: url("../img/app/icon-chevron-dm.png");
+  }
 }
 
 body {
@@ -2087,6 +2095,8 @@ p.bio + .extra-fields {
 .alias-list {
   display: flex;
   flex-direction: column;
+  gap: 1rem;
+  margin-top: 1rem;
 }
 
 .alias-entry {
@@ -2106,3 +2116,48 @@ p.bio + .extra-fields {
   z-index: q;
   content: "";
 }
+
+#aliases form + h3 {
+  margin-top: 2rem;
+}
+
+#aliases h3 {
+  margin-bottom: 0;
+}
+
+.alias-entry .icon,
+.icon.back {
+  width: 1.25rem;
+  height: 1.25rem;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.icon.back {
+  transform: rotate(180deg);
+  display: inline-block;
+  position: relative;
+  top: 0.175rem;
+}
+
+.back-button {
+  margin-bottom: 1.5rem;
+  margin-top: -0.75rem;
+}
+
+.alias-heading {
+  margin-bottom: 1rem;
+}
+
+.drill-in {
+  display: flex;
+  flex-direction: column;
+}
+
+.drill-in h3 {
+  margin-bottom: 0;
+}
+
+.drill-in .checkbox-group {
+  margin-bottom: 0;
+}
diff --git a/hushline/static/img/app/icon-chevron-dm.png b/hushline/static/img/app/icon-chevron-dm.png
diff --git a/hushline/static/img/app/icon-chevron.png b/hushline/static/img/app/icon-chevron.png
diff --git a/hushline/templates/settings/alias.html b/hushline/templates/settings/alias.html
@@ -3,8 +3,9 @@
 {% block title %}Alias: @{{ alias.username }}{% endblock %}
 
 {% block content %}
-  <p><a href="{{ url_for('.index') }}">&lt; Back to settings</a></p>
-  <h2>Alias: @{{ alias.username }}</h2>
+<div class="drill-in">
+  <a href="{{ url_for('.index') }}" class="back-button"><span class="icon chevron back"></span> Back to Settings</a>
+  <h2 class="alias-heading">{{ alias.display_name or alias.username }}</h2>
 
   {# TODO: much of this is copy/pasted from "settings/profile.html" and will need to be synced with updates there #}
   <h3>Update Display Name</h3>
@@ -174,6 +175,7 @@ <h4>Extra Fields</h4>
     </div>
     <button type="submit" name="update_bio">Update Bio</button>
   </form>
+</div>
 {% endblock %}
 
 {% block scripts %}

diff --git a/hushline/templates/settings/aliases.html b/hushline/templates/settings/aliases.html
@@ -22,12 +22,16 @@ <h3>Current Aliases</h3>
     <div class="alias-list">
       {% for username in aliases %}
         <div class="alias-entry">
-          <div><a href="{{ url_for('.alias', username_id=username.id) }}" class="stretched-link">{% if username.display_name %}{{ username.display_name }} {% endif %}@{{ username.username }}</a></div>
-          <div>&gt;</div>
+          <div>
+              <a href="{{ url_for('.alias', username_id=username.id) }}" class="stretched-link">
+                  {{ username.display_name or username.username }}
+              </a>
+          </div>          
+          <div class="icon chevron"></div>
         </div>
       {% endfor %}
     </div>
   {% else %}
-    <p>No alises configured.</p>
+    <p>🙊 No alises configured.</p>
   {% endif %}
 </div>