UX: Improve user directory on mobile

2025-02-25 18:55:32 -06:00 · 2015-05-07 16:41:25 -04:00
parent fa69d4cec5
commit e1f9f6d02a
6 changed files with 112 additions and 13 deletions
--- a/app/assets/stylesheets/mobile/directory.scss
+++ b/app/assets/stylesheets/mobile/directory.scss
@@ -0,0 +1,49 @@
+.directory {
+  .period-chooser button {
+    margin: 0;
+  }
+  .period-chooser {
+    li {
+      text-align: left;
+    }
+  }
+}
+
+.user-controls {
+  padding: 1em;
+}
+
+.total-rows {
+  padding: 0.25em 0.5em;
+}
+
+.user {
+  border-top: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
+  padding: 1em;
+
+
+  &.me {
+    background-color: dark-light-diff($highlight, $secondary, 70%, -80%);
+
+    .username a, .name, .title, .number, .time-read, .user-stat .label {
+      color: scale-color($highlight, $lightness: -50%);
+    }
+  }
+  .user-stat {
+    margin-left: 55px;
+    font-size: 13px;
+
+    .value {
+      font-weight: bold;
+    }
+    .label {
+      margin-left: 0.2em;
+      color: dark-light-diff($primary, $secondary, 50%, -50%);
+    }
+
+    i.fa-heart {
+      color: $love;
+    }
+  }
+  margin-bottom: 1em;
+}