From e6e2f57f5cf8f745bc0d2fa08f671d839fcc9440 Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Wed, 28 Nov 2018 15:46:54 -0800
Subject: [PATCH 1/3] word breaks on item details & selectable text

---
 src/pages/detail/detail-simpledeal-main.html  | 36 ++++++++++++++-----
 .../detail/detail-simpledeal-replies.html     | 26 +++++++++++++-
 .../hashtag/hashtag-simpledeal-item.html      | 26 +++++++++++++-
 3 files changed, 78 insertions(+), 10 deletions(-)

diff --git a/src/pages/detail/detail-simpledeal-main.html b/src/pages/detail/detail-simpledeal-main.html
index c14c9d26..dc6cfb38 100644
--- a/src/pages/detail/detail-simpledeal-main.html
+++ b/src/pages/detail/detail-simpledeal-main.html
@@ -203,14 +203,34 @@
                 visibility: visible;
             }
 
-            .force-select {  
+            .force-select {
                 -webkit-user-select: text;
                 -moz-user-select: text;
                 -ms-user-select: text;
-                user-select: text;  
+                user-select: text;
                 cursor: auto !important;
             }
 
+            .dont-break-out {
+
+                /* These are technically the same, but use both */
+                overflow-wrap: break-word;
+                word-wrap: break-word;
+
+                -ms-word-break: break-all;
+                /* This is the dangerous one in WebKit, as it breaks things wherever */
+                word-break: break-all;
+                /* Instead use this non-standard one: */
+                word-break: break-word;
+
+                /* Adds a hyphen where the word breaks, if supported (No Blink) */
+                -ms-hyphens: auto;
+                -moz-hyphens: auto;
+                -webkit-hyphens: auto;
+                hyphens: auto;
+
+            }
+
             @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
             only screen and (min--moz-device-pixel-ratio: 1.5),
             only screen and (min-resolution: 240dpi) {
@@ -228,7 +248,7 @@
                 <div class="close" on-tap="_close" tabindex="1"></div>
             </div>
             <div class="spacer"></div>
-            <div class="description">
+            <div class="description dont-break-out">
                 [[item.description]]
             </div>
             <div class="date">
@@ -343,7 +363,7 @@
                 return (item && item.seekerAddress && this.address && item.seekerAddress == this.address);
             }
 
-            makeRequest (method, url, done) {
+            makeRequest(method, url, done) {
                 var xhr = new XMLHttpRequest();
                 xhr.open(method, url);
                 xhr.onload = function () {
@@ -356,17 +376,17 @@
             }
 
             _copyUrl() {
-                if(this.$.shareplace.innerHTML == 'shareable link') {
+                if (this.$.shareplace.innerHTML == 'shareable link') {
                     var urltoShort = encodeURIComponent(window.location.href);
                     var shareUrl = this.makeRequest("GET", "https://i.swarm.city/s/" + urltoShort, (err, res) => {
                         this.$.shareplace.innerHTML = res;
                         this.$.shareplace.classList.add('force-select');
-                    }); 
-                }         
+                    });
+                }
             }
 
             _resetShare() {
-                this.$.shareplace.innerHTML ='shareable link';
+                this.$.shareplace.innerHTML = 'shareable link';
                 this.$.shareplace.classList.remove('force-select');
             }
         }
diff --git a/src/pages/detail/detail-simpledeal-replies.html b/src/pages/detail/detail-simpledeal-replies.html
index 999690cf..812651d1 100644
--- a/src/pages/detail/detail-simpledeal-replies.html
+++ b/src/pages/detail/detail-simpledeal-replies.html
@@ -84,6 +84,10 @@
                 @apply --body-default;
                 color: var(--sc-grey4);
                 box-sizing: border-box;
+                -webkit-user-select: text;
+                -moz-user-select: text;
+                -ms-user-select: text;
+                user-select: text;
             }
 
             .bottom {
@@ -143,6 +147,26 @@
                 @apply --next-blue-small;
             }
 
+            .dont-break-out {
+
+                /* These are technically the same, but use both */
+                overflow-wrap: break-word;
+                word-wrap: break-word;
+
+                -ms-word-break: break-all;
+                /* This is the dangerous one in WebKit, as it breaks things wherever */
+                word-break: break-all;
+                /* Instead use this non-standard one: */
+                word-break: break-word;
+
+                /* Adds a hyphen where the word breaks, if supported (No Blink) */
+                -ms-hyphens: auto;
+                -moz-hyphens: auto;
+                -webkit-hyphens: auto;
+                hyphens: auto;
+
+            }
+
             @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
             only screen and (min--moz-device-pixel-ratio: 1.5),
             only screen and (min-resolution: 240dpi) {
@@ -163,7 +187,7 @@
                 <div class="box">
                     <div class$="{{_checkPending(reply)}}">
                         <div class="top">
-                            <div class="description">
+                            <div class="description dont-break-out">
                                 [[reply.message]]
                             </div>
                             <div class="price">
diff --git a/src/pages/hashtag/hashtag-simpledeal-item.html b/src/pages/hashtag/hashtag-simpledeal-item.html
index 098f55b0..181f43df 100644
--- a/src/pages/hashtag/hashtag-simpledeal-item.html
+++ b/src/pages/hashtag/hashtag-simpledeal-item.html
@@ -138,6 +138,10 @@
                 @apply --body-default;
                 color: var(--sc-grey4);
                 padding-right: 10px;
+                -webkit-user-select: text;
+                -moz-user-select: text;
+                -ms-user-select: text;
+                user-select: text;
             }
 
             img {
@@ -183,6 +187,26 @@
                 width: 24px;
             }
 
