Fix #249 - use window.location hack to let people login from sandboxed iOS homescreen

2 files changed, 35 insertions, 6 deletions

diff --git a/app/assets/javascripts/extras.jsx b/app/assets/javascripts/extras.jsx
index 9fd769c0b..b9f8e6842 100644
--- a/app/assets/javascripts/extras.jsx
+++ b/app/assets/javascripts/extras.jsx
@@ -1,7 +1,7 @@
 import emojify from './components/emoji'
 
 $(() => {
-  $.each($('.entry .content, .entry .status__content, .display-name, .name, .account__header__content'), (_, content) => {
+  $.each($('.entry .content, .entry .status__content, .status__display-name, .display-name, .name, .account__header__content'), (_, content) => {
     const $content = $(content);
     $content.html(emojify($content.html()));
   });
@@ -17,4 +17,13 @@ $(() => {
   $('.media-spoiler').on('click', e => {
     $(e.target).hide();
   });
+
+  $('.webapp-btn').on('click', e => {
+    console.log(e);
+
+    if (e.button === 0) {
+      e.preventDefault();
+      window.location.href = $(e.target).attr('href');
+    }
+  });
 });
diff --git a/app/assets/stylesheets/stream_entries.scss b/app/assets/stylesheets/stream_entries.scss
index 5cd140aac..7624bbdc8 100644
--- a/app/assets/stylesheets/stream_entries.scss
+++ b/app/assets/stylesheets/stream_entries.scss
@@ -3,24 +3,26 @@
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
 
   .entry {
-    .status.light, .detailed-status.light {
+    background: lighten(#d9e1e8, 8%);
+
+    &, .detailed-status.light {
       border-bottom: 1px solid #d9e1e8;
     }
 
     &:last-child {
-      .status.light, .detailed-status.light {
+      &, .detailed-status.light {
         border-bottom: 0;
         border-radius: 0 0 4px 4px;
       }
     }
 
     &:first-child {
-      .status.light, .detailed-status.light {
+      &, .detailed-status.light {
         border-radius: 4px 4px 0 0;
       }
 
       &:last-child {
-        .status.light, .detailed-status.light {
+        &, .detailed-status.light {
           border-radius: 4px;
         }
       }
@@ -32,7 +34,6 @@
     position: relative;
     min-height: 48px;
     cursor: default;
-    background: lighten(#d9e1e8, 8%);
 
     .status__header {
       font-size: 15px;
@@ -280,6 +281,25 @@
       }
     }
   }
+
+  .pre-header {
+    padding: 14px 0px;
+    padding-left: (48px + 14px*2);
+    padding-bottom: 0;
+    margin-bottom: -4px;
+    color: #9baec8;
+    font-size: 14px;
+    position: relative;
+
+    .pre-header__icon {
+      position: absolute;
+      left: (48px + 14px*2 - 30px);
+    }
+
+    .status__display-name.muted strong {
+      color: #9baec8;
+    }
+  }
 }
 
 .embed {