Fixed responsive properties

This commit is contained in:
Alejandro Celaya 2018-08-04 17:52:56 +02:00
parent ee6193ace8
commit 3c0f1716aa
4 changed files with 10 additions and 14 deletions

View file

@ -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

View file

@ -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>

View file

@ -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>

View file

@ -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;