Extend publiclab#5372 BSTRP Check Box fix to all check boxes (publicl…

…ab#5421) * Remove unused css declaration * Improved readability * Try to remove error throw by extra space somewhere * undo extra space in textarea * Fix login button * cleanup inline styling * clean up login modal * Forgot a div * Fix activity checkbox * Fix checkboxes in subscribe
SrinandanPai · Apr 19, 2019 · a01c75a · a01c75a
1 parent f0ec4ba
commit a01c75a
Show file tree

Hide file tree

Showing 14 changed files with 275 additions and 113 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -19,6 +19,7 @@
  *= require_self
  *= require cross_browser
  *= require style
+ *= require login_modal
  *= require feature
  *= require btsp_checkbox_override
  *= require editor

diff --git a/app/assets/stylesheets/btsp_checkbox_override.css.scss b/app/assets/stylesheets/btsp_checkbox_override.css.scss
@@ -17,7 +17,7 @@ this is v.4 usage as well.
 - !important declarations ensure a Bootstrap update wont override these immediately
 */
 
-div.form-check {
+div.form-check, li.form-check {
   position: relative !important;
   display: block !important;
   padding-left: 1.75rem !important; /* btsp's default */
@@ -26,7 +26,7 @@ div.form-check {
     margin-bottom: 0 !important; /* Override btsp's default `<label>` bottom margin */
   }
 
-  input[type=checkbox].form-check-input {
+  input[type=checkbox] {
     margin: 0 !important; /* zero out btsp's margin declaration */
     margin-top: 0 !important; 
     position: absolute !important;
@@ -39,3 +39,24 @@ div.form-check {
   }
 }
 
+div.form-check-inline, li.form-check-inline {
+  position: relative !important;
+  display: inline-block;
+  padding-left: 1.75rem !important; /* btsp's default */ 
+
+  label.form-check-label {
+    margin-bottom: 0 !important; /* Override btsp's default `<label>` bottom margin */
+  }
+
+  input[type=checkbox] {
+    margin: 0 !important; /* zero out btsp's margin declaration */
+    margin-top: 0 !important; 
+    position: absolute !important;
+    margin-left: -1.75rem !important; /* btsp's default */
+    top: 50% !important;
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%) !important;
+  }
+}
diff --git a/app/assets/stylesheets/dashboard.css b/app/assets/stylesheets/dashboard.css
@@ -386,3 +386,15 @@
     margin-top:10px;
   }
 }
+
+#refreshA {
+  margin-right: 2px;
+}
+
+.topics-span {
+  font-size: 18px;
+}
+
+#subscribe {
+  margin-top: 10px;
+}
diff --git a/app/assets/stylesheets/editor.css b/app/assets/stylesheets/editor.css
@@ -105,8 +105,4 @@
 #side-progress {
   margin:3px 10px 10px;
   width:30%;
-}
-
-.checkbox-text-align { 
-  float:left;
 }