+            .dont-break-out {
+
+                /* These are technically the same, but use both */
+                overflow-wrap: break-word;
+                word-wrap: break-word;
+
+                -ms-word-break: break-all;
+                /* This is the dangerous one in WebKit, as it breaks things wherever */
+                word-break: break-all;
+                /* Instead use this non-standard one: */
+                word-break: break-word;
+
+                /* Adds a hyphen where the word breaks, if supported (No Blink) */
+                -ms-hyphens: auto;
+                -moz-hyphens: auto;
+                -webkit-hyphens: auto;
+                hyphens: auto;
+
+            }
+
             @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
             only screen and (min--moz-device-pixel-ratio: 1.5),
             only screen and (min-resolution: 240dpi) {
@@ -197,7 +221,7 @@
         <div class$="{{_checkPending(item)}}" wide-layout$="{{wide}}" on-tap="_toItem">
             <div class="top">
                 <div class="datedescript">
-                    <div class="description">[[item.description]]</div>
+                    <div class="description dont-break-out">[[item.description]]</div>
                     <div class="date">
                         [[_formatDate(item)]]
                     </div>

From 971453e7f828cdbde47896866ce07285f2d16ed5 Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Wed, 28 Nov 2018 16:15:04 -0800
Subject: [PATCH 2/3] No animations, but stable dom-if

---
 src/displays/display-simpledeal-title.html | 74 ++++++++++++----------
 1 file changed, 39 insertions(+), 35 deletions(-)

diff --git a/src/displays/display-simpledeal-title.html b/src/displays/display-simpledeal-title.html
index 30eb2ef6..77379bb4 100644
--- a/src/displays/display-simpledeal-title.html
+++ b/src/displays/display-simpledeal-title.html
@@ -88,21 +88,24 @@
         color: var(--sc-white);
       }
       display-simpledeal-about {
-        margin-top: -100vh;
         position: fixed;
         z-index: 32;
       }
+
     </style>
     <iron-media-query
       query="(min-width: 600px)"
       query-matches="{{wide}}"
     ></iron-media-query>
-    <display-simpledeal-about
-      id="about"
-      language="[[language]]"
-      hashtag="[[hashtag]]"
-      on-close="_close"
-    ></display-simpledeal-about>
+
+    <template is="dom-if" if="{{showDetails}}">
+      <display-simpledeal-about
+        id="about"
+        language="[[language]]"
+        hashtag="[[hashtag]]"
+        on-close="_close"
+      ></display-simpledeal-about>
+    </template>
     <div class="container" wide-layout$="{{wide}}">
       <dom-if if="{{!hashtag.hashtagName}}">
         <template>
@@ -166,20 +169,20 @@
             .querySelector("#infolink")
             .classList.remove("untoggled");
 
-          this.shadowRoot
-            .querySelector("#about")
-            .animate(
-              [
-                { transform: "translateY(0)" },
-                { transform: "translateY(100vh)" }
-              ],
-              {
-                fill: "both",
-                duration: 250,
-                direction: "normal",
-                easing: "cubic-bezier(0.42, 0, 0.177, 0.751)"
-              }
-            );
+          // this.shadowRoot
+          //   .querySelector("#about")
+          //   .animate(
+          //     [
+          //       { transform: "translateY(0)" },
+          //       { transform: "translateY(100vh)" }
+          //     ],
+          //     {
+          //       fill: "both",
+          //       duration: 250,
+          //       direction: "normal",
+          //       easing: "cubic-bezier(0.42, 0, 0.177, 0.751)"
+          //     }
+          //   );
         } else {
           this.shadowRoot.querySelector("#infolink").classList.add("untoggled");
           this.shadowRoot.querySelector("#togglebox").classList.remove("blue");
@@ -187,20 +190,21 @@
             .querySelector("#infolink")
             .classList.remove("toggled");
 
-          this.shadowRoot
-            .querySelector("#about")
-            .animate(
-              [
-                { transform: "translateY(100vh)" },
-                { transform: "translateY(0)" }
-              ],
-              {
-                fill: "both",
-                duration: 250,
-                direction: "normal",
-                easing: "cubic-bezier(0.42, 0, 0.177, 0.751)"
-              }
-            );
+
+          // this.shadowRoot
+          //   .querySelector("#about")
+          //   .animate(
+          //     [
+          //       { transform: "translateY(100vh)" },
+          //       { transform: "translateY(0)" }
+          //     ],
+          //     {
+          //       fill: "both",
+          //       duration: 250,
+          //       direction: "normal",
+          //       easing: "cubic-bezier(0.42, 0, 0.177, 0.751)"
+          //     }
+          //   );
         }
       }
     }

From 6397075765baa9f76589920e888a43c5131811ad Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Wed, 28 Nov 2018 16:19:51 -0800
Subject: [PATCH 3/3] Middle width

---
 src/pages/hashtag/hashtag-simpledeal.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/hashtag/hashtag-simpledeal.html b/src/pages/hashtag/hashtag-simpledeal.html
index 6c8eb697..ede4e555 100644
--- a/src/pages/hashtag/hashtag-simpledeal.html
+++ b/src/pages/hashtag/hashtag-simpledeal.html
@@ -51,6 +51,9 @@
                 margin-top: 159px;
             }
 
+            .container[wide-layout] .middle {
+                max-width: 68vw;
+            }
             .filterbox {
                 @apply --small-bold;
                 @apply --layout-vertical;