Improve presentation at mobile

- Add custom hint--medium--xs style, to make the tooltips wrap neatly
- Add meta viewport tag
This commit is contained in:
Matthew Gamble 2017-02-16 08:57:17 +11:00
parent ba8b393b76
commit 531f5c57d2
No known key found for this signature in database
GPG Key ID: B5D06189C3995B3B
2 changed files with 9 additions and 1 deletions

View File

@ -6,10 +6,18 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/hint.css/2.4.1/hint.min.css" integrity="sha256-7KczUWqIa/6KaIKtNfG18eilVQR4vJ4S9SSiDAplUwc=" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/hint.css/2.4.1/hint.min.css" integrity="sha256-7KczUWqIa/6KaIKtNfG18eilVQR4vJ4S9SSiDAplUwc=" crossorigin="anonymous">
<meta name="referrer" content="no-referrer"> <meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css"> <style type="text/css">
body { body {
padding-top: 50px; padding-top: 50px;
} }
@media screen and (max-width: 767px) {
.hint--medium--xs:after {
white-space: normal;
line-height: 1.4em;
word-wrap: break-word;
}
}
</style> </style>
</head> </head>
<body> <body>

View File

@ -13,7 +13,7 @@
{% for client, value in clients %} {% for client, value in clients %}
{% set id = [headline_id, client.nick|striptags]|join('.') %} {% set id = [headline_id, client.nick|striptags]|join('.') %}
<li id="{{ id }}" onclick="window.location = '#{{ id }}'" class="list-group-item{{ ' list-group-item-success' if client.connected else loop.cycle('" style="background-color: #eee;', '') }}"> <li id="{{ id }}" onclick="window.location = '#{{ id }}'" class="list-group-item{{ ' list-group-item-success' if client.connected else loop.cycle('" style="background-color: #eee;', '') }}">
<span class="hint--right" data-hint="{{ client.nick_history|join(', ') }}">{{ client.nick }}{{ " (" + client.identifier + ")" if debug }}</span> <span class="hint--right hint--medium--xs" data-hint="{{ client.nick_history|join(', ') }}">{{ client.nick }}{{ " (" + client.identifier + ")" if debug }}</span>
<span class="badge"><div{% if not client.connected and headline == 'Onlinetime' %} class="hint--left" data-hint="{{ client.last_seen|frmttime }}"{% endif %}>{{ value }}</div></span> <span class="badge"><div{% if not client.connected and headline == 'Onlinetime' %} class="hint--left" data-hint="{{ client.last_seen|frmttime }}"{% endif %}>{{ value }}</div></span>
</li> </li>
{% endfor %} {% endfor %}