Improve mobile styling (#49)

* Make table more mobile friendly * Fix spacing consistency * Add responsive styles for label alignment
devict · Oct 23, 2017 · e079d4d · e079d4d
1 parent d682981
commit e079d4d
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 15 deletions.
diff --git a/public/css/profile.css b/public/css/profile.css
@@ -21,6 +21,14 @@ section {
   padding: 1em;
 }
 
+section p:last-child {
+  margin-bottom: 0;
+}
+
+.list-inline-item:not(:last-child) {
+  margin-right: 0;
+}
+
 /* Stick a comma after each project/org except the last */
 .list-inline-item:not(:last-child) a:after {
     content: ",";
@@ -38,8 +46,22 @@ section {
   display: none;
 }
 
+#issues_table_wrapper {
+  padding: 0;
+}
+
+#results .lead {
+  margin-top: 20px;
+}
+
 footer {
   min-height: 4em;
   color: white;
   background-color: #A3492D;
 }
+
+@media (min-width: 576px) {
+  #information label {
+    text-align: right;
+  }
+}
diff --git a/templates/profile.tmpl b/templates/profile.tmpl
@@ -27,27 +27,27 @@
   </p>
 
   <div class="container">
-    <form>
+    <form id="information">
       <div class="form-group row">
-        <label for="name" class="col-sm-5 text-right col-form-label">Name</label>
+        <label for="name" class="col-sm-5 col-form-label">Name</label>
         <div class="col-sm-5">
           <input type="name" class="form-control" readonly id="name" value="{{ .User.Name }}">
         </div>
       </div>
       <div class="form-group row">
-        <label for="username" class="col-sm-5 text-right col-form-label">Username</label>
+        <label for="username" class="col-sm-5 col-form-label">Username</label>
         <div class="col-sm-5">
           <input type="username" class="form-control" readonly id="username" value="{{ .User.NickName }}">
         </div>
       </div>
       <div class="form-group row">
-        <label for="email" class="col-sm-5 text-right col-form-label">Email</label>
+        <label for="email" class="col-sm-5 col-form-label">Email</label>
         <div class="col-sm-5">
           <input type="email" class="form-control" readonly id="email" value="{{ .User.Email }}">
         </div>
       </div>
       <div class="form-group row share">
-        <label class="col-sm-5 text-right">Share Info With Sponsors</label>
+        <label class="col-sm-5">Share Info With Sponsors</label>
         <div class="col-sm-5">
           <div class="form-check">
             <label class="form-check-label">
@@ -95,16 +95,18 @@
     </ul>
 
     <button id="issues_show" class="btn btn-primary">See Open Issues</button>
-    <table id="issues_table" class="table table-striped table-bordered" style="display: none;" cellspacing="0" width="100%">
-      <thead>
-        <tr>
-          <th>Title</th>
-          <th>Repository</th>
-          <th>Languages</th>
-        </tr>
-      </thead>
-      <tbody id="issues"></tbody>
-    </table>
+    <div class="table-responsive">
+      <table id="issues_table" class="table table-striped table-bordered" style="display: none;" cellspacing="0" width="100%">
+        <thead>
+          <tr>
+            <th>Title</th>
+            <th>Repository</th>
+            <th>Languages</th>
+          </tr>
+        </thead>
+        <tbody id="issues"></tbody>
+      </table>
+    </div>
   </div>
 </section>