mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-31 21:38:19 +03:00
Code Issues Projects Releases Packages 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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/index.scss
View file

@ -20,5 +20,9 @@
}
.short-urls-container {
padding: 30px 30px 30px 20px;
padding: 20px 0;
@media (min-width: $mdMin) {
padding: 30px 30px 30px 20px;
}
}

2
src/short-urls/ShortUrlVisits.js
View file

@ -135,7 +135,7 @@ export class ShortUrlsVisits extends React.Component {
{!loading && renderCreated()}
</div>}
<div>
Original URL:
Long URL:
&nbsp;
{loading && <small>Loading...</small>}
{!loading && <a target="_blank" href={shortUrl.longUrl}>{shortUrl.longUrl}</a>}

16
src/short-urls/ShortUrlsList.js
View file

@ -53,37 +53,37 @@ export class ShortUrlsList extends React.Component {
return (
<table className="table table-striped table-hover">
<thead>
<thead className="short-urls-list__header">
<tr>
<th
className="short-urls-list__header short-urls-list__header--with-action"
className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
onClick={() => orderBy('dateCreated')}
>
{renderOrderIcon('dateCreated')}
Created at
</th>
<th
className="short-urls-list__header short-urls-list__header--with-action"
className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
onClick={() => orderBy('shortCode')}
>
{renderOrderIcon('shortCode')}
Short URL
</th>
<th
className="short-urls-list__header short-urls-list__header--with-action"
className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
onClick={() => orderBy('originalUrl')}
>
{renderOrderIcon('originalUrl')}
Original URL
Long URL
</th>
<th className="short-urls-list__header">Tags</th>
<th className="short-urls-list__header-cell">Tags</th>
<th
className="short-urls-list__header short-urls-list__header--with-action"
className="short-urls-list__header-cell short-urls-list__header-cell--with-action"
onClick={() => orderBy('visits')}
>
<span className="nowrap">{renderOrderIcon('visits')} Visits</span>
</th>
<th className="short-urls-list__header">&nbsp;</th>
<th className="short-urls-list__header-cell">&nbsp;</th>
</tr>
</thead>
<tbody>

8
src/short-urls/ShortUrlsList.scss
View file

@ -1,3 +1,11 @@
@import "../utils/base";
.short-urls-list__header {
@media (max-width: $smMax) {
display: none;
}
}
.short-urls-list__header--with-action {
cursor: pointer;
}

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;

3
src/utils/base.scss
View file

@ -2,7 +2,7 @@
// Breakpoints
$xsMax: 575px;
$smMin: 576px;
$smMax: 577px;
$smMax: 767px;
$mdMin: 768px;
$mdMax: 991px;
$lgMin: 992px;
@ -12,6 +12,7 @@ $xlgMin: 1200px;
// Colors
$mainColor: #4696e5;
$lightHoverColor: #eee;
$lightGrey: #ddd;
$dangerColor: #dc3545;
// Misc