Skip to content
This repository has been archived by the owner on May 2, 2022. It is now read-only.

Commit

Permalink
Merge pull request #871 from swarmcity/Max-width
Browse files Browse the repository at this point in the history 
word breaks on item details & selectable text
  • Loading branch information
@xardass
xardass authored Nov 29, 2018
2 parents 7251eb7 + 6397075 commit 9aea60e
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 45 deletions.
74 changes: 39 additions & 35 deletions src/displays/display-simpledeal-title.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -166,41 +169,42 @@
.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");
this.shadowRoot
.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)"
// }
// );
}
}
}
Expand Down
36 changes: 28 additions & 8 deletions src/pages/detail/detail-simpledeal-main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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">
Expand Down Expand Up @@ -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 () {
Expand All @@ -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');
}
}
Expand Down
26 changes: 25 additions & 1 deletion src/pages/detail/detail-simpledeal-replies.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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) {
Expand All @@ -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">
Expand Down
26 changes: 25 additions & 1 deletion src/pages/hashtag/hashtag-simpledeal-item.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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) {
Expand All @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions src/pages/hashtag/hashtag-simpledeal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,9 @@
margin-top: 159px;
}

.container[wide-layout] .middle {
max-width: 68vw;
}
.filterbox {
@apply --small-bold;
@apply --layout-vertical;
Expand Down

0 comments on commit 9aea60e

Please sign in to comment.