forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-17 21:13:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added more responsive improvements

Browse Source
This commit is contained in:
Alejandro Celaya
2018-08-05 08:49:07 +02:00
parent c1880125b3
commit b25cb6c170
7 changed files with 57 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/short-urls/helpers/ShortUrlsRow.js
View File

@@ -26,20 +26,21 @@ export class ShortUrlsRow extends React.Component {
return (
<tr
className="short-urls-row"
onMouseEnter={() => this.setState({displayMenu: true})}
onMouseLeave={() => this.setState({displayMenu: false})}
>
<td className="nowrap short-urls-row__cell">
<td className="nowrap short-urls-row__cell" data-th="Created at: ">
<Moment format="YYYY-MM-DD HH:mm">{shortUrl.dateCreated}</Moment>
</td>
<td className="short-urls-row__cell">
<td className="short-urls-row__cell" data-th="Short URL: ">
<a href={completeShortUrl} target="_blank">{completeShortUrl}</a>
</td>
<td className="short-urls-row__cell short-urls-row__cell--break">
<td className="short-urls-row__cell short-urls-row__cell--break" data-th="Long URL: ">
<a href={shortUrl.originalUrl} target="_blank">{shortUrl.originalUrl}</a>
</td>
<td className="short-urls-row__cell">{this.renderTags(shortUrl.tags)}</td>
<td className="short-urls-row__cell text-right">{shortUrl.visitsCount}</td>
<td className="short-urls-row__cell" data-th="Tags: ">{this.renderTags(shortUrl.tags)}</td>
<td className="short-urls-row__cell text-md-right" data-th="Visits: ">{shortUrl.visitsCount}</td>
<td className="short-urls-row__cell short-urls-row__cell--relative">
<small
className="badge badge-warning short-urls-row__copy-hint"

28
src/short-urls/helpers/ShortUrlsRow.scss
View File

@@ -1,7 +1,33 @@
@import "../../utils/base";
@import "../../utils/mixins/vertical-align";
.short-urls-row__cell {
.short-urls-row {
@media (max-width: $smMax) {
display: block;
margin-bottom: 10px;
border-bottom: 1px solid $lightGrey;
}
}
.short-urls-row__cell.short-urls-row__cell {
vertical-align: middle !important;
@media (max-width: $smMax) {
display: block;
width: 100%;
position: relative;
padding: .5rem;
font-size: .9rem;
&:before {
content: attr(data-th);
font-weight: bold;
}
&:last-child {
display: none;
}
}
}
.short-urls-row__cell--break {
word-break: break-all;