mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Fixed responsive properties
This commit is contained in:
parent
ee6193ace8
commit
3c0f1716aa
4 changed files with 10 additions and 14 deletions
|
@ -2,7 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
<meta name="theme-color" content="#4696e5">
|
<meta name="theme-color" content="#4696e5">
|
||||||
<!--
|
<!--
|
||||||
manifest.json provides metadata used when your web app is added to the
|
manifest.json provides metadata used when your web app is added to the
|
||||||
|
|
|
@ -8,19 +8,12 @@ import './MainHeader.scss';
|
||||||
import shlinkLogo from './shlink-logo-white.png';
|
import shlinkLogo from './shlink-logo-white.png';
|
||||||
|
|
||||||
export default class MainHeader extends React.Component {
|
export default class MainHeader extends React.Component {
|
||||||
constructor(props) {
|
state = { isOpen: false };
|
||||||
super(props);
|
toggle = () => {
|
||||||
|
|
||||||
this.state = {
|
|
||||||
isOpen: false,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
toggle() {
|
|
||||||
this.setState({
|
this.setState({
|
||||||
isOpen: ! this.state.isOpen
|
isOpen: !this.state.isOpen
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
|
@ -28,7 +21,7 @@ export default class MainHeader extends React.Component {
|
||||||
<NavbarBrand tag={Link} to="/">
|
<NavbarBrand tag={Link} to="/">
|
||||||
<img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo"/> Shlink
|
<img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo"/> Shlink
|
||||||
</NavbarBrand>
|
</NavbarBrand>
|
||||||
<NavbarToggler onClick={() => this.toggle()}/>
|
<NavbarToggler onClick={this.toggle}/>
|
||||||
<Collapse navbar isOpen={this.state.isOpen}>
|
<Collapse navbar isOpen={this.state.isOpen}>
|
||||||
<Nav navbar className="ml-auto">
|
<Nav navbar className="ml-auto">
|
||||||
<NavItem>
|
<NavItem>
|
||||||
|
|
|
@ -35,7 +35,7 @@ export class ShortUrlsRow extends React.Component {
|
||||||
<td className="short-urls-row__cell">
|
<td className="short-urls-row__cell">
|
||||||
<a href={completeShortUrl} target="_blank">{completeShortUrl}</a>
|
<a href={completeShortUrl} target="_blank">{completeShortUrl}</a>
|
||||||
</td>
|
</td>
|
||||||
<td className="short-urls-row__cell">
|
<td className="short-urls-row__cell short-urls-row__cell--break">
|
||||||
<a href={shortUrl.originalUrl} target="_blank">{shortUrl.originalUrl}</a>
|
<a href={shortUrl.originalUrl} target="_blank">{shortUrl.originalUrl}</a>
|
||||||
</td>
|
</td>
|
||||||
<td className="short-urls-row__cell">{this.renderTags(shortUrl.tags)}</td>
|
<td className="short-urls-row__cell">{this.renderTags(shortUrl.tags)}</td>
|
||||||
|
|
|
@ -3,6 +3,9 @@
|
||||||
.short-urls-row__cell {
|
.short-urls-row__cell {
|
||||||
vertical-align: middle !important;
|
vertical-align: middle !important;
|
||||||
}
|
}
|
||||||
|
.short-urls-row__cell--break {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
.short-urls-row__cell--relative {
|
.short-urls-row__cell--relative {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
Loading…
Reference in a new issue