diff --git a/app/assets/stylesheets/login_modal.css.scss b/app/assets/stylesheets/login_modal.css.scss
@@ -0,0 +1,15 @@
+#socialIcons {
+  display:flex; 
+  justify-content: center;
+}
+
+.login-form {
+  padding: 0 30px; 
+}
+
+#visibility {
+  color:#888;
+  pointer-events: auto;
+  line-height: 2.2em;
+  text-decoration: none;
+}
diff --git a/app/assets/stylesheets/style.css b/app/assets/stylesheets/style.css
@@ -89,6 +89,7 @@ a .fa-white,
 
 .alert h2 {
   font-size:1.2em;
+  font-weight: 800;
 }
 
 .visible-print {
@@ -484,3 +485,7 @@ textarea, input {
     font-weight: normal;
     text-decoration: inherit;
 }
+
+.form-grey {
+  color:#888;
+}
diff --git a/app/views/comments/_edit.html.erb b/app/views/comments/_edit.html.erb
@@ -139,7 +139,7 @@
         Cancel
       </a>
 
-    <span style="color:#888;"> &nbsp;
+    <span class="form-grey"> &nbsp;
       <br class="visible-xs" /><%= raw t('comments._edit.logged_in', :username => current_user.username) %> |
       <a target="_blank" href="/wiki/authoring-help#Formatting"><%= t('comments._edit.formatting') %></a> |
       <a onClick="$('#who-is-notified').toggle()"><%= t('comments._edit.notifications') %></a>

diff --git a/app/views/dashboard/_activity.html.erb b/app/views/dashboard/_activity.html.erb
@@ -1,30 +1,65 @@
 <h3 id="activity-header"><i><%= t('dashboard._activity.activity') %></i></h3>
 
 <div class="activity-menu">
-  <a style="margin-right:2px;" href="/dashboard" class="btn btn-sm btn-default pull-right" type="button"><i class="fa fa-refresh"></i></a>
+  <a id="refreshA" href="/dashboard" class="btn btn-sm btn-default pull-right" type="button">
+    <i class="fa fa-refresh"></i>
+  </a>
 </div>
 
 <div class="meta activity-dropdown">
   <div class="btn-group">
 
-    <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <button 
+      class="btn btn-default btn-sm dropdown-toggle" 
+      type="button" 
+      data-toggle="dropdown" 
+      aria-haspopup="true" 
+      aria-expanded="false"
+    >
       <span class="node-type-filter"><%= t('dashboard._activity.all_updates') %></span>
       <span class="caret"></span>
     </button>
 
     <ul class="dropdown-menu">
-
-      <li><a href="#"><label><input data-type="all"      class="node-type-all"      type="checkbox" checked="checked" /> <%= t('dashboard._activity.dropdown.all') %>           </label></a></li>
+      <li class="form-check"><a href="#">
+        <label class="form-check-label">
+          <input data-type="all" class="node-type-all" type="checkbox" checked="checked" /> 
+          <%= t('dashboard._activity.dropdown.all') %>
+        </label></a>
+      </li>
 
       <li class="divider"></li>
 
-      <li><a href="#"><label><input data-type="note"     class="node-type node-type-note"     type="checkbox" checked="checked" /> <%= t('dashboard._activity.dropdown.research_notes') %></label></a></li>
-      <li><a href="#"><label><input data-type="question" class="node-type node-type-question" type="checkbox" checked="checked" /> <%= t('dashboard._activity.dropdown.question') %>     </label></a></li>
-      <li><a href="#"><label><input data-type="event"    class="node-type node-type-event"    type="checkbox" checked="checked" /> <%= t('dashboard._activity.dropdown.events') %>        </label></a></li>
-      <li><a href="#"><label><input data-type="comment"  class="node-type node-type-comment"  type="checkbox" checked="checked" /> <%= t('dashboard._activity.dropdown.comments') %>      </label></a></li>
+      <li class="form-check"><a href="#">
+        <label class="form-check-label">
+          <input data-type="note" class="node-type node-type-note" type="checkbox" checked="checked" /> 
+          <%= t('dashboard._activity.dropdown.research_notes') %>
+        </label></a>
+      </li>
+      <li class="form-check"><a href="#">
+        <label class="form-check-label">
+          <input data-type="question" class="node-type node-type-question" type="checkbox" checked="checked" /> 
+          <%= t('dashboard._activity.dropdown.question') %>
+        </label></a>
+      </li>
+      <li class="form-check"><a href="#">
+        <label class="form-check-label">
+          <input data-type="event" class="node-type node-type-event" type="checkbox" checked="checked" /> 
+          <%= t('dashboard._activity.dropdown.events') %>
+        </label></a>
+      </li>
+      <li class="form-check"><a href="#">
+        <label class="form-check-label">
+          <input data-type="comment" class="node-type node-type-comment" type="checkbox" checked="checked" /> 
+          <%= t('dashboard._activity.dropdown.comments') %>
+        </label></a>
+      </li>
 
-      <li class="visible-sm visible-xs">
-          <a href="#"><label><input data-type="wiki"     class="node-type node-type-wiki"     type="checkbox" checked="checked" /> <%= t('dashboard._activity.dropdown.wiki') %>          </label></a>
+      <li class="visible-sm visible-xs"><a href="#">
+        <label>
+          <input data-type="wiki" class="node-type node-type-wiki" type="checkbox" checked="checked" /> 
+          <%= t('dashboard._activity.dropdown.wiki') %>
+        </label></a>
       </li>
 
       <!--
@@ -39,7 +74,7 @@
   </div> &nbsp;
   <span class="hidden-xs"><%= t('dashboard._activity.from_other') %> <a href=""><%= t('dashboard._activity.community_scientists') %></a></span> <%= t('dashboard._activity.past_week') %>
   <% if current_user %>
-    <span class="hidden-xs">|<a href="/profile/<%= current_user.username %>"><%= t('dashboard._activity.your_work') %></a></span>
+    <span class="hidden-xs">| <a href="/profile/<%= current_user.username %>"><%= t('dashboard._activity.your_work') %></a></span>
   <% end %>
   <!-- (2 responses) -->
 </div>
@@ -48,14 +83,14 @@
 <%= feature('dashboard-activity-feature') %>
 
 <div>
-  <small><a href="/tags" style="color: #888;">Trending topics:</a></small>
-  <span style="font-size: 18px;">
+  <small><a href="/tags" class="form-grey">Trending topics:</a></small>
+  <span class="topics-span">
    <% cache('trending-tags', expires_in: 24.hours, skip_digest: true) do %>
       <% Tag.trending.each do |i| %>
         <span class="label label-primary"><a href="/tag/<%= i.name %>"><%= i.name %></a></span>
       <% end %>
     <% end %>
-</span>
+  </span>
 </div>
 <%= render partial: 'tag/subscribe_button', locals:{tags: Tag.trending} %>
 <div class="activity">

diff --git a/app/views/dashboard/dashboard.html.erb b/app/views/dashboard/dashboard.html.erb
@@ -1,19 +1,25 @@
 <% if current_user && Time.now - current_user.created_at < 1.week %>
-    <div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button>
 
-        <h2 style="font-weight: 800">Hello, welcome to Public Lab!</h2>
+  <div class="alert alert-success">
+    <button type="button" class="close" data-dismiss="alert">×</button>
 
-        This is your dashboard, where recent updates from other community members show up. It'll keep you updated with recent progress, news and developments.
-        <br>
-        To get started at Public Lab, try:
-        <br><br>
-      <p>
-      <a class="btn btn-sm btn-default" href="/questions" target="_blank">Asking a question</a>
+    <h2>Hello, welcome to Public Lab!</h2>
 
-      <a class="btn btn-sm btn-default" href="https://publiclab.org/methods" target="_blank">Exploring projects</a>
-      </p>
-    </div>
+    This is your dashboard, where recent updates from other community members show up. It'll keep you updated with recent progress, news and developments.
+    <br>
+    To get started at Public Lab, try:
+    <br><br>
+    <p>
+      <a class="btn btn-sm btn-default" href="/questions" target="_blank">
+        Asking a question
+      </a>
 
+      <a class="btn btn-sm btn-default" href="https://publiclab.org/methods" target="_blank">
+        Exploring projects
+      </a>
+    </p>
+  </div>
+
 <% end %>
 
 <div class="dashboard container">