Improve responsive layout of missions with long mission or world names

This commit is contained in:
Björn Dahlgren 2021-10-29 19:24:33 +02:00
parent 7b6d0c6425
commit 280283c6d5
5 changed files with 10 additions and 8 deletions

View File

@ -2,7 +2,7 @@
<thead> <thead>
<tr> <tr>
<th>Mission</th> <th>Mission</th>
<th>World</th> <th class="hidden-xs hidden-sm">World</th>
<th>Size</th> <th>Size</th>
<th>Updated</th> <th>Updated</th>
<th></th> <th></th>

View File

@ -1,7 +1,8 @@
<td style="width: 100%;"> <td style="width: 100%; word-break: break-all;">
<a href='/api/missions/<%-encodeURI(name)%>'><%-missionName%></a> <a href='/api/missions/<%-encodeURI(name)%>'><%-missionName%></a>
<span class="visible-xs visible-sm"><%-worldName%></span>
</td> </td>
<td><%-worldName%></td> <td class="hidden-xs hidden-sm"><%-worldName%></td>
<td class="text-nowrap"><%-sizeFormatted%></td> <td class="text-nowrap"><%-sizeFormatted%></td>
<td class="text-nowrap"><%-dateModified.substring(0, 10)%></td> <td class="text-nowrap"><%-dateModified.substring(0, 10)%></td>
<td> <td>

View File

@ -4,7 +4,7 @@
<input type="number" class="form-control workshop" name="workshop" id="workshop"> <input type="number" class="form-control workshop" name="workshop" id="workshop">
<span class="help-block"> <span class="help-block">
ID can be found in the URL of Workshop i.e. ID can be found in the URL of Workshop i.e.
<i>https://steamcommunity.com/workshop/filedetails/?id=$id</i> <i style="word-break: break-all;">https://steamcommunity.com/workshop/filedetails/?id=$id</i>
</span> </span>
</div> </div>
<button type="submit" class="btn btn-primary ladda-button" data-style="expand-left"> <button type="submit" class="btn btn-primary ladda-button" data-style="expand-left">

View File

@ -3,7 +3,7 @@
<thead> <thead>
<tr> <tr>
<th>Mission</th> <th>Mission</th>
<th>World</th> <th class="hidden-xs hidden-sm">World</th>
<th>&nbsp;</th> <th>&nbsp;</th>
</tr> </tr>
</thead> </thead>

View File

@ -1,7 +1,8 @@
<td> <td style="width: 100%; word-break: break-all;">
<%-missionName%> <span><%-missionName%></span>
<span class="visible-xs visible-sm"><%-worldName%></span>
</td> </td>
<td> <td class="hidden-xs hidden-sm">
<%-worldName%> <%-worldName%>
</td> </td>
<td> <td>